how to make list view/grid view toggle

[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

[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

[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