Author Topic: How to make Virtuemart Responsive  (Read 20861 times)

harel

  • Beginner
  • *
  • Posts: 8
How to make Virtuemart Responsive
« on: October 10, 2013, 21:57:18 pm »
Hello everyone !

Today I had the pleasure of meeting with Max Milbers in the Israeli Jday 2013 in Tel-Aviv

I asked him about when virtueamrt will have a native responsive layout using bootstrap and he told me it on the development team pipeline.

I informed him I already had a success adding the bootstrap classes to virtuemart by using a template override for virtuemart , so he encouraged me to post it in this community so everyone can benefit from it.

Here it is (very simple):
What I used is a regular virtuemart installation in Joomla 2.5 and a gantry 4 framework (which has a bootstrap)
Then I added a template override to this files.

For the product details page:
/components/com_virtuemart/views/productdetails/tmpl/default.php
copy to this folder:
/templates/Your_Template/html/com_virtuemart/productdetails

1. change this:
Code: [Select]
<div class="productdetails-view productdetails">to this:
Code: [Select]
<div class="productdetails-view productdetails row-fluid">
2. Change this:
Code: [Select]
<div class="width60 floatleft">to this:
Code: [Select]
<div class="width60 floatleft span4">
3. Change this:
Code: [Select]
<div class="width40 floatright">to this:
Code: [Select]
<div class="width40 floatright span8">

For the category/featured layout:
/components/com_virtuemart/views/productdetails/tmpl/default_showprices.php
copy to this folder:
/templates/Your_Template/html/com_virtuemart/virtuemart

1. Change this:
Code: [Select]
<div class="row">to this:
Code: [Select]
<div class="row row-fluid">
2. change this:
Code: [Select]
<div class="product floatleft<?php echo $cellwidth $show_vertical_separator ?>">to this:
Code: [Select]
<div class="product floatleft span3<?php echo $cellwidth $show_vertical_separator ?>">
So you see that adding a few bootstrap classes can make a dramatic change to your virtuemart responsive layout.

Here is an example of a website I'm now building:
Category/Featured responsive layout for the home page:
http://www.super-beauty.com/

Product page responsive layout:
http://www.super-beauty.com/products-reviews

Hope this will be incorporate as a native feature in future virtuemart versions.

Would be happy to hear your opinions.  :)
Harel.

Stonedfury

  • Jr. Member
  • **
  • Posts: 267
    • Stonedfury
  • Skype Name: Stonedfury
  • VirtueMart Version: 2.0.24
Re: How to make Virtuemart Responsive
« Reply #1 on: October 28, 2013, 20:34:03 pm »
Thank you for sharing this. Bookmarking for future reference.

Wanted to add a link for the scaffolding.

http://getbootstrap.com/2.3.2/scaffolding.html
No such thing as a stupid question, only a stupid answer. I won't ask if I know the answer or found it using the search as you suggested.

futurefool

  • Beginner
  • *
  • Posts: 10
Re: How to make Virtuemart Responsive
« Reply #2 on: November 04, 2013, 14:45:06 pm »
Hello harel.

First of all thank you for posting this. I too am using j!2.5 with gantry and virtuemart and looking to make it more responsive so your post is perfect.

I am trying to implement the changes you mentioned. I have copied over the default.php file from com_virtuemart/views/productdetails/tmpl to a com_virtuemart/productdetails folder I created in templates/gantry and made the changes to this file. I have also copied over the default_showprices.php file to a com_virtuemart/virtuemart which I created in templates/gantry. However, I have not been able to find either <div class="row"> or <div class="product floatleft<?php echo $cellwidth . $show_vertical_separator ?>"> in the default_showprices.php file. Can you provide a little more detail as to how I can achieve the changes you made?

Thanks in advance.

Joe

futurefool

  • Beginner
  • *
  • Posts: 10
Re: How to make Virtuemart Responsive
« Reply #3 on: November 04, 2013, 17:33:19 pm »
Ok. I managed on my own.  For the category/featured layout I made the stated changes to default_products.php. I guess this would be obvious to anybody who is more familiar with Virtuemart templates.

Thanks once again though Harel!

marceff

  • Beginner
  • *
  • Posts: 39
Re: How to make Virtuemart Responsive
« Reply #4 on: January 16, 2014, 15:42:26 pm »
I think I am not as smart as futurefool, so maybe a little help will put on the right path:
in my defalut_showprices.php file did not find none of the codes described by herel (such as <div class="row">; <div class="product floatleft<?php echo $cellwidth . $show_vertical_separator ?>">. So what should I have to edit instead?
I guess this is a very easy issue for many of you but I am not very skilled with codes.

Thank you for help

ps: I am on Joomla 2.5.14 + VM2.0.26 and Gantry 4 framework

Bravestar

  • Beginner
  • *
  • Posts: 18
Re: How to make Virtuemart Responsive
« Reply #5 on: January 27, 2014, 12:06:58 pm »
thanks for the sharing.

i will try it definetly.


john-doe

  • Jr. Member
  • **
  • Posts: 96
Re: How to make Virtuemart Responsive
« Reply #6 on: February 05, 2014, 16:53:02 pm »
Well could be easy to apply to Bootstrap 3 since the syntax is diferent.

matuloso

  • Beginner
  • *
  • Posts: 1
Re: How to make Virtuemart Responsive
« Reply #7 on: February 11, 2014, 14:08:32 pm »
Thanks for sharing, it works perfectly!

ghanahost

  • Beginner
  • *
  • Posts: 2
  • Skype Name: ghanahost
Re: How to make Virtuemart Responsive
« Reply #8 on: August 22, 2014, 09:48:49 am »
Hello,
Thanks for this tutorial.
I just finished working on a virtuemart site that uses the helix framework ii from joomshaper.
Ii there a way I can implement this tutorial to get the responsive effect especially for mobile display?
This is my first virtuemart site and thus I will say I am a novice.
I followed the tutorial but I did not get the desired effect.

Any help will be greatly appreciated

kennethrules

  • Beginner
  • *
  • Posts: 13
    • Quality Freelance Web Designer
  • Skype Name: kennethrules27
  • VirtueMart Version: 2.6.6
Re: How to make Virtuemart Responsive
« Reply #9 on: August 22, 2014, 17:39:23 pm »
This is really tutorials, and right time, I'm working now on my client store site. ^_^

guybr

  • Jr. Member
  • **
  • Posts: 155
Re: How to make Virtuemart Responsive
« Reply #10 on: September 10, 2014, 07:43:35 am »
...can someone just confirm what we need at a minimum to do this: other than the edits Harel mentioned above, we need bootstrap installed - but do we need 'scaffolding' (mentioned above)? Are the changes above dependent on us having Gantry (or can we get by without it)?

Jack

  • Beginner
  • *
  • Posts: 45
    • Naughty Husky
Re: How to make Virtuemart Responsive
« Reply #11 on: October 22, 2014, 16:23:13 pm »
any tips on integrating this in 2.9.9? for instance, there seems to be no, default_showprices.php file in 2.9.9

hegbi

  • Beginner
  • *
  • Posts: 13
Re: How to make Virtuemart Responsive
« Reply #12 on: May 26, 2015, 04:05:27 am »
ghanahost, for joomshaper template try changing only one line in
templates\your template\html\com_virtuemart\category\default.php
around line 222 find
Code: [Select]
<div class="product floatleft<?php echo $Browsecellwidth $show_vertical_separator ?>">and replace with
Code: [Select]
<div class="product floatleft span3<?php echo $Browsecellwidth $show_vertical_separator ?>">or
Code: [Select]
<div class="product floatleft span3<?php echo $cellwidth $show_vertical_separator ?>">

dasinfomedia

  • 3rd party VirtueMart Developer
  • Beginner
  • *
  • Posts: 9
Re: How to make Virtuemart Responsive
« Reply #13 on: June 12, 2015, 08:54:14 am »
Hi.. You can implement bootstrap concept in your joomla theme for VM layouts and it will help you to make 90% responsive easily. Check out demo : http://themeforest.net/item/modest-multipurpose-joomla-virtuemart-theme/full_screen_preview/11637912