Skip to content
This repository has been archived by the owner on Feb 23, 2021. It is now read-only.

[*] FO: Refactor product list sort bar and pager bar #157

Merged
merged 18 commits into from
Mar 16, 2016
Merged

[*] FO: Refactor product list sort bar and pager bar #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
110334a
[*] FO: Refactor product list layout switcher into button group
Mar 15, 2016
26b0037
[*] JS: Add active class to layout switcher button
Mar 15, 2016
b6adacc
[*] HTML: Add .display class to list switcher for compat
Mar 15, 2016
4375794
// Formatting
Mar 15, 2016
53a15bd
[*] FO: Refactor order by and nb per page form elements into form-group
Mar 15, 2016
b00a69d
[*] FO: Add .form-inline to .sortPagiBar with compat JS
Mar 15, 2016
68e79c2
[*] FO: Float nb per page and order by to right in sort form
Mar 15, 2016
0d02f2b
[*] FO: Refactor pagination bar
Mar 15, 2016
6177273
[*] FO: Add .form-inline to bottom and top pagination
Mar 15, 2016
082a65f
[*] CSS: Fix pagination and order by bars margins
Mar 15, 2016
f153248
[*] FO: Add .form-inline JS to bottom and top pagination
Mar 15, 2016
a4943b4
[*] FO: Make input="n" hidden type
Mar 16, 2016
fd1999c
[*] FO: Fix showall selector
Mar 16, 2016
c268fe1
[-] FO: Fix broken sortbar selector in blocklayered
Mar 16, 2016
8ebbd5e
[-] JS: Fix .showall JS function
Mar 16, 2016
f634e76
[*] JS, HTML: Change opacity of sort bar while reloading blocklayered…
Mar 16, 2016
227496b
[*] HTML: Put category page elements into sections
Mar 16, 2016
adcba52
[*] JS: Use loading overlay to covert category product list
Mar 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions themes/community-theme-16/best-sales.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
72 changes: 39 additions & 33 deletions themes/community-theme-16/category.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions themes/community-theme-16/js/autoload/20-compatibility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions themes/community-theme-16/js/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
70 changes: 25 additions & 45 deletions themes/community-theme-16/js/modules/blocklayered/blocklayered.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {

Expand All @@ -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');
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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();
}
}

Expand All @@ -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',
Expand Down Expand Up @@ -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');
}
});

Expand Down
25 changes: 6 additions & 19 deletions themes/community-theme-16/manufacturer-list.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions themes/community-theme-16/manufacturer.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading