Author Topic: Grid and List view in VM2  (Read 17190 times)

lipes

  • Full Member
  • ***
  • Posts: 720
Grid and List view in VM2
« on: January 28, 2012, 00:52:51 am »
It will be possible to add in the new VM2 any display type for free (no paid!!) ... like in free Magento ecommerce products Categorie, that user can choose in Grid or List view ? http://demo.magentocommerce.com/catalog/category/view/s/bed-and-bath/id/10/
i'm not the coder (php, sql, js, etc...) :|  i only understand a litle bit about css and html
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10412
  • VirtueMart Version: 3+
Re: Grid and List view in VM2 - I want.. and you?
« Reply #1 on: January 28, 2012, 03:51:45 am »
prolipes, this is easy with a little on click js.

On click change the css of the product container to width=100%
J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10412
  • VirtueMart Version: 3+
Re: Grid and List view in VM2 - I want.. and you?
« Reply #2 on: January 28, 2012, 04:30:11 am »
<script type="text/javascript">
 jQuery( function($) {
   $("div.divclass").click(function(){
$("div.divclass").addClass("EXTRA-CLASS");});   
});
  </script>

http://api.jquery.com/addClass/

.EXTRA-CLASS .width20,  .EXTRA-CLASS .width30, .EXTRA-CLASS .width30{width:100%;}


thats just an example, but you see what i mean.

If you really wanna take control of YOUR vmart shop, I suggest buy a php book(begginer), and a jquery book(pocket reference), and read them. You do not have to "learn" either of them
, but you will be able to do anything you put your mind to, when it comes to your shop.

J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

tobisagt

  • Jr. Member
  • **
  • Posts: 106
Re: Grid and List view in VM2 - I want.. and you?
« Reply #3 on: January 28, 2012, 13:25:51 pm »
wow, thanks for the code! :)
Worked nice for me.

@ prolipes

Code: [Select]
<script type="text/javascript">
jQuery( function($) {
$("div.click").click(function(){
$("div.width50").addClass("width100");});   
$("div.click2").click(function(){
$("div.width100").removeClass("width100");});   
});
</script>


<div class="click">Click</div>
<div class="click2">Click2</div>

This is how i get it.

"Click" set my "width50" div to "width100"
"Click2" removes the class "width100" so its going back to "width50".

Its pretty easy :)

tobisagt

  • Jr. Member
  • **
  • Posts: 106
Re: Grid and List view in VM2 (SOLVED)
« Reply #4 on: January 28, 2012, 21:46:10 pm »
If i change the categoryview with the code above, it works till i refresh or click to another site. What i want is, if a customer change the view, it should stay.
Maybe its possible to set a cookie?

I think the best way is to load a different template with php, but im not expert in this :(

Any solution?

tobisagt

  • Jr. Member
  • **
  • Posts: 106
Re: Grid and List view in VM2
« Reply #5 on: April 16, 2012, 20:16:15 pm »
I use this jQuery Plugin for cookies:

https://github.com/carhartl/jquery-cookie

And this is how my code in "default.php" in "categories" view looks like:

Code: [Select]
<script type="text/javascript">
  jQuery( function ($) {
  $("div.grid-one-button").click(function(){
$("div.browse-view").fadeOut(0).delay(200).fadeIn(400);
  $("div.browse-view").removeClass("grid2").removeClass("grid3").addClass("grid1");
$.cookie("your-cookie-name", "grid1", { expires: 7 });});

  $("div.grid-two-button").click(function(){
$("div.browse-view").fadeOut(0).delay(200).fadeIn(400);
  $("div.browse-view").removeClass("grid1").removeClass("grid3").addClass("grid2");
$.cookie("your-cookie-name", "grid2", { expires: 7 });});

  $("div.grid-three-button").click(function(){
$("div.browse-view").fadeOut(0).delay(200).fadeIn(400);
  $("div.browse-view").removeClass("grid1").removeClass("grid2").addClass("grid3");
$.cookie("your-cookie-name", "grid3", { expires: 7 });});
  });
 </script>


the next step is to add some php code, who read out the cookie. I use the "browse-view" div class to place the cookies name, so i can make for every cookie name his own style.

<div class="browse-view <?php if(isset($_COOKIE['your-cookie-name'])) { echo $_COOKIE['your-cookie-name'];}  ?>">

srajca

  • Jr. Member
  • **
  • Posts: 146
Re: Grid and List view in VM2
« Reply #6 on: June 11, 2012, 15:54:54 pm »
I am looking for this exact same thing however I am a bit confused on how to insert the code and where. Could you please guide me through since I don't get it? Thank you

lipes

  • Full Member
  • ***
  • Posts: 720
Re: Grid and List view in VM2
« Reply #7 on: June 11, 2012, 17:07:16 pm »
srajca: just need to follow the tobisagt instructions
And this is how my code in "default.php" in "categories" view

category folder. Do an override.
The javascript code you can insert  in the default.php top.. immediately after to the end of the first php code... that end with "?>"

then you'll need to work with the same: div.browse-view, grid-one-button, grid-two-button (and grid-three-button to 3 kind of links) names in the same default.php file, inserting the same div names where you'll need them to people click and change...
But you also need to add some Text or CSstyle... like the BanquetTables.pro and tobisagt tell us too
or you'll get a empty space without see the link option to change the view
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

srajca

  • Jr. Member
  • **
  • Posts: 146
Re: Grid and List view in VM2
« Reply #8 on: June 11, 2012, 18:18:45 pm »
OK Thanks, I did an override, but where in the code do I have to paste the code from previous post? Thanks a ton.

srajca

  • Jr. Member
  • **
  • Posts: 146
Re: Grid and List view in VM2
« Reply #9 on: June 12, 2012, 21:23:39 pm »
OK i inserted the code and now I have 2 words in category view, but I am not very good with css. Where in the default.php should I enter the div grid-one-button or do I have to change the css? Can someone post the example code of the whole default.php and the css part that goes with it? Thank you for all your help.

srajca

  • Jr. Member
  • **
  • Posts: 146
Re: Grid and List view in VM2
« Reply #10 on: June 15, 2012, 14:24:01 pm »
I still don't know how to do this after several days now. I have been trying but I just don't know how to get it working. Any tips on how to go about the div's, text and the css? Any help will be greatly appreciated.
Thanks

lipes

  • Full Member
  • ***
  • Posts: 720
Re: Grid and List view in VM2
« Reply #11 on: June 15, 2012, 14:53:09 pm »
i dont have my website yet online to you could see. But here's another (different way) of doing the same thing see the code (ajax, html, css, it's all needed):
http://www.flexiblewebdesign.com/virtuemart-2-template/index.php?option=com_virtuemart&view=category&virtuemart_category_id=2&Itemid=474
http://www.ssdtutorials.com/tutorials/series/list-grid-view-jquery-cookies.html
http://www.spiralscripts.co.uk/Joomla-Modules/21-Mod-Virtuemart-Featured-Product-Grid/flypage-ask.tpl.html

if dont work maybe you could have problems in the code, because it works.. see with firebug or you could the inspect element with google chrome
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

srajca

  • Jr. Member
  • **
  • Posts: 146
Re: Grid and List view in VM2
« Reply #12 on: June 15, 2012, 15:05:04 pm »
Hey thanks for reply, I looked at all of those pages before. My main problem is that I do not know where to insert the div and then what I have to insert in jQuery, or how to change the css, so that it works. Although your site isn't online yet, can you share how does your default.php in category folder look like and what did you add in the css file?
Thank you for having patience with me.

zorro lee

  • Beginner
  • *
  • Posts: 11
Re: Grid and List view in VM2
« Reply #13 on: September 14, 2012, 00:01:32 am »
I'm looking for same thing could you pm me a lik as well? Or to post or send me all files?

zorro lee

  • Beginner
  • *
  • Posts: 11
Re: Grid and List view in VM2
« Reply #14 on: September 14, 2012, 17:07:53 pm »
I've tried this and doesn't work for me. I need help :)