News:

Looking for documentation? Take a look on our wiki

Main Menu

Grid and List view in VM2

Started by lipes, January 28, 2012, 00:52:51 AM

Previous topic - Next topic

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
VM V. online: J2.5.14 | VM 2.0.20a | SQL 5.1.70 | PHP 5.3.25

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

<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

#5
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:


<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

#7
srajca: just need to follow the tobisagt instructions
Quote from: tobisagt on April 16, 2012, 20:16:15 PM
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

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

#11
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

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

#13
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 :)