Od wersji 2021.2 w szablonie Topaz zmodyfikowane zostały listy produktów. Dotychczas filtrując poszczególne towary, należało nacisnąć przycisk „filtruj” co przeładowywało stronę i wyświetlało przefiltrowane produkty. Obecnie filtrowanie odbywa się w sposób dynamiczny, bez odświeżania strony. Lista towarów aktualizuje się od razu po wybraniu odpowiedniego filtra. Niniejsza instrukcja objaśnia, w jaki sposób zmodyfikować szablon Topaz, by osiągnąć opisywany efekt.
Artykuł podzielony będzie na trzy sekcje.
- Pierwsza dotyczy modyfikacji we wspólnych częściach dla obu wariantów listy towarów.
- Druga dotyczy wyłącznie pierwszego widoku listy towarów (w plikach szablonu: elements/products-list/products-1.html)
- Trzecia sekcja dotyczy wyłącznie drugiego widoku (w tym samym katalogu plik products-2.html)
Modyfikacje dla obu wersji listy towarów
1. Plik base_layout.html
Otwórz plik base_layout.html w głównym katalogu z plikami szablonu. Wyszukaj linię __translations = {. Pod nią znajdują się wymienione tłumaczenia, które trafiają do funkcji js. Do ostatniego na tej liście dopisz przecinek na końcu, i pod spodem wklej:
NotifyAboutAvailability: "{{translations.NotifyAboutAvailability}}",
Com_LogInToSeePrice: "{{translations.Com_LogInToSeePrice}}",
Com_AskForPrice: "{{translations.Com_AskForPrice}}",
Com_From: "{{ translations.Com_From }}"
Nad wyszukaną wcześniej linią __translations = {, wklej poniższy kod:
__isEnterprise = '{{config.ENTERPRISE}}'; __hidePrices = '{{customer.HidePrices}}';
2. Plik product-item.html
Otwórz plik partials/product-item.html. Wyszukaj w nim linię:
<code lang=”ruby”>
</code> |
Przed aria-label, a po otwarciu tagu a, dopisz class=”product-url” .
Modyfikacje dla pierwszego wariantu
Modyfikacja HTML
Otwieramy plik elements/products-list/products-1.html.
a) Wyszukujemy linię rozpoczynającą się od:. Usuwamy w tej linii następujący fragment kodu:
{% if value.Count == 0 -%} disabled {% endif -%}
To samo wykonujemy kilka linii poniżej, w linii zaczynającej się od .
b) Wyszukujemy linię z elementem div, posiadającym klasę primary-action-button. Na liście jego klas dodajemy klasę hidden.
c) Wyszukujemy linię {% if anythingSelected -%} Kasujemy ją i odpowiadającą jej linię {% endif -%} (kilkanaście linii niżej, tuż nad {% assign productsItems = products.Products -%}.
d) Wyszukujemy div’a o id reset-filters. Na jego liście klas musimy dodać warunek {% if anythingSelected == false -%} hidden {% endif -%}
e) Wyszukujemy div’a z klasą removeFilter-js. Są dwa div’y o tej klasie. Nam chodzi o div’a znajdującego się w warunku {% if fo.PriceFrom != null and fo.PriceTo != null -%}. Na liście klas tego div’a dodajemy sliderPriceFilter.
f) Wyszukujemy linię {% if minProductNo < 1 -%}. Tuż nad nią znajduje się element span. Przerabiamy go w następujący sposób:
.
g) Wyszukujemy linię {% if valuesSize > 4 -%}. W kodzie są dwie takie linie, bierzemy pierwszą – nad nią znajduje się {% assign valuesSize = filter.Values | Size -%}. Usuwamy tę znalezioną linię i kilka kolejnych, kod do usunięcia wygląda tak:
{% if valuesSize > 4 -%}
{% assign redundantValues = filter.Values | Skip:4 -%}
{% assign visibleValues = filter.Values | Take:4 -%}
{% else -%}
{% assign visibleValues = filter.Values -%}
{% endif -%}
h) Tuż pod usuniętym kodem znajduje się tag li z klasą filter-group-wrapper. Musimy usunąć go całego, a w jego miejsce wkleić poniższy kod:
-
-
-
-
-
- {{ filter.Heading }}
-
{{ value.Text }} ({{ value.Count }})
{% if counter > 4 and counter == filterSize -%}
{% endif -%}
{% assign counter = counter | Plus: 1 -%}
{% endfor -%}{% if filterSize > 3 -%}
{{ translations.Com_More }}
{{ translations.Com_Less }}
{% endif -%} -
-
-
Modyfikacja JS
Otwórz plik js/layout1.js. Wyszukaj linię kodu o treści var productListFunctions = {. Zaznacz cały blok kodu, począwszy od tej linii po klamrę zamykającą (pojedyncza klamra, nad którą 3 linie powyżej znajduje się $(’body’).on(’mouseleave’, ’.product-item’, function() {). Usuń ten blok kodu a w jego miejsce wklej następujący:
var ajax_lock = false; $(„.product-list__filters .filter-group-wrapper .filter-group .redundant”).each(function(i, element) {// check if in hidden filter values (redundant) are checked ones // if yes they should be displayed if ($(element).children().children().children().children(„input[checked]”).length) { $(element).toggle(); $(element.parentNode).children(„.filter-more”).toggle(); $(element.parentNode).children(„.filter-less”).toggle(); } });$(„.product-list__filters .filter-group-wrapper .filter-group input[checked]”).each(function(i, element) { $(element).parent().addClass(’custom-checkbox–checked’); }); }, resetFilters: function() { $($(’.searchFilters-js’).find(’input:checked’).prop(’checked’, false)); $(’.productsList__priceSlider__minPrice-js’).val($(’.productsList__priceSlider__minPrice-js’).attr(’min’)); $(’.productsList__priceSlider__from-js’).text($(’.productsList__priceSlider__minPrice-js’).attr(’min’)); $(’.productsList__priceSlider__maxPrice-js’).val($(’.productsList__priceSlider__maxPrice-js’).attr(’max’)); $(’.productsList__priceSlider__to-js’).text($(’.productsList__priceSlider__maxPrice-js’).attr(’max’)); productListFunctions.setPriceSlider(); $(’.getSearchFilters-js’).click(); }, removeFilter: function (e) { var filterId = $(e.currentTarget).data(’filter-id’);if (filterId === 'price’) { $(’.productsList__priceSlider__minPrice-js’).val($(’.productsList__priceSlider__minPrice-js’).attr(’min’)); $(’.productsList__priceSlider__from-js’).text($(’.productsList__priceSlider__minPrice-js’).attr(’min’)); $(’.productsList__priceSlider__maxPrice-js’).val($(’.productsList__priceSlider__maxPrice-js’).attr(’max’)); $(’.productsList__priceSlider__to-js’).text($(’.productsList__priceSlider__maxPrice-js’).attr(’max’)); productListFunctions.setPriceSlider(); $(’.getSearchFilters-js’).click(); } else { $($(’.searchFilters-js’).find(’input:checked[value=”’ + filterId + '”]’)[0]).prop(„checked”, false); $(’.getSearchFilters-js’).click(); } }, reloadFilters: function () { productListFunctions.refreshPagination(); var filters; var countSelected = 0; var isSelected = []; $.get(”, {__collection: 'products.FilteringOptions.Filters’}, function(data) { filters = data.collection; }).done(function() { for(f in filters) { isSelected[f] = false; for(val in filters[f].Values) { if(filters[f].Values[val].Selected) { isSelected[f] = true; } } if(isSelected[f] == true) { countSelected++; } }$(’.filter-group’).each(function() { if($(this).find(’label’)) { var sum; for(f in filters) { sum = 0; if($(this).find(’label’).attr(’for’).toLowerCase().includes(filters[f].Field.toLowerCase())) { var labels = $(this).find(’.filter-label’); labels.each(function(label) { if(countSelected == 1 && isSelected[f] == true) { labels.eq(label).text(filters[f].Values[label].Text + ’ (’ + filters[f].Values[label].TotalCount + ’)’); } else { labels.eq(label).text(filters[f].Values[label].Text + ’ (’ + filters[f].Values[label].Count + ’)’); } }); } if(minPrice.val() !== minPrice.attr(’min’) || maxPrice.val() !== maxPrice.attr(’max’)) { ’); for(f in filters) { ’
+ filters[f].Values[val].Text + ’ ’); if($(’.removeFilter-js’).length > 0) { label.each(function() { ’); ’); ’);
|
-
Modyfikacja css
Pozostaje drobna zmiana w pliku ze stylami. Otwórz css/layout0.css. Wyszukaj .filter input[disabled]+label{opacity:0.5;cursor:not-allowed}. Usuń ze znalezionego fragmentu ;cursor:not-allowed.
To wszystkie kroki dla pierwszego wariantu listy towarów szablonie Topaz. Kolejne podpunkty dotyczą drugiego wariantu.
Modyfikacje dla drugiego wariantu
Modyfikacja HTML
a) Wyszukaj linię {% if minProductNo < 1 -%}. Nad nią znajduje się element span. Dopisz do niego id=”items-counter”.
b) Wyszukaj element li z klasą filter-group-wrapper” (bez klasy price-filter). Usuń cały blok kodu (aż do zamknięcia tagu li). Zastąp go następującym:
-
-
-
-
-
- {{ filter.Heading }}
{% assign filterSize = filter.Values | Size | Minus: 1 -%}
{% assign counter = 0 -%}{% for value in filter.Values -%}
{% if counter == 4 -%}{% endif -%} -
{{ value.Text }} ({{ value.Count }})
-
{% if counter > 4 and counter == filterSize -%}
{% endif -%}
{% assign counter = counter | Plus: 1 -%}
{% endfor -%}{% if filterSize > 3 -%}
{{ translations.Com_More }}
{{ translations.Com_Less }}
{% endif -%}
-
-
-
- c) Powyżej wklejonego bloku kodu znajduje się warunek {% if valuesSize > 4 -%}. Usuń go całego (od znalezionej linii do {% endif -%}).d) Wyszukujemy div’a z klasą primary-action-button. Na liście klas dopisujemy klasę hidden.e) Wyszukujemy div’a o id reset-filters. Na liście klas dodajemy {% if anythingSelected == false -%} hidden {% endif -%}.f) Wyszukujemy linię zawierającą kod: data-filter-id=”price”. Na liście klas tego div’a dopisujemy sliderPriceFilter.
Modyfikacja JS
Otwieramy plik js/layout1.js Wyszukujemy var productListFunctions = {. Cały znaleziony blok kodu (kończy się znakiem }, 3 linie powyzej znajduje się linia $(’body’).on(’mouseleave’, ’.product-item’, function() {) należy skasować, a w jego miejsce wkleić następujący:
var ajax_lock = false;
$(„.product-list__filters .filter-group-wrapper .filter-group .redundant”).each(function(i, element) {
var productListFunctions = {
init: function () {
productListFunctions.events();
productListFunctions.applyResetFilters();
productListFunctions.setPriceSlider();
if(localStorage.getItem('productListType') != null){
productListFunctions.changeListView();
}
productListFunctions.removeEmptyFilters();
$('.redundant').slideToggle();
},
applyResetFilters: function() {
$.pushObj = function (t, o) { var p; for (p in o) t.push({ name: p, value: o[p] }); }
// check if in hidden filter values (redundant) are checked ones
// if yes they should be displayed
if ($(element).children().children().children().children(„input[checked]”).length) {
$(element).toggle();
$(element.parentNode).children(„.filter-more”).toggle();
$(element.parentNode).children(„.filter-less”).toggle();
}
});$(„.product-list__filters .filter-group-wrapper .filter-group input[checked]”).each(function(i, element) {
$(element).parent().addClass(’custom-checkbox–checked’);
});
},
resetFilters: function() {
$($(’.searchFilters-js’).find(’input:checked’).prop(’checked’, false));
$(’.productsList__priceSlider__minPrice-js’).val($(’.productsList__priceSlider__minPrice-js’).attr(’min’));
$(’.productsList__priceSlider__from-js’).text($(’.productsList__priceSlider__minPrice-js’).attr(’min’));
$(’.productsList__priceSlider__maxPrice-js’).val($(’.productsList__priceSlider__maxPrice-js’).attr(’max’));
$(’.productsList__priceSlider__to-js’).text($(’.productsList__priceSlider__maxPrice-js’).attr(’max’));
productListFunctions.setPriceSlider();
$(’.getSearchFilters-js’).click();
},
removeFilter: function (e) {
var filterId = $(e.currentTarget).data(’filter-id’);if (filterId === 'price’) {
$(’.productsList__priceSlider__minPrice-js’).val($(’.productsList__priceSlider__minPrice-js’).attr(’min’));
$(’.productsList__priceSlider__from-js’).text($(’.productsList__priceSlider__minPrice-js’).attr(’min’));
$(’.productsList__priceSlider__maxPrice-js’).val($(’.productsList__priceSlider__maxPrice-js’).attr(’max’));
$(’.productsList__priceSlider__to-js’).text($(’.productsList__priceSlider__maxPrice-js’).attr(’max’));
productListFunctions.setPriceSlider();
$(’.getSearchFilters-js’).click();
} else {
$($(’.searchFilters-js’).find(’input:checked[value=”’ + filterId + '”]’)[0]).prop(„checked”, false);
$(’.getSearchFilters-js’).click();
}
},
reloadFilters: function () {
productListFunctions.refreshPagination();
var filters;
var countSelected = 0;
var isSelected = [];
$.get(”, {__collection: 'products.FilteringOptions.Filters’}, function(data) { filters = data.collection; }).done(function() {
for(f in filters) {
isSelected[f] = false;
for(val in filters[f].Values) {
if(filters[f].Values[val].Selected) {
isSelected[f] = true;
}
}
if(isSelected[f] == true) {
countSelected++;
}
}$(’.filter-group’).each(function() {
if($(this).find(’label’)) {
var sum;
for(f in filters) {
sum = 0;
if($(this).find(’label’).attr(’for’).toLowerCase().includes(filters[f].Field.toLowerCase())) {
var labels = $(this).find(’.filter-label’);
labels.each(function(label) {
if(countSelected == 1 && isSelected[f] == true) {
labels.eq(label).text(filters[f].Values[label].Text + ’ (’ + filters[f].Values[label].TotalCount + ’)’);
} else {
labels.eq(label).text(filters[f].Values[label].Text + ’ (’ + filters[f].Values[label].Count + ’)’);
}
});}
}
}
});
$(’.removeFilter-js’).remove();
var minPrice = $(’.productsList__priceSlider__minPrice-js’);
var maxPrice = $(’.productsList__priceSlider__maxPrice-js’);if(minPrice.val() !== minPrice.attr(’min’) || maxPrice.val() !== maxPrice.attr(’max’)) {
$(’.selectedFilters-js’).append(’’);
}for(f in filters) {
for(val in filters[f].Values) {
if(filters[f].Values[val].Selected == true) {
$(’.selectedFilters-js’).append(’’
+ filters[f].Values[val].Text + ’’);
}
}
}if($(’.removeFilter-js’).length > 0) {
$(’#reset-filters’).removeClass(’hidden’);
} else {
$(’#reset-filters’).addClass(’hidden’);
}
});
setTimeout(function() {
productListFunctions.removeEmptyFilters();
},1000);
},
removeEmptyFilters:function() {
$(’.filter-group’).each(function() {
var label = $(this).find(’.filter-label’);label.each(function() {
var number = $(this).text().substring(
$(this).text().lastIndexOf(„(„)+1,
$(this).text().lastIndexOf(„)”)
);
var filterInput = $(this).parent().parent().find(’.filter-input’);
if(number == 0 && filterInput.prop(’checked’) == false) {
filterInput.attr(’disabled’, 'disabled’);
} else {
filterInput.removeAttr(’disabled’);
}
});
});
},
refreshPagination: function() {
var URLstring = window.location.origin + window.location.pathname
$.get(”, {__collection: 'products’}, function(result) {
var pagination = result.collection;
var pageCount = pagination.PageCount;
var totalItems = pagination.TotalItems;
var selectedSorting = pagination.SelectedSorting;
if(pageCount > 1) {
if($(’.product-list__grid-wrapper’).children(’.product-list__pagination’).length < 1) {
$(’.product-list__grid-wrapper’).append(’’);
$(’.product-list__pagination’).append(’’);
} else {
$(’.product-list__pagination > *’).remove();
$(’.product-list__pagination’).append(’’);
}
$(’.pagination’).append(’- ’);
$(’.pagination’).append(’ - 1
- ’);
for(let i=2;i<=pageCount;i++) {
$(’.pagination’).append(’ - ’ + i + ’
- ’);
if (i==7) break;
}
$(’.pagination’).append(’ - ’);
} else {
$(’.product-list__pagination > *’).remove();
}
if(totalItems > 12) {
var items = 12;
} else {
var items = totalItems;
}
$(’#items-counter’).text(’1 – ’ + items + ’ ’ + __translations.Com_From + ’ ’ + totalItems);
});
},
getSearchFilters: function() {
var minPrice = $(’.productsList__priceSlider__minPrice-js’);
var maxPrice = $(’.productsList__priceSlider__maxPrice-js’);if(minPrice.val() == minPrice.attr(’min’)) {
minPrice.prop(’disabled’, true);
} else {
minPrice.prop(’disabled’, false);
}if(maxPrice.val() == maxPrice.attr(’max’)) {
maxPrice.prop(’disabled’, true);
} else {
maxPrice.prop(’disabled’, false);
}var d = $(’.product-list__filters .filter-group-wrapper input’).serializeArray();
$.pushObj(d, { __action: 'get/SearchFilters’ });return $.ajax({
url: window.location.href,
method: „GET”,
action: 'get/SearchFilters’,
data: d,
template: 'elements/products-list/products-1.html’,
success: function(data) {
window.history.replaceState(”, ”, data.action.Redirect302);
}
});
},
resetProductList: function() {
productListFunctions.applyResetFilters();
$(’.product-item’).remove();
$.get(”, {__collection:’products.Products’}, function(res) {
for(let i=0;i<res.collection.length;i++) {
$.get(”, { __template: 'partials/product-item.html’}, function (data) {
$.when($(’.product-list__grid’).append(data.template)).done(function(){
var product = res.collection[i];
var productContainer = $(’.product-item’).eq(i);
var noProductInStock;productContainer.find(’.product-item__description h2 p’).text(product.NameNoHtml);
productContainer.find(’.shortDescription’).text(product.ShortDescription);
productContainer.find(’.product-url’).attr(’href’, product.Url);for(let j=0; j<2; j++) {
if(product.Flags[j]) {
productContainer.find(’.product-flags’).append(’’ + product.Flags[j].Text + ’’);
}
}if (product.Images != null && product.Images[0] != null && product.Images[0].Id != -1) {
productContainer.find(’.product-item__image’).removeClass(’product-item__noImage’).html(”);
productContainer.find(’.product-item__image’).append(’’);
}if (product.StockLevel != null && product.StockLevel.QuantityControl == true && product.StockLevel.Value == 0) {
noProductInStock = true;
} else {
noProductInStock = false;
}if(product.Availability.Status == 3 || noProductInStock == true || (product.StockLevel != null && product.StockLevel.Control == true) && (product.StockLevel != null && product.StockLevel.Value == 0)) {
productContainer.find(’.price’).text(__translations.NotifyAboutAvailability);
} else if (__hidePrices == false && product.Price >= 0 && product.Availability.Status == 0 || product.Availability.Status == 1 || product.Availability.Status == 2) {
if (product.PreviousPrice > product.Price) {
productContainer.find(’.product-item__description’).append(”);
productContainer.find(’.red-price’).text(product.Price.toFixed(2).replace(’.’, ’,’) + ’ ’ + __curr);
productContainer.find(’.product-item__description’).append(”);
productContainer.find(’.old-price’).text(product.PreviousPrice.toFixed(2).replace(’.’, ’,’) + ’ ’ + __curr);
productContainer.find(’.price’).remove();
} else if (product.RegularPrice > product.Price && __isEnterprise) {
productContainer.find(’.product-item__description’).append(”);
productContainer.find(’.red-price’).text(product.Price.toFixed(2).replace(’.’, ’,’) + ’ ’ + __curr);
productContainer.find(’.product-item__description’).append(”);
productContainer.find(’.old-price’).text(product.RegularPrice.toFixed(2).replace(’.’, ’,’) + ’ ’ + __curr);
productContainer.find(’.price’).remove();
} else {
productContainer.find(’.price’).text(product.Price.toFixed(2).replace(’.’, ’,’) + ’ ’ + __curr);
}
} else if (__hidePrices == true) {
productContainer.find(’.price’).addClass(’.loginToSeePrice’).text(__translations.Com_LogInToSeePrice);
} else if (product.Price == null) {
productContainer.find(’.price’).text(__translations.Com_AskForPrice);
}
});
});
}
});
},
parseQuery: function(qstr) {
var query = {}, a, i, b;
if (qstr.length <= 1) return {};
a = qstr.substr(1).split(’&’);
for (i = 0; i < a.length; i++) { b = a[i].split(’=’); query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || ”); } return query; }, setPriceSlider: function() { if ($(’.productsList__priceSlider-js’).length > 0 && $(’.productsList__priceSlider-js’).not(’.ui-slider’)) {
var minValue = $(’.productsList__priceSlider__minPrice-js’).val();
var maxValue = $(’.productsList__priceSlider__maxPrice-js’).val();
var minRange = $(’.productsList__priceSlider__minPrice-js’).attr(’min’);
var maxRange = $(’.productsList__priceSlider__maxPrice-js’).attr(’max’);
$(’.productsList__priceSlider-js’).slider({
range: true,
min: parseInt(minRange , 10),
max: parseInt(maxRange, 10),
values: [minValue, maxValue],
change: function(event) { setTimeout(function() {$(’.getSearchFilters-js’).click();}, 1000);},
slide: function (event, ui) {
$(’.productsList__priceSlider__minPrice-js’).val(ui.values[0]);
$(’.productsList__priceSlider__maxPrice-js’).val(ui.values[1]);
$(’.productsList__priceSlider__from-js’).text(ui.values[0]);
$(’.productsList__priceSlider__to-js’).text(ui.values[1]);
}
});
}
},
changeListView: function(type) {
var listType = type !== undefined ? type : localStorage.getItem(’productListType’) === 'grid’ ? 'grid’ : 'list’;
var changeListViewBtn = $(’.changeListView-js’);
var icon = changeListViewBtn.find(’use’)[0];
var productsList = $(’.product-list__grid-js’);
var changeViewBtn = document.querySelector(’.changeListView-js’);if (listType === 'grid’) {
changeViewBtn.dataset.type = 'list’;
localStorage.setItem(’productListType’, 'grid’);
$(icon).attr(’xlink:href’, 'css/img/icons-sprite.svg#th-list-’ + __iconStyle);
productsList.addClass(’product-list__gridView-js’).removeClass(’product-list__listView-js’);
} else if (listType === 'list’) {
changeViewBtn.dataset.type = 'grid’;
localStorage.setItem(’productListType’, 'list’);
$(icon).attr(’xlink:href’, 'css/img/icons-sprite.svg#th-large-’ + __iconStyle);
productsList.removeClass(’product-list__gridView-js’).addClass(’product-list__listView-js’);
}
},
putSecondImage: function(e) {
if($(„#secondImageOnList”).attr(„value”) == „yes”) {
setTimeout(function(){
if (window.mouseOver) {
var imgEl = e.find(„img”);
if(imgEl.length == 1) {
var url = e.find(’a[aria-label=”productUrl”]’).attr(„href”);
$.get(url, {__collection:’product-details.Product.Images’}, function(a) {
var imgs = a.collection;
if(imgs.length > 1) {
if(imgs[1].Id != 0){
e.find(„.product-item__image”).append(’’);
} else if (imgs[1].ExternalUrl){
e.find(„.product-item__image”).append(’’);
}
e.addClass(„hover”);
}
});
}
}}, 250);
}
},
events: function() {
$(’body’).on(’click’, ’.product-list__filters .filter’, function (e) {
if (ajax_lock || $(this).find(’*’).prop(’disabled’) == true) {
e.preventDefault();
e.stopPropagation();
return;
} else {
$(’.filter, .productsList__priceSlider-js > *’).addClass(’disabled’);
e.preventDefault();
e.stopPropagation();
if($(this).find(’input’).prop(’checked’) == true) {
$(this).find(’input’).prop(’checked’, false);
} else {
$(this).find(’input’).prop(’checked’, true);
}
ajax_lock = true;
$(’.product-item’).remove();
$.when(productListFunctions.getSearchFilters()).done(function() {
productListFunctions.resetProductList();
setTimeout(function() {
ajax_lock = false;
$.when(productListFunctions.reloadFilters()).done(function() {
$(’.filter, .productsList__priceSlider-js > *’).removeClass(’disabled’);
});
}, 2000);
});
}
});$(’body’).on(’click’, ’.product-list__filters .getSearchFilters-js’, function (e) {
if (ajax_lock) {
e.preventDefault();
e.stopPropagation();
return;
} else {
$(’.filter, .productsList__priceSlider-js > *’).addClass(’disabled’);
e.preventDefault();
e.stopPropagation();
ajax_lock = true;
$(’.product-item’).remove();
$.when(productListFunctions.getSearchFilters()).done(function() {
setTimeout(function() {
productListFunctions.resetProductList();
}, 2000);
setTimeout(function() {
ajax_lock = false;
$.when(productListFunctions.reloadFilters()).done(function() {
$(’.filter, .productsList__priceSlider-js > *’).removeClass(’disabled’);
});
}, 2000);
})
}
});$(„.display-details__sorting”).off(„click”).on(„click”, function(e) {
var dropdownDiv = $(e.currentTarget).children(„.dropdown-menu”);
if (dropdownDiv)
dropdownDiv.stop().slideToggle(200);
});$(„.product-list__filters-trigger”).on(„click”, function() {
var openFiltersBtn = $(„.product-list__filters-trigger span:first-child”);
$(„.product-list__filters”).stop().slideToggle(200);
if (openFiltersBtn.text() === __translations.ShowFilters) {
openFiltersBtn.text(__translations.HideFilters);
} else {
openFiltersBtn.text(__translations.ShowFilters);
}
});$(’.display-details__sorting .dropdown-menu__links li’).on(’click’, function (e) {
var sortItem = $(this);
var qs = productListFunctions.parseQuery(location.search);
if (qs.pageId) delete qs.pageId;
$.get(”, { __collection: 'products.SortingQueryGET’ }, function (res) {
qs[res.collection] = sortItem.data(’value’);
location.href = (location.pathname + ’?’ + $.param(qs));
});
});$(„.product-list__filters .filter-group-wrapper .filter-toggle”).on(’click’, function(e) {
var redundantSwitches = $(e.target.parentNode).children(’.redundant’);
var buttonToShowName = e.target.classList.contains(’filter-more’) ? ’.filter-less’ : ’.filter-more’;$(e.target).toggle();
$(e.target.parentNode).children(buttonToShowName).toggle();
redundantSwitches.stop().slideToggle(„fast”);
});$(’.product-list’).on(’click’, '#reset-filters’, function() {
productListFunctions.resetFilters();
});$(’.product-list’).on(’click’, ’.removeFilter-js’, function(e) {
productListFunctions.removeFilter(e);
});$(’.product-list’).on(’click’, ’.changeListView-js’, function(e) {
productListFunctions.changeListView(e.currentTarget.dataset.type);
});$(’body’).on(’mouseenter’, ’.product-item’, function() {
var e = $(this)
window.mouseOver = true;
productListFunctions.putSecondImage(e);
});$(’body’).on(’mouseleave’, ’.product-item’, function() {
window.mouseOver = false;
});$(document).on(’click’, function (e) {
if($(e.target).closest(’.display-details__sorting’).length === 0 && $(e.target).closest($(’.display-details__sorting’).children()).length === 0
&& $(e.target).closest(’.dropdown-menu’).length === 0 && $(e.target).closest($(’.dropdown-menu’).children()).length === 0) {
if($(’.dropdown-menu’).css(’display’) != 'none’) {
$(’.dropdown-menu’).slideToggle(200);
}
}
});
}
};
-
Modyfikacja css
Pozostaje drobna zmiana w pliku ze stylami. Otwórz css/layout0.css. Wyszukaj .filter input[disabled]+label{opacity:0.5;cursor:not-allowed}. Usuń ze znalezionego fragmentu ;cursor:not-allowed.
To wszystkie kroki dla drugiego wariantu listy towarów szablonie Topaz.