News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

separate product listings for mobile and desktop?

Started by guybr, September 04, 2014, 12:47:23 PM

Previous topic - Next topic

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/
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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.

Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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;
     }
}
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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.'">';}
      ?>

GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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 } ?>