Grid and List view in VM2

[lipes]

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

[PRO]

prolipes, this is easy with a little on click js.

On click change the css of the product container to width=100%

[PRO]

<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.

[tobisagt]

wow, thanks for the code!
Worked nice for me.

@ prolipes

Code Select Expand

<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]

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]

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 Expand


<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]

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]

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

[srajca]

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]

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]

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]

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

[srajca]

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]

I'm looking for same thing could you pm me a lik as well? Or to post or send me all files?

[zorro lee]

I've tried this and doesn't work for me. I need help