I saw a different thread here about this (http://forum.virtuemart.net/index.php?topic=97132.0 (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 (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/ (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?
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)?
if they are just js snippets add them directly in the template
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?
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
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...?
it doesn't matter
normally close to where the relevant html is