Number of products per row for mobile

[wicko]

Is there a way I can set the number of products per row on a mobile device.
For instance I have 3 products per row which work fine for desktop to tablet devices but when I get to phone landscape I get 2 then 1. Ideally I would like to set phone landscape to 2 products per row.

regards

David

[wicko]

 
I need products per row on a portrait tablet set to 2 as well.
My site is http://www.wickodev.co.uk/store

[GJC Web Design]

you just have responsive conditional css.. like any responsive display

chose the width of the product div to show how many u want.. can be pixels or %

@media (max-width: 479px) {
  .productdiv {
  width:220px;  or 50%
}
}

@media (max-width: 360px) {
  .productdiv {
  width:320px;  or 100%
}
}

[wicko]

The only issue with this is that it will set the .productdiv width but not set 3 product per row to 2. What happens is that you get 2 products in first row then 1 on its own before you get 2 products per row again and so on.
I have already set the .vm-col-3 width for different medias.

[GJC Web Design]

yes ..the layout markup is the problem

prods in rows with each row cleared

I think you need  to change the html to fully floating divs that "fit" at certain widths

so not in a containing div

[wicko]

ok that's the trick, but also where I am lost. Not sure which files need changing and where the code is.

Found this code in sublayouts.products.php

Code Select Expand

// Calculating Products Per Row
$cellwidth = ' width'.floor ( 100 / $products_per_row );

$BrowseTotalProducts = count($products);

$col = 1;
$nb = 1;
$row = 1;

foreach ( $products as $product ) {

// Show the horizontal seperator
if ($col == 1 && $nb > $products_per_row) { ?>
<div class="horizontal-separator"></div>
<?php }

// this is an indicator wether a row needs to be opened or not
if ($col == 1) { ?>
<div class="row">
<?php }

// Show the vertical seperator
if ($nb == $products_per_row or $nb % $products_per_row == 0) {
$show_vertical_separator = ' ';
} else {
$show_vertical_separator = $verticalseparator;
}

Tried to remove parts of this and even all of it but didn't really help

[GJC Web Design]

correct file but you also need to adjust the css etc

[wicko]

ok so would you recommend removing that code and then adjusting the css?

regards

David

[GJC Web Design]

there are many ways to skin a cat...

most people (incl. myself ) just put up with the prods per row switching to 1 at some screen size point

you want 2 on landscape mobile .. so you need some skills to code this..or buy a template that does this..

the .row is the problem

I assume getting rid of it and going to fully floated will work but at the end of the day this is your site and you can't expect free coding for it..

[wicko]

Very bad to simply just put up with something. Listen to your customers. People don't like a messy page and being mobile friendly is a very high importance these days. If you don't think your customers are using mobiles to shop online then please look again. The stats show that traffic from mobile devices is already well over 35%. Amazon says that over 60% of is sales are made by a mobile device.

I am most certainly not looking for FREE coding. A little help and direction would be great.

Perhaps the option would to not have rows at all but just a total number of products per page then set the product container width and let all the other wrap round.

I will post a solution for others when resolved.

[SnakeFFM]

I dont get this, nobody said responsive design is not important?

The solution described by GJC is a common approach as you might noticed on other shops.

If you want to get rid of this row structure, just do an override. In order to find the right files to override switch of url-friendly links and pick it from the view...for instance:

http://localhost/shop/index.php?option=com_virtuemart&view=category&virtuemart_category_id=XXX&Itemid=XXX&lang=de

Then go to... com_virtuemart -> views -> category -> tmpl and check 'default.php' just as you already did... there u ll find:

Code Select Expand


<?php
if (!empty($this->products)) {
$products = array();
$products[0] = $this->products;
echo shopFunctionsF::renderVmSubLayout($this->productsLayout,array('products'=>$products,'currency'=>$this->currency,'products_per_row'=>$this->perRow,'showRating'=>$this->showRating));

?>


as you might noticed ... the layout is coming from the sublayouts... which you find here: com_virtuemart -> sublayouts and there is a file 'products.php' which you can override... on line 55 is the div class "row"

Code Select Expand


// this is an indicator wether a row needs to be opened or not
if ($col == 1) { ?>
<div class="row">
<?php }


which has its closing tag on line 129 (if I am not mistaken)....

Maybe that helps...

[wicko]

Ok I have found an even simpler way to achieve this without creating overrides.

If you set the number of products per row to view in the category to the total number of product you have on your page then adjust the width of the product container using css then all will simply wrap round.

I used this code within each mobile break point in my css.

Code Select Expand

div[class*="vm-col-"] {width:set-to-desired-width;}

Hope this helps

[GJC Web Design]

@Wicko...

This whole project and forum is done by volunteers.. 90% of what you need to set up a shop is totally free

What your wanting is fairly basic html & css.. suggestions have been made....

As I said there are probably commercial templates that do what you want..

the standard templates are there as a "starter" to show you what is possible and as a guide to how to start to adapt your own code to do what YOU want...

The solution you found sounds good... 

[Pejo]

Ok I have found an even simpler way to achieve this without creating overrides.

If you set the number of products per row to view in the category to the total number of product you have on your page then adjust the width of the product container using css then all will simply wrap round.

I used this code within each mobile break point in my css.

Code Select Expand

div[class*="vm-col-"] {width:set-to-desired-width;}

Hope this helps

I am trying to do the same thing on my site, but can not do it. Tried with css changes for hours, and only works if I put 2 products in row under CM configuration (backend), then my CSS changes works fine also, but if the backend "Default number of products in a row" is set to 3, in mobile view I get in first line 2 products, second line 1 product, third line 2 products, forth line 1 product, etc.

Did anyone find solution?

Thanks in advance.