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
prolipes, this is easy with a little on click js.
On click change the css of the product container to width=100%
<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.
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 :)
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?
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'];} ?>">
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
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
OK Thanks, I did an override, but where in the code do I have to paste the code from previous post? Thanks a ton.
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.
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
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
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.
I'm looking for same thing could you pm me a lik as well? Or to post or send me all files?
I've tried this and doesn't work for me. I need help :)
i don't get it. we have to make our new .class file, or to change code in someone existing ? and where is it?
Hello,
I want add the possibility to change the category view. I have create a template override and right now i have 3 files: default.php to grid view default2.php to list view and default3.php to detail view (like excel table). How i can add the possibility that anyone change between this 3 different views with a toggle button?
Thanks in advance!!!