separate product listings for mobile and desktop?

[guybr]

Hi, I'm using the latest version of VM with a liquid template: on small screens the 3 column product listing renders well; on desktops, there's space that could be used to add a 4th product column.

Is there a way of configuring the setting so it displays 3 columns per certain conditions and 4 columns per other conditions?

[jenkinhill]

There is no switch for this, but you could use selective css (eg  @media only screen and ( max-width: 790px ) { etc) to override the normal layout css or use JavaScript to detect the screen size & select template based on that size - some hints on http://css-tricks.com/forums/topic/detect-screen-size-with-jquery/

[guybr]

Hi, I'm at a stage of the site development where I can now try to tackle this: can I make the .php which establishes the number of columns (products per row) conditional using javascript (I'm using device.js) to reference the relevant device types and orientation?

I'm assuming this is the relevant snippet - can you give me a start how I would make this conditional? I'm trying to get the default of 4 columns to be just 3 in portrait on mobile devices:

from virtuemart default_products.php:

foreach ($this->products as $type => $productList ) {
// Calculating Products Per Row
$products_per_row = VmConfig::get ( 'homepage_products_per_row', 3 ) ;
$cellwidth = ' width'.floor ( 100 / $products_per_row );


from category default.php:

   // Calculating Products Per Row
   $BrowseProducts_per_row = $this->perRow;
   $Browsecellwidth = ' width' . floor (100 / $BrowseProducts_per_row);

[GJC Web Design]

that is the code that sets the columns but your not considering how the net works
php is on your server - it knows nothing about the browser (until you send another GET or Post or what ever)

javascript is on your browser - it knows nothing about the server

still think you need to use a different template for a 3 wide on mobile

[guybr]

If I create a different template, can you point me in the direction of what I'd need to change in the existing template? I'm using the default Atomic template...

[jenkinhill]

Atomic is not responsive.  If you want to start off with a default Joomla responsive template then start with Protostar in Joomla 3.3.6. with VM3 (In RC as 2.9.9.2).

For mobile I have used 3 columns/row in product listing, but it actually works better at 2/row.

[GJC Web Design]

or if you want to stick to J2.5 /VM2.6.. try a light clean FREE VM template like http://www.virtuemarttemplates.eu/virtuemart-templates/horme-free-virtuemart-template.html

fully responsive out of the box

[guybr]

I may be misunderstanding the suggestion to create a mobile version of the present displays, but for the storefront (featured items) and category pages, where do I find the HTML for those pages, to create the 3 column version displays?

[jenkinhill]

Yes the Horme 2 template works "out  of the box" for mobile, with the exception of checkout, which needs a little extra work.

The same conditions apply for mobiles (going down in size) as for going up (wider displays). The templates are self evident, in components/com_virtuemart/views/virtuemart/tmpl/ for the home page display and components/com_virtuemart/views/category/tmpl/ for category. I find it prefeable to control a change in layouts via CSS so you show/hide a specific <div> or similar simply based on screen width.

[guybr]

Hi Jenkinhill, I was curious about your last comment - using css to show/hide things <div> statements. How do you do that? Can you show me an example of such a technique?

Even with @media commands I wrote I only used them for color and font styling -  I hadn't seen examples of them control things like <div> statements.

[GJC Web Design]

@media only screen and ( max-width: 790px ) {
        div.span33{
           display:none;
     }
}

[guybr]

I've been trying out various solutions and I think I have one, but I need a little help with conditional php to make this work:

I'm using a php-supported mobile-device plugin to detect mobile devices.

If it spots a mobile user, I want default_products.php to use this callup (with the hardcoded 3 column element in it): <div class="product floatleft width33<?php echo $show_vertical_separator ?>">

If a visitor is using some other device or PC, I want to use the existing div callup: <div class="product floatleft<?php echo $cellwidth . $show_vertical_separator ?>">

I'm trying this with no success:
if ($detect->isMobile()) {
      <div class="product floatleft width33<?php echo $show_vertical_separator ?>">; }
      else {
      <div class="product floatleft<?php echo $cellwidth . $show_vertical_separator ?>">;}
      ?>

Any ideas how to script this correctly?

[GJC Web Design]

surely you have to echo this to replace the div markup?

if ($detect->isMobile()) {
      echo '<div class="product floatleft width33 '.$show_vertical_separator.'">'; }
      else {
      echo '<div class="product floatleft '.$cellwidth . $show_vertical_separator.'">';}
      ?>

[guybr]

After more tweaking I got the conditional comment to work - Thanks!

Now I have a follow-up question for similar approach on the default.php page of category/tmpl. I did the following similar changes as I did to the VM homepage - but now, although it renders fine on cellphones as per the condition, on desktop it skews the number of products per row. In some cases I see 2 products in other cases 3, and their containers are all stretched oddly. Is there something special in the coding on that page that I also have to treat?

Here's what I changed so far:

   // Calculating Products Per Row
/*   $BrowseProducts_per_row = $this->perRow;
   $Browsecellwidth = ' width' . floor (100 / $BrowseProducts_per_row); */


// Calculating Products Per Row - added conditional comments so there would be horizontal spacings on the special mobile override style
      if(MobileDetector::isMobile() === true && MobileDetector::isTablet() === false) {
      $BrowseProducts_per_row = "3";
      $Browsecellwidth = "33%";
       }   else {
      $BrowseProducts_per_row = $this->perRow;
      $Browsecellwidth = ' width' . floor (100 / $BrowseProducts_per_row);
       }

// Show Products - conditional assignment: mobile devices will only see 3 columns instead of whatever is set in CP
      ?>

      <?php if(MobileDetector::isMobile() === true && MobileDetector::isTablet() === false) { ?>
      <div class="product floatleft center width33<?php echo $show_vertical_separator ?>">
      <?php }   else { ?>
      <div class="product floatleft center<?php echo $Browsecellwidth . $show_vertical_separator ?>">
      <?php } ?>