Converting Commerce Tables to Responsive grid

Permalink
Hi, Just wondered if anyone has successfully converted the core commerce add on product lists from tables to a responsive grid?

I've looked at the display.php file and can see that this is whats wrapping the product but how would I go about turning a product list of 4 per row into a 4 item row that stacks on a phone?

I'm using the foundation frameworkhttp://217.199.187.59/saloukee.com/catalog...

Any guidance would be greatly received

Thanks in advance Matt

Matteld80
 
mesuva replied on at Permalink Reply
mesuva
Yes, it's really just a matter of overriding the product list block template (and perhaps the elements it pulls in). You could copy the default view.php for the block or have a look at the 'plain' version in the block's templates folder.

I don't use Foundation, but it really would just be a matter of stripping out the table code and putting in the appropriate divs with foundation's classes.

I've done this perhaps 7 or 8 times I reckon, here's a good example of product lists that responsively reflow:http://contemporaryco.com.au

eCommerce can take a bit of effort to style, but it definitely can be done as there's nothing to stop you overriding the product list and product blocks, as well as the cart item list. Another one we've heavily styled lately is this one:http://www.petdogtraining.com.au/shop-online/... (the popup cart is heavily styled as well). The product lists aren't in a grid for this one, but overridden nevertheless.
Matteld80 replied on at Permalink Reply
Matteld80
Ok thanks for this, glad to hear its do-able, have to say I was surprised to see tables!

I did mess with the product list file a little and made some tweaks, the main area I get confused on is where I specify 4 items per row. Will have a play

I'm not 100% sure of what I'm doing with the over-ride stuff is there an explanation on it anywhere on here?

I get confused a little on how it works when you specify 4 items per row, where the individual wrappers for those are?
JohntheFish replied on at Permalink Reply
JohntheFish
Have a look through the howtos. There is one titled something like 'How to change things without hurting anything .. overrides' that contains all you need to know about overrides.

There are also many eCommerce forum and support tickets on overriding product lists. They are just hard to search, so you have to wade through them.