Wyszukiwarka zaawansowana w szablonie Topaz

Wyszukiwarka zaawansowana w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał wyszukiwarkę zaawansowaną.

Wskazówka

Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!

Wskazówka

Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu – _ ’ „ itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

Pierwszym krokiem jest dodanie obiektu wykorzystywanego w wyszukiwarce. Aby to zrobić, otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. Kliknij w prawym górnym rogu na ikonkę z trzema kwadratami i z rozwiniętego menu wybierz opcję Edytuj ustawienia zaawansowane. Przejdź do zakładki Obiekty. Kliknij przycisk Dodaj. W polu Typ wybierz Menu producentów i marek a w polu Nazwa podaj manufacturer-brand, po czym kliknij Dodaj. W ten sposób utworzony został obiekt, dzięki któremu wyszukiwarka będzie mogła wybierać spośród producentów i marek.

Następnie należy przypisać obiekt do wyszukiwarki. Podobnie jak przed chwilą, otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane. Wybierz zakładkę Strony. Znajdź stronę Wyszukiwanie zaawansowane (18). W tym samym wierszu, w kolumnie z nazwą pliku, wpisz advanced-search.html, a następnie zapisz. Kliknij na pole z napisem Wyszukiwanie zaawansowane (18). Pojawi się lista dostępnych obiektów. Kliknij kwadrat przy utworzonym wcześniej obiekcie manufacturer-brand, by pokazał się znak wyboru (tzw. „ptaszek”). A następnie zapisz.

Kolejnym krokiem jest utworzenie nowego pliku o nazwie advanced-search.html w głównym katalogu z plikami Twojego szablonu Topaz. Treść tego pliku powinna wyglądać następująco:
{% extends '_layout.html' -%}

{% block pageContent -%}
{% include 'elements/advanced-search/advanced-search.html' -%}
{% endblock -%}

Następnie, przejdź do katalogu elements. Utwórz w nim nowy katalog pod nazwą advanced-search. Przejdź do nowo utworzonego katalogu, a następnie utwórz w nim plik o nazwie advanced-search.html. Do nowo utworzonego pliku wklej poniższy kod:
{% include 'partials/common/breadcrumbs.html' -%}
{% assign filters = products.FilteringOptions.Filters %}

{% include 'partials/newsletter-global.html’ -%}

Wskazówka

W przypadku problemów z narzędziem Liquid Sync, pliki należy dodać bezpośrednio przez Panel Administracyjny, w zakładce Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML.

Kolejny krok to dodanie odpowiedniej treści do plików .css, odpowiedzialnych za wygląd zaawansowanej wyszukiwarki towarów. W tym celu wróć do głównego katalogu z plikami Topaza, a następnie otwórz katalog css. Do znajdującego się w nim pliku layout.css Wklej na samym dole następujący, już zminifikowany kod:
*{line-height:1.5em}.advancedSearch{max-width:1100px;height:auto;margin:40px auto;user-select:none}.advancedSearch select{-webkit-appearance:none;-moz-appearance:none;text-indent:1px;text-overflow:""}.advancedSearch input[type="checkbox"]{visibility:hidden;width:0;height:0}.advancedSearch .form__invalid-input{visibility:hidden}.advancedSearch .title{font-size:17px;font-weight:600;color:{{settings.primaryFontColor}};margin-bottom:20px;text-transform:uppercase}.advancedSearch .search{width:100%;height:40px;display:flex}.advancedSearch .search .searchInput{width:50%;height:42px;padding-left:20px;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};border-right:none}.advancedSearch .search .searchCategory{width:30%;height:42px;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};border-right:none;padding:0 10px;background-color:{{settings.primaryPageBgColor}};-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:5px;background-position-x:97%;transition:200ms}.advancedSearch .search .searchCategory option:checked{color:#000000 !important}.advancedSearch .search .searchCategory:hover{background-image:url("https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/caret-up.svg") !important}.advancedSearch .search .searchButton{width:20%;height:22px;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};text-align:center;text-decoration:none;text-transform:uppercase;padding:11px 0 7px;font-size:14px;cursor:pointer;transition:200ms}.advancedSearch .search .searchButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};transition:200ms}.advancedSearch .searchType{padding:30px 0 30px 15px;border-bottom:1px solid {{settings.borderColor}};display:block;flex-direction:row;width:calc(100% - 15px);list-style:none}.advancedSearch .searchType li{display:inline}.advancedSearch .searchType li>*{cursor:pointer}.advancedSearch .searchType li input{visibility:hidden;display:none}.advancedSearch .searchType li .option{font-size:14px;color:{{settings.primaryFontColor}};border-radius:50%;background-color:{{settings.primaryPageBgColor}};border:80% solid {{settings.primaryFontColor}}}.advancedSearch .searchType li label{margin:0 30px 0 5px;font-size:14px}.advancedSearch .searchType li label:before{height:15px;width:16px;margin-right:10px;border-radius:50%;border:1px solid #0000005e;content:"";display:inline-block}.advancedSearch .searchType li.selected label:before{border-color:#000000;-webkit-box-shadow:inset 0 0 0 5px #000000;-moz-box-shadow:inset 0 0 0 5px #000000;box-shadow:inset 0 0 0 5px #000000}.advancedSearch .propertyContainer{width:100%;padding:30px 0;border-bottom:1px solid {{settings.borderColor}}}.advancedSearch .propertyContainer .checkboxContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.advancedSearch .propertyContainer .checkboxContainer span{flex:0 1 25%;margin:10px 0;font-size:14px;color:{{settings.primaryFontColor}}}.advancedSearch .propertyContainer .checkboxContainer span .checkIcon{position:relative;top:-14px;left:-25px;fill:{{settings.checkColor}}}.advancedSearch .propertyContainer .checkboxContainer span .checkIcon svg{width:12px;height:12px}.advancedSearch .propertyContainer .checkboxContainer span label{margin-left:10px;display:inline-flex;height:20px}.advancedSearch .propertyContainer .checkboxContainer span input:checked+label:before{text-align:center;background-color:{{settings.checkActiveBgColor}};overflow:hidden;border:solid 1px {{settings.checkActiveBgColor}}}.advancedSearch .propertyContainer .checkboxContainer span input+label:before{content:" ";display:inline-block;cursor:pointer;position:relative;width:15px;height:15px;border-radius:4px;background-color:transparent;color:{{settings.borderColor}};border:1px solid {{settings.borderColor}};transition:all 200ms ease;margin-right:10px}.advancedSearch .propertyContainer .checkboxContainer span:hover,.advancedSearch .propertyContainer .checkboxContainer input:hover,.advancedSearch .propertyContainer .checkboxContainer label:hover{cursor:pointer}.advancedSearch .propertyContainer .checkboxContainer:after{content:"";flex:1 0 25%}.advancedSearch .propertyContainer .productFeaturesContainer{display:flex;width:100%;flex-direction:row;flex-wrap:wrap}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer{width:25%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span{display:block}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span .price{width:100%;font-size:14px;margin-bottom:10px;color:{{settings.primaryFontColor}};display:block}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span input[type="number"]{height:40px;width:60%;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};margin-bottom:20px;text-align:right;padding-right:42px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span .currency{position:relative;top:0;left:-40px;width:fit-content;margin:0;color:{{settings.secondaryFontColor}};font-size:14px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures{width:75%;margin-top:15px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 33%;margin:10px 0;font-size:14px;color:{{settings.primaryFontColor}}}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span label{margin-left:10px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures:after{content:"";flex:0 1 33%}.advancedSearch .propertyContainer .productFeaturesContainer .hidePricesFeatures{width:100%}.advancedSearch .lastProperty{border:none}

Do pliku layout-m.css wklej poniższy kod:
@media only screen and (max-width: 768px){.advancedSearch{width:calc(100% - 40px);margin:0 auto}.advancedSearch input[type="checkbox"]{position:fixed}.advancedSearch .search{margin-top:20px;display:block;width:100%}.advancedSearch .search .searchInput{width:100%;display:block;border-right:1px solid {{settings.inputLabelColor}};margin-bottom:20px}.advancedSearch .search .searchCategory{width:100%;display:block;border-right:1px solid {{settings.inputLabelColor}};margin-bottom:20px}.advancedSearch .search .searchButton{display:block;width:100%}.advancedSearch .search .scrollingButton{display:block;width:100%;position:fixed;top:0;left:0;z-index:1}.advancedSearch .searchType{margin-top:110px;padding-left:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.advancedSearch .searchType li{display:inline-block;flex:50%;margin-bottom:10px}.advancedSearch .searchType li>label{margin:0}.advancedSearch .propertyContainer{margin:10px 0}.advancedSearch .propertyContainer .checkboxContainer span{flex:0 1 100%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span{flex:1 0 50%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span input[type="number"]{width:75%}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures{width:100%;display:flex;flex-direction:row;justify-content:space-between}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 100%}}

Do pliku layout-d.css wklej poniższy kod:
@media only screen and (min-width: 768px) and (max-width: 1150px){.advancedSearch{width:calc(100% - 40px);margin:0 auto}.advancedSearch .search{margin-top:20px}}@media only screen and (min-width: 768px) and (max-width: 1000px){.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 43%}}

W ten sposób w Topazie znalazł się kod odpowiedzialny za wygląd wyszukiwarki zaawansowanej.

Kolejny krok to dodanie tłumaczeń. W tym celu należy w Panelu Administratora wejść w Wygląd sklepu -> Ustawienia i wybrać zakładkę Tłumaczenia. Przycisk Dodaj pozwala na dodanie nowego tłumaczenia. Aby tłumaczenie zostało dodane, należy wprowadzić odpowiednie Id oraz frazę (Tekst). Lista Id oraz fraz do wprowadzenia:
1. AllCategories – Wszystkie kategorie
2. SearchElement – Szukaj towaru…
3. WithSequence – Wyrażenie
4. WithAllWords- Wszystkie słowa
5. WithAnyWord – Dowolne ze słów
6. WithPartOfWord – Część słowa
7. SearchIn – Szukaj w
8. EanCode – Kod EAN
9. PriceFrom – Cena od
10. PriceTo – Cena do
11. PricesDifference – Cena maksymalna musi być większa od ceny minimalnej
12. WithPhoto – Tylko ze zdjęciem
13. NewProduct – Nowość
14. Prize – Nagroda
15. ExtraQuality – Superjakość
16. ExtraPrice – Supercena
17. ProductFromNewsletter – Towar z gazetki
18. Promotion – Promocja
19. RecommendedProduct – Towar polecany
20. SellerRecomendation – Rekomendacja sprzedawcy
21. Sale – Wyprzedaż
22. BestReviewed – Najlepiej oceniany
23. Manufacturer – Producent
24. Brand – Marka

Wskazówka

<strong.Uwaga! Kopiując Id z powyższej instrukcji do Panelu Administracyjnego, upewnij się, że po danym Id nie została skopiowana żadna spacja.

Następnie należy dodać odpowiedni kod do plików js. W tym celu, w plikach Topaza, otwórz folder js a następnie plik layout0.js. Odszukaj linijkę z frazą productListFunctions.init();. Pod znalezioną linijką znajduje się linia ze znakiem }. Pod nią wklej następujący kod:
if($('body').find('.advancedSearch').index() >= 0) {
advancedSearchFunctions.init();
}

Następnie otwórz plik layout1.js znajdujący się w tym samym katalogu. Poniższy kod możesz wkleić na samym początku pliku:
var advancedSearchFunctions = {
init: function () {
this.events();
},

events: function () {
$('body').on('click', '.js-search-item', function (e) {
$(e.currentTarget).closest('.searchType').children('.selected').removeClass('selected');
$(e.currentTarget).parent().addClass('selected');
});

$('body').on('click', '.checkboxContainer > span', function (e) {
var input = $(this).children('input');
if(input.prop("checked") == true) {
input.prop( "checked", false);
} else {
input.prop("checked", true);
}
});

$('body').on('click','.search-radio', function(e) {
if ($('.search-radio[value=searchAll]').is(":checked")) {
$('.advanced-search-input').attr('name', 'searchAll');
} else if ($('.search-radio[value=searchWild]').is(":checked")) {
$('.advanced-search-input').attr('name', 'searchWild');
} else if ($('.search-radio[value=searchAny]').is(":checked")) {
$('.advanced-search-input').attr('name', 'searchAny');
} else {
$('.advanced-search-input').attr('name', 'name');
}
});

$('body').on('change', '#priceTo, #priceFrom', function(e) {
var priceTo = Number($('#priceTo').val());
var priceFrom = Number($('#priceFrom').val());

if(priceTo != '') {
$('#priceTo').val(parseInt(priceTo));
}

if(priceFrom != '') {
$('#priceFrom').val(parseInt(priceFrom));
}

if(priceFrom > priceTo) {
$('.form__invalid-input').css('visibility', 'visible');
$('.searchButton').prop('disabled', true);
} else {
$('.form__invalid-input').css('visibility', 'hidden');
$('.searchButton').prop('disabled', false);
}
});

$(window).scroll(function(){
let scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
if($('.newsletter1-wrapper')[0]) {
if ($(this).scrollTop() > 300 && scrollBottom > 20 ) {
$('.searchButton').addClass('scrollingButton');

} else {
$('.searchButton').removeClass('scrollingButton');
}

} else {
if ($(this).scrollTop() > 300 ) {
$('.searchButton').addClass('scrollingButton');

} else {
$('.searchButton').removeClass('scrollingButton');
}
}
});

$(function(){
$('body').on('click', '.searchButton', function(e) {
var t=$(this).parents('.advancedSearch'),hasValue=false,arr=$('#SearchAdvancedForm input[type!=hidden],#SearchAdvancedForm select').serializeArray(),i, data = t.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
var tab = [];
for(i in arr) if(arr[i].value) {hasValue=true;break;}
data.push({name: "__csrf", value: __CSRF});
$.post(null, data, function (d) {
if (d.action.Redirect302) location.href = d.action.Redirect302;
});
});
});
}
}

Ostatnim krokiem jest dodanie możliwości otwarcia wyszukiwarki zaawansowanej przy pomocy linku umieszczonego w stopce sklepu. Aby to zrobić, przejdź do pliku elements -> footer -> footer-1.html (jeśli w Kreatorze wybrałeś drugi rodzaj stopki, plik będzie nazywał się footer-2.html). Następnie wyszukaj linijkę z frazą advanced-search-link. W linijce tej znajduje się fragment href=”#”. Zamień znak # na {{config.DefinedPages.AdvancedSearch.Url}}. W ten sposób z poziomu stopki będzie można w prosty sposób otworzyć zaawansowane wyszukiwanie.