Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

DISPLAY PRODUCT ORDER IN GRID VIEW FOR HORIZONTAL SCROLL LAYOUT
 
marcobotti
Jr. Member
 
Total Posts:  1
Joined:  2011-10-31
 

Hy, i’m a little newbie about Magento, but i’m develping an online shop when i need to display the products in GRID VIEW sortin the prodicts by COLUMNS and NOT by ROW, fixing the numbers of rows instead of columns.
The number of columns can be barely infinite, using an horizontal scroll layout (applying the related css stuffs to the grid view)

See the attached layout jpgs to understand: one is the normal Magento way of display in grid view, teh second is that i need to do.

I use the 1 column layout (with no sidebars) for the ALL my categories and i need only grid view.

I answer those things;
• it’s possibile using only css?
• in what way i need to customize my .phtml and/or php files to work in that way?

thank you very much for yur support..i need to do this horizontal scroll layout because is the first customer’s request :(

Image Attachments
order_grid_view_products_NORMAL.jpgorder_grid_view_products_HORIZONTAL.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Lyonscg
Sr. Member
 
Avatar
Total Posts:  173
Joined:  2009-11-13
Chicago IL
 

This is an interesting concept, but unfortunately one that Magento, by default, isn’t setup to handle. The problem is the way the category is built to show products on the grid view.

Near the bottom of the xhtml stack, you have list items <li> that contain each product. This works well for the normal layout but makes what you want to do impossible without modifications.

The problem is that each list item floats left which stacks it against the previous list item and when there is no more space they break and start a new line. What you need to do is have each one float left AND clear left. But this is where it gets tricky.

If you try to clear left and float left on a stack of list items, they will form one column and will never spill over into the second or third columns.

What you need to do is change the way the products are spit out so that a separate div contains each column. Each div will float left (no clear) and inside of the divs, each li will float left and clear left.

You will need to modify app/design/frontend/PACKAGE/THEME/template/catalog/product/list.phtml

The general outline of the new logic should be, add a new div, after every 3 (or however many products to a column) close the div and repeat.

Then add CSS that has each div float left and each li in the div float and clear left.

Make sure you add <div style="clear:both;"></div> after the loop so that the parent container doesn’t collapse if it itself does not float.

 
Magento Community Magento Community
Magento Community
Magento Community
 
marcobotti
Jr. Member
 
Total Posts:  1
Joined:  2011-10-31
 

thank you very much for your answer! i try to use your suggestions and ideas and finger crossing!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top