Ok... I found a way how to do it using jquery... and this how I did it....
Firstly... I am using this function for changing the pull_down used for 'Column Layout Grid for Product Listing' module, so it may be slightly different in your specific case.
So..
Open up where you have your 'select / drop down / pull_down'. In my case it was in /includes/templates/MY_TEMPLATE/tpl_index_product_list.php and found the line that looks like this:
Code:
if (defined('PRODUCT_LISTING_LAYOUT_STYLE_CUSTOMER') and PRODUCT_LISTING_LAYOUT_STYLE_CUSTOMER == '1') {
echo zen_draw_pull_down_menu('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS),array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"');
}
I then added in a surrounding <div> around my 'select / drop down / pull_down' and gave it an ID called 'viewControl' (so I can call it up later). I also added in below it my new 'anchor' tags which I will style and use in it place.
So this is what I have now
Code:
if (defined('PRODUCT_LISTING_LAYOUT_STYLE_CUSTOMER') and PRODUCT_LISTING_LAYOUT_STYLE_CUSTOMER == '1') {
echo '<div id="viewControl">' . zen_draw_pull_down_menu('view', array(array('id'=>'rows','text'=>PRODUCT_LISTING_LAYOUT_ROWS),array('id'=>'columns','text'=>PRODUCT_LISTING_LAYOUT_COLUMNS)), (isset($_GET['view']) ? $_GET['view'] : (defined('PRODUCT_LISTING_LAYOUT_STYLE')? PRODUCT_LISTING_LAYOUT_STYLE: 'rows')), 'onchange="this.form.submit()"') . '</div>';
echo '<div class="layoutList">';
echo '<a class="layoutIcon" href="rows">Rows</a>';
echo '<a class="layoutIcon" href="columns">Grid</a>';
echo '</div>';
}
Now I need to create my jscript file...
Open new file in text editor and add this into it (except the green part):
Code:
$(document).ready(function() { // prepares your page for the function
$("a.layoutIcon").click(function(event){ //when new anchor is clicked
event.preventDefault(); // stop anchors default function i.e. going to the link
$("#viewControl select").val($(this).attr("href")); // change the selectors option value to the same as the anchors link
if ($("#viewControl select").val() =='rows') // if anchor link was 'rows'
$("#viewControl select").val('rows').closest("form").submit(); // then use the selects value 'rows' and subit the form i.e. change layout to 'rows'
else
$("#viewControl select").val('columns').closest("form").submit(); // otherwise the value will be 'columns' i.e. grid and change accordingly
});
});
save it and call it 'jscript_WhatEverYouWant.js' (it must have the 'jscript_' part for auto detection by the cart) and place this file in /includes/templates/MY_TEMPLATE/jscript directory.
In my case I did a test now and could see the links 'rows' and 'grid' as well as the drop down... clicking 'rows' changed the layout to (yes, you guessed right!) ...rows and grid visa versa.
All I did then was open my stylesheet and added: '#viewControl {display: none;}' to hide the original drop down as well as style my anchor tags to suit. I have not done the styling yet but you can add in additional classes for individual styling as you want it.
Well I hope this helps someone, good luck!
Jay
Bookmarks