Merge pull request #157 from gskema/dev

[*] FO: Refactor product list sort bar and pager bar
PrestaShop · Mar 16, 2016 · 269e848 · 269e848
2 parents 066375c + adcba52
commit 269e848
Show file tree

Hide file tree

Showing 19 changed files with 282 additions and 371 deletions.
diff --git a/themes/community-theme-16/best-sales.tpl b/themes/community-theme-16/best-sales.tpl
@@ -4,11 +4,11 @@
 
 {if $products}
   <div class="content_sortPagiBar">
-    <div class="sortPagiBar clearfix">
+    <div class="form-inline sortPagiBar clearfix">
       {include file="./product-sort.tpl"}
       {include file="./nbr-product-page.tpl"}
     </div>
-    <div class="top-pagination-content clearfix">
+    <div class="top-pagination-content form-inline clearfix">
       {include file="./product-compare.tpl"}
       {include file="$tpl_dir./pagination.tpl"}
     </div>
@@ -17,7 +17,7 @@
   {include file="./product-list.tpl" products=$products}
 
   <div class="content_sortPagiBar">
-    <div class="bottom-pagination-content clearfix">
+    <div class="bottom-pagination-content form-inline clearfix">
       {include file="./product-compare.tpl"}
       {include file="./pagination.tpl" paginationId='bottom'}
     </div>

diff --git a/themes/community-theme-16/category.tpl b/themes/community-theme-16/category.tpl
@@ -7,25 +7,27 @@
     <div class="alert alert-warning">{l s='This category is currently unavailable.'}</div>
   {else}
 
-    {if $category->id_image}
-      <div id="category-banner">
-        <img class="img-responsive" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}">
-      </div>
-    {/if}
+    <section id="category-info">
+      {if $category->id_image}
+        <div id="category-banner">
+          <img class="img-responsive" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}">
+        </div>
+      {/if}
 
-    <h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}">
+      <h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}">
       <span class="cat-name">
         {$category->name|escape:'html':'UTF-8'}
         {if isset($categoryNameComplement)}&nbsp;{$categoryNameComplement|escape:'html':'UTF-8'}{/if}
       </span>
-    </h1>
+      </h1>
 
-    {if !empty($category->description)}
-      <div id="category-description" class="rte">{$category->description}</div>
-    {/if}
+      {if !empty($category->description)}
+        <div id="category-description" class="rte">{$category->description}</div>
+      {/if}
+    </section>
 
     {if !empty($subcategories) && $display_subcategories}
-      <div id="subcategories">
+      <section id="category-subcategories">
         <h2 class="page-heading">{l s='Subcategories'}</h2>
         <ul class="list-grid row">
           {foreach from=$subcategories item=subcategory}
@@ -50,33 +52,37 @@
             </li>
           {/foreach}
         </ul>
-      </div>
+      </section>
     {/if}
 
     {if !empty($products)}
-      <h2 class="page-heading">
-        {l s='Products'}
-        <div class="pull-right">
-          {include file="$tpl_dir./category-count.tpl"}
-        </div>
-      </h2>
-      <div class="content_sortPagiBar clearfix">
-        <div class="sortPagiBar clearfix">
-          {include file="./product-sort.tpl"}
-          {include file="./nbr-product-page.tpl"}
-        </div>
-        <div class="top-pagination-content clearfix">
-          {include file="./product-compare.tpl"}
-          {include file="$tpl_dir./pagination.tpl"}
+      <section id="category-products">
+        <h2 class="page-heading">
+          {l s='Products'}
+          <div class="pull-right">
+            {include file="$tpl_dir./category-count.tpl"}
+          </div>
+        </h2>
+
+        <div class="content_sortPagiBar clearfix">
+          <div class="form-inline sortPagiBar clearfix">
+            {include file="./product-sort.tpl"}
+            {include file="./nbr-product-page.tpl"}
+          </div>
+          <div class="top-pagination-content form-inline clearfix">
+            {include file="./product-compare.tpl"}
+            {include file="$tpl_dir./pagination.tpl"}
+          </div>
         </div>
-      </div>
-      {include file="./product-list.tpl" products=$products}
-      <div class="content_sortPagiBar">
-        <div class="bottom-pagination-content clearfix">
-          {include file="./product-compare.tpl" paginationId='bottom'}
-          {include file="./pagination.tpl" paginationId='bottom'}
+        {include file="./product-list.tpl" products=$products}
+
+        <div class="content_sortPagiBar">
+          <div class="bottom-pagination-content form-inline clearfix">
+            {include file="./product-compare.tpl" paginationId='bottom'}
+            {include file="./pagination.tpl" paginationId='bottom'}
+          </div>
         </div>
-      </div>
+      </section>
     {/if}
 
   {/if}

diff --git a/themes/community-theme-16/js/autoload/20-compatibility.js b/themes/community-theme-16/js/autoload/20-compatibility.js
@@ -7,6 +7,11 @@
  * theme compatibility issues with custom modules.
  */
 
+$(function() {
+  // We added .form-inline in this theme, but some modules may be using these templates and not have this class applied
+  $('.sortPagiBar, .top-pagination-content, .bottom-pagination-content').addClass('form-inline');
+});
+
 function bindUniform() {
   return true;
 }

diff --git a/themes/community-theme-16/js/global.js b/themes/community-theme-16/js/global.js
@@ -188,7 +188,7 @@ function bindGrid() {
 function display(layoutType) {
   var grid = layoutType == 'grid';
   $('.product_list').toggleClass('grid', grid).toggleClass('list', !grid);
-  $('#list').toggleClass('selected', !grid);
-  $('#grid').toggleClass('selected', grid);
+  $('#list').toggleClass('selected active', !grid);
+  $('#grid').toggleClass('selected active', grid);
   $.totalStorage('display', grid ? 'grid' : 'list');
 }
diff --git a/themes/community-theme-16/js/modules/blocklayered/blocklayered.js b/themes/community-theme-16/js/modules/blocklayered/blocklayered.js
@@ -220,11 +220,11 @@ function initLayered() {
 }
 
 function paginationButton(nbProductsIn, nbProductOut) {
-  if (typeof(current_friendly_url) === 'undefined')
+  if (typeof(current_friendly_url) == 'undefined') {
     current_friendly_url = '#';
+  }
 
-  $('div.pagination a').not(':hidden').each(function() {
-
+  $('.content_sortPagiBar .pagination a').each(function() {
     var page;
     if ($(this).attr('href').search(/(\?|&)p=/) == -1) {
       page = 1;
@@ -236,27 +236,6 @@ function paginationButton(nbProductsIn, nbProductOut) {
     $(this).attr('href', location + current_friendly_url.replace(/\/page-(\d+)/, '') + '/page-' + page);
   });
 
-  $('div.pagination li').not('.current, .disabled').each(function() {
-    var nbPage = 0;
-    if ($(this).hasClass('pagination_next')) {
-      nbPage = parseInt($('div.pagination li.current').children().children().html()) + 1;
-    } else if ($(this).hasClass('pagination_previous')) {
-      nbPage = parseInt($('div.pagination li.current').children().children().html()) - 1;
-    }
-
-    $(this).children().children().on('click', function(e) {
-      e.preventDefault();
-      if (nbPage == 0) {
-        p = parseInt($(this).html()) + parseInt(nbPage);
-      } else {
-        p = nbPage;
-      }
-      p = '&p=' + p;
-      reloadContent(p);
-      nbPage = 0;
-    });
-  });
-
   //product count refresh
   if (nbProductsIn != false) {
 
@@ -266,7 +245,8 @@ function paginationButton(nbProductsIn, nbProductOut) {
       // add variables
 
       var productCountRow = $productCount.html();
-      var nbPage = parseInt($('div.pagination li.current').children().children().html());
+      var currentPageText = $('.content_sortPagiBar .pagination li.current').first().text();
+      var nbPage = parseInt(currentPageText) || 1;
       var nb_products = nbProductsIn;
       var nbPerPage;
       var $option = $('#nb_item').find('option:selected');
@@ -361,11 +341,12 @@ function stopAjaxQuery() {
 function reloadContent(params_plus) {
 
   var $form = $('#layered_form');
+  var $categoryProducts = $('#category-products');
 
   stopAjaxQuery();
 
   $form.addClass('loading-overlay');
-  $('.product_list').css('opacity', '0.5');
+  $categoryProducts.addClass('loading-overlay');
 
   var data = $form.serialize();
   $('.layered_slider').each(function() {
@@ -413,7 +394,7 @@ function reloadContent(params_plus) {
     if (params_plus) {
       data += '&n=' + $selectN.val();
     } else {
-      data += '&n=' + $('div.pagination form.showall').find('input[name=n]').val();
+      data += '&n=' + $('.showall').find('input[name="n"]').val();
     }
   }
 
@@ -426,11 +407,12 @@ function reloadContent(params_plus) {
   // Get nb items per page
   var n = '';
   if (params_plus) {
-    $('div.pagination select[name=n]').children().each(function(it, option) {
-      if (option.selected)
-        n = '&n=' + option.value;
-    });
+    var $opt = $('.js-per-page select[name=n]').find('option:selected');
+    if ($opt.length) {
+      n = '&n=' + $opt.val();
+    }
   }
+
   ajaxQuery = $.ajax({
     type: 'GET',
     url: baseDir + 'modules/blocklayered/blocklayered-ajax.php',
@@ -468,48 +450,46 @@ function reloadContent(params_plus) {
       if (result.productList) {
         $('.product_list').replaceWith(utf8_decode(result.productList));
       } else {
-        $('.product_list').html('').css('opacity', '1');
-        $.browser.msie && $('.product_list').css('filter', '');
+        $('.product_list').html('');
       }
 
+      $categoryProducts.removeClass('loading-overlay');
       $form.removeClass('loading-overlay');
 
       if (result.pagination.search(/[^\s]/) >= 0) {
         var pagination = $('<div/>').html(result.pagination);
         var pagination_bottom = $('<div/>').html(result.pagination_bottom);
 
         if ($('<div/>').html(pagination).find('#pagination').length) {
-          $('#pagination').show();
-          $('#pagination').replaceWith(pagination.find('#pagination'));
+          $('#pagination').show().replaceWith(pagination.find('#pagination'));
         } else {
           $('#pagination').hide();
         }
 
         if ($('<div/>').html(pagination_bottom).find('#pagination_bottom').length) {
-          $('#pagination_bottom').show();
-          $('#pagination_bottom').replaceWith(pagination_bottom.find('#pagination_bottom'));
+          $('#pagination_bottom').show().replaceWith(pagination_bottom.find('#pagination_bottom'));
         } else {
           $('#pagination_bottom').hide();
         }
 
       } else {
-        $('#pagination').hide();
-        $('#pagination_bottom').hide();
+        $('#pagination, #pagination_bottom').hide();
       }
 
       paginationButton(result.nbRenderedProducts, result.nbAskedProducts);
       ajaxLoaderOn = 0;
 
       // On submitting nb items form, reload with the good nb of items
-      $('div.pagination form').on('submit', function(e) {
+      $('.showall form').on('submit', function(e) {
         e.preventDefault();
-        var val = $('div.pagination select[name=n]').val();
+        var num = $(this).find('input[name="n"]').val();
 
-        $('div.pagination select[name=n]').children().each(function(it, option) {
-          if (option.value == val) {
-            $(option).attr('selected', true);
+        $('.content_sortPagiBar select[name="n"] option').each(function() {
+          var $opt = $(this);
+          if ($opt.val() == num) {
+            $opt.attr('selected', true);
           } else {
-            $(option).removeAttr('selected');
+            $opt.removeAttr('selected');
           }
         });
 

diff --git a/themes/community-theme-16/manufacturer-list.tpl b/themes/community-theme-16/manufacturer-list.tpl
@@ -20,31 +20,18 @@
   {include file="$tpl_dir./errors.tpl"}
 {else}
   {if $nbManufacturers > 0}
+
     <div class="content_sortPagiBar">
-      <div class="sortPagiBar clearfix">
+      <div class="form-inline sortPagiBar clearfix">
         {if isset($manufacturer) && isset($manufacturer.nb_products) && $manufacturer.nb_products > 0}
-          <ul class="display hidden-xs">
-            <li class="display-title">
-              {l s='View:'}
-            </li>
-            <li id="grid">
-              <a rel="nofollow" href="#" title="{l s='Grid'}">
-                <i class="icon icon-th-large"></i> {l s='Grid'}
-              </a>
-            </li>
-            <li id="list">
-              <a rel="nofollow" href="#" title="{l s='List'}">
-                <i class="icon icon-th-list"></i> {l s='List'}
-              </a>
-            </li>
-          </ul>
+          {include file='./product-list-switcher.tpl'}
         {/if}
         {include file="./nbr-product-page.tpl"}
       </div>
-      <div class="top-pagination-content clearfix bottom-line">
+      <div class="top-pagination-content form-inline clearfix">
         {include file="$tpl_dir./pagination.tpl" no_follow=1}
       </div>
-    </div> <!-- .content_sortPagiBar -->
+    </div>
 
     <ul id="manufacturers_list" class="list row">
       {foreach from=$manufacturers item=manufacturer name=manufacturers}
@@ -117,7 +104,7 @@
       {/foreach}
     </ul>
     <div class="content_sortPagiBar">
-      <div class="bottom-pagination-content clearfix">
+      <div class="bottom-pagination-content form-inline clearfix">
         {include file="$tpl_dir./pagination.tpl" no_follow=1 paginationId='bottom'}
       </div>
     </div>

diff --git a/themes/community-theme-16/manufacturer.tpl b/themes/community-theme-16/manufacturer.tpl
@@ -28,11 +28,11 @@
 
   {if $products}
     <div class="content_sortPagiBar">
-      <div class="sortPagiBar clearfix">
+      <div class="form-inline sortPagiBar clearfix">
         {include file="./product-sort.tpl"}
         {include file="./nbr-product-page.tpl"}
       </div>
-      <div class="top-pagination-content clearfix">
+      <div class="top-pagination-content form-inline clearfix">
         {include file="./product-compare.tpl"}
         {include file="$tpl_dir./pagination.tpl" no_follow=1}
       </div>
@@ -41,7 +41,7 @@
     {include file="./product-list.tpl" products=$products}
 
     <div class="content_sortPagiBar">
-      <div class="bottom-pagination-content clearfix">
+      <div class="bottom-pagination-content form-inline clearfix">
         {include file="./product-compare.tpl"}
         {include file="./pagination.tpl" no_follow=1 paginationId='bottom'}
       </div>