Page MenuHomeIn-Portal Phabricator
Files F773327

modern-store
No OneTemporary
Actions

File Metadata

Created
Sun, Feb 2, 7:45 AM

modern-store
View Options

Index: branches/1.0.x/designs/section.tpl
===================================================================
--- branches/1.0.x/designs/section.tpl (revision 14863)
+++ branches/1.0.x/designs/section.tpl (revision 14864)
@@ -1,94 +1,91 @@
<!--##
<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/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>
-
- <inp2:m_Cache key="prefix:p;currency;guest_only">
-
- <inp2:m_Include template="elements/content_boxes/products.elm" list_name="products_in_category" prefix="p" data_exists="1" />
-
- </inp2:m_Cache>
-
+ <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>
- $(function() {
- var icons = {
- header: "ui-icon-circle-arrow-e",
- headerSelected: "ui-icon-circle-arrow-s"
- };
- var level2icons = {
- header: "ui-icon-circle-arrow-l2e",
- headerSelected: "ui-icon-circle-arrow-l2s"
- };
- var 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"
- });
- $("a.switch_thumb").toggle(function(){
- $(this).addClass("swap");
- $("ul.display").fadeOut("fast", function() {
- $("div.items").removeClass("border-radius").addClass("items-alt");
- $(this).fadeIn("fast").addClass("thumb_view");
- });
- }, function () {
- $(this).removeClass("swap");
- $("ul.display").fadeOut("fast", function() {
- $("div.items").addClass("border-radius").removeClass("items-alt");
- $(this).fadeIn("fast").removeClass("thumb_view");
- });
- });
-
- $( "#slider-vertical" ).slider({
- orientation: "vertical",
- range: true,
- min: 0,
- max: 1000,
- step: 100,
- values: [ 0, 400 ]
- });
- });
+ <script type="text/javascript">
+ $(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();
+ }
+ }
</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/sorting.elm.tpl
===================================================================
--- branches/1.0.x/elements/sorting.elm.tpl (revision 14863)
+++ branches/1.0.x/elements/sorting.elm.tpl (revision 14864)
@@ -1,35 +1,134 @@
+<inp2:m_DefaultParam prefix="" list_name="" layout="list" ajax="0"/>
+
<div class="filter-block">
- <div class="paginate">
- <a href=""><img src="<inp2:m_TemplatesBase/>img/arrow-left.png" width="7" height="13" alt="" /></a>&nbsp;
- Products
- <select id="paginate">
- <option value="" selected="selected">1-10</option>
- <option value="">11-20</option>
- <option value="">21-30</option>
- </select>
- out of 120&nbsp;
- <a href=""><img src="<inp2:m_TemplatesBase/>img/arrow-right.png" width="7" height="13" alt="" /></a>
- </div>
+
+ <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>&nbsp;
+ 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/>&nbsp;
+ <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="sortby">
<form method="post" action="<inp2:m_FormAction/>">
Sort by:
- <select name="<inp2:p_CombinedSortingDropDownName/>">
+ <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>&nbsp;&nbsp;
- Per Page:
- <select name="<inp2:{$prefix}_VarName type='PerPage'/>">
- <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="CachedRating|asc" <inp2:p_SortingSelected sorting="CachedRating|asc" selected='selected="selected"'/>>Rating</option>
+ </select>&nbsp;&nbsp;
+
+ 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>&nbsp;&nbsp;
</form>
- <a href="#">Show All</a>
+
+ <a href="#" id="per-page-all">Show All</a>
</div>
+
<div class="display_switch">
- <a href="#" class="switch_thumb"></a>
+ <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') ]();
+
+ if ( $option.length ) {
+ $('#paginate').val( $option.attr('value') ).change();
+ }
+
+ return false;
+ }
+ );
+ </inp2:m_if>
+
+ $('#sorting').change(
+ function ($e) {
+ ListManager.setParam('sort_by', $(this).val().replace('|', ','), true);
+ }
+ );
+
+ $('#per-page').change(
+ function ($e) {
+ ListManager.setParam('per_page', $(this).val(), 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/pagination.elm.tpl
===================================================================
--- branches/1.0.x/elements/pagination.elm.tpl (revision 14863)
+++ branches/1.0.x/elements/pagination.elm.tpl (revision 14864)
@@ -1,41 +1,57 @@
-<inp2:m_DefaultParam prefix="" list_name=""/>
+<inp2:m_DefaultParam prefix="" list_name="" ajax="0"/>
<inp2:m_DefineElement name="prev_page">
- <a href="<inp2:PageLink/>" class="prev">&nbsp;</a>
+ <a href="<inp2:PageLink/>" page="<inp2:m_Param name='page'/>" class="prev">&nbsp;</a>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="no_prev_page">
<span class="prev">&nbsp;</span>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="next_page">
- <a href="<inp2:PageLink/>" class="next">&nbsp;</a>
+ <a href="<inp2:PageLink/>" page="<inp2:m_Param name='page'/>" class="next">&nbsp;</a>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="no_next_page">
<span class="next">&nbsp;</span>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="page_current">
- <a href="<inp2:PageLink/>" class="active"><inp2:m_param name="page"/></a>
+ <a href="<inp2:PageLink/>" page="<inp2:m_Param name='page'/>" class="active"><inp2:m_param name="page"/></a>
</inp2:m_DefineElement>
<inp2:m_DefineElement name="page_link">
- <a href="<inp2:PageLink/>"><inp2:m_param name="page"/></a>
+ <a href="<inp2:PageLink/>" page="<inp2:m_Param name='page'/>"><inp2:m_param name="page"/></a>
</inp2:m_DefineElement>
<inp2:m_if check="{$prefix}_GridInfo" type="needs_pagination" list_name="$list_name">
<div class="pagination">
<inp2:$prefix_PaginationBar
list_name="$list_name"
current_render_as="page_current"
separator_render_as="html:"
link_render_as="page_link"
prev_page_render_as="prev_page"
no_prev_page_render_as="no_prev_page"
next_page_render_as="next_page"
no_next_page_render_as="no_next_page"
/>
</div>
<div class="clear"></div>
+
+ <inp2:m_if check="m_Param" name="ajax">
+ <script type="text/javascript">
+ $(document).ready(
+ function () {
+ $('a', '.pagination').click(
+ function () {
+ ListManager.setParam('page', $(this).attr('page'), true);
+
+ return false;
+ }
+ );
+ }
+ );
+ </script>
+ </inp2:m_if>
</inp2:m_if>
\ 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 14863)
+++ branches/1.0.x/elements/content_boxes/products.elm.tpl (revision 14864)
@@ -1,17 +1,22 @@
-<inp2:m_DefaultParam prefix="p" list_name="products_in_category" type=""/>
+<inp2:m_DefaultParam prefix="" list_name="" layout="list"/>
-<inp2:{$prefix}_InitList list_name="$list_name" main_list="1"/>
-
-<inp2:m_Include template="elements/sorting.elm" list_name="$list_name" prefix="$prefix"/>
+<inp2:m_if check="m_Get" name="ajax" equals_to="yes">
+ <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>
-<div class="items border-radius">
- <ul class="display">
-
- <inp2:{$prefix}_ListProducts list_name="$list_name" render_as="product_list_element"/>
-
- </ul>
+<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_Include template="elements/pagination.elm" list_name="$list_name" prefix="$prefix"/>
-
-</div>
\ No newline at end of file
+
+ <inp2:m_Include template="elements/pagination.elm" list_name="$list_name" prefix="$prefix" ajax="1"/>
+</div>
\ No newline at end of file

Event Timeline

In-Portal CMS · In-Portal Community Pages · In-Portal Issue Tracker · In-Portal Repository Browser · Quality Assurance · In-Portal CI Server