-
- nyckidd
 -
Total Posts: 15
Joined: 2008-09-20
|
how do i increase the number of columns in our catgeory view when in grid mode...right now we hve 2 but i want them to have 5 products in each row so that means i need to increase the number of columns from 2 to 5...any pointers ?
|
| |
-
- Posted: June 29 2009
-
| top
-
|
 |
 |
 |
|
|
-
- jkragh
 -
Total Posts: 84
Joined: 2009-06-18
|
Depending on what version of Magento you’re using there are two ways to do this. To determine which way you should use, open your theme’s template/catalog/product/list.phtml file and search for “columnCount”. If the search yields results, follow these steps:
1. Open your theme’s layout/catalog.xml file in a text editor.
2. Find the layout handle catalog_category_layered and look for an element whose opening tag looks thus:
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
3. Insert the following XML snippet immediately after that opening tag and then save the file:
<action method="setColumnCount"><columns>5</columns></action>
4. Open your theme’s css/boxes.css file. Search for “.listing-type-grid li.item”. Adjust the width property within this declaration so that the columns can fit within the .col-main area without breaking onto multiple lines.
5. As a finishing touch, change the size of the product images. To do this, open your theme’s template/catalog/product/list.phtml file; then, search for “Grid Mode”. Once you’ve found that point in the file, search for “resize”. Change the dimensions specified within the parenthesis so that the images can fit within your new column width. Also, remember change the width and height attributes to reflect your new image size. Save the file once you’ve made your changes.
If the search yields no results, replace steps 1-3 with these steps:
1. Open your theme’s template/catalog/product/list.phtml file.
2. Search for “Grid Mode”. Once you’ve found that point in the file, find a line that looks similar to
<?php if($i++%3==0): ?>
and change the number (3) to your desired column count (5):
<?php if($i++%5==0): ?>
Hope that helps.
|
| |
-
- Posted: June 29 2009
-
| top
| # 1
-
|
|
|
|
|
|
-
- nyckidd
-
Total Posts: 15
Joined: 2008-09-20
|
hey my version of mageno is Magento ver. 1.3.2.1
tried oth but was not abe to find those lines of code......is it under the frontend folder ?
and my list.phtml ( the grid section looks like this )
<?php // Grid Mode ?>
<div class="listing-type-grid catalog-listing">
<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if($i++%$_columnCount==0): ?>
<ol class="grid-row">
<?php endif; ?>
<li class="item">
<p class="product-image">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135, 135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
</a>
</p>
<h5><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><?php echo $this->htmlEscape($_product->getName()) ?></a></h5>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->isSaleable()): ?>
<button type="button" class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button>
<?php else: ?>
<div class="out-of-stock"><?php echo $this->__('Out of stock') ?></div>
<?php endif; ?>
<p class="add-to">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-cart"><?php echo $this->__('Add to Wishlist') ?></a>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?><br/>
<a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a>
<?php endif; ?>
</p>
</li>
<?php if($i%$_columnCount==0 || $i==$_collectionSize): ?>
</ol>
<?php endif; ?>
<?php endforeach ?>
<script type="text/javascript">decorateGeneric($$('.grid-row'), ['last', 'odd', 'even']);</script>
</div>
<?php endif; ?>
<?php echo $this->getToolbarHtml() ?>
<?php endif; ?>
|
| |
-
- Posted: June 29 2009
-
| top
| # 2
-
|
|
|
|
|
|
-
- jkragh
-
Total Posts: 84
Joined: 2009-06-18
|
Oops! I made a mistake in my previous post. The opening tag in step 2 should look like this:
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
I’ve now edited the post to correct the mistake.
I can tell from your list.phtml file that you should use the first approach.
Assuming you’re using the default interface and the default theme, the paths to the directories I mentioned are as follows:
app/design/frontend/default/default/template/catalog/product/list.phtml
app/design/frontend/default/default/layout/catalog.xml
skin/frontend/default/default/css/boxes.css
|
| |
-
- Posted: June 29 2009
-
| top
| # 3
-
|
|
|
|
|
|
-
- nyckidd
-
Total Posts: 15
Joined: 2008-09-20
|
i dont seem to have this “product” folder......this is a brand new install....
app/design/frontend/default/default/template/product/list.phtml
|
| |
-
- Posted: June 29 2009
-
| top
| # 4
-
|
|
|
|
|
|
-
- nyckidd
-
Total Posts: 15
Joined: 2008-09-20
|
and also in catalog.xml there are 2 instances of
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
do i add <action method="setColumnCount"><columns>5</columns></action> under both ?
|
| |
-
- Posted: June 29 2009
-
| top
| # 5
-
|
|
|
|
|
|
-
- jkragh
-
Total Posts: 84
Joined: 2009-06-18
|
Sorry, I must be getting tired; I left out the “catalog” part of the path. It should be: app/design/frontend/default/default/template/catalog/product/list.phtml. Again, sorry about that. (I’ve now edited the posts.) 
In catalog.xml you should add the snippet following the instance that comes after <catalog_category_layered>.
|
| |
-
- Posted: June 29 2009
-
| top
| # 6
-
|
|
|
|
|
|
-
- nyckidd
-
Total Posts: 15
Joined: 2008-09-20
|
jkragh.......duuuuuudddddeeee u r god !!!! thxs it worked like a charm....men people like jkragh need to be worshipped  ok let me get a hold of my freaking sef here...i still got a few other things i need help with but jkragh u da man!!!! hope u r a dude...if u r a chic i will just edit this post !!!
Thx !!!
|
| |
-
- Posted: June 29 2009
-
| top
| # 7
-
|
|
|
|
|
|
-
- jkragh
-
Total Posts: 84
Joined: 2009-06-18
|
You’re very kind. Glad I could help.
And, yeah, I’m a dude. 
|
| |
-
- Posted: June 29 2009
-
| top
| # 8
-
|
|
|
|
|
|
-
- jeff.d
-
Total Posts: 103
Joined: 2008-05-26
|
This helped me too....thanks
|
| |
-
- Posted: July 1 2009
-
| top
| # 9
-
|
|
|
|
|
|
-
- Steve Morgan
-
Total Posts: 3
Joined: 2009-06-22
|
Bear in mind when testing this that also included with the style is a background image
.listing-type-grid { background:url(../images/bkg_products-grid3.gif) 0 0 repeat; }
which creates the grey divider between products and would need to be updated, so when applying the above technique and viewing a category with only product is gives the impression that the fix hasn’t worked
|
| |
|
|
|
|
|
|
-
- knwhitten
-
Total Posts: 18
Joined: 2009-05-06
|
Hi, I hope somebody out there can help me with this. I followed the steps in this thread, but my list.phtml file looks different than described. I have 4 columns in my grid view and would like to go back to 3. Rather than a number in the columnCount, I have a $ symbol.
<?php if ($i++%$_columnCount==0): ?>
Right now it looks crowded, and the columns need more space between them. I attached a picture so you can see what it currently looks like. Here’s a snippet of the Grid code. And I’m using the modern theme.
<?php // Grid Mode ?>
<div class="listing-type-grid catalog-listing padder"> <!-- the class name will change to .listing-type-cell if viewing in list mode -->
<?php $_collectionSize = $_productCollection->count() ?>
<table cellspacing="0" class="generic-product-grid" id="product-list-table">
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if ($i++%$_columnCount==0): ?>
<tr>
<?php endif ?>
<td>
<p class="product-image">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170, 170); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
</a>
</p>
Any help would be appreciated. I’ve been searching for a solution for this for hours. Thank you.
|
| |
-
- Posted: November 24 2009
-
| top
| # 11
-
|
|
|
|
|
|
-
- knwhitten
-
Total Posts: 18
Joined: 2009-05-06
|
sorry for the double post.
|
| |
-
- Posted: November 24 2009
-
| top
| # 12
-
|
|
|
|
|
|
-
- jkragh
-
Total Posts: 84
Joined: 2009-06-18
|
knwhitten - 23 November 2009 08:03 PM I followed the steps in this thread
Well, not quite. You’ve followed the steps which apply to old versions of Magento. From the way your list.phtml file looks I can infer that you need to follow the topmost steps, i.e., 1. Open your theme’s layout/catalog.xml file in a text editor.
2. Find the layout handle catalog_category_layered and look for an element whose opening tag looks thus:
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
3. Insert the following XML snippet immediately after that opening tag and then save the file:
<action method="setColumnCount"><columns>5</columns></action>
...
|
| |
-
- Posted: November 24 2009
-
| top
| # 13
-
|
|
|
|
|
|
-
- knwhitten
-
Total Posts: 18
Joined: 2009-05-06
|
Thanks for your response. All these different versions get confusing. I did what you said and didn’t get any change. Here’s that part of the code from my catalog.xml file:
<catalog_category_layered>
<reference name="root">
<action method="setTemplate"><template>page/2columns-left.phtml</template></action>
</reference>
<reference name="left">
<block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml"/>
</reference>
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
<action method="setColumnCount"><columns>3</columns></action>
<block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
<!-- The following code shows how to set your own pager increments -->
<!--
<action method="setDefaultListPerPage"><limit>10</limit></action>
<action method="setDefaultGridPerPage"><limit>9</limit></action>
<action method="addPagerLimit"><mode>list</mode><limit>10</limit></action>
<action method="addPagerLimit"><mode>list</mode><limit>20</limit></action>
<action method="addPagerLimit"><mode>list</mode><limit>30</limit></action>
<action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
<action method="addPagerLimit"><mode>grid</mode><limit>9</limit></action>
<action method="addPagerLimit"><mode>grid</mode><limit>18</limit></action>
<action method="addPagerLimit"><mode>grid</mode><limit>27</limit></action>
<action method="addPagerLimit" translate="label"><mode>grid</mode><limit>all</limit><label>All</label></action>
-->
</block>
<action method="setColumnCount"><count>3</count></action>
<action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</block>
</reference>
</catalog_category_layered>
<catalog_category_layered_nochildren>
<remove name="right.reports.product.viewed" />
<reference name="left">
<!--<block type="reports/product_viewed" before="right.permanent.callout" name="left.reports.product.viewed" template="reports/product_viewed.phtml" />-->
</reference>
</catalog_category_layered_nochildren>
Do you see anything else wrong? Or is there another file that needs to be altered as well? Take a look at my site here:
Notably Krystal
|
| |
-
- Posted: November 25 2009
-
| top
| # 14
-
|
|
|
|
|
|
-
- jshayne
-
Total Posts: 1
Joined: 2010-04-07
|
One more note for users of the modern theme, in addition to the instructions listed above, you will also need to alter this line in the catalog.xml file:
<action method="setColumnCount"><count>3</count></action>
Changing the # in the count tags to the number of columns you would like.
|
| |
|
|
|
|
|
|
