Change grid view column for Product Listing

by lsd / Filed under: For Magento Store Owner, For Web Designer, Magento Journal

In v1.4 Magento, changing columns in Grid View for product listing page has become easy, however there is still confusion and it does not seemed to be working right out-of-the-box.

First let’s see what we have in Default theme. In catalog.xml, around line #97 and line #138 both in “Category default layout” and “Category layered navigation layout” we see:

                    empty6
                    one_column5
                    two_columns_left4
                    two_columns_right4
                    three_columns3

You would have thought if we change the number, e.g, from “3″ to “4″ for three columns layout you would get the 4 columns in grid view product listing for three columns layout right?

But it does not work in our test for different sites which included a fresh v1.4 installation using Default theme and Simple Data. On top of that, the two columns left/right and one columns are still showing 3 columns for grid view.

Let see what we have in Modern theme. It shows only this code in catalog.xml:

   4

If we use the same code for Default theme’s layout, we will get the 4 columns in grid view product listing page regardless which template is used.

Turned our that in order for the addColumnCountLayoutDepend” to work, an update handle is needed. Example, if you want to change a template from 3 columns to 4 columns grid view, you need to do this:

Simply place the above code in the catalog_category_default and catalog_category_layered .

Depending on your design, you may need to adjust the width for the listing area in your style sheet.

Note that both method still does not work for homepage even an update handle is added–it’s still showing 3 columns grid view regardless which template is used.

A bug report has been filed, let’s just hope it’s a bug and that it will be fixed in the next upgraded for that this is really a great feature because it offers flexible and reliable equal height columns layout in grid view without using table layout. Why do we said that? Because if you use CSS floated elements, unless a height or min-height is declared (which is always a bad idea for layout that you don’t know how much height is needed for a product); an alternative method maybe using “display:table-row” and “display:table-cell” but this does not work in IE 7/6. Javascript approach is another option but we rather not mess with it because it’s also not reliable.

Tags: Product Listing, v1.4

8 Comments to “ Change grid view column for Product Listing ”

  1. Michael James says:

    hi, im having loads of trouble trying to change this! ive updated the “getcolumncount” in catalog.xml and nothing happend! what file do i put the update handle (
    ) in?

  2. lsd says:

    Right after the tag. Example:

     
        
          
        
           ....

     
 three_columns3
 ....

    I have the 3 columns layout for the caetgory default page, and I want it shows 3 products per row.

  3. zeniph says:

    Thanks for this, your explanation was clear and worked well for me.

    OMG this application drives me crazy – so powerful but hard to know what’s a bug and whats just not been documented.

  4. Nikesh says:

    your are a life saver!!! …The solution work perfectly for me :)

  5. hotdiggity says:

    The following inserted into local.xml works for me:

    empty4
    one_column4

  6. hotdiggity says:

    Hmm,…

    Solution here then:

    http://stackoverflow.com/questions/2024939/magento-store-horizontal-items-in-grid/3593241#3593241

  7. chav1979 says:

    Thanks for the initial solution and it this works fine until the cache is turned on which appears to override the update tag. Does anyone have a solution to this yet?

    • lsd says:

      Thanks for the heads-up, I remember I read something about it in Magento forum however I didn’t see the same behavior in the sites I built.

      This article was written in May based on the v1.4.0.1 with thorough tests; I filed a bug report, could it be new bug in ver 1.4.1.0?

      Just checked, it overwrites the rule once the cache enabled, and it’s the “Layouts” cache. Didn’t test it thoroughly this time but think the impact for slowing down the site is of insignificant with “Layouts” cache disabled.

      If you don’t want to go this route, try use the one the Modern theme does instead, my test showed it works fine with cache enabled.