Index: branches/1.0.x/inc/js/list_manager.js =================================================================== --- branches/1.0.x/inc/js/list_manager.js (nonexistent) +++ branches/1.0.x/inc/js/list_manager.js (revision 14890) @@ -0,0 +1,187 @@ +function ListManager() {} + +ListManager.containerSelector = ''; // selector id of container +ListManager.url = ''; // url to template with list contents +ListManager.urlParams = {layout: 'list'}; +ListManager.filters = {}; +ListManager.xhrRequests = []; +ListManager.reloadTimer = null; +ListManager.reloadTimeout = 1000; + +ListManager.getUrl = function () { + var $url = this.url; +} + +ListManager.cancelXHRRequests = function () { + while ( this.xhrRequests.length > 0 ) { + this.xhrRequests.shift().abort(); + } +} + +ListManager.reload = function ($now) { + this.cancelXHRRequests(); + + if ( $now === undefined || $now === false ) { + this.updateAnchor(); + + return; + } + + var $container = $(this.containerSelector); + + $container.fadeTo('fast', 0.7); + + var $request = $.post( + this.url, + this.urlParams, + function ($data) { + $container.html($data).fadeTo('fast', 1.0); + } + ); + + this.xhrRequests.push($request); +} + +ListManager.scheduleReload = function () { + var $me = this; + + clearTimeout(this.reloadTimer); + + this.reloadTimer = setTimeout(function() { $me.reload(); }, this.reloadTimeout); +} + +ListManager.setParam = function ($name, $value, $reload) { + if ( $value === undefined || $value === '' ) { + // don't pass empty parameters + delete this.urlParams[$name]; + } + else { + this.urlParams[$name] = $value; + } + + if ( $reload === true ) { + this.reload(); + } +} + +ListManager.updateAnchor = function () { + var $query_string = [], + $url_params = sort_object(this.urlParams); + + for (var $param_name in $url_params) { + $query_string.push( $param_name + '=' + encodeURIComponent(this.urlParams[$param_name]) ); + } + + window.location.hash = '#' + $query_string.join('&'); +} + +ListManager.parseAnchor = function ($anchor) { + var $query_string = {}; + + $anchor.replace( + new RegExp('([^?=&]+)(=([^&]*))?', 'g'), + function($0, $1, $2, $3) { + $query_string[$1] = decodeURIComponent($3); + } + ); + + this.urlParams = $query_string; + this.reload(true); +} + +ListManager.replaceFilter = function ($form_id, $form_html) { + $('#' + $form_id).replaceWith($form_html); +} + +ListManager.registerFilter = function ($form_id) { + var $manager = this, + $form = $('#' + $form_id), + $field = $form.attr('filter_field'); + + $manager.filters[$field] = {'type': $form.attr('filter_type')}; + + $('h2:first a', $form).click( + function ($e) { + var $header = $(this).parent(), + $active = $header.hasClass('active'); + + $header.toggleClass('active', !$active); + $header.next().toggleClass('noactive', $active); + + return false; + } + ); + + switch( $manager.filters[$field].type ) { + case 'radio': + $("input[type='radio']", $form).click( + function ($e) { + $manager.updateFilterParams(); + } + ); + break; + + case 'checkbox': + $("input[type='checkbox']", $form).click( + function ($e) { + var $checkbox = $(this), + $hidden_id = $checkbox.attr('id').replace(/_([\d\w-=]|)+$/, ''), + $regexp = new RegExp(jq($hidden_id) + '_([\\d\\w-=]+)'); + + if ( $checkbox.val() == '' ) { + // "All" checkbox + $("input[type='checkbox']", $form).not($checkbox).attr('checked', false); + } + else if ( $checkbox.is(':checked') ) { + $("input[type='checkbox'][value='']", $form).attr('checked', false); + } + + update_checkbox_options($regexp, $hidden_id, $form); + + $manager.updateFilterParams(); + } + ); + break; + } +} + +ListManager.syncChecked = function ($checkboxes) { + $checkboxes.each( + function () { + var $me = $(this), + $checked = $me.is(':checked'), + $dt = $me.parent(), + $dd = $dt.next(); + + $dt.toggleClass('active', $checked); + $dd.toggleClass('active', $checked); + } + ); +} + +ListManager.updateFilterParams = function () { + var $form_fields; + + for (var $field in this.filters) { + $form_fields = $('#filter-form-' + $field).serializeArray(); + + for (var $i = 0; $i < $form_fields.length; $i++) { + this.setParam($form_fields[$i].name, $form_fields[$i].value); + } + + this.syncChecked( $("input[type=checkbox], input[type=radio]", '#filter-form-' + $field) ); + } + + this.scheduleReload(); +} + +ListManager.init = function () { + var $manager = this; + + $('body').bind( + 'anchorchanged', + function ($e, $anchor) { + $manager.parseAnchor($anchor); + } + ); +} \ No newline at end of file Index: branches/1.0.x/inc/js/jquery.scripts.js =================================================================== --- branches/1.0.x/inc/js/jquery.scripts.js (revision 14889) +++ branches/1.0.x/inc/js/jquery.scripts.js (revision 14890) @@ -1,195 +1,233 @@ /* === General usage functions === */ -function jq($selector) { - return $selector.replace(/(\[|\]|\.)/g, '\\$1'); +function jq($selector, $delimiter) { + return ($selector + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + ($delimiter || '') + '-]', 'g'), '\\$&'); } function in_array(needle, haystack) { return array_search(needle, haystack) != -1; } function array_search(needle, haystack) { for (var i=0; i<haystack.length; i++) { if (haystack[i] == needle) return i; } return -1; } Array.prototype.diff = function(a) { return this.filter( function (i) { return a.indexOf(i) == -1; } ); }; function get_control($mask, $field, $append, $prepend) { $append = $append !== undefined ? '_' + $append : ''; $prepend = $prepend !== undefined ? $prepend + '_' : ''; return document.getElementById( $prepend + $mask.replace('#FIELD_NAME#', $field) + $append ); } -function update_checkbox_options($cb_mask, $hidden_id, $form_id) +function update_checkbox_options($cb_mask, $hidden_id, $form_selector) { var $tmp = '', - $kf = document.getElementById($form_id !== undefined ? $form_id : $form_name); + $kf = $($form_selector !== undefined ? $form_selector : '#' + $form_name).get(0); for (var i = 0; i < $kf.elements.length; i++) { if ( $kf.elements[i].id.match($cb_mask) ) { if ($kf.elements[i].checked) { $tmp += '|'+$kf.elements[i].value; } } } if ($tmp.length > 0) { $tmp += '|'; } document.getElementById($hidden_id).value = $tmp.replace(/,$/, ''); } +function watch_anchor () { + var $last_anchor = ''; + + setInterval( + function () { + if (window.location.hash != $last_anchor) { + $last_anchor = window.location.hash; + var $new_anchor = $last_anchor ? $last_anchor.substring(1) : ''; + + $('body').trigger('anchorchanged', [$new_anchor]); + } + }, 100 + ); +} + +function sort_object($object) { + // Setup Arrays + var $sorted_keys = [], $sorted_object = {}; + + for (var $property_name in $object) { + $sorted_keys.push($property_name); + } + + $sorted_keys.sort(); + + $($sorted_keys).each( + function () { + $sorted_object[this] = $object[this]; + } + ); + + return $sorted_object; +} + /* === DBlocks class === */ function DBlocks() { var $me = this; this.selectors = ['#lang', '#currency', '#login', /*'#login-alt',*/ '#profile']; $(document).ready( function () { $me.init(); } ); } DBlocks.prototype.init = function () { var $manager = this; $( this.selectors.join(', ') ).unbind('click').click( function($e, $now) { var $me = $(this), $parent = $me.parent(); if ( $parent.is('.plashka-sel') ) { $parent.removeClass('plashka-sel'); if ( $now === undefined || $now === false ) { $('#' + $me.attr('id') + '-sel').fadeOut(); } else { $('#' + $me.attr('id') + '-sel').hide(); } } else { $manager.hideOthers($me); $parent.addClass('plashka-sel'); $('#' + $me.attr('id') + '-sel').fadeIn(); } return false; } ); $('.icon-close').click( function() { $('#login').parent().removeClass('plashka-sel'); // ,#login-alt $('#login-sel').fadeOut(); // , #login-alt-sel return false; } ); } DBlocks.prototype.hideOthers = function ($current) { $( this.selectors.join(', ') ).not($current).each( function () { var $me = $(this), $parent = $me.parent(); if ( $parent.is('.plashka-sel') ) { $me.trigger('click', [true]); } } ); } /* === RatingManager class === */ function RatingManager ($url) { this.Url = $url; } RatingManager.prototype.makeVote = function ($vote, $prefix, $id, $size) { var $url = this.Url.replace('#PREFIX#', $prefix).replace('#VOTE#', $vote).replace('#ID#', $id).replace('#SIZE#', $size); $.get( $url, function ($response) { if ($response.substring(0, 5) == '@err:') { alert( $response.substring(5) ); return ; } document.getElementById('page_rating_' + $id).innerHTML = $response; } ) } -$(document).ready(function() -{ - $('#change-password').click( - function($e) { - $('#password-show').hide(); - $('#password-block').fadeIn(); +/* === Startup === */ +$(document).ready( + function() { + watch_anchor(); + + $('#change-password').click( + function($e) { + $('#password-show').hide(); + $('#password-block').fadeIn(); - return false; - } - ); + return false; + } + ); - $('.addtocart, .button-addtocart').click( - function () { - var $me = $(this), - $qty = $me.attr('qty_id') !== undefined ? parseInt($('#' + $me.attr('qty_id')).val()) : 1; + $('.addtocart, .button-addtocart').click( + function () { + var $me = $(this), + $qty = $me.attr('qty_id') !== undefined ? parseInt($('#' + $me.attr('qty_id')).val()) : 1; - if ( $me.hasClass('addedtocart') ) { - // disabled button - return false; - } + if ( $me.hasClass('addedtocart') ) { + // disabled button + return false; + } - if ( isNaN($qty) ) { - $qty = 1; - } + if ( isNaN($qty) ) { + $qty = 1; + } - var $bubble = $('.basketStatus'), - $timer_id = $bubble.data('hide_timer'); + var $bubble = $('.basketStatus'), + $timer_id = $bubble.data('hide_timer'); - clearTimeout($timer_id); + clearTimeout($timer_id); - $.get( - $me.attr('href') + '&qty=' + $qty, - function ($bubble_content) { - $('.basketContent', $bubble).html( $bubble_content.replace(/#QTY#/g, $qty) ); - $bubble - .stop(true, true) - .fadeIn( - 'slow', - function () { - var $timer = setTimeout(function(){ $bubble.fadeOut('slow'); }, 2000); - $bubble.data('hide_timer', $timer); - } - ); + $.get( + $me.attr('href') + '&qty=' + $qty, + function ($bubble_content) { + $('.basketContent', $bubble).html( $bubble_content.replace(/#QTY#/g, $qty) ); + $bubble + .stop(true, true) + .fadeIn( + 'slow', + function () { + var $timer = setTimeout(function(){ $bubble.fadeOut('slow'); }, 2000); + $bubble.data('hide_timer', $timer); + } + ); - if ( $me.hasClass('addtocart') ) { - $me.removeClass('addtocart').addClass('addedtocart').html('Added to Cart'); + if ( $me.hasClass('addtocart') ) { + $me.removeClass('addtocart').addClass('addedtocart').html('Added to Cart'); + } } - } - ); + ); - return false; - } - ); -}); \ No newline at end of file + return false; + } + ); + } +); \ No newline at end of file Index: branches/1.0.x/designs/section.tpl =================================================================== --- branches/1.0.x/designs/section.tpl (revision 14889) +++ branches/1.0.x/designs/section.tpl (revision 14890) @@ -1,91 +1,73 @@ <!--## <NAME>Products - Section Template</NAME> <DESC>Product Category</DESC> <SECTION></SECTION> ##--> <!--## required, when filters are used ##--> <inp2:p_InitList list_name="products_in_category" main_list="1"/> <inp2:m_DefineElement name="page_title"> <inp2:m_include template="elements/title_bar.elm"/> </inp2:m_DefineElement> <inp2:m_DefineElement name="sidebar"> <inp2:m_Include template="elements/side_boxes/categories.elm" data_exists="1"/> - <inp2:m_Include template="elements/side_boxes/filter_range.elm"/> - <inp2:m_Include template="elements/side_boxes/filter_dropdown.elm"/> - <inp2:m_Include template="elements/side_boxes/filter_checkboxes.elm"/> + + <inp2:m_include template="elements/filters.elm"/> + <inp2:item-filter_PrintList render_as="filter_element" prefix="p" list_name="products_in_category" is_list="1"/> + + <!--<inp2:m_RenderElement name="filter_element" prefix="p" list_name="products_in_category" filter_field="ManufacturerId" filter_type="checkbox"/> + <inp2:m_RenderElement name="filter_element" prefix="p" list_name="products_in_category" filter_field="EditorsPick" filter_type="radio"/> + <inp2:m_RenderElement name="filter_element" prefix="p" list_name="products_in_category" filter_field="Price" filter_type="range"/>--> + <inp2:m_Include template="elements/side_boxes/subscribe.elm"/> </inp2:m_DefineElement> <!--## MAIN CONTENT ##--> <inp2:m_DefineElement name="content"> <div class="block no-border-bottom" style="margin-bottom: 0;"> <inp2:m_Include template="elements/navigation_bar.elm"/> <inp2:m_Include template="elements/content_boxes/categories.elm" data_exists="1" /> </div> <div id="products"> <inp2:m_Include template="elements/content_boxes/products.elm" list_name="products_in_category" prefix="p" data_exists="1" /> </div> </inp2:m_DefineElement> <!--## /MAIN CONTENT ##--> <inp2:m_DefineElement name="add_to_head"> + <script src="<inp2:m_TemplatesBase/>inc/js/list_manager.js" type="text/javascript"></script> + <script type="text/javascript"> + ListManager.containerSelector = '#products'; + ListManager.url = '<inp2:m_Link render_template="elements/content_boxes/products.elm" list_name="products_in_category" list_prefix="p" js_escape="1" no_amp="1"/>'; + $(document).ready( function() { // js that works for "Shop All" menu and "Categories sidebox": begin var icons = {header: 'ui-icon-circle-arrow-e', headerSelected: 'ui-icon-circle-arrow-s'}, level2icons = {header: 'ui-icon-circle-arrow-l2e', headerSelected: 'ui-icon-circle-arrow-l2s'}, level3icons = {header: 'ui-icon-circle-arrow-l3e', headerSelected: 'ui-icon-circle-arrow-l3s'}; $('#accordion-menu').accordion({icons: icons}); $('#level2-menu').accordion({icons: level2icons}); $('.level3-menu').accordion({ icons: level3icons, header: 'h4', autoHeight: false, event: 'mouseover' }); - } - ); - - function ListManager() {} - - ListManager.containerSelector = '#products'; - ListManager.url = '<inp2:m_Link render_template="elements/content_boxes/products.elm" list_name="products_in_category" list_prefix="p" js_escape="1" no_amp="1"/>'; - ListManager.urlParams = {layout: 'list'}; - - ListManager.getUrl = function () { - var $url = this.url; - } - - ListManager.reload = function () { - $(this.containerSelector) - .fadeTo('fast', 0.7) - .load( - this.url, - this.urlParams, - function () { - $(this).fadeTo('fast', 1.0); - } - ); - } - ListManager.setParam = function ($name, $value, $reload) { - this.urlParams[$name] = $value; - - if ( $reload === true ) { - this.reload(); + ListManager.init(); } - } + ); </script> </inp2:m_DefineElement> <!--## DESIGN TEMPLATE ##--> <inp2:m_include template="designs/default_design.des" pass_params="1" left_column="sidebar"/> <!--## /DESIGN TEMPLATE ##--> \ No newline at end of file Index: branches/1.0.x/elements/filters.elm.tpl =================================================================== --- branches/1.0.x/elements/filters.elm.tpl (nonexistent) +++ branches/1.0.x/elements/filters.elm.tpl (revision 14890) @@ -0,0 +1,115 @@ +<inp2:m_DefineElement name="filter_text_block" PrefixSpecial="item-filter" filter_type="text" is_list="0"> + <input type="text" name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>" value="<inp2:FilterField/>"/> +</inp2:m_DefineElement> + + +<inp2:m_DefineElement name="filter_select_block" PrefixSpecial="item-filter" filter_type="select" is_list="0"> + <select name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>"> + + </select> +</inp2:m_DefineElement> + + +<inp2:m_DefineElement name="filter_radio_element"> + <dt<inp2:m_if check="m_Param" name="selected"> class="active"</inp2:m_if>> + <input type="radio"<inp2:m_if check="m_Param" name="selected"> checked</inp2:m_if> name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>_<inp2:m_param name='key'/>" value="<inp2:m_param name='key'/>"/> <label for="<inp2:FilterInputName/>_<inp2:m_param name='key'/>"><inp2:m_Param name="title"/></label> + </dt> + <dd<inp2:m_if check="m_Param" name="selected"> class="active"</inp2:m_if>>(<inp2:m_Param name="count"/>)</dd> +</inp2:m_DefineElement> + +<inp2:m_DefineElement name="filter_radio_block" PrefixSpecial="item-filter" filter_type="radio" is_list="0"> + <dl class="manufacturer"> + <inp2:ListFilterOptions render_as="filter_radio_element" pass_params="1"/> + </dl> + <div class="clear"></div> +</inp2:m_DefineElement> + + +<inp2:m_DefineElement name="filter_checkbox_element" form_id=""> + <dt<inp2:m_if check="m_Param" name="selected"> class="active"</inp2:m_if>> + <input type="checkbox"<inp2:m_if check="m_Param" name="selected"> checked</inp2:m_if> id="<inp2:FilterInputName/>_<inp2:m_param name='key'/>" value="<inp2:m_param name='key'/>"/> <label for="<inp2:FilterInputName/>_<inp2:m_param name='key'/>"><inp2:m_Param name="title"/></label> + </dt> + <dd<inp2:m_if check="m_Param" name="selected"> class="active"</inp2:m_if>>(<inp2:m_Param name="count"/>)</dd> +</inp2:m_DefineElement> + +<inp2:m_DefineElement name="filter_checkbox_block" PrefixSpecial="item-filter" filter_type="checkbox" is_list="0"> + <dl class="manufacturer"> + <inp2:ListFilterOptions render_as="filter_checkbox_element" form_id="filter-form-{$filter_field}" pass_params="1"/> + </dl> + <div class="clear"></div> + + <input type="hidden" name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>" value="<inp2:FilterField/>"/> +</inp2:m_DefineElement> + +<inp2:m_DefineElement name="filter_range_value_element"> + <li> + <!--##<inp2:m_param name='key'/>; ##--><inp2:m_Param name="title"/> + </li> +</inp2:m_DefineElement> + +<inp2:m_DefineElement name="filter_range_count_element"> + <li>(<inp2:m_Param name="count"/>)</li> +</inp2:m_DefineElement> + +<inp2:m_DefineElement name="filter_range_block" PrefixSpecial="item-filter" filter_type="range" is_list="0"> + <div class="range-block"> + <ul class="range"> + <inp2:ListFilterOptions render_as="filter_range_value_element" pass_params="1"/> + </ul> + <div id="slider-vertical" style="height:260px;"></div> + <ul class="range2"> + <inp2:ListFilterOptions render_as="filter_range_count_element" pass_params="1"/> + </ul> + <div class="clear"></div> + </div> + + <script type="text/javascript"> + $(document).ready( + function() { + $( '#slider-vertical' ).slider({ + orientation: 'vertical', + range: true, + min: <inp2:m_Get name="min_range_value"/>, + max: <inp2:m_Get name="max_range_value"/>, + step: <inp2:m_Get name="range_step"/>, + values: [<inp2:m_Get name="min_range_value"/>, <inp2:m_Get name="max_range_value"/>], + change: function(event, ui) { + $('#' + jq('<inp2:FilterInputName/>')).val(ui.values[0] + '-' + ui.values[1]); + + ListManager.scheduleReload(); + } + }); + } + ); + </script> + + <input type="hidden" name="<inp2:FilterInputName/>" id="<inp2:FilterInputName/>" value="<inp2:FilterField/>"/> +</inp2:m_DefineElement> + + +<inp2:m_DefineElement name="filter_element" PrefixSpecial="item-filter" prefix="" filter_field="" filter_type="" is_list="0"> + <inp2:m_ifnot check="m_Param" name="is_list"> + <inp2:ReloadItem prefix="$prefix" field="$filter_field"/> + </inp2:m_ifnot> + + <form action="<inp2:m_FormAction/>" id="filter-form-<inp2:m_Param name='filter_field'/>" method="post" class="filter-form" filter_field="<inp2:m_Param name='filter_field'/>" filter_type="<inp2:m_Param name='filter_type'/>"> + <div class="block alt-block"> + <h2 class="active"><a href="#">Filter by <inp2:m_Phrase name="lu_fld_{$filter_field}"/></a></h2> + <div class="block-content"> + <inp2:m_RenderElement name="filter_{$filter_type}_block" pass_params="1"/> + </div> + </div> + + <script type="text/javascript"> + $(document).ready( + function () { + ListManager.registerFilter('filter-form-<inp2:m_Param name="filter_field"/>'); + } + ); + </script> + </form> +</inp2:m_DefineElement> + +<inp2:m_DefineElement name="used_filter_element"> + ListManager.replaceFilter('filter-form-<inp2:m_Param name="filter_field"/>', '<inp2:m_RenderElement name="filter_element" pass_params="1" js_escape="1"/>'); +</inp2:m_DefineElement> \ No newline at end of file Index: branches/1.0.x/elements/side_boxes/filter_range.elm.tpl =================================================================== --- branches/1.0.x/elements/side_boxes/filter_range.elm.tpl (revision 14889) +++ branches/1.0.x/elements/side_boxes/filter_range.elm.tpl (revision 14890) @@ -1,34 +1,49 @@ <div class="block alt-block"> <h2 class="active"><a href="#">Filter by Price</a></h2> <div class="block-content"> <div class="range-block"> <ul class="range"> <li>$0</li> <li>$100</li> <li>$200</li> <li>$300</li> <li>$400</li> <li>$500</li> <li>$600</li> <li>$700</li> <li>$800</li> <li>$900</li> <li>> $900</li> </ul> <div id="slider-vertical" style="height:260px;"></div> <ul class="range2"> <li>(123)</li> <li>(34)</li> <li>(34)</li> <li>(34)</li> <li>(34)</li> <li>(34)</li> <li>(34)</li> <li>(34)</li> <li>(34)</li> <li>(34)</li> </ul> <div class="clear"></div> </div> </div> -</div> \ No newline at end of file +</div> + +<script type="text/javascript"> + $(document).ready( + function() { + $( '#slider-vertical' ).slider({ + orientation: 'vertical', + range: true, + min: 0, + max: 1000, + step: 100, + values: [ 0, 400 ] + }); + } + ); +</script> \ No newline at end of file Index: branches/1.0.x/elements/sorting.elm.tpl =================================================================== --- branches/1.0.x/elements/sorting.elm.tpl (revision 14889) +++ branches/1.0.x/elements/sorting.elm.tpl (revision 14890) @@ -1,134 +1,135 @@ <inp2:m_DefaultParam prefix="" list_name="" layout="list" ajax="0"/> <div class="filter-block"> - - <inp2:m_if check="{$prefix}_GridInfo" type="needs_pagination" list_name="$list_name"> - <div class="paginate"> - <a href="#prev" class="prev"><img src="<inp2:m_TemplatesBase/>img/arrow-left.png" width="7" height="13" alt="" /></a> - Products - <select id="paginate"> - <inp2:m_DefineElement name="option_page_current"> - <option value="<inp2:m_param name='page'/>" selected><inp2:m_param name="from_record"/> - <inp2:m_param name="to_record"/></a> - </inp2:m_DefineElement> - - <inp2:m_DefineElement name="option_page_link"> - <option value="<inp2:m_param name='page'/>"><inp2:m_param name="from_record"/> - <inp2:m_param name="to_record"/></a> - </inp2:m_DefineElement> - - <inp2:$prefix_PaginationBar list_name="$list_name" current_render_as="option_page_current" link_render_as="option_page_link"/> - </select> - out of <inp2:p_TotalRecords/> - <a href="#next" class="next"><img src="<inp2:m_TemplatesBase/>img/arrow-right.png" width="7" height="13" alt="" /></a> - </div> - </inp2:m_if> + <div class="paginate"> + <a href="#prev" class="prev"><img src="<inp2:m_TemplatesBase/>img/arrow-left.png" width="7" height="13" alt="" /></a> + Products + <select id="paginate"> + <inp2:m_DefineElement name="option_page_current"> + <option value="<inp2:m_param name='page'/>" selected><inp2:m_param name="from_record"/> - <inp2:m_param name="to_record"/></a> + </inp2:m_DefineElement> + + <inp2:m_DefineElement name="option_page_link"> + <option value="<inp2:m_param name='page'/>"><inp2:m_param name="from_record"/> - <inp2:m_param name="to_record"/></a> + </inp2:m_DefineElement> + + <inp2:$prefix_PaginationBar list_name="$list_name" current_render_as="option_page_current" link_render_as="option_page_link"/> + </select> + out of <inp2:p_TotalRecords/> + <a href="#next" class="next"><img src="<inp2:m_TemplatesBase/>img/arrow-right.png" width="7" height="13" alt="" /></a> + </div> <div class="sortby"> <form method="post" action="<inp2:m_FormAction/>"> Sort by: <select name="<inp2:p_CombinedSortingDropDownName/>" id="sorting"> <option value="Name|asc" <inp2:p_SortingSelected sorting="l1_Name|asc" selected='selected="selected"'/>>Name</option> <option value="Price|asc" <inp2:p_SortingSelected sorting="Price|asc" selected='selected="selected"'/>>Price Low</option> <option value="Price|desc" <inp2:p_SortingSelected sorting="Price|desc" selected='selected="selected"'/>>Price High</option> <option value="CachedRating|asc" <inp2:p_SortingSelected sorting="CachedRating|asc" selected='selected="selected"'/>>Rating</option> </select> Per Page: <select name="<inp2:{$prefix}_VarName type='PerPage'/>" id="per-page"> <option value="10" <inp2:$prefix_PerPageSelected per_page="10" selected='selected="selected"'/>>10</option> <option value="20" <inp2:$prefix_PerPageSelected per_page="20" selected='selected="selected"'/>>20</option> <option value="50" <inp2:$prefix_PerPageSelected per_page="50" selected='selected="selected"'/>>50</option> <option value="-1" <inp2:$prefix_PerPageSelected per_page="-1" selected='selected="selected"'/>>All</option> </select> </form> <a href="#" id="per-page-all">Show All</a> </div> <div class="display_switch"> <a href="#" class="switch_thumb" layout="<inp2:m_Param name='layout'/>"></a> </div> <script type="text/javascript"> $(document).ready( function() { $('a.switch_thumb').click( function ($e) { var $me = $(this); if ( $me.attr('layout') == 'list' ) { $me.addClass('swap'); $('ul.display').fadeOut( 'fast', function() { $me.attr('layout', 'grid'); ListManager.setParam('layout', 'grid'); $('div.items').removeClass('border-radius').addClass('items-alt'); $(this).fadeIn('fast').addClass('thumb_view'); } ); } else { $me.removeClass('swap'); $('ul.display').fadeOut( 'fast', function() { $me.attr('layout', 'list'); ListManager.setParam('layout', 'list'); $('div.items').addClass('border-radius').removeClass('items-alt'); $(this).fadeIn('fast').removeClass('thumb_view'); } ); } return false; } ); - <inp2:m_if check="{$prefix}_GridInfo" type="needs_pagination" list_name="$list_name"> - $('#paginate').change( - function () { - ListManager.setParam('page', $(this).val(), true); - } - ); - - $('.prev, .next', '.paginate').click( - function ($e) { - var $option = $('option:selected', '#paginate')[ $(this).attr('class') ](); + $('#paginate').change( + function () { + ListManager.setParam('page', $(this).val(), true); + } + ); - if ( $option.length ) { - $('#paginate').val( $option.attr('value') ).change(); - } + $('.prev, .next', '.paginate').click( + function ($e) { + var $option = $('option:selected', '#paginate')[ $(this).attr('class') ](); - return false; + if ( $option.length ) { + $('#paginate').val( $option.attr('value') ).change(); } - ); - </inp2:m_if> + + return false; + } + ); $('#sorting').change( function ($e) { ListManager.setParam('sort_by', $(this).val().replace('|', ','), true); } ); $('#per-page').change( function ($e) { - ListManager.setParam('per_page', $(this).val(), true); + var $per_page = $(this).val(); + + if ( $per_page == -1 ) { + ListManager.setParam('page', ''); + } + + ListManager.setParam('per_page', $per_page, true); } ); $('#per-page-all').click( function () { $('#per-page').val(-1).change(); return false; } ); } ); </script> </div> <div class="clear"></div> \ No newline at end of file Index: branches/1.0.x/elements/content_boxes/products.elm.tpl =================================================================== --- branches/1.0.x/elements/content_boxes/products.elm.tpl (revision 14889) +++ branches/1.0.x/elements/content_boxes/products.elm.tpl (revision 14890) @@ -1,22 +1,36 @@ <inp2:m_DefaultParam prefix="" list_name="" layout="list"/> <inp2:m_if check="m_Get" name="ajax" equals_to="yes"> + <inp2:m_NoDebug/> <inp2:m_Get name="list_prefix" result_to_var="prefix"/> <inp2:m_Get name="list_name" result_to_var="list_name"/> <inp2:m_Get name="layout" result_to_var="layout"/> </inp2:m_if> <inp2:$prefix_InitList list_name="$list_name" main_list="1"/> <inp2:m_Include template="elements/content_boxes.elm" strip_nl="2"/> <inp2:m_Include template="elements/product_elements.elm" strip_nl="2"/> -<inp2:m_Include template="elements/sorting.elm" list_name="$list_name" prefix="$prefix" layout="$layout" ajax="1"/> -<div class="items <inp2:m_if check='m_Param' name='layout' equals_to='list'>border-radius<inp2:m_else/>items-alt</inp2:m_if>"> - <ul class="display<inp2:m_if check='m_Param' name='layout' equals_to='grid'> thumb_view</inp2:m_if>"> - <inp2:$prefix_ListProducts list_name="$list_name" render_as="product_list_element"/> - </ul> - <div class="clear"></div> +<inp2:m_if check="{$prefix}_TotalRecords" list_name="$list_name"> + <inp2:m_Include template="elements/sorting.elm" list_name="$list_name" prefix="$prefix" layout="$layout" ajax="1"/> - <inp2:m_Include template="elements/pagination.elm" list_name="$list_name" prefix="$prefix" ajax="1"/> -</div> \ No newline at end of file + <div class="items <inp2:m_if check='m_Param' name='layout' equals_to='list'>border-radius<inp2:m_else/>items-alt</inp2:m_if>"> + <ul class="display<inp2:m_if check='m_Param' name='layout' equals_to='grid'> thumb_view</inp2:m_if>"> + <inp2:$prefix_ListProducts list_name="$list_name" render_as="product_list_element"/> + </ul> + <div class="clear"></div> + + <inp2:m_Include template="elements/pagination.elm" list_name="$list_name" prefix="$prefix" ajax="1"/> + </div> +<inp2:m_else/> + No Products +</inp2:m_if> + +<inp2:m_if check="m_Get" name="filters"> + <inp2:m_include template="elements/filters.elm"/> + + <script type="text/javascript"> + <inp2:item-filter.used_PrintList render_as="used_filter_element" list_name="$list_name" prefix="$prefix" is_list="1"/> + </script> +</inp2:m_if> \ No newline at end of file