News:

Support the VirtueMart project and become a member

Main Menu

how to make list view/grid view toggle

Started by guybr, November 17, 2014, 14:52:50 PM

Previous topic - Next topic

guybr

I saw a different thread here about this (http://forum.virtuemart.net/index.php?topic=97132.0) but didn't understand where or how to implement the suggestion, which was to change the "product container".

I'm using the Atomic theme, which displays the category page by default in a grid style, so what I'm looking for is simply a way to display the page in a list form. I saw a few VM-related demos on the web but none of them were easy to implement (based on the information that was provided).

I spent a while trying these two methods without success: https://www.daycounts.com/how-to/78-how-to-make-a-grid-list-toggle-button-and-display and http://tympanus.net/codrops/2013/07/01/view-mode-switch/.

Trying to add the suggested list-view class to this callup ( <div class="product floatleft center<?php echo $Browsecellwidth . $show_vertical_separator ?>"> ) either didn't work or left the page permanently displayed in a list view.

Can anyone point me in the right direction of what to do?


guybr

Can someone guide me as to where and how to call up javascript or jquery into virtuemart pages?

For example, is it enough to callup the <script> in the template page in the admin control panel, or do I need to add something special on the specific view page (like default.php in Category view)?

GJC Web Design

if they are just js snippets add them directly in the template
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

guybr

This is the code:

    jQuery('.grid-list-toggle .grid-view').on('click',function(event) {
        event.preventDefault();
        jQuery('#ProductBrowseView').removeClass('list-view').addClass('grid-view');
        jQuery('.grid-list-toggle a').removeClass('active');
        jQuery(this).addClass('active');
        $.cookie('product-view', 'grid-view', {expires: 7, path: '/'});
    });

    jQuery('.grid-list-toggle .list-view').on('click', function (event) {
        event.preventDefault();
        jQuery('#ProductBrowseView').removeClass('grid-view').addClass('list-view');
        jQuery('.grid-list-toggle a').removeClass('active');
        jQuery(this).addClass('active');
        $.cookie('product-view', 'list-view', {expires: 7, path: '/'});
    });

I have it in a .js file "as is" without any extra coding in the file, and I have it called up in the .php page like this:

<?php
$document = JFactory::getDocument();
$document->addScript('http://www.mysite.com/grid-list-toggle.js');
?>

The call-up appears when I do a "view source" but it looks like the function itself doesn't work.
From what you see, can it be because I'm not calling up the file correctly, or am I missing some code before/after the function in the file?

GJC Web Design

why call yet another script? it is faster just to incl. in the php file

<script type="text/javascript">
   jQuery(document).ready(function($){
   
// your js


   });
   jQuery.noConflict();
</script>

if the script doesn't work u need to debug it
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

guybr

Thanks!
Is there a certain place I should put that on the .php page? Somewhere I read to put them before the first <?php on the page...?

GJC Web Design

it doesn't matter

normally close to where the relevant html is
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation