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ę:
|
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
-
-
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; 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] }); }$(„.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 + ’)’); } }); } } } }); $(’.removeFilter-js’).remove(); var minPrice = $(’.productsList__priceSlider__minPrice-js’); var maxPrice = $(’.productsList__priceSlider__maxPrice-js’); if(minPrice.val() !== minPrice.attr(’min’) |
-
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; 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] }); }$(„.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 + ’)’); } }); } } } }); $(’.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(’ ’ + minPrice.val() + ’ – ’ + maxPrice.val() + ’ ’ + __curr + ’ ’); } 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.