Spis treści – Centrum Pomocy Comarch e-Sklep

Obsługa i prezentacja najniższej ceny towaru w szablonach

Wstęp

W niniejszym artykule prezentujemy w jaki sposób możesz zmodyfikować swój szablon tak, aby była w nim widoczna najniższa cena towaru, jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki. Poniższa instrukcja pozwoli Ci dostosować swój szablon do przepisów wynikających z Unijnej dyrektywy Omnibus.

Wskazówka

Więcej na temat dyrektywy Omnibus przeczytasz w artykule Dyrektywa Omnibus w Comarch e-Sklep.

Od wersji 2022.3 istnieje możliwość wyświetlania minimalnej ceny towaru z ostatnich 30 dni. W obiekcie zawierającym wszystkie informacje na temat towaru zostały dodane nowe property: MinPrice, SubtotalMinPrice (cena netto dla sklepów Enterprise i B2B) oraz TotalMinPrice (cena brutto dla sklepów Enterprise i B2B).

Wskazówka

Pamiętaj, że wyżej wspomniany obiekt nosi różne nazwy, w zależności od szablonu czy od strony, na której się znajdujemy.

Kiedy widoczna jest cena minimalna?

Cena minimalna, czyli najniższa cena towaru, jaka obowiązywała w okresie 30 dni przed wprowadzeniem obniżki jest dostępna wówczas, gdy produkt posiada cenę aktualną oraz poprzednią. Cenę minimalną można prezentować w wielu miejscach w szablonie, m.in.: na szczegółach towaru, na liście towarów, na porównywarce towarów, na towarach ulubionych, w sekcjach z towarami polecanymi czy ostatnio oglądanymi. Wszystko zależy od tego, który szablon posiadasz - cena poprzednia w niektórych przypadkach nie jest widoczna w wymienionych miejscach, przez co cena minimalna również nie będzie możliwa do zobaczenia.

Wprowadzanie zmian w kodzie szablonu

Zmiany związane z ceną minimalną należy wprowadzić wszędzie tam, gdzie w szablonie pokazujemy cenę poprzednią (property PreviousPrice). Przykładowy kod z minimalną ceną:

{% if customer.HidePrices == false and product.Price != null and product.PreviousPrice != null -%}

    {{product.MinPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}
    

{% endif -%}

W powyższym przykładzie najpierw sprawdzamy, czy ceny są widoczne, a także czy produkt posiada cenę aktualną i cenę poprzednią. Jeśli wszystkie warunki są spełnione, wyświetlamy minimalną cenę w odpowiednim formacie wraz z wybraną przez Klienta walutą. Dodatkowo, obok ceny wyświetla się ikonka z symbolem "i", czyli informacja. Po najechaniu kursorem na symbol wyświetli się tooltip z informacją, czym jest widoczna cena.

Cena minimalna na liście towarów - przykład w szablonie Szafir

Przykładowy kod związany z tooltipem informacyjnym do minimalnej ceny:



{% if customer.HidePrices != true -%}
    
        Najniższa cena towaru, jaka obowiązywała w okresie 30 dni
              przed wprowadzeniem obniżki
    
{% endif -%}




/* JS - wyświetlanie, ukrywanie tooltipa */

        $('body').on('click', '.min-price__showTooltip', function(e) {
            e.preventDefault();
            e.stopPropagation();
        });
        
        $('body').on('mouseenter', '.min-price__showTooltip', function(e) {
            e.preventDefault();
            e.stopPropagation();
            let tooltip = $('.minPriceTooltip-js');
        
            let top = e.clientY - e.offsetY;
            let right= "unset";
            let left = (e.clientX - 30) - (e.offsetX/2);
        
            if(left < 0) {
                left = 10;
            } else if (left > (($(window).width() - 200))) {
                 left = "unset";
                 right = 10; 
            }
               
            tooltip.css('top', top);
            tooltip.css('right', right);
            tooltip.css('left', left);
        
            tooltip.show();
        });
        
        $('body').on('mouseleave', '.min-price__showTooltip', function(e) {
            $('.minPriceTooltip-js').hide();
        });
        
        $('body').on('pointerenter', '.min-price__showTooltip', function(e) {
            e.preventDefault();
            e.stopPropagation();
            let tooltip = $('.minPriceTooltip-js');
        
            let top = e.clientY - e.offsetY;
            let right= "unset";
            let left = (e.clientX - 30) - (e.offsetX/2);
        
            if(left < 0) {
                left = 10;
            } else if (left > (($(window).width() - 200))) {
                 left = "unset";
                 right = 10; 
            }
               
            tooltip.css('top', top);
            tooltip.css('right', right);
            tooltip.css('left', left);
        
            tooltip.show();
        });
        
        $('body').on('pointerleave', '.min-price__showTooltip', function(e) {
            $('.minPriceTooltip-js').hide();
        });

        $(window).on('scroll', function(e) {
            $('.minPriceTooltip-js').hide();
        });

Wskazówka

Pamiętaj, aby odpowiednio ostylować minimalną cenę, ikonkę oraz tooltipa.

W przypadku miejsc takich jak szczegóły towaru czy lista towarów, w zależności od szablonu, trzeba także dokonać pewnych zmian w funkcjach w plikach .js, a czasami również w .html. Dotyczy to jednak głównie towarów z atrybutami do wyboru lub w przypadku listy towarów, jeśli w Twoim szablonie towary są filtrowane bez odświeżania strony. W takich sytuacjach postępujemy analogicznie jak dla wszystkich miejsc związanych z ceną poprzednią (oldPrice, previousPrice itp.).

LiveChat - obsługa wtyczki w szablonach

Wskazówka

Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

LiveChat jest narzędziem służącym do komunikacji klientów z firmą poprzez aplikację. Widgety widoczne są przeważnie na stronach internetowych. Rozwiązanie jest coraz częściej wykorzystywane przede wszystkim przy sprzedaży online oraz customer service. Dzięki chatom komunikacja pomiędzy klientem, a firmą przebiega sprawniej. W niniejszym artykule dowiesz się, jak w prosty sposób zintegrować swój szablon z narzędziem LiveChat.

Instalacja wtyczki LiveChat w szablonach

Otwórz stronę LiveChat.com. Konieczne jest założenie konta. Oprócz adresu e-mail i hasła, należy podać m.in. link do Twojego sklepu. Po zatwierdzeniu wyświetli się okno, gdzie znajduje się instrukcja dodania wtyczki. Do wyboru są trzy opcje, wybierz Install LiveChat code manually. Po wybraniu tej opcji, wyświetli się fragment kodu z indywidualnym License ID. Kod można skopiować przyciskiem Copy code. Następnie możesz wkleić go do swojego szablonu.

Topaz – wklej kod do pliku base_layout.html. Kod możemy umieścić niemal na samym końcu pliku, najlepiej tuż nad zamknięciem tagu body.
Szafir, Agat, Bursztyn, Opal – wklej kod do pliku _layout.html. Kod możemy umieścić niemal na samym końcu pliku, najlepiej tuż nad zamknięciem tagu body.

Zmian możesz dokonać w Panelu Administracyjnym (Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/Edytuj HTML) lub przy pomocy Comarch e-Sklep Liquid Sync. Po wprowadzeniu zmian opublikuj je w Panelu Administracyjnym. Od teraz widget LiveChat będzie wyświetlał się na Twoim szablonie.

Dostosowanie wyglądu wtyczki do własnych preferencji

Wtyczkę LiveChat można dostosować m.in. pod kątem wyglądu. Aby tego dokonać, na stronie LiveChat w menu po lewej stronie ekranu wybierz opcję Settings. W wyświetlonym menu, zakładce Chat widget wybierz Customization. Możesz dostosować m.in. styl widgetu zminimalizowanego oraz zmaksymalizowanego, wybrać ciemny lub jasny motyw, podstawowy kolor widgetu, położenie widgetu na ekranie (odległość od krawędzi, wyrównanie do lewej/prawej), czy też widoczność widgetu. W zakładce Language możesz dostosować język, powitanie, domyślną nazwę Klienta na czacie oraz inne wyświetlane w widgecie teksty i napisy. Sprawdź także pozostałe zakładki i dostosuj widget LiveChat zgodnie ze swoimi preferencjami.

Zmiana czcionki w szablonie

W tym artykule dowiesz się, jak w łatwy sposób zmienić czcionkę w szablonie.

Wybór czcionki

Wskazówka

Przy wyborze czcionki zwróć uwagę, aby miała licencję Apache 2.0

Wejdź tutaj i wybierz czcionkę, która Ci najbardziej odpowiada. Następnie kliknij w kafelek odpowiadający danej czcionce. Na potrzeby tego artykułu wybierzemy czcionkę Roboto. Następnie wybierz style, które Cię interesują. Po wybraniu przynajmniej jednego stylu pojawi się po prawej część kodu, którą należy skopiować do sekcji w szablonie. W naszym przypadku będzie to:

link rel="preconnect" href="https://fonts.googleapis.com">
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

Kawałek niżej będzie podana linijka, którą trzeba wkleić w każdym miejscu, w którym występuje zapis z inną czcionką. W naszym wypadku będzie to:

font-family: 'Roboto', sans-serif;

Szafir

W pliku __layout.html znajdź znacznik head (3 linijka) i wklej w jego obrębie kod:

link rel="preconnect" href="https://fonts.googleapis.com">
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

Znajdź plik scss/globals/_fonts.scss i usuń go. Następnie w pliku scss/desktop1.scss usuń linijkę:

@import 'globals/_fonts';

W pliku scss/components/_collection-points.scss wyszukaj frazę 'SegoeUI' i zamień wszystkie jej wystąpienia na 'Roboto', sans-serif. Następnie w plikach scss/globals/_globals1.scss, scss/globals/_globals2.scss i scss/globals/_header.scss wyszukaj frazę "SegoeUI" i zamień wszystkie jej wystąpienia w każdym z tych plików na 'Roboto', sans-serif. Na sam koniec w plikach scss/globals/_globals-m.scss, scss/globals/_globals2.scss, scss/globals/_header.scss i scss/partials/_order.scss wyszukaj frazę SegoeUI i zamień wszystkie jej wystąpienia w każdym z tych plików na 'Roboto', sans-serif.

Wskazówka

Pamiętaj, że pliki należy zminifikować. O tym jak skompilować i zminifikować pliki dowiesz się z artykułu o kompilacji i minifikacji plików.

Podtrzymanie sesji użytkownika

Wskazówka

Podtrzymanie sesji użytkownika w szablonach

W szablonach Comarch sesja użytkownika jest podtrzymywana w otwartej karcie przeglądarki, dzięki czemu brak aktywności użytkownika w sklepie nie powoduje usunięcia wykonywanych czynności - np. nie jest usuwany utworzony koszyk. Domyślnie czas bezczynności sesji użytkownika wynosi 15 minut, po upływie których zostaje usunięta. Dotyczy to głównie użytkowników niezalogowanych. W tym artykule dowiesz się, jak zaimplementować podtrzymywanie sesji użytkownika w swoim modyfikowanym szablonie.

1. Szablony Szafir, Opal, Bursztyn i Agat

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do opcji Edytuj HTML. Krok 2. W dostępnych plikach przejdź do folderu js, w którym znajduje się plik init.js. Krok 3. Przejdź do edycji pliku init.js wprowadzając poniższy skrypt na jego końcu: setInterval(() => fetch(document.baseURI + 'xhr?__action=svc/ping'), 600000); Krok 4. Dokonaj minifikacji oraz odpowiedniej kompilacji edytowanego pliku zgodnie z instrukcją. Krok 5. Zapisz i opublikuj zmiany. Gotowe! Sesja użytkowników Twojego e-Sklepu będzie aktywna przez cały czas, gdy witryna będzie wyświetlona w otwartej przeglądarce.

2. Szablon Topaz

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do opcji Edytuj HTML. Krok 2. W dostępnych plikach przejdź do folderu js, w którym znajduje się plik layout0.js. Krok 3. Przejdź do edycji pliku layout0.js wprowadzając poniższy skrypt na jego końcu: setInterval(() => fetch(document.baseURI + 'xhr?__action=svc/ping'), 600000); Krok 4. Dokonaj minifikacji oraz odpowiedniej kompilacji edytowanego pliku zgodnie z instrukcją. Krok 5. Zapisz i opublikuj zmiany. Gotowe! Sesja użytkowników Twojego e-Sklepu będzie aktywna przez cały czas, gdy witryna będzie wyświetlona w otwartej przeglądarce.

Lista plików w Strefie klienta w szablonie Szafir

Lista plików w strefie klienta w szablonie Szafir

W tym artykule dowiesz się jak dodać listę plików w strefie klienta w swoim szablonie.

Wskazówka

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

Uwaga

Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

Pierwszym krokiem będzie dodanie kodu w pliku customer-profile/pagination.html. W tym celu za pomocą narzędzia wyszukiwania znajdź frazę {% endif -%}, a linijkę wyżej wklej następujący kod:

{% elseif page.QueryString contains 'to-download-erp' -%}
  {% assign buttonClass = 'to-download-button-lq' -%}
  {% assign inputClass = 'to-download-input-lq' -%}
  {% assign urlType = 'to-download-erp=true' -%}

Następnie proszę otworzyć plik customer-profile/menu.html, następnie wyszukać w nim za pomocą narzędzia wyszukiwania frazę <li class="load-erp-data-lq i zastąpić znalezioną linijkę następującą:

 <li class="load-erp-data-lq {% unless page.QueryString contains 'tab=invoices' or page.QueryString contains 'tab=executed-complaints' or page.QueryString contains 'tab=active-complaints' or page.QueryString contains 'tab=sor' or page.QueryString contains 'tab=wm' or page.QueryString contains 'tab=to-download' or page.QueryString == '?tab=discounts' -%} active-lq {% endunless -%}" data-template="customer-profile/orders/orders.html">

Również w tym samym pliku proszę wyszukać frazę {% if settings.discountsPresentationInCustomerProfileInPromotionsTab == 'yes' %} a bezpośrednio nad nią wkleić następujący kod:

{% if config.B2B -%}
  <li class="load-erp-data-lq {% if page.QueryString contains 'tab=to-download' -%} active-lq {% endif -%}" data-template="customer-profile/to-download/to-download.html">
    <i class="ti-download"></i> {{ translations.Downloads }}
  </li>
{% endif -%}

Następnym krokiem będzie dodanie odpowiednich styli. W tym celu przejdź do pliku scss/globals/_globals2.scss, a na samym końcu tego pliku wklej:

.to-download-table-ui{
  a{
    color: $primaryColorFont;
  }
  .column-ui{
    width: 50%;
    vertical-align: middle;
  }
}

Teraz należy przejść do folderu customer-profile, w nim utworzyć folder o nazwie to-download. W nowo utworzonym folderze proszę utworzyć plik to-download.html, a w nim umieścić następujący kod:

<nav class="customer-profile-header-menu-ui">
	<ul>
		<li><a href="{{ page.BaseHref }}{{ config.DefinedPages.Home }}"><i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.BackToShopping }}</span></a></li>
		<li class="active-ui only-text-ui">{{ translations.Downloads }}</li>
	</ul>
</nav>
{% include 'customer-profile/menu.html' -%}
<div class="with-column-ui">
	<div class="container-ui">
		{% if customer.CompanyErpId <= 0 -%}
			{{ translations.AccessDenied }}
		{% else %}
		<div class="erp-data-ui erp-data-lq">
			<div class="to-download-table-ui to-download-table-lq table-lq" data-sp="CDN.eshop_GetCustomerFiles">
				<div class="column-name-ui">
					<div class="column-ui">{{ translations.FileName }}</div>
					<div class="column-ui">{{ translations.Downloads }}</div>
				</div>
				<div class="row-ui" rv-each-o="List">
					<a rv-href="o.UrlValue" rv-if="o.IsUrl" target="_blank">
						<div class="column-ui">
							<i class="file-to-download-icon-lq icon-ui" rv-data-extension="o.Extension"></i> { o.Name }
						</div>
						<div class="column-ui"><i class="ti-download"></i> {{ translations.DownloadFile }}</div>
					</a>
					<div class="download-file-from-to-download-lq" rv-data-id="o.ID" rv-data-extension="o.Extension" rv-unless="o.IsUrl">
						<div class="column-ui">
							<i class="file-to-download-icon-lq icon-ui" rv-data-extension="o.Extension"></i> { o.Name }
						</div>
						<div class="column-ui"><i class="ti-download"></i> {{ translations.DownloadFile }}</div>
					</div>
				</div>
			</div>
			{% include 'customer-profile/pagination.html' -%}
		</div>
		{% endif -%}
	</div>
</div>

Kolejnym krokiem jest dodanie kodu JavaScript. W tym celu przejdź do pliku js/init-ui2.js, przy pomocy narzędzia wyszukiwania znajdź frazę function getData(). Należy usunąć cały kod począwszy od znalezionej linii, aż do klamerki (włącznie) znajdującej się dwie linijki pod frazą div.find('.pager-lq').css('display', 'inline-flex');.

W miejsce usuniętego kodu proszę wkleić:

$.fn.erpData = function () {
                return this.each(function () {
                    var div = $(this);
                    var table = div.children('.table-lq');
                    if(!table.hasClass('to-download-table-lq')){
                        var dateTo = $('.get-erp-data-lq[name=dateTo]');
                    }
                    
                    var spin = $('.ng-spinner-lq');
                    var sp = table.data('sp');
                    var ds = { List: null, Pager: null, PageNo: 1 };
                    rivets.bind(div, ds);

                    function getDateStr(d) {
                        return new Date((d - d.getTimezoneOffset() * 60000)).toISOString().slice(0, -14);
                    }

                    function getDateEl(el) {
                        try {
                            var val = el.val();
                            if (val == '') return null;
                            var d = new Date(val);
                            el.val(getDateStr(d));
                            return getDateStr(d).replace(/-/g, '');
                        } catch (ex) {
                            el.val('');
                            return null;
                        }
                    }

                    function getData() {
                        spin.css('visibility', 'visible');
                        if($('[type=date]').val() == ''){
                            var date = new Date().toISOString().slice(0, -14);
                            $('[type=date]').val(date);
                        }

                        if(!table.hasClass('to-download-table-lq')){
                            var dt = getDateEl(dateTo);
                            var parameters = { DateTo: dt, LanguageId: __lngId, PageNo: ds.PageNo }
                        } else {
                            var parameters = { LanguageId: __lngId, PageNo: ds.PageNo }
                        }

                        $.post(null, { __action: 'sync/exec', __csrf: __CSRF, worker: 'erpData', message: JSON.stringify({ command: sp, parameters: parameters }) }, function (d) {
                            spin.css('visibility', 'hidden');
                            if (!d.action.Result) {
                                return;
                            }

                            var r = d.action.Object[0];
                            ds[r.Name] = r.Result;
                            ds.Pager = Array.apply(null, Array(r.PageCount)).map(function (_, i) { return { No: i + 1, Selected: ds.PageNo == i + 1 }; });

                            if(r.PageCount > 1){
                                ds.FewPages = true;
                            }

                            var elements = r.Result;
                            var elementsQuantity = elements.length;

                            for(var i=0; i<elementsQuantity; i++){
                                if(elements[i].DaysAfterDueDate > 0 && (elements[i].ToPay > 0 || elements[i].ToReturn < 0)){
                                    elements[i].DaysAfterExists = true;
                                }
                                if(elements[i].ToPay > 0){
                                    elements[i].ToPayExists = true;
                                    $('.no-to-pay-lq').remove();
                                    $('.to-pay-column-lq').removeClass('hidden-lq');
                                }
                                if(elements[i].ToReturn > 0){
                                    elements[i].ToReturnExists = true;
                                    $('.no-to-pay-lq').remove();
                                    $('.to-pay-column-lq').removeClass('hidden-lq');
                                }
                                if(elements[i].DeliveryStatus == 0){
                                    elements[i].DeliveryStatus0 = true;
                                }
                                if(elements[i].DeliveryStatus == 1){
                                    elements[i].DeliveryStatus1 = true;
                                }
                                if(elements[i].DeliveryStatus == 2){
                                    elements[i].DeliveryStatus2 = true;
                                }
                                if(elements[i].DeliveryStatus == 3){
                                    elements[i].DeliveryStatus3 = true;
                                }
                                if(elements[i].DeliveryStatus == 4){
                                    elements[i].DeliveryStatus4 = true;
                                }
                                if(elements[i].PaymentStatus == 0){
                                    elements[i].PaymentStatus0 = true;
                                }
                                if(elements[i].PaymentStatus == 1){
                                    elements[i].PaymentStatus1 = true;
                                }
                                if(elements[i].PaymentStatus == 2){
                                    elements[i].PaymentStatus2 = true;
                                }
                                if(elements[i].DeliveryStatus == 0 || elements[i].DeliveryStatus == 1 || elements[i].DeliveryStatus == 2 || elements[i].DeliveryStatus == 3 || elements[i].DeliveryStatus == 4 || elements[i].PaymentStatus == 0 || elements[i].PaymentStatus == 1 || elements[i].PaymentStatus == 2){
                                    elements[i].StatusExists = true;
                                }
                                if(elements[i].DeliveryStatus == 0 || elements[i].DeliveryStatus == 1 || elements[i].DeliveryStatus == 2 || elements[i].DeliveryStatus == 3 || elements[i].DeliveryStatus == 4){
                                    elements[i].DeliveryStatusExists = true;
                                }
                                if(elements[i].PaymentStatus == 0 || elements[i].PaymentStatus == 1 || elements[i].PaymentStatus == 2){
                                    elements[i].PaymentStatusExists = true;
                                }
                                if(elements[i].DeliveryStatusExists && elements[i].PaymentStatusExists){
                                    elements[i].DeliveryAndPaymentStatusExists = true;
                                }
                            }

                            div.find('.page-count-lq').text(r.PageCount);
                            if(ds.PageNo == r.PageCount){
                                $('.pager-lq .next-lq').attr('disabled', true).removeClass('btn-gray-ui');
                            } else {
                                $('.pager-lq .next-lq').attr('disabled', false).addClass('btn-gray-ui');
                            }
                            if(ds.PageNo == 1){
                                $('.pager-lq .prev-lq').attr('disabled', true).removeClass('btn-gray-ui');
                            } else {
                                $('.pager-lq .prev-lq').attr('disabled', false).addClass('btn-gray-ui');
                            }

                            $('.pager-lq [type=number]').val(ds.PageNo);

                            if(table.hasClass('to-download-table-lq')){
                                $('.file-to-download-icon-lq').each(function(){
                                    var extension = $(this).data('extension');
                                    if(extension == 'jfif' || extension == 'jpe' || extension == 'jpeg' || extension == 'jpg'){
                                        var icon = 'ti-image';
                                    } else if(extension == 'csv' || extension == 'txt'){
                                        var icon = 'ti-receipt';
                                    } else if(extension == 'doc' || extension == 'docx' || extension == 'odt'){
                                        var icon = 'ti-write';
                                    } else if(extension == 'xls' || extension == 'xlsx' || extension == 'ods'){
                                        var icon = 'ti-bar-chart';
                                    } else if(extension == 'zip' || extension == 'rar' || extension == '7zip'){
                                        var icon = 'ti-archive';
                                    } else if(extension == 'pdf'){
                                        var icon = 'ti-agenda';
                                    } else {
                                        var icon = 'ti-file';
                                    }
                                    $(this).addClass(icon);
                                });
                            }

                            table.show();
                            div.find('.pager-lq').css('display', 'inline-flex');
                        });
                    }

W tym samym pliku proszę wyszukać frazę function rivetsPropertyCheck(bindedObj, property), a bezpośrednio nad nią dodać kod:

function downloadFileFromToDownload(e) {
    var id = $(e.currentTarget).data('id');
    var extension = $(e.currentTarget).data('extension');
    var fileDownloaded = false;
    if(window.downloadedFiles){
        for(i=0; i<window.downloadedFiles.length; i++){
            if(window.downloadedFiles[i].id == id){
                fileDownloaded = true;
                var blob = window.downloadedFiles[i].blob;
            }
        }
    }
    if(fileDownloaded){
        var a = document.getElementById('file-'+id);
        var url = window.URL.createObjectURL(blob);
        a.href = url;
        a.click();
        window.URL.revokeObjectURL(url);
    } else {
        var fileData = {
            __csrf:__CSRF,
            __action:'sync/exec',
            worker:'erpData',
            message:JSON.stringify({command:'CDN.eShop_GetCustomerBinaryFile', parameters:{'Id':id}})
        };
        $.post(null,fileData, function(d){
            var file = d.action.Object[0][0];
            var name = file.FileName+'.'+extension;
            var binaryString = file.FileData;
            var fileBytes = base64ToArrayBuffer(binaryString);
            var blob = new Blob([fileBytes], {type: "octet/stream"});
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.setAttribute("id", "file-"+id);
            a.style = "display: none";
            a.href = url;
            a.download = name;
            a.click();
            window.URL.revokeObjectURL(url);
            if(window.downloadedFiles){
                window.downloadedFiles.push({id:id, blob:blob});
            } else {
                window.downloadedFiles = [{id:id, blob:blob}];
            }
        });
    }
}

$('body').on('click', '.download-file-from-to-download-lq', function(e) {
    downloadFileFromToDownload(e);
});

Następnie proszę dodać tłumaczenia. W sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Id: FileName -- Tekst: Nazwa pliku
Id: DownloadFile -- Tekst: Pobierz plik

Umieszczenie przycisków iLease - wygodne finansowanie dla firm oraz iRaty - swobodne raty online na szczegółach towaru

Wskazówka

Umieszczenie przycisków iLease - wygodne finansowanie dla firm oraz iRaty - swobodne raty online na szczegółach towaru

W tym artykule dowiesz się, jak w łatwy sposób dodać przyciski iLeasing oraz iRaty na szczegółach towaru w e-Sklepie.

Wskazówka

Poradnik dotyczy standardowych, niemodyfikowanych szablonów w wersji 2019.3 lub nowszej.

Wskazówka

W przykładach użyta jest grafika 09.png. Jeśli preferujesz inną, to wystarczy w poniższych przykładach zamienić cyfrę 9 na wybraną z przedziału 1-8. W panelu partnera płatności ratalnych (tu możesz się zalogować), w sekcji Integracje możesz zobaczyć wszystkie opcje i wybrać tą, która odpowiada Ci najbardziej.

1. Szafir

W pliku product/product-presentation-data.html wyszukaj frazę {% if canBuy -%}, gdzie znajduje się przycisk dodawania do koszyka. Bezpośrednio pod tą linijką wklej kod:

{% if customer.Authenticated and customer.Company -%}
{% assign tempVat = 100 | Plus: product.VAT | DividedBy: 100 -%}
{% assign totalPrice = product.Price | Times: tempVat -%}
{% assign subtotalPrice = product.Price -%}
{% else -%}
{% assign totalPrice = product.Price -%}
{% assign tempVat = 100 | Plus: product.VAT | DividedBy: 100 -%}
{% assign subtotalPrice = product.Price | DividedBy: tempVat -%}
{% endif -%}

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

2. Agat

W pliku partials/product/product-popup.html wyszukaj frazę Pro_addToCart. To etykieta przycisku dodawania do koszyka w szablonie Agat. Linijkę niżej znajduje się domknięcie przycisku czyli (/span). Wklej pod tym zamknięciem fragment kodu z przyciskami (pierwszy przycisk to iRaty, drugi to iLeasing): Sklep w wersji Light lub Standard:

{% if customer.Authenticated and customer.Company -%}
{% assign tempVat = 100 | Plus: product.VAT | DividedBy: 100 -%}
{% assign totalPrice = product.Price | Times: tempVat -%}
{% assign subtotalPrice = product.Price -%}
{% else -%}
{% assign totalPrice = product.Price -%}
{% assign tempVat = 100 | Plus: product.VAT | DividedBy: 100 -%}
{% assign subtotalPrice = product.Price | DividedBy: tempVat -%}
{% endif -%}

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje. Nie zapomnij o warunku, który jest na początku kodu.

Sklep w wersji Enterprise lub B2B:

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

3. Bursztyn lub Opal

W pliku productdetails.html wyszukaj frazę Com_AskForPrice. To etykieta przycisku zapytania o cenę. Linijkę niżej znajduje się domknięcie przycisku: (/div). Wklej pod tym zamknięciem fragment kodu z przyciskami (pierwszy przycisk to iRaty, drugi to iLeasing): Sklep w wersji Light lub Standard:

{% if customer.Authenticated and customer.Company -%}
{% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%}
{% assign totalPrice = _pd.Price | Times: tempVat -%}
{% assign subtotalPrice = _pd.Price -%}
{% else -%}
{% assign totalPrice = _pd.Price -%}
{% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%}
{% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%}
{% endif -%}

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje. Nie zapomnij o warunku, który jest na początku kodu.

Sklep w wersji Enterprise lub B2B:

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty).Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

4. Topaz

Wskazówka

W celu sprawdzenia jaka wersja wyglądu elementu ze szczegółami towaru jest przez nas posiadana, należy przejść do katalogu elements a następnie product. Nazwa pliku znajdujacego się w katalogu odpowiada wersji. Proszę wykonać instrukcje znajdujące się poniżej w zależności od wersji.

Wersja product-details-1

W pliku elements/product/product-details-1.html wyszukaj frazę {% include 'partials/common/after-adding-to-cart-popup.html' %}. Bezpośrednio nad nią wklej fragment kodu z przyciskami (pierwszy przycisk to iRaty, drugi to iLeasing):

{% if customer.Authenticated and customer.Company -%}
{% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%}
{% assign totalPrice = _pd.Price | Times: tempVat -%}
{% assign subtotalPrice = _pd.Price -%}
{% else -%}
{% assign totalPrice = _pd.Price -%}
{% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%}
{% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%}
{% endif -%}

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

Sklep w wersji Enterprise lub B2B:

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty).Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

Wersja product-details-2

W pliku elements/product/product-details-2.html wyszukaj frazę {% include 'partials/common/after-adding-to-cart-popup.html' %}. Bezpośrednio nad nią wklej fragment kodu z przyciskami (pierwszy przycisk to iRaty, drugi to iLeasing):

{% if customer.Authenticated and customer.Company -%}
{% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%}
{% assign totalPrice = _pd.Price | Times: tempVat -%}
{% assign subtotalPrice = _pd.Price -%}
{% else -%}
{% assign totalPrice = _pd.Price -%}
{% assign tempVat = 100 | Plus: _pd.VAT | DividedBy: 100 -%}
{% assign subtotalPrice = _pd.Price | DividedBy: tempVat -%}
{% endif -%}

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty). Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

Sklep w wersji Enterprise lub B2B:

Wskazówka

W miejsce XXXX należy wpisać ID partnera.

Wskazówka

Kod zawiera oba przyciski (iLeasing i iRaty).Jeśli potrzebujesz tylko jednego z nich, to skopiuj tylko ten fragment, który Cię interesuje.

Umieszczenie przycisku Leasing Grenke na szczegółach towaru

Wskazówka

Umieszczenie przycisku Leasing Grenke na szczegółach towaru

W tym artykule dowiesz się, jak w łatwy sposób dodać przycisk Leasing Grenke na szczegółach towaru w e-Sklepie.

Wskazówka

W przykładach użyta jest grafika w5.jpg. Jeśli preferujesz inną, to wystarczy w poniższym przykładzie zmienić ją na jedną z dostępnych tutaj.

1. Szafir

Wchodzimy w zakładkę Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML / product/ product-presentation-data.html wyszukaj frazę w kodzie(CTRL+F) {% if canBuy -%}, gdzie znajduje się przycisk dodawania do koszyka. Bezpośrednio pod tą linijką wklej kod:

{% if currencyExt.Code == 'PLN' and activeProduct.Price > 0 -%}{% unless config.ENTERPRISE == false and customer.SubtotalPrices == false -%}


{% endunless -%}{% endif -%}

2. Agat

Wchodzimy w zakładkę Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML / partials/ product/ product-popup.html wyszukaj frazę w kodzie(CTRL+F) Pro_addToCart. To etykieta przycisku dodawania do koszyka w szablonie Agat. Linijkę niżej znajduje się domknięcie przycisku czyli (/span). Wklej pod tym zamknięciem kod:

{% if currencyExt.Code == 'PLN' and product-details.Product.Price > 0 -%}{% unless config.ENTERPRISE == false and customer.SubtotalPrices == false -%}


{% endunless -%}{% endif -%}

3. Bursztyn lub Opal

Wchodzimy w zakładkę Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML plik productdetails.html wyszukaj frazę w kodzie(CTRL+F) Com_AskForPrice. To etykieta przycisku zapytania o cenę. Linijkę niżej znajduje się domknięcie przycisku: (/div). Wklej pod tym zamknięciem kod:

{% if currencyExt.Code == 'PLN' and productdetails.Product.Price > 0 -%}{% unless config.ENTERPRISE == false and customer.SubtotalPrices == false -%}


{% endunless -%}{% endif -%}

4. Topaz

Wchodzimy w zakładkę Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML / elements/ product/ product-details-1.html (lub elements/ product/ product-details-2.html - w zależności od Twojej wersji szablonu) wyszukaj w kodzie(CTRL+F) {% include 'partials/common/after-adding-to-cart-popup.html' %}. Bezpośrednio nad nią wklej kod:

{% if currencyExt.Code == 'PLN' and product-details.Product.Price > 0 -%}{% unless config.ENTERPRISE == false and customer.SubtotalPrices == false -%}


{% endunless -%}{% endif -%}

Obsługa nowych zestawów

Z tego artykułu dowiesz się jak dodać w szablonie obsługę nowych zestawów.

Wskazówka

W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Szafir

W pliku product/product-presentation-data.html znajdź frazę {% if product.Sets != null and product.Sets != empty -%}. Powinna występować 3 razy. W każdym z nich zmień Sets na SetsExt. Następnie będąc przy ostatnim wystąpieniu tej frazy (która jest warunkiem) podmień calą zawartość tego warunku poniższym kodem:


		{{ translations.BuyInSet }}

  		{% for set in product.SetsExt -%}
		  	{% assign setPrice = '' -%}
		  	{% assign setPreviousPrice = '' -%}
			
				
				  	
						{{ set.SetName }}
						
							{% for setElement in set.Elements -%}
								{% for setProduct in setElement.Products -%}
									{% assign index = forloop.index -%}
									{% if index == 1 -%}
										{% if setProduct.Value -%}
											{% if setPrice == '' -%}
												{% assign setPrice = setProduct.Value -%}
											{% else -%}
												{% assign setPrice = setPrice | Plus: setProduct.Value -%}
											{% endif -%}
										{% endif -%}
										{% if setProduct.PreviousValue -%}
											{% if setPreviousPrice == '' -%}
												{% assign setPreviousPrice = setProduct.PreviousValue -%}
											{% else -%}
												{% assign setPreviousPrice = setPreviousPrice | Plus: setProduct.PreviousValue -%}
											{% endif -%}
										{% endif -%}
									{% endif -%}
									
										
											
												{{ setProduct | Img:'medium' }}
												
													{% if setProduct.FreeProduct -%}
														{{ translations.Free }}!
													{% endif %}
													{% if setProduct.Quantity != 1 -%}
														{% assign quantity = setProduct.Quantity -%}
														{% unless config.Products.DecimalUnits -%}
															{% assign quantity = setProduct.Quantity | Normalize -%}
														{% endunless -%}
														{{ quantity }}{{ setProduct.Unit }}
													{% endif -%}
												
											
										
										{{ setProduct.NameNoHtml }}
										{% if setProduct.AttributesPolyvalent -%}
											{% for attribute in setProduct.AttributesPolyvalent -%}
												
													{{ attribute.Name }}
													
														
													
													
												
											{% endfor -%}
										{% endif -%}
										{% if setProduct.AttributesEditable -%}
											{% for attribute in setProduct.AttributesEditable -%}
												
													{{ attribute.Name }} *
													{% case attribute.Format -%}
														{% when 1 -%}
															
														{% when 2 -%}
															
														{% when 3 -%}
															
																
															
															
														{% when 4 -%}
															
													{% endcase -%}
													
														{{ translations.FillAttributeValue }}
													
												
											{% endfor -%}
										{% endif -%}
										{% if setProduct.Supplies.Key != null -%}
											
												{% include 'product/set-product-supplies.html' with setProduct -%}
											
										{% endif -%}
										{% assign setElementProductsSize = setElement.Products | Size -%}
										{% if setElementProductsSize > 1 -%}
											
										{% endif -%}
									
								{% endfor -%}
							{% endfor -%}
						
						{% for setElement in set.Elements -%}
							
								
									
									{% for setProduct in setElement.Products -%}
										
											
												{{ setProduct | Img:'medium' }}
												
													{% if setProduct.FreeProduct -%}
														{{ translations.Free }}!
													{% endif %}
													{% if setProduct.Quantity != 1 -%}
														{% assign quantity = setProduct.Quantity -%}
														{% unless config.Products.DecimalUnits -%}
															{% assign quantity = setProduct.Quantity | Normalize -%}
														{% endunless -%}
														{{ quantity }}{{ setProduct.Unit }}
													{% endif -%}
												
											
											{{ setProduct.NameNoHtml }}
										
									{% endfor -%}
								
							
						{% endfor -%}
				  	
				  	{% unless customer.HidePrices -%}
					  	
							
								
									{{ setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %}{% endif -%}
								
								{% if customer.Cart.SubtotalPrices -%}
									{{ translations.Netto | Downcase }}
								{% else -%}
									{{ translations.Brutto | Downcase }}
								{% endif -%}
								
									{{ setPrice | Minus: setPreviousPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}
								
								{% if customer.Cart.SubtotalPrices -%}
									{{ translations.Netto | Downcase }}
								{% else -%}
									{{ translations.Brutto | Downcase }}
								{% endif -%}
								{% if customer.Cart.SubtotalPrices -%}
									{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}
									{{ translations.Netto | Downcase }}
							  	{% else -%}
									{{ setPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ customer.CurrencyExt }}
									{{ translations.Brutto | Downcase }}
							  	{% endif -%}
						  	
							{% if setPrice > 0 -%}
								
							{% endif -%}
						
					{% endunless -%}
				
		  	
	  	{% endfor -%}

Następnie w pliku js/init.js znajdź frazę:

if(form.hasClass('add-set-to-cart-lq')){

Jest to jeden z warunków w funkcji post. Podmień calą jego zawartość poniższym kodem:

var set = {setId:Number($(e.currentTarget).data('set-id')), quantity:1, products:[]};
                    var setProducts = form.find('.set-product-lq');
                    var setProductsForDataLayer = [];
                    var setProductsForFBPixel = [];
                    var totalValue = 0;
                    setProducts.each(function () {
						var setProduct = {
							setElementId: Number($(this).data('set-element-id')),
							setProductId: Number($(this).data('set-product-id'))
						};
						if($(this).find('[name=attributePolyvalent]').length > 0){
							var attributesPolyvalent = [];
							$(this).find('[name=attributePolyvalent]').each(function(){
								var attribute = {
									id: Number($(this).data('id')),
									valueId:  Number($(this).val())
								};
								attributesPolyvalent.push(attribute);
							});
							setProduct.attributesPolyvalent = attributesPolyvalent;
						}
						if($(this).find('[name=attributeEditable]').length > 0){
							var attributesEditable = [];
							$(this).find('[name=attributeEditable]').each(function(){
								var attribute = {
									id: Number($(this).data('id')),
									value:  $(this).val()
								};
								attributesEditable.push(attribute);
							});
							setProduct.attributesEditable = attributesEditable;
						}
						set.products.push(setProduct);
                        var setProductDL = {
                            id: $(this).data('id').toString(),
                            name: $(this).data('name'),
                            price: $(this).data('price-full'),
                            quantity: $(this).data('quantity')
                        };
						var setProductFBP = {
							id: $(this).data('id').toString(),
							content_name: $(this).data('name'),
							value: Number($(this).data('price').toString().replace(',','.')),
							quantity: $(this).data('quantity')
						};
						totalValue = totalValue + (Number($(this).data('price').toString().replace(',','.')) * Number($(this).data('quantity').toString().replace(',','.')));
                        setProductsForDataLayer.push(setProductDL);
                        setProductsForFBPixel.push(setProductFBP);
                    });
					var data = [
						{name: "__csrf", value: __CSRF}, 
						{name: "__action", value: 'Cart/SetExtAdd'}, 
						{name: "set", value: JSON.stringify(set)}
					];
					if(window.app.getCookie('lastCartId') == undefined || window.app.getCookie('lastCartId') == -1){
						data.push({name: "__collection", value: 'customer.Cart.Id'});
					}
                    var dataLayerProds = {
                        "products": setProductsForDataLayer
                    };
					if(typeof fbq !== 'undefined') {
						fbq('track', 'AddToCart',
							{
								value: totalValue,
								currency: __curr,
								content_type: 'product',
								contents: setProductsForFBPixel
							}
						);
					}

Teraz w tym samym pliku (js/init.js) znajdź frazę List of events i linijkę wyżej wklej poniższy kod:

openSetElementProductsPopup: function(setElementId) {
        $('[data-set-element-products-popup='+setElementId+']').removeClass('hidden-lq');
		app.loadImages();
		$('body').addClass('modal-opened-ui');
    },

	changeSetElementProduct: function(e) {
        var setElementId = $(e.currentTarget).parents('[data-set-element-products-popup]').data('set-element-products-popup');
        var setProductId = $(e.currentTarget).data('set-product-id');
		var form = $(e.currentTarget).parents('.form-lq');
		if($(window).width() > 1279) {
			form.find('.set-slider-lq').slick('slickUnfilter');
		}
		form.find('[data-set-element-id='+setElementId+']').addClass('set-product-hidden-lq');
		form.find('[data-set-element-id='+setElementId+'][data-set-product-id='+setProductId+']').removeClass('set-product-hidden-lq');
		if($(window).width() > 1279) {
			form.find('.set-slider-lq').slick('slickFilter',':not(:has(.set-product-hidden-lq))');
		}
		app.loadImages();
		var oldPrice = 0;
		var newPrice = 0;
		form.find('.set-product-lq:not(.set-product-hidden-lq)').each(function(){
			oldPrice = Number((Number(oldPrice) + Number($(this).data('set-product-previous-value').replace(',','.'))).toFixed(__decimalPlacesPrice));
			newPrice = Number((Number(newPrice) + Number($(this).data('set-product-value').replace(',','.'))).toFixed(__decimalPlacesPrice));
		});
		var savedMoney = Number((newPrice - oldPrice).toFixed(__decimalPlacesPrice));
		form.find('.old-price-lq .value-lq').html(oldPrice.toPrice());
		form.find('.saved-money-lq .value-lq').html(savedMoney.toPrice());
		form.find('.brutto-lq .value-lq').html(newPrice.toPrice());
		form.find('.netto-lq .value-lq').html(newPrice.toPrice());
		$('body').removeClass('modal-opened-ui');
    },

Dalej w tym samym pliku (js/init.js) kilka linijek niżej (w funkcji events) dodaj analogicznie do pozostałych wywołań poniższy kod:

$('body').on('click', '.open-set-element-products-popup-lq', function(e) {
			app.openSetElementProductsPopup($(e.currentTarget).parents('[data-set-element-id]').data('set-element-id'));
		});
		$('body').on('click', '.change-set-element-product-lq', function(e) {
			app.changeSetElementProduct(e);
		});

Przejdź do pliku js/init-ui2.js i znajdź frazę:

$('body').on('click', '.hide-lq', function(e) {

Na końcu wyżej wymienionej funkcji oraz następnej, która jest pod nią:

($('body').on('click', '.hide-container-lq', function(e) {)

wklej poniższy kod:

    if($(e.currentTarget).parents('.sets-lq').length > 0){
        $('body').removeClass('modal-opened-ui');
    }

Pozostając w tym samym pliku (js/init-ui2.js) znajdź linijkę:

UIFeatures.initSlider('.set-slider-lq', {infinite: false, dots: false, slidesToShow: 4, responsive: [{breakpoint: 1279, settings: "unslick"}]});

i zamień ją na poniższy kod:

    if(!$('.set-slider-lq').hasClass('slick-initialized')){
        UIFeatures.initSlider('.set-slider-lq', {infinite: false, dots: false, slidesToShow: 4, responsive: [{breakpoint: 1279, settings: "unslick"}]});
        if($(window).width() > 1279) {
            $('.set-slider-lq').slick('slickFilter',':not(:has(.set-product-hidden-lq))');
        }
    }

Teraz w pliku scss/globals/_globals1.scss na samym końcu dodaj poniższy kod:

.change-set-element-product-ui{
  display: inline-block;
  cursor: pointer;
  figure{
    padding: 0;
    width: 200px;
    height: 200px;
  }
}

Następnie w pliku scss/globals/_globals-m.scss znajdź klase .set-product-ui{ i podmień jej zawartość poniższym kodem:

&:before{
          font-family: 'themify';
          content: "\e61a";
          color: $labelsColor;
          font-size: 20px;
          margin: 25px;
          display: block;
        }
        &:first-child:before, &.set-product-hidden-lq:before{
          content: none;
        }
        a{
          width: 70px;
          display: inline-block;
          vertical-align: middle;
        }
        .name-ui{
          display: inline-block;
          width: calc(100% - 90px);
          margin: 0 0 0 15px;
          vertical-align: middle;
          text-align: left;
          line-height: 1.2;
          font-size: 14px;
        }

Pozostając w tym samym pliku (scss/globals/_globals-m.scss) zaraz pod pierwszą linijką wklej poniższy kod:

  .set-product-hidden-lq{
    display: none;
  }

Obsługa załączników na formularzu kontaktowym

Z tego artykułu dowiesz się jak dodać w szablonie obsługę załączników na formularzu kontaktowym.

Uwaga

Instrukcja przeznaczona dla sklepów od wersji 2022.0 ze starszymi szablonami.

Wskazówka

Artykuł przeprowadzi Cię przez proces modyfikacji plików js. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Szafir

W pliku common/navigation-bars/navigation-contact.html znajdź frazę contact-form-required-fields-ui i linijkę niżej wklej poniższy kod:

{% if config.Contact.AttachmentsEnabled -%}

{{ translations.AddAttachement }} {% capture maxSize -%}{{config.Contact.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Contact.AttachmentsMaxCount) -%}

{% endfor -%}

{% endif -%} Następnie w pliku js/init-ui2.js znajdź frazę function sendContactForm(e) i usuń całą tą funkcję wraz z jej wywołaniem które jest zaraz pod nią. Przejdź do pliku js/init.js i znajdź frazę List of events. Linijkę wyżej wklej poniższy kod:

sendContactForm: function(e) {
		if(app.validationBeforePost(e) != 'error'){
			$('.during-ajax-modal-lq').removeClass('hidden-lq');
			var form = $(e.currentTarget).parents('.form-lq');
			var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
			var fileList = window.attachementsInComplaint;
			if(fileList != undefined){
				var filesSize = fileList.length;
			}
			var fd = new FormData();
			fd.append('__csrf', __CSRF);
			for(var i=0; i<dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize > 0) {
				window.AttachementsErrors = 0;
				function addAttachementError(file, message) {
					if(window.AttachementsNotAdded == undefined){
						window.AttachementsNotAdded = [];
					}
					var attachement = '

'+file.name+': '+message+'

'; window.AttachementsNotAdded.push(attachement); window.AttachementsErrors += 1; }; var input = form.find('[name=file]').eq(0); var extensions = input.attr('accept').split(', '); var fileSize = input.data('file-size'); for (var i=0; i<filesSize; i++) { var file = fileList.pop(); if(file.size < fileSize){ var extensionArr = file.name.split('.'); var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase(); var wrongExtension = true; for(var j=0; j<extensions.length; j++){ if(extension == extensions[j]){ fd.append('file'+i, file); var wrongExtension = false; } } if(wrongExtension){ var message = input.data('invalid-file'); addAttachementError(file, message); } } else { var message = input.data('size-exceeded'); addAttachementError(file, message); } } if(window.AttachementsNotAdded){ var popup = ' '; $('body').append(popup); $('body').addClass('modal-opened-ui'); window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined; } } $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { $('.during-ajax-modal-lq').addClass('hidden-lq'); $('.add-attachement-in-complaint-lq').val(''); if (data.action.Result) { var message = form.data('success'); app.temporaryMessage(form, message); $.each(inputs, function (index, value) { if ($(value).attr('name') !== 'contactId' && $(value).attr('name') !== '__action') { $(value).val(''); } }); form.find('.message-lq').remove(); } else { var message = ' ' + result.action.Message + ' '; if(result.action.Code != 100){ app.message(form, message); } } } }); $(e.currentTarget).removeClass('error-lq'); } else { $(e.currentTarget).addClass('error-lq'); } }, Pozostając w tym samym pliku (js/init.js) po wklejeniu powyższego kodu zejdź trochę niżej do funkcji events i analogicznie do pozostałych wywołań dodaj poniższy kod:

$('body').on('click', '.send-contact-form-lq', function(e) {
    app.sendContactForm(e);
});

Wskazówka

Aby załączniki pokazały się w szablonie należy aktywować parametr "Załączniku do formularza kontaktowego" z poziomu Panelu Administracyjnego/Ustawienia/Ustawienia sklepu/Ogólne.

Dodanie obsługi filtrów na stronie głównej

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać w nim obsługę filtrów na stronie głównej. Poniższy przykład jest jednym z wielu możliwych scenariuszy, Należy modyfikować kod we we własnym zakresie i dostosować go do własnych potrzeb.

Uwaga

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

Przykład modyfikacji szablonu Szafir

Wskazówka

Instrukcja dotyczy modyfikacji szablonu Szafir. W przypadku innych szablonów Comarch lub innego własnego, modyfikowanego - nie należy tej instrukcji traktować w stosunku 1:1, a jedynie jako źródło analogicznego postępowania.

Krok 1. W panelu administracyjnym e-Sklepu przejdź do sekcji Wygląd sklepu/Ustawienia/(prawy górny róg) Edytuj ustawienia zaawansowane/(prawy górny róg) Edytuj HTML. Krok 2. Przejdź do pliku home.html i na samym początku zastąp linijkę:

poniższym kodem:

{% assign categories = homepage-filters.Content | Split: '||||||' -%} {% assign categoryIndex = 0 -%}

{% for category in categories -%} {% assign categoryIndex = categoryIndex | Plus:1 -%} {% assign categoryArr = category | Split: '|||||' -%} {% assign categoryInfoArr = categoryArr[0] | Split: '|' -%} {% assign categoryLabel = categoryInfoArr[0] -%}

{% endfor -%}

{% assign categoryIndex = 0 -%} {% for category in categories -%} {% assign categoryIndex = categoryIndex | Plus:1 -%} {% assign categoryArr = category | Split: '|||||' -%} {% assign categoryInfoArr = categoryArr[0] | Split: '|' -%} {% assign categoryId = categoryInfoArr[1] -%}

{% assign filters = categoryArr[1] | Split: '||||' -%} {% for filter in filters -%} {% assign filterArr = filter | Split: '|||' -%} {% assign filterInfoArr = filterArr[0] | Split: '|' -%} {% assign filterLabel = filterInfoArr[0] -%} {% assign filterName = filterInfoArr[1] | StripNewlines -%}

{% endfor -%}

Krok 3. Z listy dostępnych plików przejdź do folderu js, a następnie w dowolnym pliku JS (np. js/init.js) dodaj kod:

function toggleHomepageFilter(e) {
    var index = $(e.currentTarget).data('index');
    $('.filter-bar-lq').removeClass('active-filter-bar-lq');
    $(e.currentTarget).addClass('active-filter-bar-lq');
    $('.homepage-filters-container-lq').addClass('hidden-lq');
    $('.homepage-filters-container-lq[data-index='+index+']').removeClass('hidden-lq');
};

$('body').on('click', '.filter-bar-lq:not(.active-filter-bar-lq)', function (e) {
    toggleHomepageFilter(e);
});

function getHomepageFilterValues(e) {
    var currentFilter = $(e.currentTarget);
    var currentFilterName = currentFilter.attr('name');
    var filtersContainer = $(e.currentTarget).parents('.homepage-filters-container-lq');
    var id = filtersContainer.find('.post-homepage-filters-lq').data('id');
    var data = [];
    var selects = filtersContainer.find('select');
    selects.each(function () {
        if($(this).val() != '' && $(this).attr('name') != currentFilterName){
            var name = $(this).attr('name');
            var val = $(this).val();
            data.push({name: name, value: val});
        }
    });
    data.push({name: "__action", value: 'Get/SearchFilters'});
    var param = $.param(data, true);
    $.get(',2,' + id, param, function (result) {
        $.get(result.action.Redirect302, {__collection: 'products.FilteringOptions.Filters'}, function (res) {
            var filtersSortingOrder = $('.homepage-lq').data('filters-sorting-order').split('|');
            var notSortedFilters = res.collection;
            var sortedFilters = [];
            for(var i=0; i<notSortedFilters.length; i++){
                sortedFilters.push({Field: notSortedFilters[i].Field, Values: []});
                for(var j=0; j<filtersSortingOrder.length; j++){
                    var sortingFilterName = filtersSortingOrder[j].trim();
                    for(var k=0; k<notSortedFilters[i].Values.length; k++){
                        if(sortingFilterName == notSortedFilters[i].Values[k].Text){
                            sortedFilters[i].Values.push(notSortedFilters[i].Values[k]);
                        }
                    }
                }
            }
            for(var i=0; i<sortedFilters.length; i++){
                if(sortedFilters[i].Field == currentFilterName){
                    var values = sortedFilters[i].Values;
                    var selectedOptionValue = currentFilter.val();
                    currentFilter.find('option:not([value=""])').remove();
                    for(var j=0; j<values.length; j++){ if(values[j].Count > 0){
                    var option = ''+values[j].Text+'';
                            currentFilter.append(option);
                        }
                    }
                    var newOptions = currentFilter.find('option');
                    newOptions.each(function(){
                        if($(this).val() == selectedOptionValue){
                            $(this).prop('selected', true);
                        }
                    })
                }
            }
        });
    });
};

$('body').on('mouseenter', '.get-homepage-filter-values-lq', function (e) {
    getHomepageFilterValues(e);
});

function postHomepageFilters(e) {
    var id = $(e.currentTarget).data('id');
    var data = [];
    var selects = $(e.currentTarget).parents('.homepage-filters-container-lq').find('select');
    selects.each(function () {
        if($(this).val() != ''){
            var name = $(this).attr('name');
            var val = $(this).val();
            data.push({name: name, value: val});
        }
    });
    data.push({name: "__action", value: 'Get/SearchFilters'});
    var param = $.param(data, true);
    $.get(',2,' + id, param, function (result) {
        app.replace(result.action.Redirect302);
    });
};

$('body').on('click', '.post-homepage-filters-lq', function (e) {
    postHomepageFilters(e);
});

Krok 4. Przejdź do folderu scss, a następnie do podfolderu globals, gdzie w pliku _globals-m.scss dodaj kod:

.filter-bars-container-ui{
	display: flex;
}

.filter-bar-ui {
	width: 50%;
	border: none;
	text-align: center;
	padding: 10px;
	border-bottom: 1px solid $lightBorderColor;
	background: $menuBackgroundColor;
	display: flex;
	align-items: center;
	justify-content: center;
}

.active-filter-bar-lq, .filter-bar-ui:hover {
	background: $breadcrumbsAndSomeLists;
	border-bottom: 1px solid $breadcrumbsAndSomeLists;
	color: #fff;
}

Krok 5. Będąc w fodlerze scss, przejdź do podfolderu partials, następnie dodaj poniższy kod w pliku _home.scss:

.homepage-filters-container-ui{
  position: absolute;
  top: -2px;
  left: 0;
  z-index: 11;
  width: 100%;
  padding: 20px 0 5px;
  background: rgba(#5B6569, 0.5);
  border-top: 2px solid $breadcrumbsAndSomeLists;
  text-align: center;
}

.homepage-filters-ui{
  text-align: center;
}

.homepage-filter-ui{
  width: 28%;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 20px;
  button{
    width: 100%;
    height: 66px;
    margin-right: -15px;
  }
  label:not(.checkbox-ui):not(.radio-ui){
    color: #fff;
    margin-left: 6px;
  }
}

@media only screen and (max-width: 1279px) {
  .homepage-filters-container-ui{
    position: static;
    width: 100%;
    background: $breadcrumbsAndSomeLists;
    padding: 5px 0;
    a{
      display: block;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
  }
  .homepage-filters-ui{
    text-align: left;
  }
  .homepage-filter-ui{
    width: calc(50% - 12px);
    display: inline-block;
    float: none;
    margin-bottom: 0;
    &:nth-child(1), &:nth-child(6){
      width: 100%;
      padding: 0 20px;
    }
    button {
      height: 56px;
      margin-top: 20px;
    }
    label:not(.checkbox-ui):not(.radio-ui){
      margin-left: 0;
    }
  }
}

Uwaga

Pamiętaj, aby odpowiednio skompilować oraz zminifikować modyfikowane pliki. Więcej na ten temat przeczytasz tutaj.

Wskazówka

Pamiętaj także, aby wszelkie zmiany zapisać, a następnie opublikować.

Panel Administracyjny

Krok 1. W Panelu Administracyjnym przejdź do zakładki Wygląd sklepu/Ustawienia/(prawy górny róg) Edytuj ustawienia zaawansowane/Zakładka Obiekty. Krok 2. Dodaj nowy obiekt klikając przycisk Dodaj. Wybierz typ Tekst i nazwij go homepage-filters. Gdy się pojawi na liście obiektów kliknij na niego, aby edytować jego ustawienia. Krok 3. W polu treść sprecyzuj, jakiej kategorii towarów ma dotyczyć filtrowanie (możesz utworzyć kilka osobnych zakładek), oraz jakich atrybutów filtrujących będzie można użyć. Poniżej przykładowa treść:

Nazwa Kategorii1|ID kategorii1
|||||
Nazwa Filtra1|FILTR1
||||
Nazwa Filtra2|FILTR2
||||
Nazwa Filtra3|FILTR3
||||
Nazwa Filtra4|FILTR4
||||
Nazwa Filtra5|FILTR5
||||||
Nazwa Kategorii2|ID kategorii2
|||||
Nazwa Filtra6|FILTR6
||||
Nazwa Filtra7|FILTR7
||||
Nazwa Filtra8|FILTR8
||||
Nazwa Filtra9|FILTR9

Wskazówka

Nazwa Kategorii1,2,3,... - Nazwa Kategorii w e-Sklepie, na podstawie której zostanie utworzony filtr na stronie głównej.
ID Kategorii1,2,3,... - jest to ID wybranej kategorii w e-Sklepie, na podstawie której zostanie utworzony filtr.
Nazwa Filtra1,2,3,... - w tym miejscu podaj nazwę filtra, jaki chcesz aby został wyświetlony na stronie głównej.
FILTR1,2,3,... - wartość Field w obiekcie, w którym znajdują się filtry dla danej kategorii.

Wskazówka

Zwróć uwagę na ilość "|" belek między nazwami kategorii oraz filtrami. Jest ona istotna, aby prawidłowo utworzyć filtry.

Krok 4. Udostępnij obiekt na stronie głównej w szablonie. Gdy utworzysz treść dla obiektu przejdź do zakładki Strony i zaznacz parametr Strona główna.

Krok 5. Do listy obiektów (Wygląd sklepu/Ustawienia/(prawy górny róg)Edytuj ustawienia zaawansowane/Zakładka Obiekty) dodaj nowy obiekt o typie tekst oraz nazwie filters-sorting-order. Krok 6. Podobnie jak w kroku 3 uzupełnij treść dla nowo dodanego obiektu. W treści należy wprowadzić wszystkie wartości, dla każdego filtra, którego chcemy wyświetlać Klientom w e-Sklepie. Kolejność, w jakiej wprowadzisz wartości będzie taka sama na stronie głównej e-Sklepu. Poniżej przykładowa treść:

Wartość 1|
Wartość 2|
Wartość 3|

Wskazówka

Ostatnia wartość powinna również zawierać belkę "|".

Krok 7. Udostępnij obiekt na stronie głównej w szablonie. Gdy utworzysz treść dla obiektu przejdź do zakładki Strony i zaznacz parametr Strona główna (patrz pkt. 4).

Wskazówka

Pamiętaj, aby wszelkie zmiany zapisać, a następnie opublikować.

Obsługa Google Translate w szablonach

W niniejszym artykule dowiesz się jak integrować swój szablon z usługą automatycznego tłumaczenia - Google Translate.

Spis treści

Szafir

Topaz

Agat

Bursztyn

Opal

Wskazówka

Szafir

Wskazówka

Folder z dokumentacją szablonu otworzysz w panelu e-Sklep w menu: Wygląd sklepu/ Ustawienia, następnie (w prawym górnym rogu) wybierz ikonkę "Więcej" i wejdź w Edytuj ustawienia zaawansowane. Ponownie wybierz ikonkę "Więcej" i wejdź w Edytuj HTML.

Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką common/header/header-top-bar.html. Za pomocą narzędzia wyszukiwania znajdź trzecie wystąpienie frazy languagesSize. Bezpośrednio pod znalezioną linią wklej następujący kod:

Przejdź z powrotem do głównego folderu szablonu i otwórz plik _layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod: Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką elements/header/header-1.html. Za pomocą narzędzia wyszukiwania znajdź frazę headerSection__shopData. Bezpośrednio pod znalezioną linią wklej następujący kod:

Przejdź z powrotem do głównego folderu szablonu i otwórz plik base_layout.html. Za pomocą narzędzia wyszukiwania znajdź frazę </head>. Bezpośrednio nad znalezioną linią wklej następujący kod:

<div id="google_translate_element" style="display: inline-block;"></div> <code class="lang:ruby decode:true"><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'bg,cs,de,en,hr,hu,it,lt,ro,ru,sk,sl,uk', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-13192131-1'}, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="true" defer="true"></script> </code>

Wersja druga (header-2)

Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką elements/header/header-2.html. Za pomocą narzędzia wyszukiwania znajdź frazę headerSection__shopData. Bezpośrednio pod znalezioną linią wklej następujący kod:

<code class="lang:ruby decode:true"><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'bg,cs,de,en,hr,hu,it,lt,ro,ru,sk,sl,uk', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-13192131-1'}, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="true" defer="true"></script> </code>

Wersja trzecia (header-3)

Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką elements/header/header-3.html. Za pomocą narzędzia wyszukiwania znajdź frazę headerSection__bannerBg. Cztery linie nad znalezioną linią (trzy linie nad znalezioną frazą składają się z tagów) wklej następujący kod:

Agat

Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką partials/common/header.html. Za pomocą narzędzia wyszukiwania znajdź frazę lang-and-currency. Bezpośrednio pod znalezioną linią wklej następujący kod:

Bursztyn

Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką page/header.html. Za pomocą narzędzia wyszukiwania znajdź frazę secondary-nav. Dwie linie pod znalezioną wklej następujący kod (pod tagiem <ul>):

Opal

Przejdź do folderu z szablonem a następnie otwórz plik znajdujący się pod ścieżką page/header.html. Za pomocą narzędzia wyszukiwania znajdź frazę right-box. Dwie linie pod znalezioną wklej następujący kod (pod tagiem):

Obsługa walut "słownych" w szablonach

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsłużyć w nim waluty "słowne". W każdym szablonie w wielu miejscach znajdują się wywołania property Currency. To property odpowiada za symbol walut (np. PLN). Jeśli chcemy aby w szablonie wyświetlał się słowny odpowiednik symbolu walut (np. zł), należy w danym miejscu w kodzie zmienić property Currency na CurrencyExt. Tego nowego property można użyć w poniższych obszarach: - customer - customerprofile/customer-profile (zamówienia, reklamacje/zwroty, oferty i wszystkie maile z tym związane, nowe rabaty) - cart/order - currencyExt (jest to słowny odpowiednik {{currency}})

Uwaga

Nazwy obiektów różnią się w zależności od wybranego szablonu.

Jak wstawić dodatkową Wtyczkę (Widget) w szablonie Topaz?

Dodatkowy widget np. Ceneo Zaufane Opinie, Facebook Messenger lub inne można samodzielnie zaimplementować w kodzie szablonu. Wystarczy kilka prostych kroków, dzięki którym będzie można wyświetlić swoim Klientom dodatkowy widget na każdej stronie w e-Sklepie. Wszystkie wtyczki posiadają indywidualny skrypt, który należy wkleić w odpowiednim miejscu w kodzie szablonu. Obsługa w szablonie Topaz: Krok 1. W panelu administracyjnym e-Sklepu należy przejść do sekcji Wygląd sklepu/Ustawienia/(opcja trzy kropki w górnym prawym rogu) Edytuj ustawienia zaawansowane/ (ponownie opcja trzy kropki w górnym prawym rogu) Edytuj HTML. Krok 2. Odnaleźć plik base_layout.html i przejść do jego edycji. Krok 3. Skopiować skrypt danego widgetu, a następnie wkleić go w odpowiedniej sekcji pod koniec pliku.

Poniżej wklejonego skryptu mają zostać tylko linijki zawierające zamknięcie tagu html, zamknięcie tagu body oraz zamknięcie( {% endif -%} ) jednego warunku. Powyżej wklejonego kodu powinno być zamknięcie ( {% endif -%} ) warunku {% if config.External.SalesManago -%}. Krok 4. Zapisać i opublikować zmiany.

Uwaga

Powyższa instrukcja dotyczy szablonu Topaz. Należy także pamiętać, iż różnego rodzaju wtyczki mogą wymagać odrębnej implementacji w różnych plikach szablonu. Zawsze należy zapoznać się z dokumentacją oraz wymaganiami dostawcy wtyczki. Jeżeli powyższa instrukcja nie jest wystarczająca dla wyświetlenia dodatkowej wtyczki w szablonie należy skontaktować się z Partnerem Comarch, w celu uzyskania dodatkowej pomocy.

Wskazówka

Chcesz dodać do e-Sklepu wtyczkę Facebook Messenger Chat? Skorzystaj z odrębnie przygotowanej instrukcji dostępnej w artykule Obsługa wtyczki Czatu Facebooka w szablonach.

Modyfikacja listy towarów w Topazie - filtrowanie bez przeładowania strony

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:

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') || 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 () { $(".display-details__sorting").off("click").on("click", function(e) { var dropdownDiv = $(e.currentTarget).children(".dropdown-menu"); if (dropdownDiv) dropdownDiv.stop().slideToggle(); }); $(".product-list__filters-trigger").on("click", function () { $(".product-list__filters").toggle(300); $(".product-list__grid-wrapper").toggleClass('filtersOpen-js'); if ($('body').find('.filtersOpen-js').index() >= 0) { $(".product-list__filters-trigger span:first-child").text(__translations.HideFilters); } else { $(".product-list__filters-trigger span:first-child").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("slow"); }); $('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); }) } }); $('.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 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:

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.

Dodanie szczegółowej weryfikacji spełnienia wymogów bezpieczeństwa hasła

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać szczegółową weryfikację spełnienia wymogów bezpieczeństwa hasła.

Wskazówka

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

Szafir

W plikach common/address-form-register-full.html, customer-profile/customer-details/change-password-form.html, reminder.html, sign-in-customer-profile.html, sign-in.html, sign-up-no-address.html (w niektórych z tych plików występuje kilka razy) zastąp frazę:


{{ translations.FillProperPassword }}

poniższym kodem:


{{ translations.PasswordMustHave }}:
 {{ translations.Min8Char }}
 {{ translations.BigLetter }}
 {{ translations.SmallLetter }}
 {{ translations.Digit }}
 {{ translations.SpecialChar }}

Teraz w pliku js/init.js wyszukaj frazę // password (nie // password mismatch) i zastąp cały warunek:


if(name == 'password' || name == 'passwordRepeat' || name == 'oldPassword'){
	var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/;
	if(!regex.test(input.val())){
		parent.find('.validation-password-lq').removeClass('hidden-lq');
		input.addClass('validation-error-lq');
                input.addClass('validation-error-ui');
	} else {
		parent.find('.validation-password-lq').addClass('hidden-lq');
                input.removeClass('validation-error-ui');
	}
}

poniższym kodem:


if(name == 'password' || name == 'passwordRepeat' || name == 'oldPassword'){
	var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/;
	if(!regex.test(input.val())){
		parent.find('.validation-password-lq').removeClass('hidden-lq');
		input.addClass('validation-error-lq');
                input.addClass('validation-error-ui');
		var min8CharRegex = /^[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/;
		var bigLetterRegex = /^(?=.*[A-Z])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/;
		var smallLetterRegex = /^(?=.*[a-z])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/;
		var digitRegex = /^(?=.*\d)[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/;
		var specialCharRegex = /^(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/;
		if(!min8CharRegex.test(input.val())){
			parent.find('.min-8-char-lq').removeClass('passed-validation-ui');
			parent.find('.min-8-char-lq i').removeClass('passed-validation-icon-ui');
		} else {
			parent.find('.min-8-char-lq').addClass('passed-validation-ui');
			parent.find('.min-8-char-lq i').addClass('passed-validation-icon-ui');
		}
		if(!bigLetterRegex.test(input.val())){
			parent.find('.big-letter-lq').removeClass('passed-validation-ui');
			parent.find('.big-letter-lq i').removeClass('passed-validation-icon-ui');
		} else {
			parent.find('.big-letter-lq').addClass('passed-validation-ui');
			parent.find('.big-letter-lq i').addClass('passed-validation-icon-ui');
		}
		if(!smallLetterRegex.test(input.val())){
			parent.find('.small-letter-lq').removeClass('passed-validation-ui');
			parent.find('.small-letter-lq i').removeClass('passed-validation-icon-ui');
		} else {
			parent.find('.small-letter-lq').addClass('passed-validation-ui');
			parent.find('.small-letter-lq i').addClass('passed-validation-icon-ui');
		}
		if(!digitRegex.test(input.val())){
			parent.find('.digit-lq').removeClass('passed-validation-ui');
			parent.find('.digit-lq i').removeClass('passed-validation-icon-ui');
		} else {
			parent.find('.digit-lq').addClass('passed-validation-ui');
			parent.find('.digit-lq i').addClass('passed-validation-icon-ui');
		}
		if(!specialCharRegex.test(input.val())){
			parent.find('.special-char-lq').removeClass('passed-validation-ui');
			parent.find('.special-char-lq i').removeClass('passed-validation-icon-ui');
		} else {
			parent.find('.special-char-lq').addClass('passed-validation-ui');
			parent.find('.special-char-lq i').addClass('passed-validation-icon-ui');
		}
	} else {
		parent.find('.validation-password-lq').addClass('hidden-lq');
                input.removeClass('validation-error-ui');
	}
}

Następnie w pliku scss/globals._globals2.scss dodaj na końcu poniższy kod:


.validation-password-lq i{
  border: 1px solid $dangerColor;
  border-radius: 50%;
  font-size: 6px;
  padding: 3px;
  &::before{
    content: "\e622";
  }
  &.passed-validation-icon-ui{
    border: 1px solid $successColor;
    background-color: $successColor;
    color: #fff;
    &::before{
      content: "\e64c";
    }
  }
}

.passed-validation-ui{
  color: $successColor;
}

Ostatnim krokiem będzie dodanie w Panelu Administracyjnym tłumaczeń do nowych wymogów. Tłumaczenia dodajemy w zakładce Wygląd sklepu -> Ustawienia -> Tłumaczenia. Tłumaczenia które należy dodać to: PasswordMustHave: Hasło musi mieć Min8Char: Minimum 8 znaków BigLetter: Dużą literę SmallLetter: Małą literę Digit: Cyfrę SpecialChar: Znak specjalny

Dodanie opcji wyłączenia obsługi zapytań ofertowych

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać opcję wyłączenia obsługi zapytań ofertowych.

Szafir

W plikach common/header/client-area.html, customer-profile/menu.html, customer-profile/orders/order-details.html, product/product-presentation-data.html (w tym ostatnim pliku dana fraza występuje 2 razy) zastąp frazę:

{% if config.B2B -%}

poniższym kodem:

{% if config.B2B and settings.inquiries == 'yes' -%}

Pozostając w pliku product/product-presentation-data.html zastąp linijkę:

{% if config.B2B and activeProduct.Price != null and activeProduct.Availability.Status != 3 and customer.HidePrices == false and activeProduct.AskForPrice == false and noSimpleProduct -%}

poniższym kodem:

{% if config.B2B and activeProduct.Price != null and activeProduct.Availability.Status != 3 and customer.HidePrices == false and activeProduct.AskForPrice == false and noSimpleProduct and settings.inquiries == 'yes' -%}

Teraz w pliku common/navigation-bars/cart-navigation-bar.html zastąp linijkę:

{% if order.OrderStep == 'Start' and config.B2B and productsSize > 0 and customer.Cart.EditedOrderId == null -%}

poniższym kodem:

{% if order.OrderStep == 'Start' and config.B2B and productsSize > 0 and customer.Cart.EditedOrderId == null and settings.inquiries == 'yes' -%}

Następnie w pliku _layout.html zastąp linijkę:

{% if config.B2B and page.PageId != config.DefinedPages.Order.Id -%}

poniższym kodem:

{% if config.B2B and page.PageId != config.DefinedPages.Order.Id and settings.inquiries == 'yes' -%}

Następnie w pliku __settings.liquid do tłumaczeń polskich dodaj:

{% assign inquiries = "Zapytania o wycenę" -%}
{% assign inquiriesInfo = "Prezentuj funkcje związane ze składaniem Zapytań o wycenę" -%}

Teraz w tym samym pliku (__settings.liquid) w części w której są elementy fieldset dodaj analogicznie poniższy kod:


	{{inquiries}}

	
		{{inquiriesInfo}}

		
			
				
					
					{{yesTranslation}}
				

				
					
					{{noTranslation}}

W Panelu Administracyjnym w zakładce Wygląd sklepu -> Ustawienia -> Ustawienia szablonu pojawi się nowa sekcja, dzięki której będzie można włączyć lub wyłączyć zapytania ofertowe, oraz wszystko co z nimi związane.

Dodanie kilku opcji wielkości menu kategorii

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać w nim kilka opcji wielkości menu kategorii.

Wskazówka

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

Szafir

W pliku common/categories-navigation/sliding-navigation-partial.html na samym początku zastąp linijkę:

poniższym kodem:

Teraz w pliku scss/components/_categories-navigation.scss odnajdź klasę category-content-ui i zawartość jej styli podmień poniższym kodem:

.category-content-ui {
    position: relative;
    width: 100%;
    transition: height $animations-time;
    background-color: $bgColor;
    &.big-ui{
      .has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{
        width: calc(100% - 60px);
      }
      .category-label-ui{
        font-size: 16px;
        padding-left: 20px;
      }
      .category-arrow:not(.prev-level-ui), .prev-level-ui i{
        width: 60px;
      }
      .category-label-ui, .category-arrow{
        min-height: 55px;
      }
    }
    &.medium-ui{
      .has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{
        width: calc(100% - 47px);
      }
      .category-label-ui{
        font-size: 14px;
        padding-left: 15px;
      }
      .category-arrow:not(.prev-level-ui), .prev-level-ui i{
        width: 47px;
      }
      .category-label-ui, .category-arrow{
        min-height: 44px;
      }
    }
    &.small-ui{
      .has-nodes-lq a, .prev-level-label-ui, .deeper-level-ui .prev-level-ui{
        width: calc(100% - 34px);
      }
      .category-label-ui{
        font-size: 12px;
        padding-left: 10px;
      }
      .category-arrow:not(.prev-level-ui), .prev-level-ui i{
        width: 34px;
      }
      .category-label-ui, .category-arrow{
        min-height: 34px;
      }
    }
  }

Następnie w pliku __settings.liquid do tłumaczeń polskich dodaj:

{% assign categoryMenu = "Menu kategorii" -%}
{% assign categoryMenuInfo = "Wielkość linków kategorii" -%}
{% assign big = "Duże" -%}
{% assign medium = "Średnie" -%}
{% assign small = "Małe" -%}

Teraz w tym samym pliku (__settings.liquid) w części w której są elementy fieldset dodaj analogicznie poniższy kod:


	{{categoryMenu}}

	{{categoryMenuInfo}}

	
		
			
				
				{{big}}
			
			
			
				
				{{medium}}
			

			
				
				{{small}}

W Panelu Administracyjnym w zakładce Wygląd sklepu -> Ustawienia -> Ustawienia szablonu pojawi się nowa sekcja z 3 opcjami wielkości menu do wyboru. Po każdej zmianie w ustawieniach należy zapisać zmiany ikonką dyskietki znajdującą się w prawym górnym rogu.

Obsługa elementu tekstowego w szablonie Topaz

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

Wskazówka

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

Element tekstowy z obrazem

W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Kliknij dodaj i następnie wybierz typ tekstowy. Wprowadź nazwę textelement-2. Z dostępnych obiektów, wybierz nowo utworzony obiekt i wprowadź wybraną przez siebie treść w formacie:


Nagłówek pierwszego poziomu
Nagłówek drugiego poziomu
Zawartość pierwszej kolumny
Zawartość drugiej kolumny
link-do-zdjecia.jpg

Na końcu zapisz zmiany. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna. Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie tekstu i obrazu na stronie głównej sklepu. Kolejnym krokiem jest dodanie na stronę główną sklepu podglądu tekstu. W celu wykonania tej operacji, przejdź do plików sklepu (Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML), a następnie kliknij przycisk DODAJ. W polu Ścieżka wpisz elements/textelement, a w polu nazwa pliku, textelement-2.html. W nowo utworzonym pliku dodaj poniższy kod:


{% assign name = include-%}
{% assign content = [name].Content-%}

Po wprowadzeniu powyższego kodu, otwieramy plik home-page.html znajdujący się w głównym katalogu. Należy dodać w nim linijkę:


{% include 'elements/textelement/textelement-2.html' with 'textelement-2' -%}

Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie elementu tekstowego na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji. Następnie należy otworzyć katalog css a w nim plik layout0.css. Na jego końcu wklejamy następujący kod:


.textElement-2{color:{{settings.primaryFontColor}};max-width:1400px;margin:0 auto;padding-top:50px}.textElement-2__element-wrapper{display:grid;grid-template-columns:1fr 4fr}.textElement-2__content-wrapper{margin-left:64px}.textElement-2__image{margin:auto;max-height:290px}.textElement-2__header{font-size:40px;font-weight:300}.textElement-2__secondHeader{font-size:40px;font-weight:300}.textElement-2__column-wrapper{margin-top:27px;display:grid;grid-template-columns:2fr 1fr;gap:44px;text-align:justify}
@media screen and (max-width: 768px) {.textElement-2{text-align:center;display:block;padding:0}.textElement-2__element-wrapper{display:block}.textElement-2__content-wrapper{margin-left:0}.textElement-2__image{display:block;width:auto;max-height:200px;margin-bottom:20px}.textElement-2__header{margin:0 10%;font-size:20px}.textElement-2__secondHeader{margin:0 10%;font-size:20px}.textElement-2__column-wrapper{grid:unset;gap:20px;margin:20px 10% 0 10%;font-size:15px}.textElement-2__column .textElement-2__secondColumn{text-align:justify}}

Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout0.js. Przy pomocy narzędzia wyszukiwania, szukamy frazy headerFunctions.init();. Następujący kod należy wkleić bezpośrednio pod znalezioną linią:


if($('body').find('#textElement').index() >= 0) {
    textElementFunctions.init();
}

Na koniec pozostając w tym samym katalogu otwieramy plik layout1.js. Na jego końcu wklejamy następujacy kod:


var textElementFunctions = {
    init: function () {
        textElementFunctions.setTextElement();
    },
    setTextElement: function() {
        let textElementList = $("div[class^='textElement-']");

        textElementList.each( function() {
            let content = $(this).find("input").val();
            if (content === null || content === undefined)
                return null;
            let textElementValues = textElementFunctions.getTextElementValue(content);

            if (!textElementFunctions.isTextElementEmpty(textElementValues)) {
                $(this).find("#textElementHeader").html(textElementValues.header1);
                $(this).find("#textElementSecondHeader").html(textElementValues.header2);
                $(this).find("#textElementColumn").html(textElementValues.column1);
                $(this).find("#textElementSecondColumn").html(textElementValues.column2);
                $(this).find("#textElementThirdColumn").html(textElementValues.column3);
                $(this).find("#textElementImage").attr("src",textElementValues.image);
            } else {
                $(this).css("display", "none");
            }
       });
    },
    getTextElementValue: function(content) {
        const headerRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header1>');
        const header2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header2>');
        const columnRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column1>');
        const column2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column2>');
        const column3Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column3>');
        const imageRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/image>');

        let header1, header2, column1, column2, column3, image = null;

        header1 = textElementFunctions.checkMatch(content, headerRegex) !== null? textElementFunctions.checkMatch(content, headerRegex).substring(0, 50) : null;
        header2 = textElementFunctions.checkMatch(content, header2Regex) !== null? textElementFunctions.checkMatch(content, header2Regex).substring(0, 50): null;
        column1 = textElementFunctions.checkMatch(content, columnRegex);
        column2 = textElementFunctions.checkMatch(content, column2Regex);
        column3 = textElementFunctions.checkMatch(content, column3Regex);
        image = textElementFunctions.checkMatch(content, imageRegex);

        return {
            header1: header1,
            header2: header2,
            column1: column1,
            column2: column2,
            column3: column3,
            image: image,
        };
    },
    checkMatch: function(content, regex) {
        if (content)
            if (content.match(regex))
                if (content.match(regex).hasOwnProperty(1))
                    return content.match(regex)[1];
        return null;
    },
    isTextElementEmpty: function(textElementValues) {
        for(const [index, item] of Object.entries(textElementValues)) {
            if(item !== null) return false;
        }
        return true;
    }
}

Element tekstowy bez obrazu

W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Kliknij dodaj i następnie wybierz typ tekstowy. Wprowadź nazwę textelement-1. Z dostępnych obiektów, wybierz nowo utworzony obiekt i wprowadź wybraną przez siebie treść w formacie:


Nagłówek pierwszego poziomu
Nagłówek drugiego poziomu
Zawartość pierwszej kolumny
Zawartość drugiej kolumny
Zawartość trzeciej kolumny

Na końcu zapisz zmiany. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna. Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie tekstu i obrazu na stronie głównej sklepu. Kolejnym krokiem jest dodanie na stronę główną sklepu podglądu tekstu. W celu wykonania tej operacji, przejdź do plików sklepu (Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML), a następnie kliknij przycisk DODAJ. W polu Ścieżka wpisz elements/textelement, a w polu nazwa pliku, textelement-1.html. W nowo utworzonym pliku dodaj poniższy kod:


{% assign name = include-%}
{% assign content = [name].Content-%}

Po wprowadzeniu powyższego kodu, otwieramy plik home-page.html znajdujący się w głównym katalogu. Należy dodać w nim linijkę:


{% include 'elements/textelement/textelement-1.html' with 'textelement-1' -%}


.textElement-1{color:{{settings.primaryFontColor}};max-width:1400px;margin:0 auto;padding-top:50px}.textElement-1__header{font-size:40px;font-weight:300}.textElement-1__secondHeader{font-size:40px;font-weight:300}.textElement-1__column-wrapper{margin-top:27px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;text-align:justify}
@media screen and (max-width: 769px) {.textElement-1{text-align:center;margin-bottom:30px}.textElement-1__header{margin:0 10%;font-size:20px}.textElement-1__secondHeader{margin:0 10%;font-size:20px}.textElement-1__column-wrapper{grid:unset;gap:20px;font-size:15px;margin:20px 10% 0 10%}.textElement-1__column .textElement-1__secondColumn .textElement-1__thirdColumn{text-align:justify;margin-bottom:15px}}


if($('body').find('#textElement').index() >= 0) {
    textElementFunctions.init();
}

Na koniec pozostając w tym samym katalogu otwieramy plik layout1.js. Na jego końcu wklejamy następujacy kod:


var textElementFunctions = {
    init: function () {
        textElementFunctions.setTextElement();
    },
    setTextElement: function() {
        let textElementList = $("div[class^='textElement-']");

        textElementList.each( function() {
            let content = $(this).find("input").val();
            if (content === null || content === undefined)
                return null;
            let textElementValues = textElementFunctions.getTextElementValue(content);

            if (!textElementFunctions.isTextElementEmpty(textElementValues)) {
                $(this).find("#textElementHeader").html(textElementValues.header1);
                $(this).find("#textElementSecondHeader").html(textElementValues.header2);
                $(this).find("#textElementColumn").html(textElementValues.column1);
                $(this).find("#textElementSecondColumn").html(textElementValues.column2);
                $(this).find("#textElementThirdColumn").html(textElementValues.column3);
                $(this).find("#textElementImage").attr("src",textElementValues.image);
            } else {
                $(this).css("display", "none");
            }
       });
    },
    getTextElementValue: function(content) {
        const headerRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header1>');
        const header2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/header2>');
        const columnRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column1>');
        const column2Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column2>');
        const column3Regex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/column3>');
        const imageRegex = new RegExp('(\s*(?:\w|[^\w])*\s*)<\/image>');

        let header1, header2, column1, column2, column3, image = null;

        header1 = textElementFunctions.checkMatch(content, headerRegex) !== null? textElementFunctions.checkMatch(content, headerRegex).substring(0, 50) : null;
        header2 = textElementFunctions.checkMatch(content, header2Regex) !== null? textElementFunctions.checkMatch(content, header2Regex).substring(0, 50): null;
        column1 = textElementFunctions.checkMatch(content, columnRegex);
        column2 = textElementFunctions.checkMatch(content, column2Regex);
        column3 = textElementFunctions.checkMatch(content, column3Regex);
        image = textElementFunctions.checkMatch(content, imageRegex);

        return {
            header1: header1,
            header2: header2,
            column1: column1,
            column2: column2,
            column3: column3,
            image: image,
        };
    },
    checkMatch: function(content, regex) {
        if (content)
            if (content.match(regex))
                if (content.match(regex).hasOwnProperty(1))
                    return content.match(regex)[1];
        return null;
    },
    isTextElementEmpty: function(textElementValues) {
        for(const [index, item] of Object.entries(textElementValues)) {
            if(item !== null) return false;
        }
        return true;
    }
}

Prezentacja własnych punktów odbioru osobistego w formie mapy

Spis treści

Ustawienia ogólne

Szablon Szafir

Szablon Agat

Szablon Opal

Szablon Bursztyn

Wskazówka

Ustawienia ogólne

Niezbędne ustawienia do włączenia widoku własnych punktów odbioru na mapie: 1. Dodanie w panelu sklepu klucza aplikacji do Google Maps API (Wygląd Sklepu > Ustawienia) google maps api input

2. Zaznaczenie opcji wyświetlania punktów odbioru osobistego na mapie (Wygląd Sklepu > Ustawienia) change to map view

3. Dodanie własnych punktów odbioru (Ustawienia > Płatności i dostawy > Odbiór osobisty) add delivery points

Wskazówka

Wypełniając formularz nowego punktu, trzeba pamiętać o polach „Szerokość/długość geograficzna”

4. Włączyć opcję odbioru osobistego w panelu (Ustawienia > Płatności i dostawy > Odbiór osobisty) enable delivery points

5. Dodać dostawę za pomocą własnych punktów odbioru do sposobów dostawy deliveries

6. Dodać dostawę do macierzy dostaw oraz określić metody płatności za ten rodzaj dostawy add delivery method

7. Dokonać niezbędnych modyfikacji w kodzie szablonu wg poniższych instrukcji.

Szablon Szafir

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść pliki „collection-points-scripts.html” i „collection-points-styles.html” w głównym folderze szablonu.
Umieść plik „collection-points.js” w folderze „js”.
Umieść plik “collection-points.css” w folderze “css”.
Podmień plik “collection-points.html”, który znajduje się w folderze „order/delivery-partials”.
W pliku „__layout.html”, na końcu sekcji „<head>” dodaj poniższą linijkę:
```
{% include 'collection-points-styles.html' %}
```
W pliku „__layout.html”, na końcu sekcji „<body>” dodaj poniższą linijkę:
```
{% include 'collection-points-scripts.html' %}
```

Szablon Agat

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collection-points.css” w folderze “css”.
Umieść plik “collection-points.js” w folderze “js”.
Podmień plik “order.js”, który znajduje się w folderze “js”.
Podmień plik “delivery-adress.html”, który znajduje się w folderze “partials/cart”.
Podmień plik “init.js”, który znajduje się w folderze “js”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

{% if page.PageId == config.DefinedPages.Order.Id -%} 
   <link rel="stylesheet" type="text/css" href="css/collection-points.css"> 
{% endif -%}

Szablon Opal

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collection-points.js” w folderze “js”.
Umieść plik “collection-points.css” w folderze “css”.
Podmień plik “order.js”, który znajduje się w folderze “js”.
Podmień plik “data-form.html”, który znajduje się w folderze “order/cst-data”.
Podmień plik “cart.html”, który znajduje się w folderze “order”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

{% if page.PageId == config.DefinedPages.Order.Id -%} 
   <link rel="stylesheet" type="text/css" href="css/collection-points.css"> 
{% endif -%}

Do pliku “order-cart.html”, wklej poniższy kod:

{% extends '_layout.html' -%}

{% block PageContent -%}
    <script src="{{ cart.CollectionPointMapUrl }}"></script>
    <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script>
    <script src="js/collection-points.js?v={{ lqTS }}"></script>
    {% include 'order-cart-container.html'%}
{% endblock -%}

{% block PageBodyEnd -%}
    <script>__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script>
    <script src="js/order.js?v={{ lqTS }}" charset="utf-8" type="text/javascript"></script>
{% endblock -%}

Szablon Bursztyn

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

Umieść plik “collectionpoints.js” w folderze “js”.
Umieść plik “collectionpoints.css” w folderze “css”.
Podmień plik “order.js”, który znajduje się w folderze “js”.
Podmień plik “cart.html”, który znajduje się w folderze “order”.
Podmień plik “order-short-info.html”, który znajduje się w folderze “order”.
Podmień plik “cart-products-partial.html”, który znajduje się w folderze “order”.

W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

{% if page.PageId == config.DefinedPages.Order.Id -%}
    <link rel="stylesheet" type="text/css" href="css/collectionpoints.css">
{% endif -%}

Do pliku “order-cart.html”, wklej poniższy kod:

{% extends '_layout.html' -%}

{% block PageContent -%}
    <script src="{{ cart.CollectionPointMapUrl }}"></script>
    <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script>
    <script src="js/collectionpoints.js?v={{ lqTS }}"></script>
    {% include 'order-cart-container.html'%}
{% endblock -%}

{% block PageBodyEnd %}
    <script type="text/javascript">__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script>
    <script src="js/order.js?v={{ lqTS }}"></script>
{% endblock %}

Wykorzystanie filtrów Img oraz Img2 w szablonach

Wykorzystanie filtrów Img i Img2 w szablonach niesie za sobą korzyści, takie jak możliwość wyświetlenia nie tylko wewnętrznych obrazków, ale też z adresu url. W tym artykule dowiesz się, jak zmienić kod szablonów, aby w wybranych miejscach używały filtrów Img lub Img2.

Filtry Img i Img2 oraz jak ich używać zostały opisane w tym artykule w zakładce HTML.

Mogą być używane dla:

obrazków towaru (na liście towarów, szczegółach towarów, koszyku, zamówieniu, reklamacji, itd.)
obrazków na blogu
obrazków producentów
obrazków marek

Jeżeli chcesz, aby w danym miejscu szablon wykorzystywał filtr Img, w pierwszej kolejności musisz zlokalizować kod odpowiadający za wyświetlanie tego obrazka. W tym celu można w przeglądarce kliknąć prawym przyciskiem myszy na obrazek, który nas interesuje, a następnie kliknąć w Zbadaj. Znajdź div lub inny element, który zawiera ten obrazek i skopiuj jego klasę lub inny charakterystyczny atrybut. Później przy pomocy narzędzia wyszukiwania wyszukaj tę frazę w kodzie szablonu w plikach z rozszerzeniem .html.

Przykład w szablonie Agat na szczegółach towaru:

Po zbadaniu zdjęcia towaru na szczegółach towaru w przeglądarce, wyświetlił się następujący kod elementu:

Charakterystycznym elementem okazała się klasa product-image. Po wyszukaniu tej frazy znaleziono poniższy kawałek kodu w pliku product-page.html.


<figure class="product-image">
    {% if productD.ImageId != -1 -%}
        <div class="zoom" data-zoom-img-style="url(img/{{image.Id}}/{{image.Link}}.jpg)"></div>
        <img alt="{{image.Alt}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg">
    {% else -%}
        <i class="fa fa-picture-o" aria-hidden="true"></i>
    {% endif -%}
</figure>

Najważniejszą linią kodu jest linia odpowiedzialna za wyświetlenie obrazka, czyli:


<img alt="{{image.Alt}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg">

Jak widać zdjęcie jest wyświetlanie nie przy pomocy filtra, który tworzy tag img, lecz poprzez ustawienie tagu img wraz z atrybutami w kodzie szablonu. Link, Id i inne atrybuty pobierane są w tym przypadku ze zmiennej image. Dodatkowo można zauważyć, że link zapisany jest w atrybucie data-lazy. Jak wynika z artykułu dotyczącego filtrów, podlinkowanego wyżej, filtr Img2 wstawia link do obrazka do atrybutu data-lazy, natomiast filtr Img do atrybutu data-src. W związku z powyższym w tym przypadku zostanie wykorzystany filtr Img2 a kod z jego użyciem będzie wyglądał następująco:


<figure class="product-image">
    {% if productD.ImageId != -1 -%}
        <div class="zoom" data-zoom-img-style="url({% if image.Id !=0 -%} img/{{image.Id}}/{{image.Link}}.jpg {% elseif image.ExternalUrl -%} {{image.ExternalUrl}} {% endif -%})"></div>
        {{image|Img2:''}}
    {% else -%}
        <i class="fa fa-picture-o" aria-hidden="true"></i>
    {% endif -%}
</figure>

Zmiana sposobu prezentacji kanałów w zgodach marketingowych w szablonie Agat

Wskazówka

W tym artykule dowiesz się jak zmodyfikować szablon Agat, aby przekształcić obsługę kanałów w zgodach marketingowych na bardziej czytelną. Wyrażanie zgody w przypadku istnienia wielu kanałów będzie wyglądało następująco:

W pierwszej kolejności dodaj odpowiednie tłumaczenia.

Id: Consents_InTheFormOf, Tekst: w postaci

Wskazówka

Tłumaczenia możesz dodać w panelu administracyjnym, wchodząc na zakładkę Tłumaczenia a następnie klikając w przycisk Dodaj. Po uzupełnieniu pól kliknij w przycisk Dodaj.

W katalogu js znajdź plik init.js. Narzędziem wyszukiwania wyszukaj frazę self.uicheckIfParentChecked. Znaleziona linia znajduje się w obszarze 6 linii kodu (widoczne poniżej), które należy usunąć.

$('body').on('click', '.channel-checkbox', function (e) {
    self.uicheckIfParentChecked(e);
});
$('body').on('click', '.multiple-choice .input-group > label .switch-input[name=tos]', function (e) {
    self.uicheckIfTosChannelChecked(e);
});

W głównym katalogu szablonu znajdź plik __loginconsents.liquid. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę clickableTOSExists. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć a następnie w tym miejscu wkleić poniższy.

{% assign channelsSize = tos.Channels | Size -%}
{% if channelsSize == 0 -%}
<div class="input-group switches">
    {% if tos.Statement %}
    <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
    {% else %}
    {% assign clickableTOSExsits = true -%}
    <label class="switch">
        <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
        <input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%}
            data-required="req" {% endif -%} />
        <span class="switch-label"></span>
        <span class="switch-handle"></span>
    </label>
    {% endif -%}
</div>
{% elsif channelsSize > 0 -%}
<div class="input-group switches">
    {% assign onlyEmail = false -%}
    {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
    {% assign onlyEmail = true -%}
    {% endif -%}
    {% if onlyEmail == false -%}
    <span class="channel-warning tos-warning"><span
            class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
    {% endif -%}
    {% for chn in tos.Channels -%}
    <label class="switch channel-switch">
        <span class="switch-name">{{tos.Text | Remove: '.'}} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span>
        <input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%}
            data-required="req" {% endif -%} />
        {% if onlyEmail == false -%}
        <input class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if
            tos.Required -%} data-required="req" {% endif -%} />
        {% else -%}
        <input type="hidden" name="channelKey" value="{{ chn.Key }}" checked />
        <input class="switch-input" type="checkbox" checked />
        {% endif -%}
        <span class="switch-label"></span>
        <span class="switch-handle"></span>
    </label>
    {% endfor -%}
    {% endif -%}
</div>
{% endfor -%}
</div>
{% if clickableTOSExists -%}

Kolejne zmiany będą wprowadzone w katalogu partials. Wewnątrz tego katalogu, w katalogu cart znajdź plik delivery-and-payment.html. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę required-fields-info. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć i w tym miejscu wkleić poniższy.

{% assign channelsSize = tos.Channels | Size -%}
{% if channelsSize == 0 -%}
<li class="{% if tos.Required -%} required-consent{% endif -%}">
    <div class="input-group switches">
        {% if tos.Statement %}
        <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
        {% else %}
        <span class="main-consent-warning tos-warning"><span
                class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span>
        <label class="switch">
            <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
            <input aria-label="tos" class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if
                tos.Required -%} data-required="req" {% endif -%} />
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
        </label>
        {% endif -%}
    </div>
</li>
{% elsif channelsSize > 0 -%}
<li class="multiple-choice {% if tos.Required -%} required-consent{% endif -%}">
    <div class="input-group switches">
        {% assign onlyEmail = false -%}
        {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
        {% assign onlyEmail = true -%}
        {% endif -%}
        {% if onlyEmail == false -%}
        <span class="channel-warning tos-warning"><span
                class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
        {% endif -%}
        {% for chn in tos.Channels -%}
        <label class="switch channel-switch ">
            <span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}}
                {{chn.Name}}</span>
            <input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if
                tos.Required -%} data-required="req" {% endif -%} disabled />
            {% if onlyEmail == false -%}
            <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey"
                value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} />
            {% else -%}
            <input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}" />
            <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" />
            {% endif -%}
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
        </label>
        {% endfor -%}
    </div>
</li>
{% endif -%}
{% endfor -%}
</ul>
<div class="input-group required-fields-info">

W katalogu partials/common znajdź plik footer.html. Wyszukaj w nim frazę assign channelsSize. Następnie wyszukaj frazę required-fields-info. Kod pomiędzy znalezionymi liniami (włącznie z nimi) należy usunąć i w tym miejscu wkleić poniższy.

{% assign channelsSize = tos.Channels | Size -%}
{% if channelsSize == 0 -%}
<li class="{% if tos.Required -%} required-consent{% endif -%}">
    <div class="input-group switches">
        {% if tos.Statement %}
        <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
        {% else %}
        <span class="main-consent-warning tos-warning"><span
                class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span>
        <label class="switch">
            <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
            <input aria-label="tos" class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if
                tos.Required -%} data-required="req" {% endif -%} />
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
        </label>
        {% endif -%}
    </div>
</li>
{% elsif channelsSize > 0 -%}
<li class="multiple-choice {% if tos.Required -%} required-consent{% endif -%}">
    <div class="input-group switches">
        {% if tos.Statement %}
        <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
        {% endif -%}
        {% assign onlyEmail = false -%}
        {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
        {% assign onlyEmail = true -%}
        {% endif -%}
        {% if onlyEmail == false -%}
        <span class="channel-warning tos-warning"><span
                class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
        {% endif -%}
        {% for chn in tos.Channels -%}
        <label class="switch channel-switch ">
            <span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}}
                {{chn.Name}}</span>
            <input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if
                tos.Required -%} data-required="req" {% endif -%} disabled />
            {% if onlyEmail == false -%}
            <input aria-label="cnannelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey"
                value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} />
            {% else -%}
            <input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}" />
            <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" />
            {% endif -%}
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
        </label>
        {% endfor -%}
    </div>
</li>
{% endif -%}
{% endfor -%}
</ul>
<div class="input-group required-fields-info">

W tym samym katalogu znajdź plik registration-consents.html. Kod w pliku należy usunąć i wkleić poniższy.

<ul>
    {% for tos in config.TOS.Consents.Registration -%}
        {% assign channelsSize = tos.Channels | Size -%}
        {% if channelsSize == 0 -%}
            <li class="{% if tos.Required -%} required-consent{% endif -%}">
                <div class="input-group switches">
                    {% if tos.Statement %}
                        <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
                    {% else %}
                        <span class="main-consent-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span>
                        <label class="switch">
                            <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
                            <input aria-label="tos" class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%}/>
                            <span class="switch-label"></span>
                            <span class="switch-handle"></span>
                        </label>
                    {% endif -%}
                </div>
            </li>
        {% elsif channelsSize > 0 -%}
            <li class="multiple-choice {% if tos.Required -%} required-consent{% endif -%}">
                <div class="input-group switches">
                    {% assign onlyEmail = false -%}
                    {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%}
                        {% assign onlyEmail = true -%}
                    {% endif -%}
                    {% if onlyEmail == false -%}
                        <span class="channel-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span>
                    {% endif -%}
                    {% for chn in tos.Channels -%}
                        <label class="switch channel-switch">
                            <span class="switch-name">{{tos.Text | ToString | Remove: '.'}} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span>
                            <input aria-label="tos" class="switch-input" type="hidden" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%} disabled/>
                            {% if onlyEmail == false -%}
                                <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} />
                            {% else -%}
                                <input aria-label="channelKey" type="hidden" name="channelKey" value="{{ chn.Key }}"/>
                                <input aria-label="channelKey" class="switch-input channel-checkbox" type="checkbox"/>
                            {% endif -%}
                            <span class="switch-label"></span>
                            <span class="switch-handle"></span>
                        </label>
                    {% endfor -%}
                </div>
            </li>
        {% endif -%}
    {% endfor -%}
</ul>
<div class="input-group required-fields-info">
    * {{ translations.Com_RequiredFields }}
</div>

Ostatnim modyfikowanym plikiem będzie plik customer-consents.html w katalogu customer. Kod w pliku należy usunąć i wkleić poniższy.

{% assign anythingToAccept = false -%}
{% for tos in customerProfile.Consents -%}
    {% if tos.Checked == false or tos.Updated.Text %}
        {% assign anythingToAccept = true -%}
    {% endif -%}
{% endfor %}

{% include 'partials/common/date-format.html' -%}

<div class="all-users-consents">
    <h2 class="main-title">{{ translations.UserConsents }}</h2>
    {% if anythingToAccept == true %}
        <div class="consents-box">
            <span class="box-heading">{{ translations.Com_ToAcceptation }}</span>
            <ul>
                {% for tos in customerProfile.Consents %}
                    {% assign channelsSize = tos.Channels | Size -%}
                    {% assign updatedChannelsSize = tos.Updated.Channels | Size -%}
                    {% assign updatedContentsSize = tos.Updated.Contents | Size -%}
                    {% if tos.Checked == false or tos.Updated.Text %}
                        {% if channelsSize == 0 -%}
                            <li class="{% if tos.Updated.Text %} updated-consent {% endif -%}">
                                {% if tos.Statement -%}
                                    <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
                                    <p class="statement-consent">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
                                {% else -%}
                                    {% if tos.Checked == false -%}
                                        <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
                                    {% elsif tos.Updated.Text and updatedChannelsSize == 0 -%}
                                        <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
                                        <span class="consent-small-heading">{{ translations.NewConsentContent }}:</span>
                                        <span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text }}</span>
                                        <span class="consent-small-heading old-consent">{{translations.OldConsentContent}}:</span>
                              			<span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
                                    {% endif -%}
                                {% endif -%}
                            </li>
                        {% elsif channelsSize > 0 -%}
                            {% for chn in tos.Channels -%}
                                <li class="{% if tos.Updated.Text %} updated-consent {% endif -%}">
                                    {% if tos.Updated.Text and updatedChannelsSize == 0 -%}
                                        <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
                                        <span class="consent-small-heading">{{ translations.NewConsentContent }}:</span>
                                        <span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text }}</span>
                                        <span class="consent-small-heading old-consent">{{translations.OldConsentContent}}:</span>
                                    {% endif -%}
                                    <span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span>
                                    {% if chn.Checked %}
                                        <button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button>
                                    {% else %}
                                        <button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button>
                                    {% endif -%}
                                </li>
                            {% endfor -%}
                        {% endif -%}
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    {% endif -%}
    <div class="consents-box">
        <span class="box-heading">{{ translations.Com_Accepted }}</span>
        <ul>
            {% for tos in customerProfile.Consents -%}
                {% assign channelsSize = tos.Channels | Size -%}
                {% if tos.Checked %}
                    {% if channelsSize == 0 -%}
                        <li>
                            {% if tos.Required -%}
                                <span class="withdraw-warning">
                                    <span class="fa fa-exclamation-triangle"></span>
                                    <span>{{ translations.WithdrawWarning }}</span>
                                </span>
                            {% endif -%}
                            {% if tos.Statement-%}
                                <span class="accept-date">{{translations.AcceptationDate}}: {{tos.Date | Date:dateFormat}}</span>
                                <button aria-label="consentWithdraw" class="consent-withdraw" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Withdraw }}</button>
                                <p class="statement-consent">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p>
                            {% else %}
                                {% if tos.Checked %}
                                    <span class="accept-date">{{translations.AcceptationDate}}: {{tos.Date | Date:dateFormat}}</span>
                                    <button aria-label="consentWithdraw" class="consent-withdraw" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Withdraw }}</button>
                                {% elsif tos.Checked == false %}
                                    <button aria-label="consentAccept" class="consent-accept" data-id="tos" data-key="{{ tos.Id }}">{{ translations.Com_Accept }}</button>
                                {% endif -%}
                                <span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span>
                            {% endif -%}
                        </li>
                    {% elsif channelsSize > 0 -%}
                        <li>
                            {% for chn in tos.Channels -%}
                                {% if tos.Required -%}
                                    <span class="withdraw-warning">
                                        <span class="fa fa-exclamation-triangle"></span>
                                        <span>{{ translations.WithdrawWarning }}</span>
                                    </span>
                                {% endif -%}
                                <span class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}}</span>
                                {% if chn.Checked %}
                                    <span class="accept-date">{{translations.AcceptationDate}}: {{chn.Date | Date:dateFormat}}</span>
                                    <button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button>
                                {% else %}
                                    <button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button>
                                {% endif -%}
                            {% endfor -%}
                        </li>
                    {% endif -%}
                    {% if updatedChannelsSize > 0 -%}
                        <ul>
                            {% for chn in tos.Updated.Channels -%}
                                <li>
                                    {% if tos.Updated.Text -%}
                                        <span class="consent-small-heading">{{translations.NewConsentContent}}:</span>
                                        <span class="switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Updated.Text | Remove:'.' }} {{translations.Consents_InTheFormOf}} {{chn.Name}} }}</span>
                                        <span class="consent-small-heading old-consent">{{ translations.OldConsentContent }}:</span>
                                    {% endif -%}
                                    {% if chn.Checked %}
                                        <button aria-label="consentWithdraw" class="consent-withdraw" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Withdraw }}</button>
                                    {% else %}
                                        <button aria-label="consentAccept" class="consent-accept" data-id="channelKey" data-key="{{ chn.Key }}">{{ translations.Com_Accept }}</button>
                                    {% endif -%}
                                </li>
                            {% endfor -%}
                        </ul>
                    {% endif -%}
                    {% if updatedContentsSize > 0 -%}
                        <ul>
                            {% for contents in tos.Updated.Contents -%}
                                <li>
                                    <span>{{ contents.Name }}</span>
                                    {{ contents.ContentHtml }}
                                </li>
                            {% endfor -%}
                        </ul>
                    {% endif -%}
                {% endif -%}
            {% endfor %}
        </ul>
    </div>
</div>

Prezentacja rabatów w profilu klienta w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować szablon Topaz, aby umożliwić wyświetlanie rabatów w profilu klienta.

Wskazówka

Poniższa instrukcja działa dla każdego widoku szablonu Topaz, niezależnie od wybranych wersji elementów.

Zakładka Promocje będzie wyświetlać się tylko wtedy, gdy w banerze o nazwie CustomerProfileBanner będzie znajdował się przynajmniej jeden obrazek. W tym celu należy w panelu administracyjnym dodać taki banner. Wejdź w zakładkę Bannery i kliknij w przycisk Dodaj. W polu Nazwa wpisz CustomerProfileBanner. W miejscu Obrazki dodaj odpowiedni obrazek a następnie kliknij w przycisk Zapisz w prawym górnym rogu.

Następnie dodaj odpowiednie tłumaczenia.

Id: Product, Tekst: Towar
Id: Category, Tekst: Kategoria
Id: Quantity, Tekst: Ilość
Id: Netto, Tekst: Netto
Id: BundleThreshold, Tekst: Próg pakietowy
Id: Threshold, Tekst: Próg
Id: AllProducts, Tekst: Wszystkie produkty
Id: Back, Tekst: Powrót
Id: CurrentPromotions, Tekst: Aktualne <b>promocje</b>
Id: YourDiscounts, Tekst: Twoje <b>rabaty</b>
Id: ValidTo, Tekst: Ważny do
Id: ValidLifetime, Tekst: Ważny bezterminowo
Id: ValidFrom, Tekst: Ważny od
Id: Promotions, Tekst: Promocje
Id: ForRegularCustomer, Tekst: Dla stałego klienta
Id: ForNewCustomer, Tekst: Dla nowego klienta
Id: NoDiscountsInfo, Tekst: Aktualnie nie mamy rabatów przygotowanych dla Ciebie.

Wskazówka

Tłumaczenia możesz dodać w panelu administracyjnym, wchodząc na zakładkę Tłumaczenia a następnie klikając w przycisk Dodaj. Po uzupełnieniu pól kliknij w przycisk Dodaj.

Kolejnym krokiem jest modyfikacja kodu szablonu. W pierwszej kolejności należy dodać zakładkę Promocje w profilu klienta. W plikach szablonu w folderze static-elements/customer-profile znajduje się plik o nazwie customer-profile.html. Narzędziem wyszukiwania wyszukaj w nim frazę inputs-container-js. Nad znalezioną linią powinien znajdować się tag <ul/>. Nad tym tagiem wklej poniższy kod.


{% if config.Banners['CustomerProfileBanner'].Images[0]-%}
<li class="discounts-js" data-template="discounts/discounts">
    <span>{{ translations.Promotions }}</span>
</li>
{% endif -%}

Następnie należy dodać pliki odpowiedzialne za wyświetlanie promocji po kliknięciu w zakładkę. W folderze partials/customer dodaj folder o nazwie discounts a w nim trzy pliki:

discount-details.html
discount-elements.html
discounts.html

W pliku discount-details.html wklej poniższy kod.


{% assign discount = customer-profile.DiscountERPDetails -%}

{% if discount.Description != '' and discount.Description != null  -%}
   {{discount.Description}}  
{% endif -%}

{% if discount.Thresholds -%}
    {% for threshold in discount.Thresholds -%}
    <div class="discounts__narrow-container" >
      <strong>{{translations.Threshold}}: </strong>
      {% if threshold.ThresholdType == 1 -%}
          {{threshold.Threshold | ToPrice}} {{threshold.ThresholdSymbol}}
      {% else -%}
          {{threshold.Threshold}}
      {% endif -%}
  </div>
  <div class="discounts__narrow-container"><strong>{{translations.QuantityThreshold}}:</strong> {{threshold.ThresholdMinPositionsCount}}</div>
  <div class="discounts__elements" >
      {% include 'partials/customer/discounts/discount-elements.html' with threshold -%}
  </div>
{% endfor -%}
{% else -%}
<div class="discounts__elements">
  {% include 'partials/customer/discounts/discount-elements.html' with discount -%}
</div>
{% endif -%}

<button class="primary-action-button discountsDetailsButton-js">{{translations.Back}}</button>

W pliku discount-elements.html wklej poniższy kod.



{% assign discount = customer-profile.DiscountERPDetails -%}
{% if include -%}
{% assign elementsParent = include -%}
{% else -%}
{% assign elementsParent = discount -%}
{% endif -%}

{% assign anyGroup = false -%}
{% assign anyProduct = false -%}
{% assign anyThreshold = false -%}
{% assign anyBundleThreshold = false -%}
{% assign anyBundleQuantity = false -%}
{% assign anyTotalPrice = false -%}
{% assign anySubtotalPrice = false -%}
{% for element in elementsParent.Elements -%}
    {% if element.Group != null -%}
        {% assign anyGroup = true -%}
    {% endif -%}
    {% if element.Product != null -%}
        {% assign anyProduct = true -%}
    {% endif -%}
    {% if element.Threshold != null and element.Threshold > 0 -%}
        {% assign anyThreshold = true -%}
    {% endif -%}
    {% if element.BundleThreshold != null and element.BundleThreshold > 0 -%}
        {% assign anyBundleThreshold = true -%}
    {% endif -%}
    {% if element.BundleQuantity != null and element.BundleQuantity > 0 -%}
        {% assign anyBundleQuantity = true -%}
    {% endif -%}
    {% if element.FixedPrice -%}
        {% assign anyFixedPrice = true -%}
        {% if element.TotalPrice != null and element.TotalPrice > 0 -%}
            {% assign anyTotalPrice = true -%}
        {% endif -%}
        {% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%}
            {% assign anySubtotalPrice = true -%}
        {% endif -%}
    {% endif -%}
{% endfor -%}

<div class="discounts__row discounts__row__header">
    <div class="discounts__rowTitle">
        {% if anyGroup and anyProduct -%}
            {{translations.Product}}/{{translations.Category}}
        {% elseif anyGroup -%}
            {{translations.Category}}
        {% else -%}
            {{translations.Product}}
        {% endif -%}
    </div>
    {% if anyBundleQuantity -%}
        <div class="discounts__rowTitle">
            {{translations.Quantity}}
        </div>
    {% endif -%}
    {% unless anyFixedPrice and anySubtotalPrice == false -%}
        <div class="discounts__rowTitle">
            {% if anyFixedPrice and anySubtotalPrice -%}
				{{translations.Pro_Price}} {{translations.Netto | Downcase }}
			{% else -%}
				{{translations.Crt_Discount}}
			{% endif -%}
        </div>
    {% endunless -%}
    {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
        <div class="discounts__rowTitle">
            {% if anyFixedPrice and anyTotalPrice -%}
				{{translations.Pro_Price}} {{translations.Com_Brutto | Downcase}}
			{% elseif anyBundleThreshold -%}
				{{translations.BundleThreshold}}
			{% else -%}
				{{translations.Threshold}}
			{% endif -%}
        </div>
    {% endif -%}
</div>
{% for element in elementsParent.Elements -%}
<div class="discounts__row">
    <div class="discounts__cell">
        {% if element.Group != null -%}
            {% if element.Group.Url -%}
                <a href="{{ element.Group.Url }}">
            {% endif -%}
                    {{ element.Group.Name }}
            {% if element.Group.Url -%}
                </a>
            {% endif -%}
        {% elseif element.Product != null -%}
            {% if element.Product.Url -%}
                <a href="{{ element.Product.Url }}">
            {% endif -%}
                    {{ element.Product.NameNoHtml }}
            {% if element.Product.Url -%}
                </a>
            {% endif -%}
        {% else -%}
            {{ translations.AllProducts }}
        {% endif -%}
    </div>
    {% if anyBundleQuantity -%}
        <div class="discounts__cell">
            {% if element.BundleQuantity > 0 -%}
                <span class="discounts__mobile">
                    {{translations.Quantity}}
                </span> 
                <span>
                    {{ element.BundleQuantity | Normalize }}
                </span>
            {% endif -%}            
        </div>
    {% endif -%}
    {% unless anyFixedPrice and anySubtotalPrice == false -%}
        <div class="discounts__cell">
            <span class="discounts__mobile">
                {% if element.FixedPrice -%}
                    {% if element.SubtotalPrice > 0 -%}
                        {{ translations.Pro_Price | Downcase }} {{ translations.Netto | Downcase }}
                    {% endif -%}
                {% else -%}
                    {{ translations.Crt_Discount | Downcase }}
                {% endif -%}
            </span> 
            <span>
                {% if element.FixedPrice -%}
                    {% if element.SubtotalPrice > 0 -%}
                        {{ element.SubtotalPrice | ToPrice }}
                    {% endif -%}
                {% else -%}
                    {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
                        {{ element.Value | ToPrice }}
                    {% else -%}
                        {{ element.Value | Normalize }}
                    {% endif -%}
                {% endif -%}
                {{ element.ValueSymbol }}
            </span>
        </div>
    {% endunless -%}
    {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
        <div class="discounts__cell">
            <span class="discounts__mobile">
                {% if element.FixedPrice -%}
                    {% if element.TotalPrice > 0 -%}
                        {{ translations.Pro_Price | Downcase }} {{ translations.Com_Brutto | Downcase }}
                    {% endif -%}
                {% elseif element.BundleThreshold > 0 -%}
                    {{ translations.BundleThreshold | Downcase }}
                {% elseif element.Threshold > 0 -%}
                    {{ translations.Threshold | Downcase }}
                {% endif -%}
            </span>
            <span>
                {% if element.FixedPrice -%}
                    {% if element.TotalPrice > 0 -%}
                        {{ element.TotalPrice | ToPrice }}
                    {% endif -%}
                    {{ element.ValueSymbol }}
                {% elseif element.BundleThreshold > 0 -%}
                    {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
                        {{ element.BundleThreshold | ToPrice }}
                    {% else -%}
                        {{ element.BundleThreshold | Normalize }}
                    {% endif -%}
                    {{ element.BundleThresholdSymbol }}
                {% elseif element.Threshold > 0 -%}
                    {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
                        {{ element.Threshold | ToPrice }}
                    {% else -%}
                        {{ element.Threshold | Normalize }}
                    {% endif -%}
                    {{ element.ThresholdSymbol }}
                {% endif -%}
            </span>
        </div>
    {% endif -%}
</div>
{% endfor -%}

W pliku discounts.html wklej poniższy kod.


{% assign name = 'CustomerProfileBanner' -%} 
{% if config.Banners[name] -%} 
{% assign banner = config.Banners[name] -%} 
<div class="discounts discountsMainTemplate-js">
    <h2 class="discounts__header" >{{translations.CurrentPromotions}}</h2>
        <div class="customerProfileBanner banner-discounts">
            {% assign imagesNumber = banner.Images | Size  -%}
            {% assign images = banner.Images -%}
                {% for img in images -%} 
                    <div class="banner-discounts__wrapper">
                        <figure class="banner-discounts__image">
                            <img alt="{{img.Alt | H}}" src="css/img/alo.gif" data-lazy="{{img.Url}}">
                        </figure>
                        <div class="banner-discounts__info">
                            {% if img.Heading != '' -%}
                                <p class="banner-discounts__title">{{img.Heading}}</p>
                            {% endif -%}
                            {% if img.Text != '' -%}
                                <p class="banner-discounts__title banner-discounts__title__small">{{img.Text}}</p>
                            {% endif -%}
                        </div>
                        {% if img.Link != '' -%}
                            <a aria-label="check" href="{{img.Link}}" class="primary-action-button" {% if img.TargetBlank == true -%} target="_blank" {% endif -%}>
                                {{translations.Check}}
                            </a>    
                        {% endif -%} 
                    </div>
                {% endfor -%}
                {% if imagesNumber == 0 %}
                    <div class="banner-discounts__wrapper">
                        <figure class="banner-discounts__image banner-discounts__image_placeholder">
                            {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                        </figure>
                        <p class="banner-discounts__size">{% if header3 == true -%} 1118 x 534 {% else -%} 1920x680 {% endif -%}</p>
                    </div>
                {% endif %}
        </div>
        <h2 class="discounts__header" >{{translations.YourDiscounts}}</h2>
        <div class="discounts__container">

        {% assign discountsERP = customer-profile.DiscountsERP -%}
        {% assign discountString = customer-profile.DiscountQueryGET | H -%}
        {% assign paginationPageNo = discountsERP.PageNo -%}

        {% if paginationPageNo == 1 -%}
        {% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%}
        {% if orderValuesSize > 0 -%}
            {% assign anyDiscount = true -%}
            {% for orderValue in customer-profile.DiscountsEshop.OrderValue -%}
            <div class="discounts__item">
                <div class="discounts__value">
                    {{ orderValue.Discount | Normalize }} %
                </div>
                <div class="discounts__info">
                    <div class="discounts__name">
                        {{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }}
                    </div>
                    <div class="discounts__date">
                        {% if orderValue.DateTill -%}
                            {{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }}
                        {% else -%}
                            {{ translations.ValidLifetime | Downcase }}
                        {% endif -%}
                    </div>
                </div>
            </div>
            {% endfor -%}
        {% endif -%}
        {% if customer-profile.DiscountsEshop.Regular -%}
            {% assign anyDiscount = true -%}
            {% assign regular = customer-profile.DiscountsEshop.Regular -%}
            <div class="discounts__item">
                <div class="discounts__value">
                    {{ regular.Discount | Normalize }} %
                </div>
                <div class="discounts__info">
                    <div class="discounts__name">
                        {{ translations.ForRegularCustomer }}
                    </div>
                    <div class="discounts__date">
                        {% if regular.DateTill -%}
                            {{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }}
                        {% else -%}
                            {{ translations.ValidLifetime | Downcase }}
                        {% endif -%}
                    </div>
                </div>
            </div>
        {% endif -%}
        {% if customer-profile.DiscountsEshop.FirstOrder -%}
            {% assign anyDiscount = true -%}
            {% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%}
            <div class="discounts__item">
                <div class="discounts__value">
                    {{ firstOrder.Discount | Normalize }} %
                </div>
                <div class="discounts__info">
                    <div class="discounts__name">
                        {{translations.ForNewCustomer}}
                    </div>
                    <div class="discounts__date">
                        {% if firstOrder.DateTill -%}
                            {{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }}
                        {% else -%}
                            {{ translations.ValidLifetime | Downcase }}
                        {% endif -%}
                    </div>
                </div>
            </div>
        {% endif -%}
    {% endif -%}
    {% if discountsERP.TotalItems > 0 -%} 
        {% assign anyDiscount = true -%}
        {% for discount in discountsERP.Discounts -%}
        <div class="discounts__item">
            <div class="discounts__value discounts__value__details discountsDetails-js discounts-clickable" data-url="{{ page.Url }}?{{ discountString }}={{ discount.Id }}" data-template="partials/customer/discounts/discount-details.html">
                {{ translations.Details }} 
            </div>
            <div class="discounts__info">
                <div class="discounts__name">
                    {% if discount.Name != null -%}
                        {{ discount.Name }}
                    {% else -%}
                        {{ translations.AllProducts }}
                    {% endif -%}            </div>
                <div class="discounts__date">
                    {% if discount.DateTill -%}
                        {% if discount.DateFrom -%}
                            <div>{{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }}</div>
                        {% endif -%}
                        {{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }}
                    {% else -%}
                        {{ translations.ValidLifetime | Downcase }}
                    {% endif -%}
                </div>
            </div>
        </div>
        {% endfor -%}
        </div>
    {% endif -%}
    {% endif -%}
    {% if discountsERP.TotalItems > 10 -%}
    <nav>
        {% assign tabName = 'discounts/discounts' -%}
        {% assign sectionName = 'DiscountsERP' -%}
        {% include 'partials/customer/profile-pagination.html' -%}
    </nav>
    {% endif -%}
</div>
{% unless anyDiscount -%}
    {{ translations.NoDiscountsInfo }}
{% endunless -%}
<div class="discounts discounts__details-container discountsDetailsTemplate-js hidden">
</div>

Aby dodać odpowiednie style do zakładki z promocjami znajdź folder css/partials/customer i dodaj w nim folder o nazwie discounts a w nim plik o nazwie discounts-g.css. Do tego pliku wklej poniższy kod.


.banner-discounts{margin:0 auto;background-color:#f2f2f2;height:auto}.banner-discounts__list{width:100%;height:100%}.banner-discounts__wrapper{width:100%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.banner-discounts a{position:absolute;bottom:8%;left:10%;text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.banner-discounts figure{margin:0}.banner-discounts__image img{box-sizing:border-box;padding:0;margin:0;object-fit:cover;min-height:170px;max-width:100%;width:100%;object-position:50% 50%}.banner-discounts__image img[src="css/img/alo.gif"]{width:100%!important;height:100%!important}.banner-discounts__image_placeholder img{object-fit:contain;background-color:#f2f2f2;max-height:680px}.banner-discounts__info{position:absolute;left:10%;bottom:33%;width:80%}.banner-discounts__title{margin:0;padding:0;font-weight:300;color:{{settings.bannerFontColor}};display:block;font-size:48px}.banner-discounts__title.banner-discounts__title__small{line-height:1.5;font-size:14px;margin-top:10px}.banner-discounts__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0}.banner-discounts__size{position:absolute;font-size:30px;color:gray;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}.banner-discounts .slick-track{height:100%}.banner-discounts .slick-arrow{background-color:{{settings.sliderBgColor}};padding:20px}.banner-discounts .slick-arrow:hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-arrow:before{color:#fff;position:absolute;right:0;left:10px;top:47%;transform:translateY(-50%);font-size:20px}@media only screen and (max-width:599px){.banner-discounts .slick-arrow:before{font-size:15px}}.banner-discounts .slick-prev,.banner-discounts .slick-next{font-size:0;line-height:0;position:absolute;top:51%;display:block;width:30px;height:155px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;border:none;outline:none;background-color:{{settings.sliderBgColor}};opacity:.6;z-index:8}.banner-discounts .slick-prev :hover,.banner-discounts .slick-next :hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-list{padding:0!important;height:100%}.banner-discounts .slick-prev:hover,.banner-discounts .slick-next:hover{outline:none}.banner-discounts .slick-prev.slick-disabled:before,.banner-discounts .slick-next.slick-disabled:before,.banner-discounts .slick-prev.slick-disabled,.banner-discounts .slick-next.slick-disabled{outline:none;display:none}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{color:{{settings.sliderArrowColor}};fill:{{settings.sliderArrowColor}};opacity:.8}.banner-discounts .slick-prev{left:0;border-radius:0 25px 25px 0}.banner-discounts [dir='rtl'] .slick-prev{right:0;left:auto}.banner-discounts .slick-next{right:0;border-radius:25px 0 0 25px}.banner-discounts .slick-arrow.slick-next:before{left:3px}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{width:4px;height:4px;content:" "}.banner-discounts [dir='rtl'] .slick-next{right:auto;left:0}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{width:10px;height:10px}.banner-discounts .slick-arrow:hover:before{border-color:{{settings.sliderHoverArrowColor}}}@media screen and (max-width:480px){.banner-discounts .banner-discounts__info{bottom:55%}.banner-discounts .banner-discounts__title{font-size:20px}}.headerSection__bannerBg{width:100%;height:fit-content;background-color:{{settings.headerBgColor}}!important;margin-top:0!important}.headerSection__banner{display:block;width:100%;margin:0 auto;height:fit-content;max-width:1400px;margin:0 auto;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative;background-color:{{settings.headerBgColor}}}.headerSection__banner .banner-discounts{background-color:{{settings.headerBgColor}}!important}.headerSection__banner .banner-discounts__wrapper{height:fit-content;width:79.9%!important;float:right;margin-left:auto;margin-right:0}.headerSection__banner .banner-discounts__image_placeholder img{max-height:534px!important}@media screen and (max-width:1600px){.headerSection__banner{padding-left:3%;padding-right:3%}}.banner-discounts__title{font-size:28px}.banner-discounts__title.banner-discounts__title__small{font-size:13px}.banner-discounts__info{bottom:unset;top:80px}@media screen and (max-width:480px){.banner-discounts__image{width:100%;object-fit:cover;object-position:center}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}.discounts__header{padding:20px 0;font-weight:400}.discounts__container{margin-bottom:30px;display:flex;flex-wrap:wrap}.discounts__item{width:40%;padding:20px 20px 0 0;margin-right:60px;display:flex;height:80px}.discounts__name{text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.discounts__info{padding:7px;font-size:15px;width:calc(100% - 100px - 60px)}.discounts__date{color:#959494;padding-top:5px}.discounts__value{margin-right:10px;width:100px;max-height:50px;padding:20px 10px 0 10px;text-align:center;color:{{settings.primaryBtnFontColor}};border:2px solid{{settings.primaryBtnBorderColor}};background-color:{{settings.primaryBtnBgColor}};font-size:20px}.discounts__value.discounts-clickable{cursor:pointer}.discounts__value.discounts-clickable:hover{background-color:{{settings.primaryBtnHoverBgColor}};border:2px solid{{settings.primaryBtnHoverBorderColor}};color:{{settings.primaryBtnHoverFontColor}}}.discounts__value__details{font-size:17px}.discounts__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #f2f2f2;margin-bottom:5px;font-size:13px;font-weight:300;align-items:center}.discounts__row:last-of-type{border-bottom:none;margin-bottom:20px}.discounts__rowTitle{font-size:15px;text-align:left;font-weight:400}.discounts__rowTitle:first-child{width:35%}.discounts__cell:first-child{width:35%}@media (min-width:767px){.discounts__mobile{display:none}}@media screen and (max-width:1200px){.discounts__header{text-align:center}.discounts__item{width:90%;margin-left:auto;margin-right:auto}}@media screen and (max-width:767px){.discounts__row{flex-wrap:wrap}.discounts__row__header{display:none}.discounts__rowTitle{width:auto!important}.discounts__cell{padding-right:20px;padding-top:10px;width:auto!important}.discounts__details-container{padding:20px}}@media only screen and (max-width:480px){.discounts__item{width:90%;padding:20px 0 20px 0;height:70px}.discounts__value{width:100px;font-size:17px}.discounts__info{padding:5px;font-size:14px}.discounts__date{padding-top:5px}}

Ostatnim krokiem jest dodanie kodu JavaScript. Znajdź plik layout1.js i na końcu pliku wklej poniższy kod.


function customerProfileBannerSlick() {
    $(".customerProfileBanner").not('.slick-initialized').slick({
        lazyLoad: 'progressive',
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        draggable: false,
        autoplay: true,
        autoplaySpeed: 8000
    });
}

$('li.discounts-js').on('click', function(e) {
    $(function() {
            var checkDiv = setInterval(function(){
               if($('.customerProfileBanner').length > 0) {
                   customerProfileBannerSlick();
               } 
            }, 100); 
        });
    
});

$('body').on('click', '.discountsDetails-js', function(e) {
    $('.discountsDetailsTemplate-js').removeClass('hidden');
    $('.discountsMainTemplate-js').addClass('hidden');
    window.scroll(top);
    var discountDetailsUrl = $(e.currentTarget).data('url');
    var discountDetailsTemplate = $(e.currentTarget).data('template');
    var content = $('.discountsDetailsTemplate-js');
    $.get(discountDetailsUrl, { __collection:'customer-profile.DiscountERPDetails', __template:discountDetailsTemplate }, function(result){
        if(result && result.collection && result.template){
            content.html(result.template);

        }
    });
});

$('body').on('click', '.discountsDetailsButton-js', function(e) {
    $('.discountsDetailsTemplate-js').addClass('hidden');
    $('.discountsMainTemplate-js').removeClass('hidden');
});

Nagłówek zawierający wielopoziomowe pionowe menu w szablonie Topaz

W niniejszym artykule dowiesz się, w jaki sposób zmodyfikować pliki swojego szablonu tak, by obsługiwał on nowy nagłówek zawierajacy wielopoziomowe pionowe menu.

Wskazówka

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

UWAGA! Niektóre z instrukcji różnią się w zależności od obecnie posiadanego nagłówka (wariant 1 lub wariant 2), jednak wklejany kod w obu przypadkach będzie identyczny. Uważnie czytaj, czy dana instrukcja odnosi się do obecnie posiadanego przez Ciebie nagłówka! Dla uproszczenia, nowy wariant nagłówka będzie w niniejszym artykule nazywany "trzecim wariantem nagłówka".

1. Plik HTML

Zaczynamy od usunięcia kodu HTML z obecnym nagłówkiem. W tym celu otwórz katalog elements/header i usuń plik o nazwie header-1.html (jeśli posiadasz drugi wariant nagłówka, plik nazywa się header-2.html). W tym samym katalogu utwórz nowy plik o nazwie header-3.html i wklej do niego następujący kod:

{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}
{% assign header3 = true -%}

{% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}}

{% if customer.Authenticated == true -%} {% endif -%} {{ translations.Crt_YourCart }} {{customer.Cart.Value | ToPrice}} {{customer.Currency}}

{{translations.Com_Categories}} {% assign j = 0 -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% assign j = j | Plus: 1 -%} {% if categoriesSize > 0 -%} {% endif -%} {% endfor -%}

- {{config.DefinedPages.About.Name}}

- {{config.DefinedPages.Payment.Name}}

- {{config.DefinedPages.Shipping.Name}}

- {{config.DefinedPages.Terms.Name}}

{% if config.Shop.Contact.PhoneNo != '' -%}

{% endif -%} {% if config.Shop.Contact.Email != '' -%}

{% endif -%}

{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

{% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%} {% endif -%} {% endif -%} {% endfor -%}

2. Pliki CSS

Następnie trzeba podmienić kod w plikach css. NAGŁÓWEK 1: Najpierw otwórz plik css/layout0.css, wyszukaj w nim blok kodu, który zaczyna się od ".headerSection{color:{{settings.headerFontColor}};" a kończy na ".headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}". Ten blok kodu należy skasować i w jego miejsce wkleić poniższy: NAGŁÓWEK 2: Najpierw otwórz plik css/layout0.css, wyszukaj w nim blok kodu, który zaczyna się od ".headerBackground{width:100%;background-color:{{settings.headerBgColor}};" a kończy na ".headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}". Ten blok kodu należy skasować i w jego miejsce wkleić poniższy:

.headerBg{background-color:{{settings.headerBgColor}};width:100%}.headerSection__background{height:100px;position:absolute;top:0;background-color:{{settings.headerBgColor}}}.headerSticky{position:sticky;top:0;width:100%;margin:0 auto;background-color:{{settings.headerBgColor}};z-index:100}.header__page-padding{width:94vw}.wideLogo{margin-left:38% !important}.wideLogoLogin{margin-left:38% !important}.headerSection{user-select:none;color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;max-width:1400px;margin:0 auto;padding:0;height:70px;box-sizing:border-box;position:relative;z-index:13}.headerSection__row{display:block;width:100%;max-width:1400px;margin:0 auto;height:100px;padding:10px 0 29px;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection__logo{height:36px;width:auto;text-align:left;z-index:1;display:inline-flex;max-width:100px;float:left;margin-top:20px;align-items:center;justify-content:center}.headerSection__logo img,.headerSection__logo svg{max-height:36px;width:auto;max-width:100px}.headerSection__searchForm{background-color:{{settings.headerBgColor}};width:30%;padding:20px 5px 12px;margin:0 40px 0 42%;overflow:hidden;display:inline-block;text-align:left;border-bottom:1px solid {{settings.secondaryFontColor}};position:relative}.headerSection__searchForm input{width:90%;color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}}}.headerSection__searchForm input:focus{color:{{settings.headerFontColor}}}.headerSection__searchForm__btn{width:20px;height:20px;position:absolute;right:8px;top:25px;background-color:{{settings.headerBgColor}};border:none;outline:none}.headerSection__searchForm__btn svg{width:20px;height:20px;position:absolute;fill:{{settings.secondaryFontColor}};top:0;left:0;outline:none}.headerSection__searchForm__btn svg:hover{cursor:pointer;fill:{{settings.linkFontColor}}}.headerSection__icons{width:auto;background-color:{{settings.headerBgColor}};padding:20px 0 5px;margin:0 0 5px auto;overflow:hidden;display:inline-block;position:absolute;right:0;text-align:right}.headerSection__icons__icon{margin:0 10px;position:relative}.headerSection__icons__icon svg{fill:{{settings.secondaryFontColor}};width:25px;height:25px;outline:none}.headerSection__icons__icon svg:hover{cursor:pointer;transition:200ms;fill:{{settings.linkFontColor}}}.headerSection__icons__icon .itemsCounter{border-radius:50%;width:15px;height:15px;text-align:center;font-size:9px;position:absolute;z-index:2;bottom:0;right:0;background-color:{{settings.linkFontColor}};color:#ffffff}.headerSection__icons .cartInfo{margin-left:10px;display:inline-block;font-size:12px;text-align:right}.headerSection__icons .cartInfo__info{color:{{settings.secondaryFontColor}};display:block}.headerSection__icons .cartInfo__value{color:{{settings.linkFontColor}};display:block;font-weight:600}.headerSection__secondRow{display:flex;justify-content:space-between;flex-direction:row}.headerSection__pages{color:{{settings.headerFontColor}};display:inline-flex;text-transform:uppercase;width:50%}.headerSection__pages__categories{flex:20%;text-align:left;margin-top:1px}.headerSection__pages__categories .showCategories:hover{cursor:pointer}.headerSection__pages__categories .showCategories svg{fill:{{settings.linkFontColor}};transform:rotate(90deg);position:relative;top:3px}.headerSection__pages__categories .categoryMenu{display:block;background-color:{{settings.headerBgColor}};position:absolute;top:60px;width:21.5%;left:-20px;max-height:543px;overflow-y:auto}.headerSection__pages__categories .categoryMenu__categories ul{list-style-type:none;padding-left:20px;margin-block-start:0}.headerSection__pages__categories .categoryMenu__categories ul .compactList{padding-top:5px !important;padding-bottom:5px !important}.headerSection__pages__categories .categoryMenu__categories ul li{padding-bottom:15px;padding-top:15px;display:block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category{text-align:left;font-size:15px;color:{{settings.secondaryFontColor}};position:relative;text-transform:none;display:block}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category:hover{color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category div{display:block;max-width:80%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection__pages__categories .categoryMenu__categories ul li .categoryMenu__categories__category svg{width:20px;height:20px;fill:{{settings.linkFontColor}};padding-right:20px;position:absolute;right:0px;top:2px}.headerSection__pages__categories .categoryMenu__categories ul .last{border:none !important}.headerSection__pages__categories .categoryMenu__allCategories{text-transform:none;width:70%;background-color:{{settings.headerBgColor}};display:flex;left:20%;top:60px;position:absolute;top:60px;padding:35px 25px 25px;justify-content:flex-start;flex-wrap:wrap;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer{display:block;flex:0 1 25%}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .undercategory{font-weight:600;font-size:14px;display:block;text-align:left;padding:20px 0 10px;color:{{settings.headerFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .undercategory:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory{font-size:12px;padding:10px 0;color:{{settings.secondaryFontColor}};text-align:left;display:block;padding:5px 0}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory:first-letter{text-transform:capitalize !important}.headerSection__pages__categories .categoryMenu__allCategories .undercategoryContainer .underundercategory:hover{color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton{flex:100%;display:block;font-size:14px;padding:30px 0 10px;text-align:center;color:{{settings.linkFontColor}}}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton:hover{cursor:pointer}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton .text{position:relative}.headerSection__pages__categories .categoryMenu__allCategories .allCategoriesButton .text svg{fill:{{settings.linkFontColor}};position:absolute;top:-1px;padding-left:5px}.headerSection__pages__other{flex:20%;text-align:right}.headerSection__pages__other span:hover,.headerSection__pages__other a:hover{cursor:pointer;color:{{settings.linkFontColor}}}.headerSection__pages__other svg{fill:{{settings.linkFontColor}};transform:rotate(90deg);position:relative;top:3px}.headerSection__pages__other .otherPages{display:none;text-transform:none;width:auto;background-color:{{settings.headerBgColor}};left:20%;position:absolute;top:60px;padding:10px 35px;justify-content:flex-start;flex-wrap:wrap;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection__pages__other .otherPages ul{padding:0}.headerSection__pages__other .otherPages ul li{font-size:14px;color:{{settings.secondaryFontColor}};text-align:left;list-style-type:none;padding:10px}.headerSection__pages__other .otherPages ul li:hover{color:{{settings.linkFontColor}};cursor:pointer}.headerSection__contact{display:inline-flex;width:30%;justify-content:flex-end}.headerSection__contact__details{margin-left:20px;cursor:pointer}.headerSection__contact__details svg{fill:{{settings.linkFontColor}};width:13px;height:13px}.headerSection__contact__details .rotateSvg{transform:rotate(100deg)}.headerSection__contact__details .contactDetails{color:{{settings.secondaryFontColor}};font-size:12px;margin-left:5px}.headerSection__contact__details .languages{text-transform:uppercase}.headerSection__contact .languageAndCurrencyChange{display:none}.headerSection__contact .languageAndCurrencyChange .languageAndCurrencyChangeMenu{display:flex;position:absolute;box-sizing:border-box;width:225px;background-color:#FFFFFF;border-radius:5px;top:35px;right:-2px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2;padding:10px 0}.headerSection__contact .languageAndCurrencyChange .menu{width:50%}.headerSection__contact .languageAndCurrencyChange .menu .title{color:{{settings.secondaryFontColor}};font-weight:500;font-size:12px;display:inline-block;width:100%;margin:10px 0 5px;opacity:.5;text-align:center}.headerSection__contact .languageAndCurrencyChange .menu .lang,.headerSection__contact .languageAndCurrencyChange .menu .currency{text-align:left;padding-bottom:5px;font-size:14px}.headerSection__contact .languageAndCurrencyChange .menu .lang label,.headerSection__contact .languageAndCurrencyChange .menu .currency label{color:{{settings.secondaryFontColor}}}.headerSection__contact .languageAndCurrencyChange .menu .lang{padding-left:30px}.headerSection__contact .languageAndCurrencyChange .menu .currency{padding-left:20px}.headerSection .openCloseCategoryMenu:hover{cursor:pointer;color:{{settings.linkFontColor}}}@media screen and (max-width: 1600px){.headerSection{padding-left:3%;padding-right:3%}.categoryMenu{max-height:505px !important}}.frozenHeaderCategories{position:absolute;display:inline-block;top:35px;margin-left:40px;text-transform:uppercase}.frozenHeaderCategories .categoriesButton{color:{{settings.headerFontColor}}}.frozenHeaderCategories .categoryMenu{top:100px !important;left:5.5% !important;position:fixed !important}.frozenHeaderCategories .categoryMenu__allCategories{position:fixed;top:100px !important;left:26% !important;width:64% !important}.menuBanner{margin:0 auto;background-color:#f2f2f2;height:auto}.menuBanner__list{width:100%;height:100%}.menuBanner__wrapper{width:100%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.menuBanner a{position:absolute;bottom:8%;left:10%;text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.menuBanner figure{margin:0}.menuBanner__image img{box-sizing:border-box;padding:0;margin:0;object-fit:cover;min-height:170px;max-width:100%;width:100%;object-position:50% 50%}.menuBanner__image img[src="css/img/alo.gif"]{width:100% !important;height:100% !important}.menuBanner__image_placeholder img{object-fit:contain;background-color:#f2f2f2;max-height:680px}.menuBanner__info{position:absolute;left:10%;bottom:33%;width:80%}.menuBanner__title{margin:0;padding:0;font-weight:300;color:{{settings.bannerFontColor}};display:block;font-size:48px}.menuBanner__title.menuBanner__title__small{line-height:1.5;font-size:14px;margin-top:10px}.menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0}.menuBanner__size{position:absolute;font-size:30px;color:#808080;text-align:center;top:50%;left:50%;transform:translate(-50%, -50%);margin:0}.menuBanner .slick-track{height:100%}.menuBanner .slick-arrow{background-color:{{settings.sliderBgColor}};padding:20px}.menuBanner .slick-arrow:hover{background-color:{{settings.sliderHoverBgColor}}}.menuBanner .slick-arrow:before{color:white;position:absolute;right:0;left:10px;top:47%;transform:translateY(-50%);font-size:20px}@media only screen and (max-width: 599px){.menuBanner .slick-arrow:before{font-size:15px}}.menuBanner .slick-prev,.menuBanner .slick-next{font-size:0;line-height:0;position:absolute;top:51%;display:block;width:30px;height:155px;padding:0;-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);transform:translate(0, -50%);cursor:pointer;border:none;outline:none;background-color:{{settings.sliderBgColor}};opacity:.6;z-index:8}.menuBanner .slick-prev :hover,.menuBanner .slick-next :hover{background-color:{{settings.sliderHoverBgColor}}}.menuBanner .slick-list{padding:0 !important;height:100%}.menuBanner .slick-prev:hover,.menuBanner .slick-next:hover{outline:none}.menuBanner .slick-prev.slick-disabled:before,.menuBanner .slick-next.slick-disabled:before,.menuBanner .slick-prev.slick-disabled,.menuBanner .slick-next.slick-disabled{outline:none;display:none}.menuBanner .slick-prev:before,.menuBanner .slick-next:before{color:{{settings.sliderArrowColor}};fill:{{settings.sliderArrowColor}};opacity:.8}.menuBanner .slick-prev{left:0;border-radius:0 25px 25px 0}.menuBanner [dir='rtl'] .slick-prev{right:0;left:auto}.menuBanner .slick-next{right:0;border-radius:25px 0 0 25px}.menuBanner .slick-arrow.slick-next:before{left:3px}.menuBanner [dir='rtl'] .slick-next:before,.menuBanner .slick-prev:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.menuBanner .slick-next:before,.menuBanner [dir='rtl'] .slick-prev:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.menuBanner .slick-prev:before,.menuBanner .slick-next:before{width:4px;height:4px;content:" "}.menuBanner [dir='rtl'] .slick-next{right:auto;left:0}.menuBanner [dir='rtl'] .slick-next:before,.menuBanner .slick-prev:before,.menuBanner .slick-next:before,.menuBanner [dir='rtl'] .slick-prev:before{width:10px;height:10px}.menuBanner .slick-arrow:hover:before{border-color:{{settings.sliderHoverArrowColor}}}@media screen and (max-width: 480px){.menuBanner .menuBanner__info{bottom:55%}.menuBanner .menuBanner__title{font-size:20px}}.headerSection__bannerBg{width:100%;height:fit-content;background-color:{{settings.headerBgColor}} !important;margin-top:0 !important}.headerSection__banner{display:block;width:100%;margin:0 auto;height:fit-content;max-width:1400px;margin:0 auto;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative;background-color:{{settings.headerBgColor}}}.headerSection__banner .menuBanner{background-color:{{settings.headerBgColor}} !important}.headerSection__banner .menuBanner__wrapper{height:fit-content;width:79.9% !important;float:right;margin-left:auto;margin-right:0}.headerSection__banner .menuBanner__wrapper .imageLink{left:inherit;bottom:inherit;width:inherit;box-sizing:inherit;padding:inherit;display:contents;position:relative}.headerSection__banner .menuBanner__image_placeholder img{max-height:534px !important}@media screen and (max-width: 1600px){.headerSection__banner{padding-left:3%;padding-right:3%}.header__page-padding{padding-left:3%;padding-right:3%}}.searchForm__loader-js{top:25px !important}.searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:30px;position:relative;box-sizing:border-box}.searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.configMessages__header{min-height:67px !important}.message-popup-background{margin-top:0 !important}

NAGŁÓWEK 1: W tym samym katalogu otwieramy plik layout-m0.css. Wyszukujemy w nim blok kodu zaczynający się od "@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}". Usuwamy go, i w jego miejsce wklejamy poniższy: NAGŁÓWEK 2: W tym samym katalogu otwieramy plik layout-m0.css. Wyszukujemy w nim blok kodu zaczynający się od "@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon". Usuwamy go, i w jego miejsce wklejamy poniższy:

@media screen and (max-width: 768px){.headerSection{height:100px}.headerSection__logo{margin-top:0 !important}.headerSticky{position:inherit !important;width:100%;z-index:10;height:75px}.headerSticky .header__page-padding{padding-left:3%;padding-right:3%}.headerThirdType{display:none}.hideOnMobile{display:none}.headerSection__secondRow{display:none}.headerSection__icons{display:none}.opensearchMenu{display:block;position:absolute;right:15px;top:20px}.wideLogo{margin-left:0 !important}.searchFormMobileContainer{display:none;width:calc(100vw - 40px);height:100vh;background-color:{{settings.primaryPageBgColor}};z-index:100;position:fixed;padding:40px 20px;top:0;left:0;margin:0 !important}.searchFormMobileContainer svg{fill:{{settings.linkFontColor}};position:absolute}.searchFormMobileContainer .headerSection__searchForm__phrase{background-color:{{settings.headerBgColor}};width:100%;padding-bottom:10px;margin:50px auto 0;overflow:hidden;display:inline-block;text-align:left;border-bottom:1px solid {{settings.secondaryFontColor}};position:relative}.searchFormMobileContainer .headerSection__searchForm__btn{position:absolute;top:90px;right:25px}.mobileCategories{display:none;text-transform:uppercase;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:{{settings.headerBgColor}};z-index:10;font-size:14px}.mobileCategories .rotate{transform:rotate(-90deg) !important}.mobileCategories__menu{padding:20px;color:{{settings.secondaryFontColor}}}.mobileCategories__menu ul{padding:0}.mobileCategories__menu .closeCategoryMenu{fill:{{settings.linkFontColor}};cursor:pointer}.mobileCategories__menu .categoryMobile{width:100%;display:block;position:relative}.mobileCategories__menu .categoryMobile .category .langAndCurrencyIcon{fill:{{settings.linkFontColor}};width:14px;height:14px;display:inline-block;position:inherit;margin-right:10px}.mobileCategories__menu .categoryMobile .category .categoryTitle{width:100%;display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category svg{position:absolute;top:13px;right:10px;transform:rotate(90deg);fill:{{settings.linkFontColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile{display:block;position:relative}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .undercategoryMobile{display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underunderCategoryContainerMobile{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underundercategoryMobile{display:block;padding:10px 0;border-bottom:2px solid {{settings.borderColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .undercategoryMenuMobile .underundercategoryMobile svg{position:absolute;top:13px;right:10px;transform:rotate(90deg);fill:{{settings.linkFontColor}}}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange{position:relative}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange svg{display:none}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .languageAndCurrencyChangeMenu{display:flex;box-sizing:border-box;width:60%;text-transform:uppercase;padding:10px 0;margin:0 auto}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu{width:50%}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .title{color:{{settings.secondaryFontColor}};font-weight:500;font-size:12px;display:inline-block;width:100%;margin:10px 0 5px;opacity:.5;text-align:left;padding-left:20px}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .lang,.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .currency{text-align:left;padding-bottom:5px;font-size:14px}.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .lang label,.mobileCategories__menu .categoryMobile .category .undercategoryContainerMobile .languageAndCurrencyChange .menu .currency label{color:{{settings.secondaryFontColor}}}.mobileCategories__menu .categoryMobile .category>div,.mobileCategories__menu .categoryMobile .category svg{display:inline}.mobileCategories__menu ul li{list-style-type:none}.searchForm__searchAutocomplete{box-shadow:none;z-index:101}.searchForm__searchAutocomplete .searchAutocomplete__product{max-width:none;width:100%}.searchForm__loader-js{top:70px !important;right:0 !important;left:0 !important;margin:0 auto !important;transform:none !important}}.menuBanner__title{font-size:28px}.menuBanner__title.menuBanner__title__small{font-size:13px}.menuBanner__info{bottom:unset;top:80px}@media screen and (max-width: 480px){.menuBanner__image{width:100%;height:300px;object-fit:cover;object-position:center}}@media screen and (max-width: 1390px){.headerSection__banner .menuBanner__wrapper{width:100% !important}}@media screen and (max-width: 768px){.mobileCategories{overflow-y:scroll}.mobileCategories .mobileCategories__menu ul{padding-bottom:80px}}

NAGŁÓWEK 1:Dalej, w tym samym katalogu otwieramy plik layout-d0.css. Wyszukujemy w nim linię zaczynającą się od "@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}". Usuwamy całą linię a w jej miejsce wklejamy poniższy kod: NAGŁÓWEK 2:Dalej, w tym samym katalogu otwieramy plik layout-d0.css. Wyszukujemy w nim linię zaczynającą się od "@media screen and (min-width: 790px){.headerSection .mainNavigation__links". Usuwamy całą linię a w jej miejsce wklejamy poniższy kod:

@media screen and (min-width: 769px){.searchFormMobileContainer{display:none}.mobileCategories{display:none}.opensearchMenu{display:none}}@media screen and (max-width: 1280px){.headerSection__icons{width:auto !important}.categoryMenu__allCategories{left:auto !important;right:0;width:75% !important}.categoryMenu__allCategories .undercategoryContainer{flex:0 1 33% !important}}@media screen and (min-width: 769px) and (max-width: 1070px){.categoryMenu{width:40% !important}.hideOnMobile{display:none}}@media screen and (min-width: 769px) and (max-width: 1350px){.headerSection__contact{width:50%;margin-left:10px}}@media screen and (min-width: 769px) and (max-width: 1280px){.headerSection__searchForm{margin-left:20%;width:35%}.wideLogo{margin-left:18% !important}.wideLogoLogin{margin-left:12% !important}}@media screen and (max-width: 950px){.headerSection__pages__categories{flex:26% !important}}@media screen and (max-width: 850px){.headerSection__contact__details{margin-left:10px}}@media screen and (max-width: 1390px){.categoryMenu{left:0 !important}}@media screen and (min-width: 768px) and (max-width: 1000px){.frozenHeaderCategories{margin-left:20px !important}}@media screen and (max-width: 1390px){.headerSection__banner .menuBanner__wrapper{width:100% !important}}

3. Podpięcie pliku z nowym nagłówkiem

Kolejnym krokiem jest umożliwienie wyświetlania naszego nowego nagłówka. W tym celu, w głównym katalogu otwieramy plik _layout.html. Linię o treści "{% include 'elements/header/header-1.html' -%}" podmieniamy na "{% include 'elements/header/header-3.html' -%}". NAGŁÓWEK 2: W przypadku drugiego nagłówka, linia ta brzmi: "{% include 'elements/header/header-2.html' -%}".

4. Zmiany w plikach JS

Następnie musimy podmienić kod w plikach js. W tym celu otwieramy plik js/layout0.js a w nim wyszukujemy linię "var headerFunctions = {". Musimy usunąć cały blok kodu. Ostatnią linią w tym bloku jest "};". Żeby łatwiej było zlokalizować cały kod do usunięcia, następna linia po ostatniej skasowanej powinna wyglądać tak: "ui.showFooterSection = function() {". W miejsce usuniętego bloku kodu, wklejamy poniższy:

"
var headerFunctions = {
    init: function () {
        headerFunctions.events();
        headerFunctions.setBreadcrumbsMargin();
        headerFunctions.frozenHeaderCategories();
    },
	// Function that sets the menu position according to the width of the logo
    setMenuPosition: function() {
        var logo = $('img[src="logo.png"]');
        var logoWidth = logo.width();

        if(logoWidth > 120) {
            logo.parent().addClass('longLogo');
            $('.headerSection__mainMenu__navLinks').addClass('longLogo');
            $('.headerSection__iconsMenu').addClass('longLogo');
        }
    },
    events: function () {
        var pageHeaderTop = $('.headerSticky');
        var pageHeader = $('.headerSection');
        var mobileCategories = $('.mobileCategories');
        var pageId = $('body').find('input[name="pageId"]').attr('value');
        let mobileLang = false;

        pageHeader.on('click', '.openLanguageAndCurencyMenu-js', function(e) {
            $('.languageAndCurrencyChange').toggle(200);
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('change', '.customerLanguageChange-js', function(e) {
            if($(this).is(':checked')) {app.customerLanguageChange(e)}
        });

        pageHeader.on('change', '.customerCurrencyChange-js', function(e) {
            if($(this).is(':checked')) {app.customerCurrencyChange(e)}
        });

        pageHeader.on('click', '.openCloseCategoryMenu .categoriesButton', function(e) {
            if(pageId != 1 && pageId != 22) {
                $('.categoryMenu-js').toggleClass('hidden');
                if($('.categoryMenu-js').hasClass('hidden')) {
                    $('.categoryMenu__allCategories').css('display', 'flex');
                    $('.categoryMenu__allCategories').addClass('hidden');
                }
            } else {
                if($(window).width() < 1391) { if($('.categoryMenu-js').hasClass('hidden')) { $('.categoryMenu-js').removeClass('hidden'); } else { $('.categoryMenu__allCategories').css('display', 'flex'); $('.categoryMenu__allCategories').addClass('hidden'); $('.categoryMenu-js').addClass('hidden'); } } } }); pageHeader.on('click', '.categoriesButton', function(e) { if (($(window).width() > 1390) && (!($('.categoryMenu__categories').hasClass('hidden')))){
                    $('.categoryMenu__allCategories').css('display', 'flex');
                    $('.categoryMenu__allCategories').addClass('hidden');
            }
        });

        pageHeader.on('mouseover', '.categoryMenu__categories ul li', function(e) {
            var categoryId = $(this).find('input[name="categoryId"]').attr('value');
            var undercategory = $('input[name="undercategoryId"]');
            undercategory.each(function() {
                if($(this).attr('value') == categoryId) {
                    $(this).next().removeClass('hidden');
                } else {
                    $(this).next().addClass('hidden');
                }
            })
        });

        pageHeader.on('click', '.otherPages-js', function(e) {
            $('.otherPages').toggle(200);
        });

        pageHeaderTop.on('click', '.opensearchMenu-js', function(e) {
            $('.headerSection__searchForm').addClass('searchFormMobileContainer');
            $('.closesearchMenu-js').removeClass('hidden');
            $('.searchFormMobileContainer').toggle(200);
            if($(window).width() <= 768) {
                preventScrolling();
                $('.go-to-top__btn-js').addClass('hidden');
            }
            
        });

        pageHeaderTop.on('click', '.closesearchMenu-js', function(e) {
            $.when($('.searchFormMobileContainer').toggle(200)).done(function() {
                $('.headerSection__searchForm').removeClass('searchFormMobileContainer');
                $('.closesearchMenu-js').addClass('hidden');
            });
            if($(window).width() <= 768) { $('body').toggleClass('noscroll'); $('.go-to-top__btn-js').removeClass('hidden'); } }); mobileCategories.on('click', '.closeCategoryMenu-js', function(e) { $.when($('.mobileCategories').toggle(200)).done(function() { $('.mobileCategories').toggleClass('hidden'); }); $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons'); $('.menuButton').toggleClass('menuActive'); if($('.headerSection').css('z-index') == 0) { $('.headerSection').css('z-index', 13); } else { $('.headerSection').css('z-index', 0); } }); mobileCategories.on('click', '.openUnderCategory-js', function(e) { var submenu = $(this).parent().find($('.undercategoryContainerMobile')); if($(this).hasClass('mobileLang') && mobileLang == false) { mobileLang = true; $('.languageAndCurrencyChange').clone().appendTo('.mobileLangContainer'); } $(this).toggleClass('rotate'); submenu.toggle(200); }); mobileCategories.on('click', '.openUnderUnderCategory-js', function(e) { var subsubmenu = $(this).parent().find($('.underundercategoryContainerMobile')); $(this).toggleClass('rotate'); subsubmenu.toggle(200); }); mobileCategories.scroll(function() { if($(this).length) { if(!($(this).hasClass('hidden'))) { if ($(this).scrollTop() > 10) {
                        $('.go-to-top__btn-js').fadeIn();
                    } else {
                        $('.go-to-top__btn-js').fadeOut();
                    }
                } 
            }
        });

        $(window).ready(function(e) {
            $('html, body').animate({scrollTop : 0},10);
        });

        $(window).on('scroll', function(e) {
            if($(this).scrollTop() > 0 ) {
                    $('.headerSticky').css('box-shadow', '2px 1px 4px 0 #b0b0b0');
            } else {
                $('.headerSticky').css('box-shadow', 'none');
            }
        });

        $(window).on('load', function(e) {
            var logoWidth = parseInt($('.headerSection__logo img').css('width'));
            var isCustomerLogged = $('body').find('input[name="isAuthenticatedCustomer"]').attr('value');
            if(logoWidth > 36) {
                if(isCustomerLogged == 1) {
                    $('.headerSection__searchForm').addClass('wideLogoLogin');
                } else {
                    $('.headerSection__searchForm').addClass('wideLogo');
                }
            }

            if($(window).width() <= 768) { $('.headerSection__searchForm').addClass('searchFormMobileContainer'); $('.closesearchMenu-js').removeClass('hidden'); } else { $('.headerSection__searchForm').removeClass('searchFormMobileContainer'); $('.closesearchMenu-js').addClass('hidden'); if($(window).width() > 768 && $(window).width() <= 1390) {
                    $('.categoryMenu-js').addClass('hidden');
                    $('.headerSection__pages__categories').addClass('openCloseCategoryMenu');
                } else {
                    if(pageId == 1 || pageId == 22) {
                        $('.categoryMenu-js').removeClass('hidden');
                    } else {
                        $('.categoryMenu-js').addClass('hidden');
                        $('.headerSection__pages__categories').addClass('openCloseCategoryMenu');
                    }  
                }
            }
        });

        $(window).on('resize', function(e) {
            if($(window).width() <= 768) { $('.headerSection__searchForm').addClass('searchFormMobileContainer'); $('.closesearchMenu-js').removeClass('hidden'); $('.headerSection__searchForm').css('display', 'none'); $('body').removeClass('noscroll'); } else { $('.headerSection__searchForm').removeClass('searchFormMobileContainer'); $('.closesearchMenu-js').addClass('hidden'); $('.headerSection__searchForm').css('display', 'inline-block'); $('.categoryMenu__allCategories').addClass('hidden'); if($(window).width() > 768 && $(window).width() <= 1390) { if(!($('.mobileCategories').hasClass('hidden'))) { $('.mobileCategories').toggle(200); $('.mobileCategories').addClass('hidden'); $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons'); $('.menuButton').toggleClass('menuActive'); if($('.headerSection').css('z-index') == 0) { $('.headerSection').css('z-index', 13); } else { $('.headerSection').css('z-index', 0); } } $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); $('.categoryMenu-js').addClass('hidden'); $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); } else { if(pageId == 1 || pageId == 22) { $('.categoryMenu-js').removeClass('hidden'); } else { $('.categoryMenu-js').addClass('hidden'); $('.headerSection__pages__categories').addClass('openCloseCategoryMenu'); } } } }); $('.menuBanner').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, autoplay: true, autoplaySpeed: 8000 }); var isCategoriesClonned = false; $(window).on('scroll', function(e) { if ($(window).scrollTop() > 70 && isCategoriesClonned == false){
                isCategoriesClonned = true;
                $('.headerSection__pages__categories').clone().appendTo('.frozenHeaderCategories');
                $('.frozenHeaderCategories').find('.headerSection__pages__categories').addClass('openCloseCategoryMenu');
                $('.frozenHeaderCategories').find('.categoryMenu__allCategories').addClass('hidden');         
                $('.frozenHeaderCategories').find('.categoryMenu-js').addClass('hidden');         
            } else if ($(window).scrollTop() <= 70 && isCategoriesClonned == true) { isCategoriesClonned = false; $('.frozenHeaderCategories .headerSection__pages__categories').remove(); if(pageId != 1 && pageId != 22) { $('.categoryMenu__allCategories').addClass('hidden'); $('.categoryMenu-js').addClass('hidden'); } } }); }, setBreadcrumbsMargin: function() { $('.breadcrumbs-wrapper').css('margin-top', '0', '!important'); }, frozenHeaderCategories: function() { var pageHeaderTop = $('.headerSticky'); pageHeaderTop.on('click', '.frozenHeaderCategories .openCloseCategoryMenu .categoriesButton', function(e) { $('.frozenHeaderCategories .categoryMenu-js').toggleClass('hidden'); if($('.frozenHeaderCategories .categoryMenu-js').hasClass('hidden')) { $('.frozenHeaderCategories .categoryMenu__allCategories').css('display', 'flex'); $('.frozenHeaderCategories .categoryMenu__allCategories').addClass('hidden'); } }) pageHeaderTop.on('mouseover', '.categoryMenu__categories ul li', function(e) { var categoryId = $(this).find(' input[name="categoryId"]').attr('value'); var undercategory = $('input[name="undercategoryId"]'); undercategory.each(function() { if($(this).attr('value') == categoryId) { $(this).next().removeClass('hidden'); } else { $(this).next().addClass('hidden'); } }) }); $(document).on('click', function (e) { var pageId = $('body').find('input[name="pageId"]').attr('value'); if($(e.target).closest('.otherPages-js').length === 0 && $(e.target).closest('.otherPages').length === 0 && $(e.target).closest('.showCategories').length === 0 && $(e.target).closest($('.otherPages-js').children()).length === 0 && $(e.target).closest($('.otherPages').children()).length === 0) { if($('.otherPages').css('display') != 'none') { $('.otherPages').toggle(200); } } if($(e.target).closest('.categoryMenu__allCategories').length === 0 && $(e.target).closest($('.categoryMenu__allCategories').children()).length === 0) { $('.categoryMenu__allCategories').each(function(e) { if($(this).css('display') != 'none') { $(this).addClass('hidden'); } }); if($(e.target).closest('.categoryMenu-js').length === 0 && $(e.target).closest('.categoryMenu__categories').length === 0 && $(e.target).closest('.showCategories').length === 0 && $(e.target).closest('.categoryMenu-js > ul').length === 0 
                    && $(e.target).closest($('.categoryMenu-js > ul').children()).length === 0) {

                    if($('.categoryMenu-js').css('display') != 'none' && pageId != 1 && pageId != 22) {
                        $('.categoryMenu-js').addClass('hidden');
                    }

                    if($('.categoryMenu-js').css('display') != 'none' && (pageId == 1 || pageId == 22) && $(window).scrollTop() > 70)  {
                        $('.frozenHeaderCategories .categoryMenu-js').addClass('hidden');
                    }
                }
            }
        });
    }
};
"

UWAGA! W powyższym kodzie do wklejenia, usuń znaki " na początku i końcu bloku kodu!

5. Dodanie nowego bannera

Kolejną kwestią jest utworzenie nowego bannera, który bedzie wyświetlany obok listy kategorii. W tym celu otwieramy Panel Administracyjny, zakładki Wygląd sklepu -> Ustawienia, wybieramy właściwy szablon i przechodzimy do zakładki Bannery. Sprawdzamy, czy mamy banner o nazwie menuBanner. Jeśli tak, to otwieramy go. Jeśli nie, klikamy na dużą ikonkę z plusem, w celu utworzenia nowego bannera. Musimy nadać mu nazwę menuBanner. W bannerze do nowego wariantu nagłówka, zalecany rozmiar obrazka wynosi 1118x534. W innym przypadku, obrazek może miec problemy ze skalowaniem. Możemy również uzupełnić pozostałe pola bannera, takie jak m.in. nagłówek, tekst, czy link. Są one obsługiwane w nowym nagłówku.

6. Dodatkowe zmiany w plikach JS

Pozostaje dodać małe zmiany w plikach js. Otwórz plik js/layout0.js. 1. Wyszukaj linię "$('.headerSearchForm-js').parent().append(autocompleteList);". Skasuj ją i podmień na następujący kod:

if($('.headerThirdType'.length)) {
    $('.headerSearchForm-js').append(autocompleteList);
} else {
    $('.headerSearchForm-js').parent().append(autocompleteList);
}

2. Wyszukaj linię "productWishListAdd: function (e) {". Funkcja ta kończy się linią "},". Tuż przed końcem funkcji (przed linią },) wklej poniższy kod:

if($('.headerThirdType')) {
    var items = parseInt( $('.favCounter').text()) +1;
    $('.favCounter').text(items);
    if(parseInt($('.favCounter').text()) > 0) {
        $('.favCounter').removeClass('hidden');
    } else {
        $('.favCoutner').addClass('hidden');
    }
}

3. Funkcja przed tą, przed chwilą edytowaną, nazywa się productWishListRemove. W niej podobnie jak poprzednio odszukaj jej koniec (linia "},") i tuż przed końcem dodaj kod:

    if($('.headerThirdType')) {
        var items = parseInt( $('.favCounter').text()) +1;
        $('.favCounter').text(items);
        if(parseInt($('.favCounter').text()) > 0) {
            $('.favCounter').removeClass('hidden');
        } else {
            $('.favCoutner').addClass('hidden');
        }
    }

4. Wyszukaj linię "$('.showBottomMenuSection-js').on('click', function(e) {". Jest to funkcja, która kończy się linią "});". Usuń ją i wklej następujący kod w jej miejsce:

    $('.showBottomMenuSection-js').on('click', function(e) {
      
        if($('.headerThirdType').length) {
            $('.go-to-top__btn-js').fadeOut();
            $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons');
            $('.menuButton').toggleClass('menuActive');
            if($('.mobileCategories').hasClass('hidden')) {
                $('.mobileCategories').toggleClass('hidden');
                $('.mobileCategories').toggle(200);
                $('body').css('overflow', 'unset');
                $('body').css('overflow-y', 'hidden');
            } else {
                $.when($('.mobileCategories').toggle(200)).done(function() {
                    $('.mobileCategories').toggleClass('hidden');
                    $('body').css('overflow-y', 'visible');
                    $('body').css('overflow', 'visible');
               });
            }
            if($('.headerSection').css('z-index') == 13) {
                $('.headerSection').css('z-index', 0);
            } else {
                $('.headerSection').css('z-index', 13);
            }
        } else {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
            $('.menuItem').not('.menuButton').toggleClass('menuDisabledIcons');
            $('.menuButton').toggleClass('menuActive');
            if($('.headerSection').css('z-index') == 13) {
                $('.headerSection').css('z-index', 20);
            } else { 
                $('.headerSection').css('z-index', 13);
            }
        }
    });

5. Wyszukaj linię "updateProductsInCart: function () {". Funkcja ta kończy się linią "},". Usuń linię powyżej ("});") i wklej poniższy kod:

    if($('.headerThirdType')) {
        $('.cartCounter').text(newValue);
        if(parseInt($('.cartCounter').text()) > 0) {
            $('.cartCounter').removeClass('hidden');
        } else {
            $('.cartCounter').addClass('hidden');
        }
        ui.changeCartValueInHeader();
    }
});

stockLevelValue -= addedItems;
$('#stockLevelValueInput').val(stockLevelValue);

6. Poniżej znajduje się funkcja, która rozpoczyna się od "incrementProductsInCart: function () {". Podobnie jak poprzednio, ale bez usuwania niczego, przed jej ostatnią linijką ("},") wklej ten kod:

    if($('.headerThirdType')) {
    $('.cartCounter').text(newValue);
    if(parseInt($('.cartCounter').text()) > 0) {
        $('.cartCounter').removeClass('hidden');
    } else {
        $('.cartCounter').addClass('hidden');
    }
}

7. Poniżej znajduje się funkcja, która rozpoczyna się od "decrementProductsInCart: function () {" i po raz kolejny, analogicznie, przed ostatnią linijką, wklej ten kod:

if($('.headerThirdType')) {
    $('.cartCounter').text(newValue);
    if(parseInt($('.cartCounter').text()) > 0) {
        $('.cartCounter').removeClass('hidden');
    } else { 
        $('.cartCounter').addClass('hidden');
    }
}

8. Wyszukaj linię "$('.go-to-top__btn-js').click(function(){". Funkcja ta kończy się linią "});". Skasuj całą funkcję a w jej miejsce wklej poniższy kod:

$('.go-to-top__btn-js').click(function(){
    if($('.mobileCategories').length) {
        if(!($('.mobileCategories').hasClass('hidden'))) {
            $('.mobileCategories').animate({scrollTop : 0},800);
        } else {
            $('html, body').animate({scrollTop : 0},800);
            $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800);
        }
    } else {
        $('html, body').animate({scrollTop : 0},800);
        $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800);
    }
    return false;
});

9. Pod dodaną w jednym z poprzednich punktu linią "$('#stockLevelValueInput').val(stockLevelValue);" znajduje się linia "},". Pod nią wklej poniższy kod:

    changeCartValueInHeader: function() { 
        var requestCartValue = $.ajax({
            url: window.location.href,
            method: "GET",
            data: { __collection: 'customer.Cart.Value' }
        });

        var requestCustomerCurrency = $.ajax({ 
            url: window.location.href,
            method: "GET",
            data: { __collection: 'customer.Currency' }
        });

        var newCartValue; 
        var customerCurrency;

        requestCustomerCurrency.done(function(res) {
            customerCurrency = res.collection;
            requestCartValue.done(function(res2) {
                newCartValue = +res2.collection;
                if($('.cartInfo__value').length) {


                    var newCartValueString = newCartValue.toString();
                    var isDecimalSeparator = false;
                    var beforeDot;
                    var afterDot;
                    for(let i=0;i<newCartValueString.length;i++) {
                        if(newCartValueString[i] == '.') {
                            isDecimalSeparator = true;
                            beforeDot = newCartValueString.slice(0,i);
                            afterDot = newCartValueString.slice(i+1, newCartValueString.length);
                        }    
                    }
                    if(isDecimalSeparator == true) {
                        beforeDot = beforeDot.replace(/(?!^)(?=(?:\d{3})+(?:\.|$))/gm, ' ');
                        if(afterDot.length == 1) {
                            afterDot = afterDot.concat('0');
                        }
                    } else {
                        beforeDot = newCartValueString.replace(/(?!^)(?=(?:\d{3})+(?:\.|$))/gm, ' ');
                        afterDot = '00';
                    }

                    $('.cartInfo__value').text(beforeDot + ',' + afterDot + ' ' + customerCurrency);
                }
            });        
        });
    },

10. W pliku js/layout1.js wyszukaj funkcję, zaczynającą się od "productWishListDelete: function (e) {". Funkcja kończy się linią "},". Przed jej końcem wklej poniższy kod:

if($('.headerThirdType')) {
    var items = parseInt( $('.favCounter').text()) -1;
    $('.favCounter').text(items);
    if(parseInt($('.favCounter').text()) > 0) {
        $('.favCounter').removeClass('hidden');
    } else {
        $('.favCounter').addClass('hidden');
    }
}

11. W pliku js/layout1.js wyszukaj linię "function addToCart(e) {". Tuż nad nią dodaj następujące linijki:

var stockLevelValue;
var addedItems;

12. Kilka linijek wyżej znajduje się linia "$('.attributes-select:not(:last-child)').after(' ');". Pod nią wklej następujący kod:

body.on('click', '.stayOnPage-js', function(e) {
    if(stockLevelValue <= 0) {
        location.reload();
    }
});

13. Wróćmy do funkcji addToCart (punkt 10). Jedna z początkowych linii tej funkcji brzmi "value.value = (value.value).replace('.',',')". Tuż pod nią wklej poniższe linie kodu:

    stockLevelValue = parseInt($('#stockLevelValueInput').attr('value'));
    addedItems = value.value;

a w wyszukanej przed chwilą linii, na jej końcu dodaj średnik (jeśli go nie ma). 14. Wyszukaj linię "if ($('input[name="basic-unit-ratio"]').index() >= 0) {". Tuż nad nią wklej:

    $('#stockLevelValueInput').val(value);

15. W pliku js/layout1.js Wyszukaj linię "recalculate: function (itemNr, itemQty) {". Tuż nad nią znajduje się linia "},". Tuż nad nią wklej:

    ui.changeCartValueInHeader();

16. Wyszukaj linię "$('body').on('click', '.js-change-value', function (e) {". Pod nią znajduje się linia "cartFunctions.orderChangeValue(e);". Tuż pod nią wklej tę samą linię co w punkcie poprzednim. 17. Wyszukaj linię "$('body').on('change', '.js-value', function (e) {". Pod nią znajduje się linia "cartFunctions.orderChangeValue(e);". Tuż pod nią wklej tę samą linię co w punkcie poprzednim.

7. Dodanie tłumaczeń

Nowy nagłówek wymaga zmiany w tłumaczeniach. Otwieramy Panel Administracyjny -> Wygląd sklepu -> Ustawienia. Wybieramy własciwy szablon i klikamy zakładkę "Tłumaczenia". Dodajemy nowe tłumaczenie: Id: SeeAllCategories Tekst: Zobacz wszystkie kategorie

8. Dodanie opcji zmiany stylu kategorii (kompaktowy lub wygodny)

Domyślnym sposobem prezentacji kategorii w nowym nagłówku jest wygodny. Pokazuje on mniej kategorii bez przewijania, ale za to odstępny między nimi są większe. Istnieje także opcja trybu kompaktowego. Możemy w prosty sposób dodać opcję przełączania między trybami w Panelu Administracyjnym. Aby to zrobić, otwórz plik __settings.liquid. Pod jedną z pierwszych linii kodu ("{% when '1' %}") wklej poniższe linie kodu:

{% assign HeaderThirdType = "Widok pierwszego poziomu menu głównego (dla trzeciego typu nagłówka)" -%}
{% assign HeaderThirdTypeComfortable = "Wygodny (do 10 kategorii w pierwszym poziomie)" -%}
{% assign HeaderThirdTypeCompact = "Kompaktowy (do 16 kategorii w pierwszym poziomie)" -%}

Powyżej dodane zostały tłumaczenia polskie wyboru opcji. Teraz należy dodać angielskie. W tym celu wyszukaj linię "{% else %}" i poniższe linie wklej tuż pod wyszukaną przed chwilą:

{% assign HeaderThirdType = "View of the first level of the main menu (for the third type of header)" -%}
{% assign HeaderThirdTypeComfortable = "Comfortable (up to 10 categories in the first level)" -%}
{% assign HeaderThirdTypeCompact = "Compact (up to 16 categories in the first level)" -%}

W tym samym pliku poniżej znajduje się cały ciąg pól oznaczonych jako:

*treść*

Łatwo je rozpoznać, ponieważ ich struktura jest niemal podobna, różnią się tylko poszczególnymi opcjami i tłumaczeniami. Pomiędzy sekcjami, w dowolnym miejscu (ale nie w środku innej sekcji!) wklej ten kod:

Teraz otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia, wybierz odpowiedni szablon i zjedź nieco niżej. Znajdziesz tam dodaną przed chwilą opcję wyboru. Wybierz opcję, która Ci odpowiada i zapisz. Gdy zechcesz zmienić ustawienia po czasie, nie będzie z tym żadnego problemu. To już wszystkie zmiany, jakie należy wprowadzić, aby korzystać z nowej wersji nagłówka. Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę "Więcej" (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.

Przyklejone nagłówki w szablonie Topaz

W niniejszym artykule dowiesz się, w jaki sposób zmodyfikować wariant 1 lub 2 nagłówka w Topazie, by były one "przyklejonymi" nagłówkami podczas przewijania strony.

Instrukcje dla poszczególnych wariantów nagłówków

Pierwszy wariant nagłówka

Drugi wariant nagłówka

"Przyklejenie" nagłówka sprawia, że przy przewijaniu strony jest on na stałe przyczepiony do górnej części ekranu, tak, by dostęp do menu był wygodny z każdego miejsca na stronie.

Wskazówka

W wersji 2021 powstał również trzeci wariant nagłówka. "Przyklejenie" tego nagłówka jest już zaimplementowane i nie trzeba dokonywać żadnych modyfikacji kodu.

Wskazówka

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

Modyfikacje dla pierwszego wariantu nagłówka

Pierwszym krokiem jest modyfikacja pliku html z nagłówkiem. W tym celu w plikach szablonu otwórz plik elements->header->header-1.html. Jeśli w folderze elements->header posiadasz inny plik, to znaczy, że w kreatorze wybrany został inny wariant nagłówka. Kod w powyższym pliku podmień na następujący:

{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}


    
        
            
                    
                    {{ translations.Hea_Menu }}
                
            
                {% assign logoAlt = config.Shop.Name | H -%}
                {{config.Shop.ImageUrl | Img: '', logoAlt}}
            
            
                
                    
                    {{ translations.Com_Search }}
                
                {% if usr.Authenticated -%}
                    
                        
                            
                            {{ translations.Hea_CustomerProfile }}
                        
                    
                
                    
                    
                        
                    
                    {{ translations.Cpr_Logout }}
                
                {% else -%}
                
                    
                    {{ translations.Log_Login }}
                
                {% endif -%}
                
                    
                        
                        {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%})
                    
                
            
        
        
            
                
                    
                    {{ translations.Hea_Menu }}
                
                {% if header.Nodes[0] -%}
                
                    {{ translations.Com_Categories }}
                    
                
                {% endif -%}
                
                    
                        
                            
                                {% for category in header.Nodes -%}
                                {% assign categoriesSize = category.Groups | Size -%}
                                {% if categoriesSize > 0 -%}
                                    
                                        
                                            {{ category | A }}
                                            
                                                
                                            
                                        
                                        
                                            {% for undercategory in category.Groups -%}
                                            {% assign undercategoriesSize = undercategory.Nodes | Size -%}
                                            {% if undercategoriesSize > 0 -%}
                                            
                                                
                                                    {{undercategory.Name}}
                                                    
                                                        
                                                    
                                                
                                                {% if undercategory.Nodes -%}
                                                
                                                    {% for underundercategory in undercategory.Nodes -%}
                                                    {% assign underundercategoriesSize = category.Groups | Size -%}
                                                    {% if underundercategoriesSize > 0 -%}
                                                    
                                                        {{underundercategory.Name}}
                                                    
                                                    {% endif -%}
                                                    {% endfor -%}
                                                
                                                {% endif -%}
                                            
                                            {% endif -%}
                                            {% endfor -%}
                                            
                                                
                                                    {% for undercategory in category.Groups -%}
                                                    {% assign categoriesSize = undercategory.Nodes | Size -%}
                                                    {% if categoriesSize == 0 -%}
                                                    
                                                        
                                                            {{ undercategory | A }}
                                                        
                                                    
                                                    {% endif -%}
                                                    {% endfor -%}
                                                
                                            
                                        
                                    
                                {% endif -%}
                                {% endfor -%}
                                
                                    
                                        {% for category in header.Nodes -%}
                                        {% assign categoriesSize = category.Groups | Size -%}
                                        {% if categoriesSize == 0 -%}
                                        
                                            
                                                {{ category | A }}
                                            
                                        
                                        {% endif -%}
                                        {% endfor -%}
                                    
                                
                            

                            {% assign name = 'menuBanner' -%}
                            {% if config.Banners[name].Images[0].Link != '' -%}
                                
                            {% endif -%}
                           
                            
                                {% if config.Banners[name].Images[0] -%}
                                    {% assign banner = config.Banners[name].Images[0] -%}
                                    {% if banner -%}
                                        {% assign bannerAlt = banner.Alt | H -%}
                                        {{banner.Url | Img: '', bannerAlt}}
                                    {% endif -%}
                                    
                                        {{config.Banners[name].Images[0].Heading}}
                                        {{config.Banners[name].Images[0].Text}}
                                    
                              	{% else -%}
                                     {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
                                     220x295
                                {% endif -%}
                            
                            
                            {% if config.Banners[name].Images[0].Link != '' -%}
                            
                            {% endif -%}

                        
                    
                
                
                    {{ translations.Hea_Pages }}
                    
                
                
                    
                        
                            {{config.DefinedPages.About.Name}}
                            {{config.DefinedPages.Payment.Name}}
                            {{config.DefinedPages.Shipping.Name}}
                            {{config.DefinedPages.Terms.Name}}
                        
                    
                
                {{ config.DefinedPages.Contact | A }}
                {% for banner in config.Banners -%}
                    {% assign imagesQuantity = banner.Images | Size -%}
                    {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%}
                        {% assign fakeLookbook = true -%}
                    {% endif -%}
                {% endfor -%}
                {% assign lookbooksQuantity = config.Lookbook.List | Size -%}
                {% if lookbooksQuantity > 1  -%}
                    
                        {{ translations.Lookbook }}
                        
                    
                    
                        
                            
                                {% for lookbook in config.Lookbook.List -%}
                                    {{lookbook.Text}}
                                {% endfor -%}
                            
                        
                    
                {% elseif lookbooksQuantity == 1 or fakeLookbook -%}
                    {{ config.DefinedPages.Lookbook | A }}
                {% endif -%}
            
            
                {% if config.Shop.Contact.PhoneNo != '' -%}
                    
                        
                        {{config.Shop.Contact.PhoneNo}}
                    
                {% endif -%}
                {% if config.Shop.Contact.Email != '' -%}
                    
                        
                        {{ config.Shop.Contact.Email }}
                    
                {% endif -%}
                
                    
                    {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}
                
                
                    
                        
                            {{ translations.Prf_Language }}
                            
                            {% for language in config.Languages -%}
                                
                                
                                    
                                        
                                    
                                    {{ language.Language }}
                                
                            {% endfor -%}
                        
                        
                            {{ translations.Com_Currency }}
                            
                            {% for currency in config.Currencies -%}
                                
                                
                                    
                                        
                                    
                                    {{ currency.Code }}
                                
                            {% endfor -%}
                        
                    
                
            
            {% if usr.Authenticated == false -%}
                
                    
                    {{translations.Com_Login}} / {{translations.Registration}}
                
            {% endif -%}
        
    
    
        
        
            
        
        
        
        
        


{% assign index = 0 -%}
{% for msg in config.Messages -%}
{% if msg.Type == 0 -%}
{% assign index = index | Plus: 1 -%}
{% assign cookieFormat = 'config-message-{0}' -%}
{% assign cookieName = cookieFormat | Format : {{msg.Id}}  -%}
{% if page.Cookies[cookieName] != 1 -%}

	
		
	
    {% if msg.Title != '' -%}
    
        {% if msg.Url != '' -%}
        {{ msg.Title }}
        {% else -%}
        {{ msg.Title }}
        {% endif -%}
    
    {% endif -%}
    {{ msg.Message }}

{% endif -%}
{% endif -%}
{% endfor -%}

{% if page.PageId == 6 and page.QueryString contains "?fav=1" -%}
    {% assign headerMobileReturnButton = 1 -%}
{% elseif page.PageId == 4 -%}
    {% assign headerMobileReturnButton = 1 -%}
{% else -%}
    {% assign headerMobileReturnButton = 0 -%}
{% endif -%}


    
    {% if page.PageId == 4 -%}{{translations.CartContent}} ({{cart.Products | Size }}){% endif -%}

Następnie należy zmodyfikować pliki css. W tym celu najpierw otwórz plik css/layout0.css. Wyszukaj blok kodu zaczynający się od ".headerSection{color:{{settings.headerFontColor}};" a kończący się na ".headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}". Usuń cały ten blok kodu, a w jego miejsce wklej nastepujący:

.headerBackground{background-color:{{settings.headerBgColor}};height:120px;width:100%;margin:0;padding:0}.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:120px;box-sizing:border-box;position:relative;z-index:13}.headerSection.frozenHeader{position:fixed !important;top:0;box-shadow:2px 1px 4px 0 #b0b0b0}.headerSection.frozenHeader>.scrollHeader{padding-top:0 !important;padding-bottom:65px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__logo{top:17px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__iconsMenu{bottom:-55px !important}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:120px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;z-index:1;display:flex;align-items:center;justify-content:center}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{max-height:36px;width:auto;max-width:100px}.headerSection .headerSection__logo.longLogo{top:0;left:150px}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__row{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .mainNavigation{display:none}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative;padding:10px 0 0}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-2px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__navLinks.longLogo{top:5px}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px;position:absolute;bottom:-37px;right:0;z-index:1}.headerSection .headerSection__iconsMenu .mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .iconsMenuItem__text i{font-style:normal}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__iconsMenu.longLogo{bottom:-70px}.headerSection .headerSection__searchForm{position:absolute;top:100px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;display:none;padding:30px 15px;margin:0;overflow:hidden;box-sizing:border-box;text-align:center;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .headerSection__searchForm__searchButtonMobile{display:none}.headerSection .scrollSearchForm{top:70px !important}.headerSection .headerSection__searchForm__phrase{max-width:436px;width:100%;height:36px;padding:0 0 11px;box-sizing:border-box;border-bottom:1px solid {{settings.linkFontColor}};color:{{settings.headerFontColor}};background-color:transparent}.headerSection .headerSection__searchForm__btn{position:absolute;top:30px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:none;display:none}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:45px;position:relative;box-sizing:border-box;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;position:absolute;top:-40px;right:0}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.breadcrumbsFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;margin:10px 0 5px;opacity:.5}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}

W tym samym katalogu otwórz plik layout-m0.css. Wyszukaj linijkę "@media only screen and (max-width: 767px){.headerSection{height:60px}". Usuń ją, a w jej miejsce wklej następującą:

@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}.headerSection .header__icon svg{width:18px;height:18px}.headerSection .header__icon.header__login{display:none}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__shopData{position:absolute;top:30px;right:30px;margin-right:55px}.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:none}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 35px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none;position:fixed;top:0;bottom:56px;overflow-y:auto;overflow-x:hidden;z-index:1}.headerSection .headerSection__mainMenu{position:absolute;top:50px;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{text-align:left;position:absolute;padding:15px;width:105px;box-sizing:border-box;left:20px;top:-40px;font-size:16px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};background-color:{{settings.headerBgColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn span{display:none}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn svg{margin-bottom:-3px;margin-top:50px}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 22px)}.headerSection .headerSection__mainMenu .mainNavigation__category a{font-weight:600}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:50px 40px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block;margin-top:5px}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text i{display:none}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:15px}.headerSection .mobileMenuIcon .iconsMenuItem__text{text-transform:uppercase}.headerSection .mobileMenuIcon svg{top:3px;margin:4px 0 0;width:20px;height:20px}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;font-size:10px;position:static;bottom:22px;right:35px}.headerSection .headerSection__searchForm{position:fixed;top:45px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;max-width:100%;height:100%;padding:35px 0 0;margin:-45px 0 0 0}.headerSection .headerSection__searchForm svg{fill:{{settings.linkFontColor}};display:block;margin-left:33px;margin-bottom:25px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__btn{background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__phrase{margin:10px 0;width:calc(100% - 71px);max-width:calc(100% - 71px)}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:15px;position:relative;border-bottom:1px solid {{settings.borderColor}};margin-left:23px;padding-bottom:15px}.headerSection .headerSection__shopData .mobileSvgIcon{margin-left:0}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:block}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}.headerSection .hideOnMobile{display:none}}.mobileCartReturnButton{background-color:{{settings.primaryPageBgColor}};padding:31px 0 20px;display:block;width:100%;position:absolute;top:0;z-index:15}.mobileCartReturnButton svg{width:16px;height:16px;fill:{{settings.linkFontColor}};padding-left:30px;padding-right:17px}.mobileCartReturnButton .mobileCartItemsCounter{font-size:14px;font-weight:300;color:{{settings.primaryFontColor}};position:absolute;top:30px}

Dalej, w tym samym katalogu otwórz plik layout-d0.css. Znajdź w nim linijkę, zaczynającą się od: "@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}". Usuń ją i wklej w jej miejsce następującą:

@media screen and (min-width: 769px) and (max-width: 1000px){.headerSection.frozenHeader>.scrollHeader{flex-direction:row;justify-content:flex-start}.headerSection.frozenHeader>.scrollHeader .headerSection__row{justify-content:flex-start;flex-wrap:wrap;margin-top:14px}.headerSection.frozenHeader>.scrollHeader .headerMainMenu-js{margin-left:2%}.headerSection.frozenHeader .headerSection__iconsMenu{position:fixed;top:20px;right:3%}.headerSection.frozenHeader .mainNavigation__links{position:fixed;top:70px;left:3%}}@media screen and (min-width: 769px) and (max-width: 840px){.headerSection.frozenHeader .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:8px !important}}@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:15px;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:15px;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:15px}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .imageLink{width:fit-content;height:fit-content}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden;background-color:#f2f2f2;position:relative}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content{position:absolute;top:50%;left:3%;max-height:50%}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__title{margin:0;padding:0;color:{{settings.bannerFontColor}};font-size:16px;font-weight:500}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0;font-size:14px}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__categories ul li ul li{padding-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{text-transform:none;width:100%;font-weight:500;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover{color:{{settings.headerFontColor}};font-weight:600}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__underundercategory a{font-weight:300}.headerSection .mainNavigation__links .mainNavigation__category a{font-size:12px;font-weight:500;width:100%;display:inline-block}}@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}@media screen and (min-width: 950px){.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:inline-block}}@media screen and (min-width: 1000px){.headerSection .mainNavigation__links{min-width:880px;left:-150px}.headerSection .headerSection__iconsMenu{bottom:-62px;right:0}.headerSection .headerSection__mainMenu__navLinks{top:-7px;left:150px}.headerSection .headerSection__logo{left:0;top:25px;position:absolute}}@media screen and (min-width: 1220px){.headerSection .mainNavigation__links{min-width:1100px}}@media screen and (min-width: 1400px){.headerSection.headerSection__bg>.headerSection__row{max-width:1400px;margin:0 auto}.headerSection .mainNavigation__links{left:0}}@media screen and (max-width: 1000px){.frozenHeader .headerSection__logo{margin-top:5px !important}}

Pozostało zmodyfikować pliki js. Otwórz plik js/layout0.js A w nim linijkę "var headerFunctions = {". Należy usunąć cały blok kodu, początwszy od tej linijki, aż do "};". Aby łatwiej zlokalizować ostatnią linię do usunięcia, następna po niej brzmi: "ui.showFooterSection = function() {". W miejsce powyższego bloku kodu należy wkleić następujący:

var headerFunctions = {
    init: function () {
        headerFunctions.events();
    },
	// Function that sets the menu position according to the width of the logo
    setMenuPosition: function() {
        var logo = $('img[src="logo.png"]');
        var logoWidth = logo.width();

        if(logoWidth > 120) {
            logo.parent().addClass('longLogo');
            $('.headerSection__mainMenu__navLinks').addClass('longLogo');
            $('.headerSection__iconsMenu').addClass('longLogo');
        }
    },
    events: function () {
        var pageHeader = $('.pageHeader-js');

        pageHeader.on('click', '.showSearchSection-js', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $('.searchFormPhrase-js').focus();
        });

        pageHeader.on('click', '.showMenuSection-js', function() {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
        });

        pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() {
            $('.pageHeader-js .headerMainMenu-js').hide(200);
        });

        $(document).on('click', function (e) {
            //categories list
            if ($(e.target).closest('.openCategoryMenu-js').length === 0 && $(e.target).closest('.mainNavigation-js').length === 0 
                && $(e.target).closest($('.mainNavigation-js').children()).length === 0 && $(e.target).closest('.openPagesMenu-js').length === 0) {
              
                if($('.mainNavigation-js').css('display') != 'none') {
                    $('.mainNavigation-js').toggle(200);
                    $('.openCategoryMenu-js').removeClass('activeButton-js');
                }
            }
            //pages list
            if($(e.target).closest('.openPagesMenu-js').length === 0 && $(e.target).closest('.sitesNavigation-js').length === 0
                && $(e.target).closest($('.sitesNavigation-js').children()).length === 0 && $(e.target).closest('.openCategoryMenu-js').length === 0) {
                   
                if($('.sitesNavigation-js').css('display') != 'none') {
                    $('.sitesNavigation-js').toggle(200);
                    $('.openPagesMenu-js').removeClass('activeButton-js');
                }     
            }
            //search form
          if( $(e.target).closest('.showSearchSection-js').length === 0 && $(e.target).closest('.headerSearchForm-js').length === 0
            && $(e.target).closest('.searchForm__searchAutocomplete-js').length === 0 && $(e.target).closest($('.searchForm__searchAutocomplete-js').children()).length === 0)
            {
                if($('.headerSearchForm-js').css('display') != 'none') {
                    $('.searchForm__searchAutocomplete-js').remove();
                    $('.headerSearchForm-js').toggle(200);
                }
            }
        });

        pageHeader.on('click', '.mainMenuMobileCloseSearchBtn-js', function() {
            $('.pageHeader-js .headerSearchForm-js').hide(200);
        });

        pageHeader.on('input', '.searchFormPhrase-js', function() {
            if($(this).val().length > 0) {
                $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden');
            } else {
                $('.headerSection__searchForm__searchButtonMobile').addClass('hidden');
            }
        });
        pageHeader.on('click', '.openCategoryMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').toggle(200);
            $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
            app.loadImages();
        });

        pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openPagesMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openLookbooksMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .headerSearchForm-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('change', '.customerLanguageChange-js', function(e) {
            if($(this).is(':checked')) {app.customerLanguageChange(e)}
        });

        pageHeader.on('change', '.customerCurrencyChange-js', function(e) {
            if($(this).is(':checked')) {app.customerCurrencyChange(e)}
        });

        pageHeader.on('click', '.openUndercategoryMenu-js', function(e) {
            var undercategory = $(e.currentTarget).closest('li').find('ul').first();
            $(undercategory).toggle(200);
        });

		$('img[data-src="logo.png"]').on('load', function(e) {
			headerFunctions.setMenuPosition();
        });

        $(window).ready(function(e) {
            $('html, body').animate({scrollTop : 0},10);
            $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 10);
        });

        $(window).scroll(function(e) {
            if($(this).scrollTop() > 100 && $(this).width() > 768) {
                $('.headerBackground').removeClass('hidden');
                $('.headerSection').addClass('frozenHeader');
                $('.headerSection__shopData').addClass('hidden');
                $('.headerSection__row').first().addClass('scrollHeader');
                $('.headerSection').css('height', '70px');
                $('.headerSection__searchForm').addClass('scrollSearchForm');
            
            } else if ($(this).scrollTop() == 0 && $(this).width() > 768) {
                $('.headerBackground').addClass('hidden');
                $('.headerSection').removeClass('frozenHeader');
                $('.headerSection__shopData').removeClass('hidden');
                $('.headerSection__row').first().removeClass('scrollHeader');
                $('.headerSection__searchForm').removeClass('scrollSearchForm');
                $('.headerSection').css('height', '120px');
           }
        });

        $(window).on('resize', function(e) {
            if($(window).width() < 768) {
                $('.headerBackground').addClass('hidden');
                $('.headerSection').removeClass('frozenHeader');
                $('.headerSection__shopData').removeClass('hidden');
                $('.headerSection__row').first().removeClass('scrollHeader');
                $('.headerSection__searchForm').removeClass('scrollSearchForm');
                $('.headerSection').css('height', '60px');
            } else {
                if($(this).scrollTop() > 100 && $(this).width() > 768) {
                    $('.headerBackground').removeClass('hidden');
                    $('.headerSection').addClass('frozenHeader');
                    $('.headerSection__shopData').addClass('hidden');
                    $('.headerSection__row').first().addClass('scrollHeader');
                    $('.headerSection').css('height', '70px');
                    $('.headerSection__searchForm').addClass('scrollSearchForm');
                
                } else if ($(this).scrollTop() == 0 && $(this).width() > 768) {
                    $('.headerBackground').addClass('hidden');
                    $('.headerSection').removeClass('frozenHeader');
                    $('.headerSection__shopData').removeClass('hidden');
                    $('.headerSection__row').first().removeClass('scrollHeader');
                    $('.headerSection__searchForm').removeClass('scrollSearchForm');
                    $('.headerSection').css('height', '120px');
                }
            }
        });
    }
};

Pozostała jeszcze mała modyfikacja kodu w porównywarce towarów, ponieważ przyklejony nagłówek jest przysłonięty przez porównywarkę. W tym celu otwórz plik js/layout1.js a w nim wyszukaj linię " if (window.pageYOffset > (topPosition)) {". Linia ta znajduje się w funkcji, której poczatkiem jest linia "$(window).on('scroll', function() {" a końcem linia "});". Sama funkcja ma ok. 13 linii długości. Usuń ją, a w jej miejsce wklej poniższy kod:

        $(window).on('scroll', function() {
            if($('.frozenHeader').index()) {
                var headerHeight = parseInt($('.frozenHeader').css('height') + 5);
            }

            if (window.pageYOffset > (topPosition)) {
                topSection.style.position = 'sticky';
                topSection.style.zIndex = '12';

                if($('.frozenHeader').index()) { topSection.style.top = headerHeight + "px";
                } else { topSection.style.top = 75 + "px"; }

            } else {
                topSection.style.position = 'inherit';
                topSection.style.top = 'none';
                topSection.style.zIndex = 'inherit';
            }
        });

Gotowe ! W ten sposób problem nachodzenia porównywarki na przyklejony nagłówek zostaje wyeliminowany. To wszystkie kroki do wykonania przyklejonego nagłówka, gdy wybrałeś w Kreatorze pierwszy wariant nagłówka. Kolejne kroki instrukcji są przygotowane z myślą o drugim wariancie nagłówka. Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę "Więcej" (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.

Modyfikacje dla drugiego wariantu nagłówka

Pierwszym krokiem jest modyfikacja pliku html z nagłówkiem. W tym celu w plikach szablonu otwórz plik elements->header->header-2.html. Jeśli w folderze elements->header posiadasz inny plik, to znaczy, że w kreatorze wybrany został inny wariant nagłówka. Kod w powyższym pliku podmień na następujący:

{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}


    
        
            
                {% assign logoAlt = config.Shop.Name | H -%}
                {{config.Shop.ImageUrl | Img: '', logoAlt}}
            
            
                
                    
                
                
                    
                    
                    
                    
                
            
            
                
                    
                    {{ translations.Hea_Menu }}
                
                {% if usr.Authenticated -%}
                
                        
                            
                            {{ translations.Hea_CustomerProfile }}
                        
                    
                
                    
                    
                            
                        
                    {{ translations.Cpr_Logout }}
                
                {% else -%}
                
                    
                    {{ translations.Log_Login }}
                
                {% endif -%}
                
                    
                    {{ translations.Com_Search }}
                
                
                    
                        
                        {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%})
                    
                
            
        
        
            
                
                    
                
                {% if header.Nodes[0] -%}
                
                    {{ translations.Com_Categories }}
                    
                
                {% endif -%}
                
                    
                        
                            
                                {% for category in header.Nodes -%}
                                {% assign categoriesSize = category.Groups | Size -%}
                                {% if categoriesSize > 0 -%}
                                    
                                        
                                            {{ category | A }}
                                            
                                                
                                            
                                        
                                        
                                            {% for undercategory in category.Groups -%}
                                            {% assign undercategoriesSize = undercategory.Nodes | Size -%}
                                            {% if undercategoriesSize > 0 -%}
                                            
                                                
                                                    {{undercategory.Name}}
                                                    
                                                        
                                                    
                                                
                                                {% if undercategory.Nodes -%}
                                                
                                                    {% for underundercategory in undercategory.Nodes -%}
                                                    {% assign underundercategoriesSize = category.Groups | Size -%}
                                                    {% if underundercategoriesSize > 0 -%}
                                                    
                                                        {{underundercategory.Name}}
                                                    
                                                    {% endif -%}
                                                    {% endfor -%}
                                                
                                                {% endif -%}
                                            
                                            {% endif -%}
                                            {% endfor -%}
                                            
                                                
                                                    {% for undercategory in category.Groups -%}
                                                    {% assign undercategoriesSize = undercategory.Nodes | Size -%}
                                                    {% if undercategoriesSize == 0 -%}
                                                    
                                                        
															{{undercategory.Name}}
                                                        
                                                    
                                                    {% endif -%}
                                                    {% endfor -%}
                                                
                                            
                                        
                                    
                                {% endif -%}
                                {% endfor -%}
                                
                                    
                                        {% for category in header.Nodes -%}
                                        {% assign categoriesSize = category.Groups | Size -%}
                                        {% if categoriesSize == 0 -%}
                                        
                                            
                                                {{ category | A }}
                                            
                                        
                                        {% endif -%}
                                        {% endfor -%}
                                    
                                
                            

                            {% assign name = 'menuBanner' -%}
                            {% if config.Banners[name].Images[0].Link != '' -%}
                                
                            {% endif -%}

                            
                                {% if config.Banners[name].Images[0] -%}
                                    {% assign banner = config.Banners[name].Images[0] -%}
                                    {% if banner -%}
                                        {% assign bannerAlt = banner.Alt | H -%}
                                        {{banner.Url | Img: '', bannerAlt}}
                                    {% endif -%}
                                    
                                        {{config.Banners[name].Images[0].Heading}}
                                        {{config.Banners[name].Images[0].Text}}
                                    
                              	{% else -%}
                                     {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}}
                                     220x295
                                {% endif -%}
                            

                            {% if config.Banners[name].Images[0].Link != '' -%}
                                
                            {% endif -%}

                        
                    
                
                
                    {{ translations.Hea_Pages }}
                    
                
                
                    
                        
                            {{config.DefinedPages.About.Name}}
                            {{config.DefinedPages.Payment.Name}}
                            {{config.DefinedPages.Shipping.Name}}
                            {{config.DefinedPages.Terms.Name}}
                        
                    
                
                {{ config.DefinedPages.Contact | A }}
                {% for banner in config.Banners -%}
                    {% assign imagesQuantity = banner.Images | Size -%}
                    {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%}
                        {% assign fakeLookbook = true -%}
                    {% endif -%}
                {% endfor -%}
                {% assign lookbooksQuantity = config.Lookbook.List | Size -%}
                {% if lookbooksQuantity > 1  -%}
                    
                        {{ translations.Lookbook }}
                        
                    
                    
                        
                            
                                {% for lookbook in config.Lookbook.List -%}
                                    {{lookbook.Text}}
                                {% endfor -%}
                            
                        
                    
                {% elseif lookbooksQuantity == 1 or fakeLookbook -%}
                    {{ config.DefinedPages.Lookbook | A }}
                {% endif -%}
            
            
                {% if config.Shop.Contact.PhoneNo != '' -%}
                    
                        
                        {{config.Shop.Contact.PhoneNo}}
                    
                {% endif -%}
                {% if config.Shop.Contact.Email != '' -%}
                    
                        
                        {{ config.Shop.Contact.Email }}
                    
                {% endif -%}
                
                    
                    {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}
                
                
                    
                        
                            {{ translations.Prf_Language }}
                            
                            {% for language in config.Languages -%}
                                
                                
                                    
                                        
                                    
                                    {{ language.Language }}
                                
                            {% endfor -%}
                        
                        
                            {{ translations.Com_Currency }}
                            
                            {% for currency in config.Currencies -%}
                                
                                
                                    
                                        
                                    
                                    {{ currency.Code }}
                                
                            {% endfor -%}
                        
                    
                
            
        
    


{% assign index = 0 -%}
{% for msg in config.Messages -%}
{% if msg.Type == 0 -%}
{% assign index = index | Plus: 1 -%}
{% assign cookieFormat = 'config-message-{0}' -%}
{% assign cookieName = cookieFormat | Format : {{msg.Id}}  -%}
{% if page.Cookies[cookieName] != 1 -%}

	
		
	
    {% if msg.Title != '' -%}
    
        {% if msg.Url != '' -%}
        {{ msg.Title }}
        {% else -%}
        {{ msg.Title }}
        {% endif -%}
    
    {% endif -%}
    {{ msg.Message }}

{% endif -%}
{% endif -%}
{% endfor -%}

{% if page.PageId == 6 and page.QueryString contains "?fav=1" -%}
    {% assign headerMobileReturnButton = 1 -%}
{% elseif page.PageId == 4 -%}
    {% assign headerMobileReturnButton = 1 -%}
{% else -%}
    {% assign headerMobileReturnButton = 0 -%}
{% endif -%}


    
    {% if page.PageId == 4 -%}{{translations.CartContent}} ({{cart.Products | Size }}){% endif -%}

Następnie należy zmodyfikować pliki css. W tym celu najpierw otwórz plik css/layout0.css. Wyszukaj blok kodu zaczynający się od „.headerSection{color:{{settings.headerFontColor}}” a kończący się na „headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Usuń cały ten blok kodu, a w jego miejsce wklej nastepujący:

.headerBackground{width:100%;background-color:{{settings.headerBgColor}};height:150px;margin:0;padding:0}.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:150px;box-sizing:border-box;position:relative;z-index:13}.headerSection.frozenHeader{position:fixed !important;top:0;box-shadow:2px 1px 4px 0 #b0b0b0}.headerSection.frozenHeader>.scrollHeader{padding-top:18px !important;padding-bottom:65px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__logo{top:17px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__iconsMenu{bottom:-55px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__mainMenu__navLinks .openCategoryMenu-js{position:fixed;top:25px;margin-left:9%}@media screen and (max-width: 1200px){.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__mainMenu__navLinks .openCategoryMenu-js{margin-left:13%}}.headerSection.frozenHeader>.scrollHeader .searchForm__searchAutocomplete{top:30px !important}.headerSection.frozenHeader .mainNavigation__links{top:-55px !important}.headerSection.frozenHeader .mainNavigation__sites{display:none !important}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:150px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-top:2px}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{max-height:36px;max-width:100px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .headerSection__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;position:relative}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2),.headerSection .mainNavigation{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{height:36px;position:relative;box-sizing:border-box;width:30%;max-width:420px}.headerSection .headerSection__searchForm__searchButtonMobile,.headerSection .headerSection__searchForm .closeSearchButton{display:none}.headerSection .headerSection__searchForm__phrase{max-width:420px;width:100%;height:36px;padding:12px 10px 11px;box-sizing:border-box;border:1px solid {{settings.borderColor}};color:{{settings.headerFontColor}};background-color:rgba(255,255,255,0.25)}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.headerFontColor}};opacity:.7}.headerSection .headerSection__searchForm__btn{position:absolute;top:0;right:-35px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:1px solid {{settings.borderColor}}}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{display:block;margin:0 auto;padding:20px 0;top:45px;z-index:9;width:100%;position:absolute;box-sizing:border-box}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;width:80%;max-width:500px;margin:0 auto;padding:15px 20px;background-color:{{settings.headerBgColor}};border-bottom:1px solid #f2f2f2;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2);font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;top:7px;position:relative;color:{{settings.headerFontColor}}}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.headerFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;opacity:.5;margin:10px 0 5px}@media screen and (min-width: 768px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:0}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .imageLink{width:fit-content;height:fit-content}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden;position:relative}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content{position:absolute;top:50%;left:3%;max-height:50%}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__title{margin:0;padding:0;color:{{settings.bannerFontColor}};font-size:16px;font-weight:500}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0;font-size:14px}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__categories ul li ul li{padding-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{text-transform:none;color:{{settings.headerFontColor}};width:100%;font-weight:500;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover{color:{{settings.headerFontColor}};font-weight:600}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__underundercategory a{font-weight:300}.headerSection .mainNavigation__links .mainNavigation__category a{color:{{settings.headerFontColor}};font-size:12px;font-weight:500;width:100%;display:inline-block}}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (max-width: 949px){.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:inline-block}}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}

W tym samym katalogu otwórz plik layout-m0.css. Wyszukaj linijkę „@media only screen and (max-width: 768px){.headerSection{height:60px}”. Usuń ją, a w jej miejsce wklej następującą:

@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon svg{width:15px;height:15px}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 20px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none}.headerSection .headerSection__mainMenu{position:fixed;top:0;bottom:56px;overflow:auto;z-index:1;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{display:block;text-align:left;position:relative;padding:15px;width:50px;box-sizing:border-box;left:-15px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 20px)}.headerSection .headerSection__mainMenu .mainNavigation__category a{font-weight:600}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:10px 20px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .headerSection__row{flex-direction:row}.headerSection .headerSection__iconsMenu .hideOnMobile{display:none !important}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text,.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:block;margin-top:5px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:0}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;margin-top:-9px;font-size:10px}.headerSection .headerSection__searchForm{position:fixed;top:0;padding-top:25px;left:0;right:0;width:100%;max-width:100%;bottom:0;overflow:auto;height:auto;background-color:{{settings.primaryPageBgColor}};z-index:1}.headerSection .headerSection__searchForm .closeSearchButton{display:block;margin-bottom:25px;margin-left:20px}.headerSection .headerSection__searchForm .closeSearchButton:hover{cursor:pointer}.headerSection .headerSection__searchForm .closeSearchButton svg{width:18px;height:18px;fill:{{settings.linkFontColor}}}.headerSection .headerSection__searchForm__btn{display:none;background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__phrase{margin:10px 20px 10px 20px;width:calc(100% - 40px);max-width:calc(100% - 40px);border-left:none;border-right:none;border-top:none;padding-bottom:14px;border-bottom:1px solid {{settings.primaryFontColor}}}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:-5px;padding-bottom:15px;margin-left:20px;margin-right:20px;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__shopData .mobileSvgIcon{margin-left:0}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__searchForm__phrase{background-color:rgba(255,255,255,0.4);color:{{settings.secondaryFontColor}}}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.secondaryFontColor}}}.headerSection .searchForm__searchAutocomplete{position:fixed;display:block;top:110px;left:0;width:100%}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}}@media only screen and (max-width: 360px){.headerSection.headerSection__bg>.headerSection__row{padding:15px}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{padding:10px 20px 40px}.headerSection .headerSection__shopData{left:0}}.mobileCartReturnButton{background-color:{{settings.primaryPageBgColor}};padding:31px 0 20px;display:block;width:100%;position:absolute;top:0;z-index:15}.mobileCartReturnButton svg{width:16px;height:16px;fill:{{settings.linkFontColor}};padding-left:30px;padding-right:17px}.mobileCartReturnButton .mobileCartItemsCounter{font-size:14px;font-weight:300;color:{{settings.primaryFontColor}};position:absolute;top:30px}

Dalej, w tym samym katalogu otwórz plik layout-d0.css. Znajdź w nim linijkę, zaczynającą się od: „@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}”. Usuń ją i wklej w jej miejsce następującą:

@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}@media screen and (min-width: 950px){.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:inline-block}}@media screen and (min-width: 1000px){.headerSection .mainNavigation__links{min-width:880px}}@media screen and (min-width: 1220px){.headerSection .mainNavigation__links{min-width:1100px}}@media screen and (min-width: 1400px){.headerSection.headerSection__bg>.headerSection__row{max-width:1400px;margin:0 auto}}

Pozostało zmodyfikować pliki js. Otwórz plik js/layout0.js A w nim linijkę „var headerFunctions = {„. Należy usunąć cały blok kodu, początwszy od tej linijki, aż do „};”. Aby łatwiej zlokalizować ostatnią linię do usunięcia, następna po niej brzmi: „ui.showFooterSection = function() {„. W miejsce powyższego bloku kodu należy wkleić następujący:

var headerFunctions = {
    init: function () {
        headerFunctions.events();
    },
    events: function () {
        var pageHeader = $('.pageHeader-js');

        pageHeader.on('click', '.showSearchSection-js', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
            $('.searchFormPhrase-js').focus();
        });

        pageHeader.on('click', '.showMenuSection-js', function() {
            $('.pageHeader-js .headerMainMenu-js').toggle(200);
        });

        pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() {
            $('.pageHeader-js .headerMainMenu-js').hide(200);
        });

        pageHeader.on('click', '.closeSearchButton > svg', function() {
            $('.pageHeader-js .headerSearchForm-js').toggle(200);
        });

        pageHeader.on('input', '.searchFormPhrase-js', function() {
            if($(this).val().length > 0) {
                $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden');
            } else {
                $('.headerSection__searchForm__searchButtonMobile').addClass('hidden');
            }
        });

        pageHeader.on('click', '.openCategoryMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').toggle(200);
            $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
            app.loadImages();
        });

        pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() {
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200);
            $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openPagesMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('click', '.openLookbooksMenu-js', function() {
            $('.pageHeader-js .mainNavigation-js').hide(200);
            $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200);
            $('.pageHeader-js .sitesNavigation-js').hide(200);
            $('.pageHeader-js .lookbooksNavigation-js').toggle(200);
            $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js');
            $(this).toggleClass('activeButton-js');
        });

        pageHeader.on('change', '.customerLanguageChange-js', function(e) {
            if($(this).is(':checked')) {app.customerLanguageChange(e)}
        });

        pageHeader.on('change', '.customerCurrencyChange-js', function(e) {
            if($(this).is(':checked')) {app.customerCurrencyChange(e)}
        });

        pageHeader.on('click', '.openUndercategoryMenu-js', function(e) {
            var undercategory = $(e.currentTarget).closest('li').find('ul').first();
            $(undercategory).toggle(200);
        });

        $(window).ready(function(e) {
            $('html, body').animate({scrollTop : 0},10);
            $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 10);
        });

        $(window).scroll(function(e) {
            if($(this).scrollTop() > 150&& $(this).width() > 768) {
                $('.headerBackground').removeClass('hidden');
                $('.headerSection').addClass('frozenHeader');
                $('.headerSection__shopData').addClass('hidden');
                $('.headerSection__row').first().addClass('scrollHeader');
                $('.headerSection').css('height', '70px');
                $('.mainMenu__navLink').not('.openCategoryMenu-js').addClass('hidden');
            
            } else if ($(this).scrollTop() == 0 && $(this).width() > 768) {
                $('.headerBackground').addClass('hidden');
                $('.headerSection').removeClass('frozenHeader');
                $('.headerSection__shopData').removeClass('hidden');
                $('.headerSection__row').first().removeClass('scrollHeader');
                $('.headerSection').css('height', '150px');
                $('.mainMenu__navLink').not('.openCategoryMenu-js').removeClass('hidden');
            }
        });

        $(window).on('resize', function(e) {
            if($(window).width() < 768) {
                $('.headerBackground').addClass('hidden');
                $('.headerSection').removeClass('frozenHeader');
                $('.headerSection__shopData').removeClass('hidden');
                $('.headerSection__row').first().removeClass('scrollHeader');
                $('.headerSection').css('height', '60px');
            } else {
                if($(this).scrollTop() > 130 && $(this).width() > 768) {
                    $('.headerBackground').removeClass('hidden');
                    $('.headerSection').addClass('frozenHeader');
                    $('.headerSection__shopData').addClass('hidden');
                    $('.headerSection__row').first().addClass('scrollHeader');
                    $('.headerSection').css('height', '70px');
                    $('.mainMenu__navLink').not('.openCategoryMenu-js').addClass('hidden');

                } else if ($(this).scrollTop() == 0 && $(this).width() > 768) {
                    $('.headerBackground').addClass('hidden');
                    $('.headerSection').removeClass('frozenHeader');
                    $('.headerSection__shopData').removeClass('hidden');
                    $('.headerSection__row').first().removeClass('scrollHeader');
                    $('.headerSection').css('height', '150px');
                    $('.mainMenu__navLink').not('.openCategoryMenu-js').removeClass('hidden');
                }
            }
        });

        $(document).on('click', function (e) {
            //categories list
            if ($(e.target).closest('.openCategoryMenu-js').length === 0 && $(e.target).closest('.mainNavigation-js').length === 0 
                && $(e.target).closest($('.mainNavigation-js').children()).length === 0 && $(e.target).closest('.openPagesMenu-js').length === 0) {
              
                if($('.mainNavigation-js').css('display') != 'none') {
                    $('.mainNavigation-js').toggle(200);
                    $('.openCategoryMenu-js').removeClass('activeButton-js');
                }
            }
            //pages list
            if($(e.target).closest('.openPagesMenu-js').length === 0 && $(e.target).closest('.sitesNavigation-js').length === 0
                && $(e.target).closest($('.sitesNavigation-js').children()).length === 0 && $(e.target).closest('.openCategoryMenu-js').length === 0) {
                   
                if($('.sitesNavigation-js').css('display') != 'none') {
                    $('.sitesNavigation-js').toggle(200);
                    $('.openPagesMenu-js').removeClass('activeButton-js');
                }     
            }
            //search form - autocomplete
            if($(e.target).closest('.searchForm__searchAutocomplete-js').length === 0 && $(e.target).closest($('.searchForm__searchAutocomplete-js').children()).length === 0) {
                if($('.searchForm__searchAutocomplete-js').css('display') != 'none') {
                    $('.searchForm__searchAutocomplete-js').toggle(200);
                }
            }
        });
    }
};

Pozostała jeszcze mała modyfikacja kodu w porównywarce towarów, ponieważ przyklejony nagłówek jest przysłonięty przez porównywarkę. W tym celu otwórz plik js/layout1.js a w nim wyszukaj linię ” if (window.pageYOffset > (topPosition)) {„. Linia ta znajduje się w funkcji, której poczatkiem jest linia „$(window).on(’scroll', function() {” a końcem linia „});”. Sama funkcja ma ok. 13 linii długości. Usuń ją, a w jej miejsce wklej poniższy kod:

        $(window).on('scroll', function() {
            if($('.frozenHeader').index()) {
                var headerHeight = parseInt($('.frozenHeader').css('height') + 5);
            }

            if (window.pageYOffset > (topPosition)) {
                topSection.style.position = 'sticky';
                topSection.style.zIndex = '12';

                if($('.frozenHeader').index()) { topSection.style.top = headerHeight + "px";
                } else { topSection.style.top = 75 + "px"; }

            } else {
                topSection.style.position = 'inherit';
                topSection.style.top = 'none';
                topSection.style.zIndex = 'inherit';
            }
        });

Gotowe ! W ten sposób problem nachodzenia porównywarki na przyklejony nagłówek zostaje wyeliminowany. To wszystkie kroki do wykonania przyklejonego nagłówka, gdy wybrałeś w Kreatorze wariant drugi nagłówka. Instrukcja dla wariantu pierwszego znajduje się na początku niniejszego artykułu. Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę "Więcej" (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.

Newsletter w popupie w szablonie Topaz

W niniejszym artykule dowiesz się, w jaki sposób dodać newsletter w popupie w swoim szablonie Topaz. Newsletter w popupie dla szablonu Topaz może funkcjonować nawet, gdy inny wariant newslettera został dodany w Kreatorze szablonu. Newsletter wyświetla się w formie wyskakującego popupu. Domyślnie wyświetla się co 30 dni, jednak w prosty sposób można zmodyfikować ten czas.

Wskazówka

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

1. Utworzenie nowego bannera Newsletter w popupie wykorzystuje nowy banner, skąd pobiera np. obrazek oraz kilka innych treści. Aby dodać nowy banner, należy w Panelu Administracyjnym otworzyć sekcję "Wygląd sklepu", następnie "Ustawienia". Po wyborze odpowiedniego szablonu z rozwijanej listy, przechodzimy do zakładki "Bannery". Następnie należy kliknąć przycisk z ikonką "+", która otworzy menu tworzenia bannera. Nadajemy mu nazwę NewsletterBanner. Nazwa jest ważna, podając złą, nasz newsletter nie będzie działał w sposób poprawny. Nazwa musi się zgadzać z tą podaną w kodzie szablonu (w późniejszym etapie). Należy dodać obrazek, który będzie wyświetlany w newsletterze. Co ważne, jego rozmiar powinien wynosić 275x475. Zdjęcia w innym rozmiarze mogą się skalować w nieodpowiedni sposób. Następnie uzupełniamy poszczególne pola. Możemy wstawić dowolne treści. Poniżej wypisane są domyślne treści dla poszczególnych pól: Tooltip: "Dołącz" - Teskt w tooltipie to tekst na przycisku dołączenia do newslettera; Nagłówek: "Zapisz się do newslettera" - nagłówek to pogrubiony tekst na samej górze popupu; Tekst: "Dołącz do newslettera i skorzystaj z XX% promocji na najnowszą kolekcję!" - ten tekst jest dodatkową informacją w popupie; Alt: "275x475" - alt to alternatywny tekst w przypadku problemów z otwarciem zdjęcia; W polu Link podajemy link do jakiego przekierowuje nas kliknięcie w obrazek w newsletterze. Przechodzimy do edycji kodu. Najpierw należy otworzyć plik home-page.html, gdzie dopiszemy (pomiędzy {% block pageContent -%} a {% endblock -%} linijkę o następującej treści:

{% include 'elements/newsletter/newsletter-3.html' -%}

Następnie należy utworzyć plik HTML z kodem nowego newslettera. W tym celu przechodzimy do katalogu elements/newsletter, gdzie tworzymy plik o nazwie newsletter-3.html. Jeśli w Twoich plikach szablonu nie ma katalogu o nazwie newsletter, stwórz go. W nowo utworzonym pliku wklejamy następujący kod:

{% if page.PageId == 1 and customer.NewsletterSubscriber == false -%}

    {% assign name = 'NewsletterBanner' -%} 
    {% assign newsletterBanner = config.Banners[name] -%}

    
        
        
        
            
                
                    
                    {% if newsletterBanner.Images[0].File == "placeholder.jpg" -%}
                        275x475
                    {% endif -%}
                
            

            
                {% if newsletterBanner.Images[0].Heading != '' -%} {{newsletterBanner.Images[0].Heading}} {% endif -%}
                
                
                {% if newsletterBanner.Images[0].Text != '' -%} {{newsletterBanner.Images[0].Text}} {% endif -%}
                
                
                {{translations.InvalidEmail}}          

                

                
                    {% assign configConsents = config.TOS.Consents.Newsletter -%}
                    
                        {% for tos in configConsents -%}
                            {% assign channelsSize = tos.Channels | Size -%}
                            
                                
                                    {% if tos.Statement %}
                                        {% if tos.Required -%}* {% endif -%}{{ tos.Text }}
                                    {% else %}
                                        
                                            
                                            
                                                
                                                    
                                                
                                                {% if tos.Required -%}* {% endif -%}{{ tos.Text }}
                                            
                                            {% if tos.Required -%}
                                                {{ translations.Com_FieldIsMandatory }}
                                            {% endif -%}
                                        
                                    {% endif -%}
                    
                                    {% if channelsSize > 0 -%}
                                                            
                                            {% for chn in tos.Channels -%}
                                                {% if tos.Statement == false -%}
                                                    
                                                        
                                                        
                                                            
                                                                
                                                            
                                                            {% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}
                                                        
                                                    
                                                {% else -%}
                                                     
                                                        
                                                        {% if tos.Required == true -%}* {% endif -%}{{tos.Text | Remove: '.' }} {{translations.Through}} {% if chn.Name == 'SMS' -%} {{chn.Name}}. {% else -%} {{chn.Name | Downcase }}. {% endif -%}
                                                    
                                                {% endif -%}
                                            {% endfor -%}
                                            
                                                {{ translations.ChannelWarning }}
                                            
                                        
                                    {% endif -%}
                                
                            
                        {% endfor -%}
                    
                
                {% assign requiredFields = false -%}
                {% for tos in configConsents -%}
                    {% if tos.Required == true  -%}
                        {% assign requiredFields = true -%}
                    {% endif -%}
                {% endfor -%}
                {% if requiredFields == true and configConsents | Size > 1 -%}
                
                    
                        * {{translations.Com_RequiredFields}}
                    
                
                {% endif -%}
            
        
    
{% endif -%}

Kolejnym krokiem jest dodanie odpowiednich styli w plikach css. W tym celu należy otworzyć plik css/layout1.css i na jego końcu wkleić następujący kod:

.newsletter3__wrapper{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background-color:black;background-color:rgba(0,0,0,0.75);margin:0;display:none;user-select:none}.newsletter3__wrapper .longTextNewsletter{max-height:70px;margin-top:30px !important;overflow-y:scroll;padding-right:5px}.newsletter3__wrapper .newsletter3{display:none;position:fixed;top:20%;left:0;right:0;margin:0 auto;width:800px;height:475px;background-color:{{settings.newsletterBgColor}};box-shadow:0 3px 8px #000000}.newsletter3__wrapper .newsletter3 .newsletter3__banner{width:275px;height:100%;display:block;background-color:#f2f2f2;position:relative}.newsletter3__wrapper .newsletter3 .newsletter3__banner img{max-width:275px;max-height:100%}.newsletter3__wrapper .newsletter3 .newsletter3__banner .placeholder{height:50%;margin-top:40%}.newsletter3__wrapper .newsletter3 .newsletter3__banner .imageSize{position:absolute;top:45%;text-align:center;display:block;color:{{settings.secondaryFontColor}};font-size:30px;margin-left:auto;margin-right:auto;left:0;right:0}.newsletter3__wrapper .newsletter3 .newsletter3__info{flex:auto;padding:30px 30px 50px 50px;text-align:left}.newsletter3__wrapper .newsletter3 .newsletter3__info__title{font-size:16px;font-weight:600;color:{{settings.newsletterFontColor}};width:95%}.newsletter3__wrapper .newsletter3 .newsletter3__info__details{font-size:15px;margin-top:50px;color:{{settings.newsletterFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info__enterEmail{width:100%;font-size:13px;font-weight:600;padding-top:20px;padding-bottom:7px;color:{{settings.newsletterFontColor}};border-bottom:1px solid {{settings.inputNewsletterBorderColor}};background-color:{{settings.newsletterBgColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info__confirmButton{text-transform:uppercase;transition:200ms;text-align:center;width:100%;padding:10px 0;color:{{settings.primaryBtnFontColor}};background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};margin-top:30px;margin-bottom:30px}.newsletter3__wrapper .newsletter3 .newsletter3__info__confirmButton:hover{cursor:pointer;color:{{settings.primaryBtnHoverFontColor}};background-color:{{settings.primaryBtnHoverBgColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .confirmButtonLongText{margin-top:10px !important;margin-bottom:20px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .closeNewsletterPopup{position:absolute;top:30px;right:30px;width:18px;height:18px;fill:{{settings.newsletterFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .closeNewsletterPopup:hover{fill:{{settings.linkFontColor}};cursor:pointer}.newsletter3__wrapper .newsletter3 .newsletter3__info .consentsContent{font-size:10px;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelsList{padding:0 !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel{padding-bottom:0 !important;padding-top:0 !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel:before{top:6px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .channelLabel svg{margin-bottom:14px !important;margin-top:-7px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .form__validation-info{font-size:10px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .invalidInput{font-size:10px !important;margin:0 0 0 8px;padding:0}.newsletter3__wrapper .newsletter3 .newsletter3__info .consentsList__li{margin-left:-4px;margin-bottom:5px;margin-right:10px}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel{left:-4px;padding-bottom:0 !important;padding-top:0 !important;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel:before{top:6px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .tosLabel svg{margin-bottom:14px !important;margin-top:-7px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .checkBoxes__container input+label:not(.tosLabel):before{top:13px}.newsletter3__wrapper .newsletter3 .newsletter3__info .checkBoxes__container input+label:not(.tosLabel) .checkBoxes__checkIcon svg{margin-bottom:5px}.newsletter3__wrapper .newsletter3 .cp_link{color:{{settings.linkFontColor}} !important}.newsletter3__wrapper .newsletter3 .consentsList li{font-size:10px !important}.newsletter3__wrapper .newsletter3 .longConsents{max-height:120px !important;overflow-y:scroll;overflow-x:hidden;padding-right:5px}.newsletter3__wrapper .newsletter3 .longConsentsSecond{max-height:170px !important;overflow-y:scroll;overflow-x:hidden;padding-right:5px}.newsletter3__wrapper .newsletter3 .consentStatement{padding-left:30px;color:{{settings.secondaryFontColor}}}.newsletter3__wrapper .newsletter3 .statementContentChannel{margin-left:34px;display:block;margin-bottom:10px}

W tym samym katalogu, w pliku layout-d0.css wklejamy poniższy kod:

@media screen and (max-width: 1200px){.newsletter3__wrapper .newsletter3{left:0 !important;right:0;margin:0 auto}}

a w pliku layout-m0.css poniższy kod:

@media screen and (max-width: 768px){.newsletter3__wrapper .newsletter3{left:0;right:0;top:10%;margin:0 auto;width:100%}.newsletter3__wrapper .newsletter3 .newsletter3__banner{display:none}.newsletter3__wrapper .newsletter3 .newsletter3__info{padding:50px !important}}@media screen and (max-width: 420px){.newsletter3__wrapper .newsletter3{top:10px !important;height:550px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info{padding:30px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .newsletter3__info__details{padding-top:25px !important}.newsletter3__wrapper .newsletter3 .newsletter3__info .newsletter3__info__enterEmail{padding-top:20px !important}}@media screen and (max-width: 520px){.longHeadingNewsletter{overflow-y:scroll;max-height:50px}}

Kolejny krok to dodanie kodu w plikach js. W tym celu otwieramy plik js/layout1.js i na jego końcu doklejamy poniższy kod:

var newsletter3Functions = {
    init: function () {
        newsletter3Functions.events();
    },
    events: function () {
        var newsletterWrapper = $('.newsletter3__wrapper');
        var newsletterPopup = $('.newsletter3');

        $(window).on('load', function() {
            var currentDate = new Date(Date.now());
            var newsletterDaysDifference = 30;
            var daysDiff;
            var isSetDate = false;

            $.each(document.cookie.split(/; */), function()  {
                var cookies = this.split('=');
                if(cookies[0] == 'NewsletterShowDate') {
                    isSetDate = true;
                    var newsletterDate = new Date(cookies[1]);
                    daysDiff = (currentDate.getTime() - newsletterDate.getTime())  / (1000 * 3600 * 24); 
                }
            });

            if(isSetDate == false || daysDiff >= newsletterDaysDifference) {
                document.cookie = "NewsletterShowDate=" + currentDate; 
                newsletterWrapper.fadeIn(2000);
                newsletterPopup.show(200);
                newsletterPopup.css('display', 'flex');
            }      

            newsletter3Functions.setNewsletterLength();
        }),

        newsletterWrapper.on('click', '.closeNewsletterPopup', function() {
            newsletterWrapper.fadeOut(1000);
        }),

        newsletterPopup.on('click', '.newsletter3__info__consent > *', function(e) {
            newsletter3Functions.setNewsletterLength();
        })
    
    },

    showTemporaryPopupWithNewsletter: function(temporaryPopup) {
        if ($('.newsletter3__wrapper').css('display') != 'none') {
            temporaryPopup.css('z-index', '1000');
        }
    },

    hideNewsletterPopup: function() {
       $('.newsletter3__wrapper').fadeOut(3000);
    },

    setNewsletterLength: function() {
        var newsletterText = $('.newsletterTextInput').attr('value');
        var newsletterHeading = $('.newsletterHeadingInput').attr('value');
        var newsletterConsents = parseInt($('.newsletter3__info__consent').css('height'));

        if(newsletterText.length > 80) {
            $('.newsletter3__info__details').addClass('longTextNewsletter');
            $('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');
        }
        if(newsletterHeading.length > 50) {
            $('.newsletter3__info__title').addClass('longHeadingNewsletter');
            $('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');
        }
        if(newsletterHeading.length > 50 && newsletterText.length > 80 && newsletterConsents > 120) {
            $('.newsletter3__info__consent').addClass('longConsents');
            $('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');
        } else if (newsletterConsents > 170) {
            $('.newsletter3__info__consent').addClass('longConsentsSecond');
            $('.newsletter3__info__confirmButton').addClass('confirmButtonLongText');
        }
    }
};

Wskazówka

Jeśli chcesz, by newsletter w popupie wyskakiwał Klientom Twojego sklepu częściej, niż co 30 dni, to w powyższym kodzie zmień wartość przy zmiennej newsletterDaysDifference (linia var newsletterDaysDifference = 30;). Ona odpowiada za częstotliwość pokazywania się popupu z newsletterem. Wartości podawane są w ilości dni. Domyślnie jest to 30.

Natomiast w pliku js/layout0.js wyszukujemy linię o treści "document.addEventListener("DOMContentLoaded", function () {" (początek pliku). Kilkanaście linijek poniżej, znajduje się linia o treści "setTimeout(ui.formLabelAnimationOnLoadPage, 0);". Tuż nad nią należy wkleić poniższy kod:

if($('body').find('.newsletter3__wrapper').index() >= 0) {
    newsletter3Functions.init();
}

Kolejny krok to utworzenie tłumaczeń. W tym celu, w Panelu Administracyjnym wchodzimy na zakładkę Wygląd Sklepu -> Ustawienia -> Tłumaczenia. Należy dodać następujące tłumaczenia: Id - Tekst

Newsletter3AddEmail - tu można wpisać dowolny tekst, jaki pojawi się w polu do wpisania adresu e-mail. Np. "Podaj adres e-mail"
Through - poprzez

Pozostałe tłumaczenia występujące w nowym newsletterze, są już dodane do szablonu. Pozostaje dodać drobne modyfikacje w innych plikach. W pliku js/layout0.js wyszukujemy linię "if (result.action.Action === 'Customer/Login') {". Nad linią powyżej (o treści "// dataLayer Push" dodajemy poniższy kod:

if (result.action.Action === 'Newsletter/Subscribe' && newsletter3Functions) {
    if($('.newsletter3__wrapper').css('display') != 'none') {
        newsletter3Functions.hideNewsletterPopup();
    }
}

Linia ta sprawia, że po zatwierdzeniu subskrypcji newslettera, popup znika. W tym samym pliku wyszukujemy linię "return validation;". Linię powyżej (zaczynającą się od "if (validation == 'error'" należy zmodyfikować tak, by wyglądała następująco:

if (validation == 'error' && $('.popupDialog-js:visible').length === 0 && (!$('.newsletter3').length)) {

Również w tym samym pliku wyszukujemy linię "temporaryPopup.fadeIn(300);". Tuż nad nią dodajemy poniższy kod:

if($('.newsletter3').length) {
    newsletter3Functions.showTemporaryPopupWithNewsletter(temporaryPopup);
}

Gotowe! Twój szablon posiada od teraz newsletter w popupie. Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę "Więcej" (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.

Dodanie informacji o powiązanych zamówieniach na szczegółach zamówienia w profilu klienta

Dodanie

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać w nim informacje o powiązanych zamówieniach na szczegółach zamówienia w profilu klienta.

Wskazówka

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

Szafir

W pliku customer-profile/orders/order-details.html wyszukaj frazę {% if config.Orders.AttachmentsEnabled -%}/strong>. Pod tym warunkiem dodaj kolejny warunek: {% if order.RelatedOrders -%} {{ translations.RelatedOrders }} {{ translations.Number | Capitalize }} {{ translations.DocumentDate }} {{ translations.Status }} {% for relatedOrder in order.RelatedOrders -%} {{relatedOrder.Id}} {% if relatedOrder.Parent -%}({{ translations.Main | Downcase }}){% endif -%} {{relatedOrder.Date | Date:dateFormat}} {{relatedOrder.StatusText}} {% endfor -%} {% endif -%} Teraz w pliku scss/globals/_globals2.scss dodaj kod: .eshop-order-ui{ .related-document-labels-ui .column-ui + .column-ui{ margin-left: 0; } .related-document-labels-ui, .related-document-ui { .document-number-column-ui{ width: 70px; } .document-date-column-ui{ width: 140px; } .document-netto-column-ui{ width: calc(100% - 249px); } } }

Obsługa dodatkowych danych teleadresowych

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwać w nim dodatkowe dane teleadresowe.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir
W pliku common/address-form.html wyszukaj frazę {% if addressVisible -%}. Wszystko nad linijką z tą frazą zamień na ten kod: {% assign emailReadonly = false -%} {% assign emailRequired = false -%} {% assign TINTooltipVisible = false -%} {% if include contains 'retail' or include == 'company' -%} {% if include == 'company' -%} {% assign chosenType = config.Registration.Company -%} {% assign company = true -%} {% assign TINVisible = true -%} {% assign tin = customer.TIN -%} {% assign vateu = customer.VATEU -%} {% assign countryISOCode = config.Countries[0].ISOCode -%} {% else -%} {% assign chosenType = config.Registration.Retail -%} {% if include contains '=' -%} {% assign includeArr = include | Split:'=' -%} {% assign countryISOCode = includeArr[1] -%} {% else -%} {% assign countryISOCode = config.Countries[0].ISOCode -%} {% endif -%} {% assign countryChangeReload = true -%} {% assign dataContainer = '.sign-up-address-lq' -%} {% assign dataInclude = 'retail=' -%} {% endif -%} {% assign addressVisible = chosenType.AddressVisible -%} {% assign addressRequired = chosenType.AddressRequired -%} {% assign phoneVisible = chosenType.PhoneVisible -%} {% assign phoneRequired = chosenType.PhoneRequired -%} {% assign address = customer.Address -%} {% elseif include contains 'add-da' -%} {% if customer.Company -%} {% assign company = true -%} {% assign TINVisible = false -%} {% endif -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = true -%} {% assign includeArr = include | Split:'=' -%} {% assign countryISOCode = includeArr[1] -%} {% assign countryChangeReload = true -%} {% assign dataContainer = '.add-da-lq' -%} {% assign dataInclude = 'add-da=' -%} {% elseif include == 'orderDa' -%} {% if order.Customer.Company -%} {% assign company = true -%} {% assign TINVisible = false -%} {% endif -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%} {% if usr.Authenticated -%} {% assign emailReadonly = true -%} {% endif -%} {% if order != '' -%} {% assign emailRequired = true -%} {% assign email = order.Customer.Email -%} {% assign address = order.Customer.DeliveryAddress -%} {% elseif customer.DeliveryAddress.Name != '' -%} {% assign address = customer.DeliveryAddress -%} {% else -%} {% assign address = customer.Address -%} {% endif -%} {% assign countryISOCode = order.Customer.DeliveryAddress.Country -%} {% if order.SelectedDelivery.CollectionPointTypeId == 2 -%} {% assign showMapTrigger = true -%} {% endif -%} {% elseif include == 'buyerAddress' -%} {% if order.Customer.Company -%} {% assign company = true -%} {% assign TINVisible = false -%} {% endif -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%} {% if usr.Authenticated -%} {% assign emailReadonly = true -%} {% endif -%} {% if order != '' -%} {% assign emailRequired = true -%} {% assign email = order.Customer.Email -%} {% assign address = order.Customer.Buyer -%} {% elseif customer.DeliveryAddress.Name != '' -%} {% assign address = customer.DeliveryAddress -%} {% else -%} {% assign address = customer.Address -%} {% endif -%} {% assign countryISOCode = order.Customer.DeliveryAddress.Country -%} {% if order.SelectedDelivery.CollectionPointTypeId == 2 -%} {% assign showMapTrigger = true -%} {% endif -%} {% elseif include contains 'inv-add' or page.QueryString contains 'invoice-address' -%} {% if page.QueryString contains 'invoice-address'-%} {% if page.QueryString contains 'company' -%} {% assign companyCheck = true -%} {% endif -%} {% else -%} {% if order.Customer.Company -%} {% assign companyCheck = true -%} {% endif -%} {% endif -%} {% if companyCheck -%} {% assign company = true -%} {% endif -%} {% assign TINVisible = true -%} {% if order.Customer.TIN != '' -%} {% assign tin = order.Customer.TIN -%} {% assign vateu = order.Customer.VATEU -%} {% else -%} {% assign tin = customer.TIN -%} {% assign vateu = customer.VATEU -%} {% endif -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = false -%} {% assign phoneRequired = false -%} {% if order == null -%} {% assign address = customer.Address -%} {% else -%} {% assign address = order.Customer.InvoiceAddress -%} {% endif -%} {% if include contains 'inv-add=' -%} {% assign includeArr = include | Split:'=' -%} {% assign countryISOCode = includeArr[1] -%} {% assign countryChangeReload = true -%} {% assign dataContainer = '.ia-lq' -%} {% assign dataInclude = 'inv-add=' -%} {% else -%} {% if address.Country != '' -%} {% assign countryISOCode = address.Country -%} {% else -%} {% assign countryISOCode = config.DefaultCountry -%} {% endif -%} {% endif -%} {% assign autoPost = true -%} {% if usr.Authenticated -%} {% assign emailReadonly = true -%} {% endif -%} {% elseif include == 'order-da-popup-ret' -%} {% assign TINVisible = false -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%} {% assign emailRequired = true -%} {% assign email = order.Customer.Email -%} {% if order != '' -%} {% assign address = order.Customer.DeliveryAddress -%} {% elseif customer.DeliveryAddress.Name != '' -%} {% assign address = customer.DeliveryAddress -%} {% else -%} {% assign address = customer.Address -%} {% endif -%} {% assign countryISOCode = order.Customer.DeliveryAddress.Country -%} {% if order.SelectedDelivery.CollectionPointTypeId == 2 -%} {% assign showMapTrigger = true -%} {% endif -%} {% assign dontShowCountry = true -%} {% elseif include == 'order-da-popup-comp' -%} {% assign company = true -%} {% assign TINVisible = false -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%} {% assign emailRequired = true -%} {% assign email = order.Customer.Email -%} {% if order != '' -%} {% assign address = order.Customer.DeliveryAddress -%} {% elseif customer.DeliveryAddress.Name != '' -%} {% assign address = customer.DeliveryAddress -%} {% else -%} {% assign address = customer.Address -%} {% endif -%} {% assign countryISOCode = order.Customer.DeliveryAddress.Country -%} {% if order.SelectedDelivery.CollectionPointTypeId == 2 -%} {% assign showMapTrigger = true -%} {% endif -%} {% assign dontShowCountry = true -%} {% elseif include == 'order-buyer-popup-ret' -%} {% assign TINVisible = false -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%} {% assign emailRequired = false -%} {% assign email = order.Customer.Email -%} {% if order != '' -%} {% assign address = order.Customer.Buyer -%} {% elseif customer.DeliveryAddress.Name != '' -%} {% assign address = customer.DeliveryAddress -%} {% else -%} {% assign address = customer.Address -%} {% endif -%} {% assign countryISOCode = order.Customer.DeliveryAddress.Country -%} {% if order.SelectedDelivery.CollectionPointTypeId == 2 -%} {% assign showMapTrigger = true -%} {% endif -%} {% assign dontShowCountry = true -%} {% elseif include == 'order-buyer-popup-comp' -%} {% assign company = true -%} {% assign TINVisible = false -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = order.SelectedDelivery.PhoneRequired -%} {% assign emailRequired = false -%} {% assign email = order.Customer.Email -%} {% if order != '' -%} {% assign address = order.Customer.Buyer -%} {% elseif customer.DeliveryAddress.Name != '' -%} {% assign address = customer.DeliveryAddress -%} {% else -%} {% assign address = customer.Address -%} {% endif -%} {% assign countryISOCode = order.Customer.DeliveryAddress.Country -%} {% if order.SelectedDelivery.CollectionPointTypeId == 2 -%} {% assign showMapTrigger = true -%} {% endif -%} {% assign dontShowCountry = true -%} {% elseif include == 'order-invoice-popup-ret' or include contains 'inv-country-ret=' -%} {% assign company = false -%} {% assign TINVisible = true -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = false -%} {% assign phoneRequired = false -%} {% if order == null -%} {% assign address = customer.Address -%} {% else -%} {% assign address = order.Customer.InvoiceAddress -%} {% endif -%} {% assign countryChangeReload = true -%} {% assign dataContainer = '.invoice-address-form-in-popup-lq.retail-lq' -%} {% assign dataInclude = 'inv-country-ret=' -%} {% if include contains 'inv-country-ret=' -%} {% assign includeArr = include | Split:'=' -%} {% assign countryISOCode = includeArr[1] -%} {% else -%} {% if address.Country != '' -%} {% assign countryISOCode = address.Country -%} {% else -%} {% assign countryISOCode = config.DefaultCountry -%} {% endif -%} {% endif -%} {% assign autoPost = true -%} {% assign recipe = true -%} {% assign showRecipe = true -%} {% elseif include == 'order-invoice-popup-comp' or include contains 'inv-country-comp=' -%} {% assign company = true -%} {% assign TINVisible = true -%} {% if order.Customer.TIN != '' -%} {% assign tin = order.Customer.TIN -%} {% assign vateu = order.Customer.VATEU -%} {% else -%} {% assign tin = customer.TIN -%} {% assign vateu = customer.VATEU -%} {% endif -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = false -%} {% assign phoneRequired = false -%} {% if order == null -%} {% assign address = customer.Address -%} {% else -%} {% assign address = order.Customer.InvoiceAddress -%} {% endif -%} {% assign countryChangeReload = true -%} {% assign dataContainer = '.invoice-address-form-in-popup-lq.company-lq' -%} {% assign dataInclude = 'inv-country-comp=' -%} {% if include contains 'inv-country-comp=' -%} {% assign includeArr = include | Split:'=' -%} {% assign countryISOCode = includeArr[1] -%} {% else -%} {% if address.Country != '' -%} {% assign countryISOCode = address.Country -%} {% else -%} {% assign countryISOCode = config.DefaultCountry -%} {% endif -%} {% endif -%} {% assign autoPost = true -%} {% if countryISOCode == 'PL' and settings.downloadDataFromGUS == 'yes' and settings.editDataFromGUS == 'no' -%} {% assign readonly = true -%} {% endif -%} {% if countryISOCode == 'PL' and settings.downloadDataFromGUS == 'yes' -%} {% assign gus = true -%} {% endif -%} {% assign recipe = true -%} {% assign showRecipe = false -%} {% elseif include contains 'customer-data' -%} {% if customer.Company -%} {% assign company = true -%} {% assign TINVisible = true -%} {% assign tin = customer.TIN -%} {% assign vateu = customer.VATEU -%} {% endif -%} {% assign emailRequired = true -%} {% assign email = customer.Address.Email -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = true -%} {% assign address = customer.Address -%} {% assign includeArr = include | Split:'=' -%} {% assign countryISOCode = includeArr[1] -%} {% assign countryChangeReload = true -%} {% assign dataContainer = '.customer-data-address-lq' -%} {% assign dataInclude = 'customer-data=' -%} {% if countryISOCode == 'PL' and settings.downloadDataFromGUS == 'yes' and settings.editDataFromGUS == 'no' and customer.Company -%} {% assign readonly = true -%} {% endif -%} {% if countryISOCode == 'PL' and settings.downloadDataFromGUS == 'yes' -%} {% assign gus = true -%} {% endif -%} {% elseif include contains '|' -%} {% comment -%}{% endcomment -%} {% if customer.Company -%} {% assign company = true -%} {% assign TINVisible = false -%} {% endif -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = true -%} {% assign incSplit = include | Split:'|' -%} {% assign daId = incSplit[0] | ToInt -%} {% assign address = customer.DeliveryAddresses[daId] -%} {% assign incSplitSize = incSplit | Size -%} {% if incSplitSize > 1 -%} {% assign countryISOCode = incSplit[1] -%} {% endif -%} {% assign countryChangeReload = true -%} {% assign dataContainer = '.da-lq' -%} {% capture dataInclude -%}{{address.Id}}|{% endcapture -%} {% else -%} {% if customer.Company -%} {% assign company = true -%} {% assign TINVisible = true -%} {% assign tin = customer.TIN -%} {% assign vateu = customer.VATEU -%} {% endif -%} {% assign emailRequired = true -%} {% assign email = customer.Address.Email -%} {% assign addressVisible = true -%} {% assign addressRequired = true -%} {% assign phoneVisible = true -%} {% assign phoneRequired = true -%} {% assign address = customer.Address -%} {% assign countryISOCode = config.Countries[0].ISOCode -%} {% endif -%} {% assign cityRequired = config.Countries[countryISOCode].RequiredFields.City -%} {% assign streetRequired = config.Countries[countryISOCode].RequiredFields.Street -%} {% assign streetNoRequired = config.Countries[countryISOCode].RequiredFields.StreetNo -%} {% assign zipCodeRequired = config.Countries[countryISOCode].RequiredFields.ZipCode -%} {% assign TINRequired = config.Countries[countryISOCode].RequiredFields.TIN -%} {% if include contains 'inv-add' or page.QueryString contains 'invoice-address' -%} {% if customer.Company -%} {% assign TINRequired = true -%} {% else -%} {% assign TINRequired = false -%} {% endif -%} {% endif -%} {% if include == 'order-invoice-popup-ret' or include contains 'inv-country-ret=' -%} {% assign TINRequired = false -%} {% elseif include == 'order-invoice-popup-comp' or include contains 'inv-country-comp=' -%} {% assign TINRequired = true -%} {% endif -%} Następnie w pliku order/delivery-partials/address-form.html podmień całą jego zawartość na ten kod: {% assign type = include -%} {% assign typeForJS = 0 -%} {% assign areCountries = false -%} {% assign addressesAmount = customer.DeliveryAddresses | Size -%} {% comment -%} {% if addressesAmount == 1 -%} {% if customer.DeliveryAddresses[0].Country == order.Customer.DeliveryAddress.Country -%} {% assign areCountries = true -%} {% endif -%} {% endif -%} {% endcomment -%} {% if addressesAmount > 1 %} {% assign countryCode = config.DefaultCountry -%} {% if order.Customer.DeliveryAddress.Country != '' -%} {% assign countryCode = order.Customer.DeliveryAddress.Country -%} {% endif -%} {% for address in customer.DeliveryAddresses -%} {% if address.Country == countryCode -%} {% assign areCountries = true -%} {% break -%} {% endif -%} {% endfor -%} {% endif -%} {% if type == 'orderDa' -%} {% elseif type == 'inv-add' -%} {% assign typeForJS = 1 -%} {% else -%} {% assign typeForJS = 2 -%} {% endif -%} {% assign addressesAmount = customer.DeliveryAddresses | Size -%} {% if areCountries and order.SelectedDelivery.CollectionPointTypeId == 0 -%} {% if type == 'orderDa' or type == 'buyerAddress' -%} {% endif -%} {% endif -%} {% if type == 'inv-add' -%} {% assign address = order.Customer.InvoiceAddress -%} {% if address.Country != '' -%} {% assign countryISOCode = address.Country -%} {% else -%} {% assign countryISOCode = config.DefaultCountry -%} {% endif -%} {% capture inc -%}inv-add={{countryISOCode}}{% endcapture -%} {% include 'common/address-form.html' with inc -%} {% else -%} {% include 'common/address-form.html' with type -%} {% endif -%} Teraz w pliku order/delivery-partials/address-list-item.html znajdź frazę {{address.State}}. Linijkę z tą frazą zastąp poniższym kodem: {{address.State}} {{address.Country}} Następnie w pliku w pliku order/delivery-partials/address-presentation.html całą zawartość pliku zastąp tym kodem: {% assign type = include -%} {% if type == 'orderDa' -%} {% if deliveryAddress -%} {% assign address = deliveryAddress -%} {% else -%} {% assign address = order.Customer.DeliveryAddress -%} {% endif -%} {% elseif type == 'inv-add' -%} {% if invoiceAddress -%} {% assign address = invoiceAddress -%} {% else -%} {% assign address = order.Customer.InvoiceAddress -%} {% endif -%} {% elseif type == 'buyerAddress' -%} {% if buyerAddress -%} {% assign address = buyerAddress -%} {% else -%} {% assign address = order.Customer.Buyer -%} {% endif -%} {% endif -%} {% assign areCountries = false -%} {% assign addressesAmount = customer.DeliveryAddresses | Size -%} {% comment -%} {% if addressesAmount == 1 -%} {% if customer.DeliveryAddresses[0].Country != order.Customer.DeliveryAddress.Country -%} {% assign areCountries = true -%} {% endif -%} {% endif -%} {% endcomment -%} {% if addressesAmount > 1 %} {% assign countryCode = config.DefaultCountry -%} {% if order.Customer.DeliveryAddress.Country != '' -%} {% assign countryCode = order.Customer.DeliveryAddress.Country -%} {% endif -%} {% for address in customer.DeliveryAddresses -%} {% if address.Country == countryCode -%} {% assign areCountries = true -%} {% break -%} {% endif -%} {% endfor -%} {% endif -%} {% if settings.blockAddingAndEditingDeliveryAddress == 'no' -%} {% assign canEditOrAddDeliveryAddress = true -%} {% elseif settings.blockAddingAndEditingDeliveryAddressFor == 'withLimits' and customer.CreditLimit == null -%} {% assign canEditOrAddDeliveryAddress = true -%} {% else -%} {% assign canEditOrAddDeliveryAddress = false -%} {% endif -%} {% if settings.blockCompanyDataEdition == 'no' -%} {% assign canEditCustomerDetails = true -%} {% elseif settings.blockCompanyDataEditionFor == 'withLimits' and customer.CreditLimit == null -%} {% assign canEditCustomerDetails = true -%} {% else -%} {% assign canEditCustomerDetails = false -%} {% endif -%} {% assign canEditDA = false -%} {% assign canEditCD = false -%} {% assign canEditAnything = false -%} {% assign cantEditSomething = false -%} {% if canEditOrAddDeliveryAddress and type == 'orderDa' -%} {% assign canEditDA = true -%} {% endif -%} {% if canEditCustomerDetails and type == 'inv-add' -%} {% assign canEditCD = true -%} {% endif -%} {% if canEditDA or canEditCD -%} {% assign canEditAnything = true -%} {% endif -%} {% if canEditDA == false or canEditCD == false -%} {% assign cantEditSomething = true -%} {% endif -%} {% if type == 'orderDa' or type == 'buyerAddress' -%} {% if areCountries and order.SelectedDelivery.CollectionPointTypeId == 0 and usr.Authenticated -%} {% endif -%} {% endif -%} {% unless type == 'inv-add' and order.Customer.CustomerDetailsEditable == false -%} {% endunless -%} {% assign noBorder = false -%} {% if settings.buyerData == "yes" %} {% if type == 'orderDa' or type == 'buyerAddress' %} {% assign noBorder = true -%} {% endif -%} {% endif -%} {{address.Name}} {% if address.Name2 != '' %} {{address.Name2}} {% endif -%} {{address.Street}} {{address.StreetNo}}{% if address.UnitNo != ''-%}/{{address.UnitNo}}{% endif -%} {{address.ZipCode}} {{address.City}} {{address.State}} {{address.Country}} {% if type == 'inv-add' and order.Customer.TIN != '' -%} {{translations.TIN}} {% if config.ENTERPRISE and order.Customer.VATEU != '' -%} {{order.Customer.VATEU}} {% endif -%} {{order.Customer.TIN}} {% endif %} {% if type == 'orderDa' or type == 'buyerAddress' -%} {{order.Customer.Email}} {% if address.PhoneNo != '' -%} {{address.PhoneNo}} {% endif -%} {% endif %} Teraz w pliku order/delivery-partials/delivery-section.html znajdź frazę {% assign index = 0 -%}. Wszystko nad linijką z tą frazą zastąp poniższym kodem: {% assign deliveryAddress = order.Customer.DeliveryAddress -%} {% assign invoiceAddress = order.Customer.InvoiceAddress -%} {% assign buyerAddress = order.Customer.Buyer -%} {% if customer-profile != null -%} {% assign deliveryAddress = customer-profile.Order.DeliveryAddress -%} {% assign invoiceAddress = customer-profile.Order.InvoiceAddress -%} {% assign buyerAddress = customer-profile.Order.Customer.Buyer -%} {% endif -%} Dalej w pliku order/delivery-partials/delivery-section.html znajdź frazę delivery-address-lq. W podmień kod w tym divie na te poniżej: {% if settings.buyerData == "yes" %} {% if order.Customer.Buyer == null -%} {% endif -%} {% if order.SelectedDelivery.CollectionPointTypeId == 0 -%} {{translations.ShippingAddress}} {% else -%} {{translations.MyData}} {% endif -%} {{translations.BuyerData}} {% else %} {% if order.SelectedDelivery.CollectionPointTypeId == 0 -%} {{translations.ShippingAddress}} {% else -%} {{translations.MyData}} {% endif -%} {% endif %} {% assign lackOfPhone = false -%} {% assign countryMismatch = false -%} {% if order.SelectedDelivery.PhoneRequired and deliveryAddress.PhoneNo == '' -%} {% assign lackOfPhone = true -%} {% endif -%} {% if page.Cookies.delivCountryChanged == 'true' -%} {% assign countryMismatch = true -%} {% endif -%} {% if deliveryAddress.Name == '' or lackOfPhone or countryMismatch -%} {% assign showForm = true -%} {% endif -%} {% if showForm -%} {% if order.Customer.Company and canEditOrAddDeliveryAddress == false -%} {% include 'order/delivery-partials/address-presentation.html' with 'orderDa' -%} {% else -%} {% include 'order/delivery-partials/address-form.html' with 'orderDa' -%} {% endif -%} {% else -%} {% include 'order/delivery-partials/address-presentation.html' with 'orderDa' -%} {% endif -%} {% if buyerAddress.Name == '' -%} {% assign showForm = true -%} {% endif -%} {% if showForm -%} {% include 'order/delivery-partials/address-form.html' with 'buyerAddress' -%} {% else -%} {% include 'order/delivery-partials/address-presentation.html' with 'buyerAddress' -%} {% endif -%} Następnie w pliku order/cart.html znajdź frazę forms-container-ui forms-container-lq. Zamień wszystko w tym divie na ten kod: {% if settings.buyerData == "yes" %} {% if order.Customer.Buyer == null -%} {% endif -%} {{ translations.DeliveryData }} {{ translations.BuyerData }} {% else %} {{ translations.DeliveryData }} {% endif %} {% if config.CompanyOnly == false -%} {% include 'common/address-form.html' with 'order-da-popup-ret' -%} {% include 'common/address-form.html' with 'order-buyer-popup-ret' -%} {% endif -%} {% include 'common/address-form.html' with 'order-da-popup-comp' -%} {% include 'common/address-form.html' with 'order-buyer-popup-comp' -%} {{ translations.InvoiceData }} {{ translations.RecipeData }} {{ translations.WantToGetRecipe }} {{ translations.WantToGetInvoice }} {% if config.CompanyOnly == false -%} {% include 'common/address-form.html' with 'order-invoice-popup-ret' -%} {% endif -%} {% include 'common/address-form.html' with 'order-invoice-popup-comp' -%} Teraz w pliku __settings.liquid dodaj analogicznie do pozostałych kolejną sekcję field: {{buyerData}} {{buyerDataInfo}} {{yesTranslation}} {{noTranslation}} Teraz w pliku js/init-ui1.js znajdź frazę function Order(configObj) {. Linijkę niżej dodaj poniższy kod: this.buyerAddressReplaceableSelector = configObj.buyerAddressReplaceableSelector; this.buyerAddressTemplateInclude = configObj.buyerAddressTemplateInclude; this.buyerAddresFilled = ($(configObj.buyerAddressReplaceableSelector + ' [name="name"]').length == 0) ? true : false; Dalej w pliku js/init-ui1.js znajdź frazę this.confirmAddress. Całą zawartość znalezionej funkcji podmień poniższym kodem: if (addressType == 0) { var container = $(this.deliveryAddressReplaceableSelector); } else if (addressType == 1){ var container = $(this.invoiceAddressReplaceableSelector); } else { var container = $(this.buyerAddressReplaceableSelector); } var isValid = window.app.validationBeforePost(e) == '' ? true : false; if (isValid) { var form = container.find('.form-lq'); var data = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); if (!errorClass) { var errorClass = ''; } if (addressType === 0) { data.push({ name: '__include', value: "'"+this.deliveryAddressTemplateInclude+"'" }); } else if (addressType === 1) { data.push({ name: '__include', value: "'"+this.invoiceAddressTemplateInclude+"'" }); } else { data.push({ name: '__include', value: "'"+this.buyerAddressTemplateInclude+"'" }); } if (templateUrl) { data.push({ name: '__template', value: templateUrl }); } data.push({ name: '__csrf', value: __CSRF }); var thisRef = this; var confirmPromise; var confirmResponseFunc = function (res) { if (res.action.Result) { app.setCookie('delivCountryChanged', 'true', -1); if (res.template) { container.html(res.template); } if (addressType == 0) { // thisRef.deliveryAddressId = -1; // window.app.setCookie('deliveryAddressId', -1); thisRef.deliveryAddresFilled = true; } else if (addressType == 1) { thisRef.invoiceAddresFilled = true; } else { thisRef.buyerAddresFilled = true; } if (!thisRef.deliveryAddresFilled || (thisRef.isInvoice && !thisRef.invoiceAddresFilled)) { thisRef.orderValidator.removeClass(thisRef.hiddingClass); } else { thisRef.orderValidator.addClass(thisRef.hiddingClass); } } else { form.find('input:not([type="hidden"]), select, textarea').each(function() { window.app.validation(null, $(this)) }); } }; if (addressType == 0 || addressType == 2) { confirmPromise = $.post('', data, function (res) { confirmResponseFunc(res) }); } else { confirmPromise = thisRef.selectInvoice(form) .then($.post('', data, function (res) { confirmResponseFunc(res) })); } if (callback) { confirmPromise.then(function () { callback(isValid) }); } return confirmPromise; } else { if (callback) { callback(isValid); } return null; } Następnie nadal w pliku js/init-ui1.js znajdź frazę Order/DeliveryAddressUpdate. Linijkę z tą frazą zamień na poniższy kod: if($('.order-address-data-tab-lq + .order-address-data-tab-lq').hasClass('active-lq')){ data['__action'] = 'Order/BuyerUpdate'; } else { data['__action'] = 'Order/DeliveryAddressUpdate'; } Dalej w pliku js/init-ui1.js znajdź frazę //ORDER's binding. Wszystko pod tym komentarzem aż do komentarza //confirm address zamień na poniższy kod: window.order = new Order( { deliveryAddressReplaceableSelector: '.delivery-address-lq .address-template-container-lq.delivery-lq', deliveryAddressTemplateInclude: 'orderDa', invoiceAddressReplaceableSelector: '.invoice-address-lq .address-template-container-lq', invoiceAddressTemplateInclude: 'inv-add', buyerAddressReplaceableSelector: '.delivery-address-lq .address-template-container-lq.buyer-lq', buyerAddressTemplateInclude: 'buyerAddress', collectionPointType: $('[data-type]').data('type'), collectionPointFormSelector: '#ifMapContainer', noteReplaceableSelector: '.note-lq', headerAttributesSetFormSelector: '.header-attributes-set-form-lq', positionAttributesSetSelector: '.products-table-lq', addingOrderFormSelector: '.adding-order-form-lq', needRecalculateClass: 'need-recalculate-lq', orderValidatorSelector: '.order-validation-lq', hiddingClass: 'hidden-lq' } ); $(document).ajaxSuccess(function(a, b, c, d) { setTimeout(function () { if(d && d.template != null) { window.order = new Order( { deliveryAddressReplaceableSelector: '.delivery-address-lq .address-template-container-lq.delivery-lq', deliveryAddressTemplateInclude: 'orderDa', invoiceAddressReplaceableSelector: '.invoice-address-lq .address-template-container-lq', invoiceAddressTemplateInclude: 'inv-add', buyerAddressReplaceableSelector: '.delivery-address-lq .address-template-container-lq.buyer-lq', buyerAddressTemplateInclude: 'buyerAddress', collectionPointType: $('[data-type]').data('type'), collectionPointFormSelector: '#ifMapContainer', noteReplaceableSelector: '.note-lq', headerAttributesSetFormSelector: '.header-attributes-set-form-lq', positionAttributesSetSelector: '.products-table-lq', addingOrderFormSelector: '.adding-order-form-lq', needRecalculateClass: 'need-recalculate-lq', orderValidatorSelector: '.order-validation-lq', hiddingClass: 'hidden-lq' } ); } }, 1); }); // //hide doubled delivery methods // order.hideDoubbledMethods($('.delivery-method-lq'), $('[data-products-total-value]').data('products-total-value')); if($('.products-table-lq').index() != -1){ var productsTable = $('.products-table-lq'); window.UIFeatures.attachElement('.products-table-header-lq', null, productsTable.offset().top + productsTable.height()); } //add coupon body.on('click', '.add-coupon-lq', function (e) { window.order.addCoupon(e); }) //update delivery and payment matrix body.on('change', '.change-delivery-lq', function (e) { window.order.updateDeliveryMatrix(this, '.delivery-form-lq', '.collection-points-lq', e); }); //redraw points after update if needed body.on('deliveryChange', function (e, pointType) { if (pointType == 1) { $('[data-type]').data('type', pointType).attr('data-type', pointType); if(window.google) { app.getCollectionPoints(); } } }); //change address template (from presentation to edition) body.on('click', '.other-address-lq', function () { var container = $(this).parents('.address-template-container-lq'); var addressType = $(this).parents('.address-template-container-lq').data('address-type'); if(addressType == 0){ var templateInclude = 'orderDa'; } else if(addressType == 1){ var templateInclude = 'inv-add'; } else { var templateInclude = 'buyerAddress'; } window.order.replacePartialTemplate(container, 'order/delivery-partials/address-form.html', templateInclude); }); //change address presentation template to addresses list body.on('click', '.change-delivery-address-lq', function (e) { var container = $(this).parents('.address-template-container-lq'); window.order.replacePartialTemplate(container, 'order/delivery-partials/addresses-list.html', 'orderDa'); }); //change address list to single address presentation body.on('click', '.back-to-presentation-lq', function (e) { var container = $(this).parents('.address-template-container-lq'); if($('.order-address-data-tab-lq + .order-address-data-tab-lq').hasClass('active-lq')){ var include = 'buyerAddress'; } else { var include = 'orderDa'; } window.order.replacePartialTemplate(container, 'order/delivery-partials/address-presentation.html', include); }); Teraz w pliku js/init-ui1.js dodaj kod: function toggleOrderAddress(e) { $('.order-address-data-tab-lq').toggleClass('active-lq'); $(e.currentTarget).parents('.delivery-address-lq').find('.address-template-container-lq').toggleClass('hidden-lq'); }; $('body').on('click', '.order-address-data-tab-lq:not(.active-lq)', function (e) { toggleOrderAddress(e); }); function toggleOrderAddressNotAuthenticated(e) { $('.order-address-data-tab-not-authenticated-lq').toggleClass('active-lq'); if($('.order-delivery-data-popup-radio-lq[value=true]').prop('checked')){ $('.buyer-address-form-in-popup-lq.company-lq').toggleClass('hidden-lq'); $('.delivery-address-form-in-popup-lq.company-lq').toggleClass('hidden-lq'); } else { $('.buyer-address-form-in-popup-lq.retail-lq').toggleClass('hidden-lq'); $('.delivery-address-form-in-popup-lq.retail-lq').toggleClass('hidden-lq'); } }; $('body').on('click', '.order-address-data-tab-not-authenticated-lq:not(.active-lq)', function (e) { toggleOrderAddressNotAuthenticated(e); }); Następnie w pliku js/init-ui2.js znajdź frazę saveDeliveryDataPopup(e) {. Podmień kod tej funkcji na ten: if($('.order-address-data-tab-not-authenticated-lq').length > 0){ var buyerOn = true; } else { var buyerOn = false; } var company = $('.order-delivery-data-popup-radio-lq:checked').val(); if(company == 'true'){ var DAform = $('.delivery-address-form-in-popup-lq.company-lq'); if(buyerOn){ var buyerForm = $('.buyer-address-form-in-popup-lq.company-lq'); } } else { var DAform = $('.delivery-address-form-in-popup-lq.retail-lq'); if(buyerOn){ var buyerForm = $('.buyer-address-form-in-popup-lq.retail-lq'); } } var DAdata = DAform.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); DAdata.push({ name: '__csrf', value: __CSRF }); DAdata.push({ name: '__action', value: 'Order/DeliveryAddressUpdate' }); if(buyerOn){ var buyerData = buyerForm.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); buyerData.push({ name: '__csrf', value: __CSRF }); buyerData.push({ name: '__action', value: 'Order/BuyerUpdate' }); buyerData.push({ name: '__template', value: 'order/order-template.html' }); } else { DAdata.push({ name: '__template', value: 'order/order-template.html' }); } if(company == 'true'){ var invoiceForm = $('.invoice-address-form-in-popup-lq.company-lq .form-lq:not(.hidden-lq)'); } else { var invoiceForm = $('.invoice-address-form-in-popup-lq.retail-lq .form-lq:not(.hidden-lq)'); } if(invoiceForm.hasClass('invoice-lq')){ var invoiceData = invoiceForm.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); invoiceData.push({ name: '__csrf', value: __CSRF }); invoiceData.push({ name: '__action', value: 'Order/InvoiceAddressUpdate' }); invoiceData.push({ name: '__collection', value: 'order.SelectedDelivery.PhoneRequired' }); invoiceData.push({ name: 'company', value: company }); invoiceData.push({ name: 'invoice', value: 'true' }); } if((buyerOn && (app.validationBeforePost(e, buyerForm) != 'error' || (app.validationBeforePost(e, buyerForm) == 'error' && buyerForm.find('[name=name]').val() == ''))) || !buyerOn){ var buyerValidation = true; } else { var buyerValidation = false; } if(app.validationBeforePost(e, DAform) != 'error' && app.validationBeforePost(e, invoiceForm) != 'error' && buyerValidation){ $.post('', invoiceData).then(function (result) { if(result.collection){ var phone = DAform.find('[name=phoneNo]'); phone.prop('required',true); var error = phone.data('error'); phone.parent().append(''+error+''); phone.parent().find('label').append(' *'); } $.post('', DAdata, function (result) { if(buyerOn){ $.post('', buyerData, function (result) { $('.order-template-lq').html(result.template); $('.during-ajax-modal-lq').addClass('hidden-lq'); $('body').removeClass('modal-open-ui'); }); } else { $('.order-template-lq').html(result.template); $('.during-ajax-modal-lq').addClass('hidden-lq'); $('body').removeClass('modal-open-ui'); } }); }); } else if(app.validationBeforePost(e, DAform) == 'error' && buyerOn){ $(e.currentTarget).find('.order-address-data-tab-not-authenticated-lq').eq(0).trigger('click'); } else if(!buyerValidation){ $(e.currentTarget).find('.order-address-data-tab-not-authenticated-lq').eq(1).trigger('click'); } Dalej w pliku js/init-ui2.js znajdź frazę setOrderDeliveryDataPopupRadio(e) {. Podmień kod tej funkcji na ten: var company = $(e.currentTarget).val(); if(company == 'true'){ if($('.order-address-data-tab-not-authenticated-lq').eq(1).hasClass('active-lq')){ $('.delivery-address-form-in-popup-lq.company-lq').addClass('hidden-lq'); $('.buyer-address-form-in-popup-lq.company-lq').removeClass('hidden-lq'); } else { $('.delivery-address-form-in-popup-lq.company-lq').removeClass('hidden-lq'); $('.buyer-address-form-in-popup-lq.company-lq').addClass('hidden-lq'); } $('.delivery-address-form-in-popup-lq.retail-lq').addClass('hidden-lq'); $('.buyer-address-form-in-popup-lq.retail-lq').addClass('hidden-lq'); $('.invoice-address-form-in-popup-lq.retail-lq').addClass('hidden-lq'); $('.invoice-address-form-in-popup-lq.company-lq').removeClass('hidden-lq'); $('[name=toggle-recipe-and-invoice][value=invoice]').prop('checked', true).trigger('change'); } else { if($('.order-address-data-tab-not-authenticated-lq').eq(1).hasClass('active-lq')){ $('.delivery-address-form-in-popup-lq.retail-lq').addClass('hidden-lq'); $('.buyer-address-form-in-popup-lq.retail-lq').removeClass('hidden-lq'); } else { $('.delivery-address-form-in-popup-lq.retail-lq').removeClass('hidden-lq'); $('.buyer-address-form-in-popup-lq.retail-lq').addClass('hidden-lq'); } $('.delivery-address-form-in-popup-lq.company-lq').addClass('hidden-lq'); $('.buyer-address-form-in-popup-lq.company-lq').addClass('hidden-lq'); $('.invoice-address-form-in-popup-lq.company-lq').addClass('hidden-lq'); $('.invoice-address-form-in-popup-lq.retail-lq').removeClass('hidden-lq'); $('[name=toggle-recipe-and-invoice][value=recipe]').prop('checked', true).trigger('change'); } Teraz w pliku scss/globals/_globals2.scss dodaj kod: .order-address-data-tab-ui{ width: 50%; line-height: 1; margin-top: 28px; padding: 10px; border: 1px solid $lightBorderColor; border-bottom: none; text-align: center; background: $lightBorderColor; cursor: pointer; &.left-ui{ float: left; } &.right-ui{ float: right; } &.active-lq{ font-weight: 700; background: #fff; cursor: default; } &.not-authenticated-ui{ line-height: 1.5em; margin-top: 0; } } .order-ui .not-authenticated-in-order-container-ui .form-title-ui.not-authenticated-ui{ margin-top: -10px; margin-bottom: 27px; padding: 0; }

Obsługa zawężania punktów Poczty Polskiej do określonego typu punktów

Wskazówka

Obsługa atrybutów na liście towarów
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwać w nim zawężanie punktów Poczty Polskiej do określonego typu punktów.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js. Z tego artykułu dowiesz się jak je minifikować.

Szafir
W pliku js/collection-points.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę: data:el.data('pointdata') Następnie w pliku order/delivery-partials/collection-points.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę: data-pointdata="{{ order.SelectedDelivery.CollectionPointMapData | H }}"
Agat
W pliku js/collection-points.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę data:el.data('pointdata') Następnie w pliku partials/cart/collection-points.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę: data-pointdata="{{ cart.SelectedDelivery.CollectionPointMapData | H }}"
Bursztyn
W pliku js/collectionpoints.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę: data:el.data('pointdata') Następnie w pliku order/cart.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę data-pointdata="{{ cart.SelectedDelivery.CollectionPointMapData | H }}"
Opal
W pliku js/collection-points.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę: data:el.data('pointdata') Następnie w pliku order/cart.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę: data-pointdata="{{ cart.SelectedDelivery.CollectionPointMapData | H }}"
Topaz
W pliku js/collectionpoints.js wyszukaj frazę var p = {. Dodaj tam analogicznie po przecinku taką linijkę: data:el.data('pointdata') Następnie w pliku static-elements/cart/cart.html wyszukaj frazę ifMapContainer. Dodaj tam analogicznie do innych atrybutów data taką linijkę: data-pointdata="{{ cart.SelectedDelivery.CollectionPointMapData | H }}"

Obsługa atrybutów na liście towarów

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby z poziomu listy towarów dało się dodawać do koszyka towary z atrybutami.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js oraz scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir
W folderze products dodaj plik add-variants-to-cart-from-products-list.html i wklej do niego poniższy kod:
{% include 'common/date-format.html' -%} {% assign product = product-presentation.Product -%} {% assign url = page.Url -%} {% comment -%}{% endcomment -%} {% assign suppliesSize = product.Supplies.Supplies | Size -%} {% if product.Supplies != null and suppliesSize != 0 -%} {% comment -%}{% endcomment -%} {% if page.QueryString contains 'keys' -%} {% assign queries = page.QueryString | Split:'&' -%} {% for query in queries -%} {% if query contains 'keys' -%} {% assign queryString = query | Split:'=' -%} {% assign joinedKeys = queryString[1] | Replace: '%2c', ',' -%} {% assign keys = joinedKeys | Split:',' -%} {% endif -%} {% endfor -%} {% else -%} {% if product.Supplies.Key != null -%} {% assign joinedKeys = product.Supplies.Key | Replace: '%2c', ',' -%} {% assign keys = joinedKeys | Split:',' -%} {% else -%} {% assign noParentSupply = product.Supplies.Supplies[0] -%} {% assign size = product.Supplies.AttributeNames | Size -%} {% for attribute in product.Supplies.AttributeNames -%} {% if forloop.index != 1 -%} {% assign noParentSupply = noParentSupply.Supplies[0] -%} {% endif -%} {% if forloop.index == size -%} {% assign joinedKeys = noParentSupply.Key | Replace: '%2c', ',' -%} {% assign keys = joinedKeys | Split:',' -%} {% assign noParentKey = true -%} {% endif -%} {% endfor -%} {% endif -%} {% endif -%} {% comment -%}{% endcomment -%} {% assign supplies = product.Supplies.Supplies -%} {% for key in keys -%} {% for supply in supplies -%} {% if supply.ValueId == key -%} {% assign supplies = supply.Supplies -%} {% if supply.Key and product.Clip == true -%} {% assign supplyProduct = supply.Product -%} {% endif -%} {% endif -%} {% endfor -%} {% endfor -%} {% endif -%} {% comment -%}{% endcomment -%} {% if product.Clip or product.Batch -%} {% if product.Supplies != null and suppliesSize != 0 -%} {% assign suppliesAsNotSupplies = false -%} {% endif -%} {% endif -%} {% if suppliesAsNotSupplies == false and product.Clip -%} {% assign activeProduct = supplyProduct -%} {% else -%} {% assign activeProduct = product -%} {% endif -%} {% comment -%}{% endcomment -%} {% if page.QueryString contains 'unit' -%} {% assign queries = page.QueryString | Split:'&' -%} {% for query in queries -%} {% if query contains 'unit' -%} {% assign queryString = query | Split:'=' -%} {% assign queriesSize = queryString | Size -%} {% if queriesSize > 1 -%} {% assign unitId = queryString[1] -%} {% else -%} {% assign unitId = null -%} {% endif -%} {% for unit in product.Units -%} {% if unit.Id == unitId -%} {% assign unitDimensions = unit.Dimensions-%} {% assign unitRatio = unit.Ratio -%} {% assign unitName = unit.Name -%} {% assign defaultUnit = unit.Default -%} {% endif -%} {% endfor -%} {% endif -%} {% endfor -%} {% else -%} {% for unit in product.Units -%} {% if unit.Default == true or unit.Id == null -%} {% assign unitDimensions = unit.Dimensions-%} {% assign unitId = unit.Id -%} {% assign unitRatio = unit.Ratio -%} {% assign unitName = unit.Name -%} {% assign defaultUnit = unit.Default -%} {% endif -%} {% endfor -%} {% endif -%} {% comment -%}{% endcomment -%} {% assign noProductOnControlledStock = false -%} {% if activeProduct.StockLevel.QuantityControl == true and activeProduct.StockLevel.Value == 0 -%} {% assign noProductOnControlledStock = true -%} {% else -%} {% assign noProductOnControlledStock = false -%} {% endif -%} {% comment -%}{% endcomment -%} {% if usr.Authenticated == false and settings.notAuthStock == 'no' -%} {% assign showStock = false -%} {% else -%} {% assign showStock = true -%} {% endif -%} {% comment -%}{% endcomment -%} {% if customer.Carts[1] or customer.Cart.EditedOrderId -%} {% assign inquiryExists = false -%} {% assign lastCartId = -1 -%} {% for cart in customer.Carts -%} {% if cart.Current -%} {% assign currentCartId = cart.Id -%} {% assign currentCartName = cart.Name -%} {% endif -%} {% if cart.Inquiry -%} {% assign inquiryExists = true -%} {% assign inquiryId = cart.Id -%} {% else -%} {% assign lastCartId = cart.Id -%} {% endif -%} {% endfor -%} {% endif -%} {% comment -%}{% endcomment -%} {% if product.Archival == false -%} {% if suppliesAsNotSupplies == false or activeProduct.AttributesPolyvalent[0] -%} {% if activeProduct.AttributesPolyvalent[0] -%} {% if activeProduct.AskForPrice == false -%} {% assign tableView = true -%} {% else -%} {% assign tableView = false -%} {% endif -%} {% else -%} {% assign tableView = true -%} {% endif -%} {% else -%} {% assign tableView = false -%} {% endif -%} {% else -%} {% assign tableView = false -%} {% endif -%} {% if product.Batch -%} {% elseif product.Clip -%} {% else -%} {% endif -%}

{{translations.ChooseProductVariant}} {{product.Name}}

{% if activeProduct.Availability.Text != '' and product.Archival == false -%} {% include 'common/date-format.html' -%}
{{ translations.Availability }}: {{ activeProduct.Availability.Text }} {% if activeProduct.Availability.Date != null -%}({{ activeProduct.Availability.Date | Date:dateFormat }}){% endif -%}
{% endif -%} {% if product.Archival == false -%} {% unless noProductOnControlledStock and activeProduct.AskForPrice -%}
{% if tableView == false -%} {% unless customer.HidePrices == false and activeProduct.AskForPrice == true -%}

{% include 'product/amount-stepper.html' with activeProduct -%} {% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' %} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if defaultUnit == false and unitId != null -%}
1 {{unitName}} = {{unitRatio|DividedBy: product.BasicUnitRatio | Round: 4}} {{product.SaleUnit}}
{% endif -%} {% else -%} {% if product.BasicUnit != unitName -%}
1 {{unitName}} = {{unitRatio | Round: 4}} {{product.BasicUnit}}
{% endif -%} {% endif -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%}
{% endunless -%} {% endif -%} {% if activeProduct.Availability.Status == 3 -%} {% assign notifyMe = true -%} {% else -%} {% assign notifyMe = false -%} {% endif -%} {% if notifyMe == false -%} {% if product.Clip or product.Batch -%} {% assign supplies = product.Supplies.Supplies -%} {% for attribute in product.Supplies.AttributeNames -%} {% assign lvl = forloop.index -%} {% assign levelsQuantity = product.Supplies.AttributeNames | Size -%} {% if lvl != levelsQuantity -%}

{{ attribute.Name }}

{% assign key = keys[forloop.index0] -%} {% for supply in supplies -%} {% if supply.Key -%} {% assign dataKeys = supply.Key -%} {% else -%} {% assign childs = supply.Supplies -%} {% assign size = keys | Size -%} {% assign end = size | Minus: lvl -%} {% for lvl in (1..end) -%} {% for child in childs -%} {% if child.ValueId == childs[0].ValueId -%} {% unless child.Key -%} {% assign childs = child.Supplies -%} {% else -%} {% assign dataKeys = child.Key -%} {% endunless -%} {% break -%} {% endif -%} {% endfor -%} {% endfor -%} {% endif -%} {% if supply.ValueId == key -%} {% assign supplies = supply.Supplies -%} {% if supply.Key == joinedKeys -%} {% for keyVal in keys -%} {% endfor -%} {% endif -%} {% endif -%} {% endfor -%}

{% else -%}

{{ attribute.Name }}
{% if config.ENTERPRISE -%}
{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%}{{ translations.TotalPrice }}{% endunless -%}

{{ translations.SubtotalPrice }}
{% else -%} {% if customer.Cart.SubtotalPrices -%}
{{ translations.SubtotalPrice }}
{% else -%}
{{ translations.TotalPrice }}
{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}
{{ translations.Stock }}
{% endif -%}
{{ translations.Quantity }}

{{ translations.Unit }}

{% assign key = keys[forloop.index0] -%} {% for supply in supplies -%} {% if supply.Key -%} {% assign dataKeys = supply.Key -%} {% else -%} {% assign childs = supply.Supplies -%} {% assign size = keys | Size -%} {% assign end = size | Minus: lvl -%} {% for lvl in (1..end) -%} {% for child in childs -%} {% if child.ValueId == childs[0].ValueId -%} {% unless child.Key -%} {% assign childs = child.Supplies -%} {% else -%} {% assign dataKeys = child.Key -%} {% endunless -%} {% break -%} {% endif -%} {% endfor -%} {% endfor -%} {% endif -%} {% if product.Clip -%} {% assign supplyProduct = supply.Product -%} {% elseif product.Batch -%} {% assign supplyProduct = product -%} {% endif -%} {% assign supplyStockLevel = supply.StockLevel -%}

{{ supply.Value }}
{% if config.ENTERPRISE -%}
{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%} {% if supplyProduct.TotalPrice != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
{{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
{{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ supplyProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% endunless -%} {% if supplyProduct.TotalPreviousPrice != null and supplyProduct.TotalPreviousPrice > supplyProduct.TotalPrice -%}

{{ supplyProduct.TotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}
{% endif -%}

{% if supplyProduct.SubtotalPrice != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
{{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
{{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ supplyProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.SubtotalPreviousPrice != null and supplyProduct.SubtotalPreviousPrice > supplyProduct.SubtotalPrice -%}

{{ supplyProduct.SubtotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}
{% endif -%}
{% else -%} {% if customer.Cart.SubtotalPrices -%}
{% if supplyProduct.Price != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.PreviousPrice != null and supplyProduct.PreviousPrice > supplyProduct.Price -%}

{{ supplyProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}
{% endif -%}
{% else -%}
{% if supplyProduct.Price != null -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] %} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
{{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ supplyProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% else -%} {{ translations.AskForPrice }} {% endif -%} {% if supplyProduct.PreviousPrice != null and supplyProduct.PreviousPrice > supplyProduct.Price -%}

{{ supplyProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}
{% endif -%}
{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

{{ translations.InStock }}:
{% if supplyStockLevel.ImageUrl != null -%} {% if supplyStockLevel.Type == 1 or supplyStockLevel.Type == 2 -%} {% endif -%} {% elseif supplyStockLevel.Text != null and supplyStockLevel.Type == 3 -%} {{ supplyStockLevel.Text }} {% else -%} {{ supplyStockLevel.Value | Normalize }} {% endif -%}
{% endif -%}
{% if supplyProduct.StockLevel.QuantityControl == true and supplyProduct.StockLevel.Value == 0 -%} {% assign noSupplyProductOnControlledStock = true -%} {% else -%} {% assign noSupplyProductOnControlledStock = false -%} {% endif -%} {% if noSupplyProductOnControlledStock -%}
{% comment -%}{% endcomment -%}
{% elseif supplyProduct.AskForPrice == false and supplyProduct.Availability.Status != 3 -%} {% if product.Clip -%} {% include 'product/amount-stepper.html' with supplyProduct -%} {% elseif product.Batch -%} {% include 'product/amount-stepper.html' with supplyStockLevel -%} {% endif -%} {% endif -%}
{% assign unitRatioInfo = false -%} {% if product.Units[1] and settings.showUnitRateOnProductDetailsPage == 'yes' and settings.showUnitRateOnProductDetailsPageUnit == 'basic' and unitName != product.BasicUnit -%} {% assign unitRatioInfo = true -%} {% endif -%}
{% if config.ENTERPRISE and supplyProduct.TotalPrice == null and supplyProduct.SubtotalPrice == null -%} {% elseif supplyProduct.Price == null -%} {% endif -%} {% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
1 {{unit.Name}} = {{unit.Ratio | DividedBy: unitRatio | Round: 4}} {{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
1 {{unit.Name}} = {{unit.Ratio | Round: 4}} {{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%} {% if config.ENTERPRISE and supplyProduct.TotalPrice == null and supplyProduct.SubtotalPrice == null -%} {% elseif supplyProduct.Price == null -%} {% endif -%}

{% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%} {% endif -%}
{% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%}

{{translations.MoreAttributes}}
{% if supplyProduct.AttributesEditable[0] -%} {% for attrEditable in supplyProduct.AttributesEditable -%}
{{ attrEditable.Name }} * {% case attrEditable.Format -%} {% when 1 -%}
{% when 2 -%}
{% when 3 -%} {% when 4 -%}
{% endcase -%}
{{ translations.FillAttributeValue }}

{% endfor -%} {% endif -%} {% if supplyProduct.AttributesPolyvalent[0] -%} {% for attrPolyvalent in supplyProduct.AttributesPolyvalent -%}
{{ attrPolyvalent.Name }} *
{{ translations.FillAttributeValue }}

{% endfor -%} {% endif -%}

{% endif -%} {% if supply.ValueId == key -%} {% assign supplies = supply.Supplies -%} {% endif -%} {% assign dataKeys = dataKeys | Split:',' -%} {% for keyVal in dataKeys -%} {% endfor -%}
{% endfor -%}
{% endif -%} {% endfor -%} {% endif -%} {% endif -%} {% unless product.Clip or product.Batch -%} {% if activeProduct.Availability.Status == 3 -%} {% assign notifyMe = true -%} {% else -%} {% assign notifyMe = false -%} {% endif -%} {% if activeProduct.AttributesPolyvalent[0] and product.AskForPrice == false and product.Archival == false and notifyMe == false -%} {% for attribute in activeProduct.AttributesPolyvalent -%}
{% assign lvl = forloop.index -%} {% assign levelsQuantity = activeProduct.AttributesPolyvalent | Size -%} {% if lvl != levelsQuantity -%}
{{ attribute.Name }}
{% for value in attribute.Values -%} {% endfor -%} {% else -%}

{{ attribute.Name }}
{% if config.ENTERPRISE -%}
{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%}{{ translations.TotalPrice }}{% endunless -%}

{{ translations.SubtotalPrice }}
{% else -%} {% if customer.Cart.SubtotalPrices -%}
{{ translations.SubtotalPrice }}
{% else -%}
{{ translations.TotalPrice }}
{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}
{{ translations.Stock }}
{% endif -%}
{{ translations.Quantity }}

{{ translations.Unit }}

{% if config.ENTERPRISE -%} {% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% endunless -%} {% if activeProduct.TotalPreviousPrice != null and activeProduct.TotalPreviousPrice > activeProduct.TotalPrice -%} {% assign previousPriceExists = true -%} {% endif -%} {% else -%} {% if customer.Cart.SubtotalPrices -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%} {% assign previousPriceExists = true -%} {% endif -%} {% else -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% assign unitRatioInfoExists = true -%} {% endif -%} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%} {% assign previousPriceExists = true -%} {% endif -%} {% endif -%} {% endif -%} {% for value in attribute.Values -%}

{{ value.Value }}
{% if config.ENTERPRISE -%}
{% unless customer.Cart.SubtotalPrices and settings.onlySubtotalPrice == 'yes' -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
{{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
{{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ activeProduct.TotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% endunless -%} {% if activeProduct.TotalPreviousPrice != null and activeProduct.TotalPreviousPrice > activeProduct.TotalPrice -%}

{{ activeProduct.TotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}
{% endif -%}

{% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
{{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
{{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ activeProduct.SubtotalPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.SubtotalPreviousPrice != null and activeProduct.SubtotalPreviousPrice > activeProduct.SubtotalPrice -%}

{{ activeProduct.SubtotalPreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}
{% endif -%}
{% else -%} {% if customer.Cart.SubtotalPrices -%}
{% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Netto | Downcase }} {{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%}

{{ activeProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}
{% endif -%}
{% else -%}
{% if settings.showUnitRateOnProductDetailsPage == 'yes' and product.Units[1] -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
{{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Round: config.DecimalPlacesPrice | ToPrice: config.DecimalPlacesPrice }}/{{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {{ translations.Brutto | Downcase }} {{ activeProduct.Price | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if activeProduct.PreviousPrice != null and activeProduct.PreviousPrice > activeProduct.Price -%}

{{ activeProduct.PreviousPrice | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }} {% if settings.previousPriceAsSuggestedRetailPrice == 'yes' %} {% endif -%}
{% endif -%}
{% endif -%} {% endif -%} {% if product.StockLevel != null and showStock -%}

{{ translations.InStock }}:
{% if activeProduct.StockLevel.ImageUrl != null -%} {% if activeProduct.StockLevel.Type == 1 or activeProduct.StockLevel.Type == 2 -%} {% endif -%} {% elseif activeProduct.StockLevel.Text != null and activeProduct.StockLevel.Type == 3 -%} {{ activeProduct.StockLevel.Text }} {% else -%} {{ activeProduct.StockLevel.Value | Normalize }} {% endif -%}
{% endif -%} {% assign attributeIndex = forloop.index0 -%}
{% include 'product/amount-stepper.html' with activeProduct -%}
{% assign unitRatioInfo = false -%} {% if product.Units[1] and settings.showUnitRateOnProductDetailsPage == 'yes' and settings.showUnitRateOnProductDetailsPageUnit == 'basic' and unitName != product.BasicUnit -%} {% assign unitRatioInfo = true -%} {% endif -%}
{% if product.Units[1] -%} {% if settings.showUnitRateOnProductDetailsPage == 'yes' -%} {% for unit in product.Units -%} {% if settings.showUnitRateOnProductDetailsPageUnit == 'default' %} {% if unit.Id != unitId -%}
1 {{unit.Name}} = {{unit.Ratio | DividedBy: unitRatio | Round: 4}} {{unitName}}
{% endif -%} {% else -%} {% if unit.Name != product.BasicUnit -%}
1 {{unit.Name}} = {{unit.Ratio | Round: 4}} {{product.BasicUnit}}
{% endif -%} {% endif -%} {% endfor -%} {% endif -%} {% else -%} {{ product.SaleUnit }} {% endif -%}

{% if activeProduct.AttributesEditable[0] -%} {% endif -%}
{% if activeProduct.AttributesEditable[0] -%}

{{translations.MoreAttributes}}
{% for attrEditable in activeProduct.AttributesEditable -%}
{{ attrEditable.Name }} * {% case attrEditable.Format -%} {% when 1 -%}
{% when 2 -%}
{% when 3 -%} {% when 4 -%}
{% endcase -%}
{{ translations.FillAttributeValue }}

{% endfor -%}

{% endif -%}
{% endfor -%}
{% endif -%}
{% endfor -%} {% endif -%} {% if product.Batch == null or product.Batch == false -%} {% if activeProduct.AttributesEditable != empty and activeProduct.AttributesPolyvalent == empty -%} {% for attribute in activeProduct.AttributesEditable -%}
{{ attribute.Name }} * {% case attribute.Format -%} {% when 1 -%} {% when 2 -%} {% when 3 -%} {% when 4 -%} {% endcase -%}
{{ translations.FillAttributeValue }}

{% endfor -%} {% endif -%} {% endif -%} {% endunless -%} {% if activeProduct.Price != null and activeProduct.Availability.Status != 3 and activeProduct.AskForPrice == false -%} {% if settings.afterAddingToCart == 1 -%} {% capture redirectUrl -%}{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}{% endcapture -%} {% endif -%} {% unless joinedKeys == product.Supplies.Key and unitId == null -%} {% assign newQuery = true -%} {% capture dataUrl -%}{{ url }}?{% endcapture -%} {% if joinedKeys != product.Supplies.Key -%} {% capture dataUrl -%}{{ dataUrl }}keys={{ joinedKeys }}{% endcapture -%} {% endif -%} {% assign lastSign = dataUrl | Last -%} {% if unitId != null -%} {% if lastSign == '?' -%} {% capture dataUrl -%}{{ dataUrl }}unit={{ unitId }}{% endcapture -%} {% else -%} {% capture dataUrl -%}{{ dataUrl }}&unit={{ unitId }}{% endcapture -%} {% endif -%} {% endif -%} {% endunless -%} {% if tableView -%}
{% endif -%} {% if usr.Authenticated -%} {% unless tableView or config.B2B == false -%} {% endunless -%} {% endif -%} {% if canBuy -%} {% if usr.Authenticated -%} {% unless tableView or config.B2B == false -%} {% endunless -%} {% endif -%} {% if settings.redirectCustomer == 'yes' and product.MoreInfoUrl != '' -%} {{ translations.SeeMore }} {% else -%} {% endif -%} {% endif -%} {% if tableView -%}
{% endif -%} {% endif -%}

{% endunless -%} {% if usr.Authenticated -%}

{{ translations.AddedToWishList }}

{{ translations.AfterAddingToWishlistInfo }}

{% assign day = '1.00:00:00' | ToTimeSpan -%}
{{ translations.SelectDate }}

{% endif -%} {% if noProductOnControlledStock and tableView == false -%} {% assign noSimpleProductOnControlledStock = true -%} {% endif -%} {% if activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% if usr.Authenticated -%} {% endif -%} {% if tableView -%}
{% endif -%}
{% comment -%}{% endcomment -%}
{% if tableView -%}
{% endif -%} {% endif -%} {% if activeProduct.AskForPrice == true -%} {% if usr.Authenticated -%} {% unless activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% endunless -%} {% endif -%} {% if tableView -%}
{% endif -%}
{% comment -%}{% endcomment -%}
{% if tableView -%}
{% endif -%} {% if usr.Authenticated -%} {% unless activeProduct.Availability.Status == 3 or noSimpleProductOnControlledStock -%} {% endunless -%} {% endif -%} {% endif -%} {% endif -%}

Następnie w pliku products/products-list-item.html wyszukaj frazę data-product-id. Linijkę z tą frazą trzeba zastąpić poniższym kodem:
Teraz w tym samym pliku (products/products-list-item.html) wyszukaj frazę product-code-lq. Linijkę z tą frazą trzeba zastąpić poniższym kodem:
{% if settings.attributesQuantityOnQuickView > 0 or settings.showAllAttributesOnQuickView == 'true' -%} {% assign showAttributesOnQuickView = true -%} {% endif -%} {% assign attributesSize = product.AttributesList.Attributes | Size -%} {% if config.Products.ShowCode -%}{{product.Code}}{% endif -%} {% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == "yes" and showAttributesOnQuickView and attributesSize > 0 -%} {% assign attributeIndex = 1 -%} {% if config.Products.ShowCode -%}{{product.Code}} | {% endif -%} {% for attribute in product.AttributesList.Attributes -%} {% assign valuesSize = attribute.Values | Size -%} {% assign valueIndex = 1 -%} {% for value in attribute.Values -%} {{value.Value}}{% if valueIndex != valuesSize -%}, {% elseif attributeIndex != attributesSize -%} | {% endif -%} {% assign valueIndex = valueIndex | Plus:1 -%} {% endfor %} {% assign attributeIndex = attributeIndex | Plus:1 -%} {% endfor %} {% endif -%}
Pozostając dalej w tym samym pliku (products/products-list-item.html) wyszukaj frazę expandable-lq. Linijkę, która jest poniżej trzeba zastąpić poniższym kodem:
{% if settings.attributesQuantityOnListView > 0 or settings.showAllAttributesOnListView == 'true' -%} {% assign showAttributesOnListView = true -%} {% endif -%}

{{ productDesc }}
{% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == "yes" and showAttributesOnListView -%}
{% assign attributesSize = product.AttributesList.Attributes | Size -%} {% assign attributeIndex = 1 -%} {% for attribute in product.AttributesList.Attributes -%} {% assign valuesSize = attribute.Values | Size -%} {% assign valueIndex = 1 -%}

{{attribute.Name}}

{% for value in attribute.Values -%} {{value.Value}}{% if valueIndex != valuesSize -%}, {% endif -%} {% assign valueIndex = valueIndex | Plus:1 -%} {% endfor %}

{% assign attributeIndex = attributeIndex | Plus:1 -%} {% endfor %}
{% endif -%} Nadal w tym samym pliku (products/products-list-item.html) wyszukaj frazę choose-variant-ui. Linijkę z tą frazą trzeba zastąpić poniższym kodem:
Ostatnią zmianą w tym samym pliku (products/products-list-item.html) będzie dodanie poniższego kodu prawie na samym końcu pliku (linijkę nad ostatnim zamykającym divem):
{% assign attributesSize = product.AttributesList.Attributes | Size -%} {% if settings.attributesQuantityOnGridView > 0 or settings.showAllAttributesOnGridView == 'true' -%} {% assign showAttributesOnGridView = true -%} {% endif -%} {% if page.PageId == config.DefinedPages.ProductList.Id and settings.showAttributesOnProductsPage == "yes" and attributesSize > 0 and showAttributesOnGridView -%}

{% assign attributeIndex = 1 -%} {% for attribute in product.AttributesList.Attributes -%} {% assign valuesSize = attribute.Values | Size -%} {% assign valueIndex = 1 -%}

{{attribute.Name}}

{% for value in attribute.Values -%} {{value.Value}}{% if valueIndex != valuesSize -%}, {% endif -%} {% assign valueIndex = valueIndex | Plus:1 -%} {% endfor %}

{% assign attributeIndex = attributeIndex | Plus:1 -%} {% endfor %}
{% endif -%} Następnie w pliku js/init-ui1.js wyszukaj frazę childs[childIndex]. Linijkę z tą frazą oraz warunek, który będzie pod nią zastąp poniższym kodem:
if(window.childs[childIndex]){ var childUnit = window.childs[childIndex].unit; if($('.dimensions-lq').index() != -1) { changeDimensions(childUnit); } }
Pozostając w pliku js/init-ui1.js wyszukaj frazę $('[data-product-id]').data('product-id'). Linijkę z tą frazą zastąp poniższym kodem:
if($(e.currentTarget).data('id') != undefined){ var productId = $(e.currentTarget).data('id'); } else { var productId = $('[data-product-id]').data('product-id'); }
Teraz w tym samym pliku (js/init-ui1.js) wyszukaj frazę productsAddedToCart. Linijkę nad tą frazą zastąp poniższym kodem:
if($('.child-lq').index() != -1 || $('.choose-variant-lq').index() != -1){
Na samym końcu pliku js/init-ui2.js wklej poniższy kod:
function chooseVariantOnProductsList(e) { var url = $(e.currentTarget).data('url'); $.get(url, {__template: 'products/add-variants-to-cart-from-products-list.html'}, function (result) { $('.add-variants-to-cart-from-products-list-popup-background-lq').remove(); $('body').append(result.template); saveChildsProps(); }); }; $('body').on('click', '.choose-variant-lq', function (e) { chooseVariantOnProductsList(e); }); $('body').on('click', '.change-variant-on-products-list-lq', function (e) { chooseVariantOnProductsList(e); }); $('body').on('click', '.remove-lq', function (e) { if($(e.currentTarget).parents('.container-to-remove-lq').length > 0){ $(e.currentTarget).parents('.container-to-remove-lq').remove(); } else { $(e.currentTarget).remove(); } }); $('body').on('click', '.stop-propagation-lq', function (e) { e.stopPropagation(); });
W pliku scss/globals/_globals-m.scss znajdź frazę expandable-ui i podmień ją wraz z jej zawartością na poniższy kod:
.expandable-ui{ display: flex !important; flex-direction: column; .product-desc-ui{ width: 100%; order: 2; margin: 0; &.with-attributes-ui{ width: 100%; } } .attributes-ui, .product-attributes-listed-in-list-view-ui{ margin: 40px 0 10px; width: auto; .f-left-ui{ width: 120px; } .f-right-ui{ width: calc(100% - 140px); } } .attributes-ui{ margin-top: 10px; } }
Następnie na końcu tego samego pliku (scss/globals/_globals-m.scss) dodaj poniższy kod:
.add-variants-to-cart-from-products-list-popup-background-ui{ .message-popup-ui{ margin: 0; max-width: none; overflow: auto; padding: 0; .product-added-to-cart-ui{ padding: 20px 60px 20px 20px; & + .info-ui{ padding: 0; } } } .availability-ui{ padding: 20px 20px 0; } .add-to-cart-ui{ width: 100%; margin: 0; } .attribute-name-ui{ &:not(.table-row-ui){ color: $labelsColor; font-size: 12px; font-weight: 400; width: 100%; display: block; padding: 0 20px; line-height: 1; margin-bottom: 20px; } &.table-row-ui{ margin: 20px 0; .table-cell-ui:not(.name-column-ui){ display: none; } > div.name-column-ui{ color: $labelsColor; font-size: 12px; font-weight: 400; width: 100%; display: block; padding: 0 20px; line-height: 1; } } } .attribute-button-ui{ &.not-last-lvl-lq{ margin: 0 -5px 0 20px; } &.last-lvl-ui{ position: relative; background-color: $addToCartContainerBg; &:after{ display: block; clear: both; content: ''; } &.higher-mobile-ui{ height: 140px; } &.previous-with-units-mobile-ui { height: 180px; .brutto-price-column-ui{ top: 60px; } .unit-column-ui{ top: 100px; } } } &.previous-with-units-ui { padding: 10px 0; } .expandable-lq.expanded-lq{ position: fixed !important; left: 0 !important; top: 0; bottom: 0; height: auto !important; width: 100% !important; background: $formsBgColor; z-index: 102; .more-attributes-ui{ padding: 20px; font-size: 14px; .ti-close{ float: right; font-size: 20px; } label:not(.checkbox-ui):not(.radio-ui){ font-size: 12px; } .attribute-editable-ui{ width: 100%; margin: 0; input, select, .select-arrow-ui.no-error-ui{ margin-bottom: 0; } } } } } .attributes-lq > .attribute-button-ui{ margin: 0 0 20px 20px; } .name-column-ui{ vertical-align: top; line-height: 1.2; font-size: 14px; padding: 20px; width: calc(100% - 225px); } .stock-column-ui{ position: absolute; left: 20px; top: 48px; padding: 0; width: calc(100% - 280px); font-size: 12px; line-height: 1.3; .mobile-ui{ color: $labelsColor; } } .quantity-column-ui{ float: right; width: 120px; height: 109px; padding: 20px; margin-right: 0; position: relative; .change-quantity-ui{ width: 40px; height: 35px; position: absolute; bottom: 20px; } .increment-ui{ right: 20px; border-left: 1px solid $lightBorderColor; } [name="quantity"]{ width: 80px; height: 35px; } } .netto-price-column-ui, .brutto-price-column-ui{ position: absolute; right: 120px; line-height: 1; padding: 0; width: 125px; text-align: right; &.many-units-ui, &.no-stock-ui, &.many-units-ui.no-stock-ui{ width: 125px; } .mobile-ui{ color: $labelsColor; font-size: 10px; } } .netto-price-column-ui{ font-size: 16px; top: 20px; .netto-ui{ font-size: 16px; font-weight: 400; } .netto-mobile-ui{ color: $nettoPrice; } } .brutto-price-column-ui{ font-size: 14px; top: 45px; } & .unit-column-ui{ position: absolute; right: 120px; padding: 0; line-height: 1; font-size: 12px; text-align: right; top: 69px; width: 125px; .select-background-ui{ margin-right: 0; } .select-arrow-ui{ margin-left: -25px; margin-right: 10px; } } .options-column-ui{ position: absolute; top: 95px; padding: 0; left: 20px; width: auto; .change-arrow-title-lq{ transform: none !important; } .ti-angle-down, .ti-angle-up{ display: none; } .mobile-ui{ font-size: 12px; } } .previous-price-ui { position:static !important; } .moblie-previous-ui { top: 58px !important; } .unit-previous-ui { top: 96px !important; } .change-mobile-paddings-ui{ &.quantity-ui{ padding: 20px; } &.attribute-editable-ui{ padding: 0 20px 20px; } } }
Teraz w pliku scss/partials/_product-list.scss podmień całą jego zawartość na poniższy kod:
Wskazówka
W tym pliku było dużo zmian i dlatego podajemy go w całości. Przed zastąpieniem swojego kodu upewnij się, że nie nadpiszesz zmian wprowadzanych wcześniej przez siebie.

.product-list-ui { position: relative; .add-to-cart-ui { margin-top: 0; } .choose-cart-form-ui { position: absolute; top: 100%; right: 0; z-index: 5; line-height: 1.5em; } .product-link-ui { box-shadow: 0 3px 12px 0 transparent; transition: box-shadow $short-animations-time; &:hover { box-shadow: 0 3px 12px 0 $gridAndListHoverShadowColor; } } .suggested-price-products-list-ui { position:absolute; right:20px; padding:10px 20px; top:25%; .suggested-ui { font-size: 16px; } .suggested-price-ui { font-size: 20px } .suggested-previous-ui { text-decoration: line-through; } } .stepper-and-adding-ui:not(.has-attributes-link) { opacity: 0.999; z-index: 2; } } .products-navigation-ui { margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid $lightBorderColor; .breadcrumbs-ui li { margin:0; } .sorting-views-container-ui { font-size: 1.3rem; .sorting-views-container-ui button { padding-top: 10px; } } .change-view-ui { padding-top: 10px; background: $viewButtonsBg; box-shadow: 0 0 1px #a5a5a5; margin-right: 10px; transition: border $short-animations-time; &:not(.btn-active-lq) { border:1px solid transparent; } } } .products-header-ui { display:none; z-index: 10; top:0; border: 1px solid $tableBorderColor; position:absolute; left: 0; right: 0; >* { display:block; float: left; height: $tableHeaderHeight; line-height: $tableHeaderHeight; padding-top: 0; padding-bottom: 0; } .stepper-and-adding-ui{ padding:0; > div { width:100%; } } .add-to-cart-ui { padding: 0; float: left; width: 100%; } .choose-cart-form-ui { width: 100%; } .change-cart-arrows-ui { line-height: 1.5em; height: $tableHeaderHeight; width: $tableHeaderHeight; float: right; } } .product-item-ui, .products-header-ui { .price-ui { font-size:inherit; } } .product-item-ui { position:relative; display:block; color: $primaryColorFont; transition: box-shadow $short-animations-time, background $short-animations-time; .product-name-ui { color: $iconColors; margin-bottom:0; font-size: inherit; } .unit-name-ui { font-size:inherit; } .product-code-ui { color: $primaryColorFont; } .image-container-ui { display: -ms-inline-flexbox; display:inline-flex; width: $imageWidthOnList; } .price-ui, .old-price-ui { margin:0; } .price-ui { font-size: larger; } .old-price-ui { font-size: smaller; margin-bottom: 3px; } .stock-level-ui img { z-index:1; position:relative; } .stock-text-ui { display: block; line-height: 1em; } .stock-label-ui { margin-right:10px; font-size:small; } .stepper-and-adding-ui { padding:0; .add-to-cart-form-container-ui { display: inline-block; } } .btn-ui, button { position:relative; z-index:2; } } .choose-variant-icon-ui { font-size:2rem; padding-right: 15px; } /* quick shopping view */ .quick-shopping-view-lq { .message-bar-ui { padding-top: $tableHeaderHeight; position: relative; .close-ui { top: $tableHeaderHeight; color: $messageBarFont; } &[class*='hidden-lq'] { display: block !important; height: 0; padding-bottom: 0; z-index: -1; visibility: hidden; } } .message-bar-title-ui { font-weight: 500; font-size: 1.2em; } .product-name-ui { margin-bottom: 0; font-size: 16px; font-weight: 500; } .product-validation-message-ui { margin-top: 0; } .pagination-page-ui { width: 100%; font-size: 0.9rem; padding-top: $tableHeaderHeight; &::after { display: block; clear: both; float: none; content: ''; } } .products-header-ui, .product-item-ui { > *:not(.image-container-ui):not(.product-link-ui):not(.name-and-code-ui) { vertical-align: middle; width: 20%; } .name-and-code-ui { width: 40%; vertical-align: middle; &.without-stock { width: 60%; } } } &.prices-hidden-ui { &::after { display: block; clear: both; float: none; content: ''; } .products-header-ui, .product-item-ui { > *:not(.product-link-ui) { float: left; width: 50% !important; } } } .products-header-ui { display: block; } .product-item-ui { display: -ms-flexbox; display:flex; align-items:center; &::after { display: block; clear: both; float: none; content: ''; } > * { float: left; align-self:center; } .choose-variant-ui{ position: relative; z-index: 2; } } .element-attached-lq.products-header-ui > *:not(.image-container-ui) { display: block; display: -ms-flexbox; display: flex; align-items:center; float: left; height: 60px; &.price-column-ui{ display: inline-block; } } .image-container-ui, .product-desc-ui, .price-label-ui { display: none; } .product-code-ui{ font-size: 14px; max-width: 100%; .code-ui.show-attributes-on-products-page-ui{ display: none; } .product-attributes-listed-ui{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .code-ui{ display: inline-block; } &:not(.show-all-attributes-on-quick-view-ui) .last-quick-view-attribute-ui{ & ~ span{ display: none; } span{ display: none; } } } } .product-code-ui, .product-flags-ui { display: inline-block; float: left; } .product-flags-ui { padding-left: 10px; } .product-item-ui { .add-to-cart-ui, .change-cart-arrows-ui, .choose-cart-form-ui { display: none; } } .stock-label-ui { display: none; } .price-column-ui { text-align: right; padding-right: 10%; } .expandable-mechanism-container-ui, .final-price-column-ui, .product-attributes-listed-in-grid-view-ui{ display: none; } } /* list and grid views - common styles */ .list-view-lq , .grid-view-lq { .product-item-ui{ &::after { content:''; display:block; clear:both; } .product-name-ui{ font-size: 18px; font-weight: 500; } .product-code-ui{ font-size: 14px; .product-attributes-listed-ui{ display: none; } } } .stock-label-ui, .price-label-ui{ color: $productsListLabels; } .product-flags-ui { position: absolute; left: 5px; top: 5px; width: $imageWidthOnList; } .name-and-code-ui { width: calc(100% - #{$priceColumnWidthOnList}); float: left; } .product-code-ui { margin:12px 0px 20px 0; display: block; font-weight: 500; } .price-column-ui { width: $priceColumnWidthOnList; float: right; font-size: 1.3rem; padding-top: 15px; padding-right: 15px; text-align: right; } .unit-name-ui { width:140px; } .stock-level-ui { position:absolute; bottom:0; right:515px; bottom: 15px; > * { vertical-align:middle; } } &.prices-hidden-ui .stock-level-ui { right:0; bottom: 0; padding:15px; } .product-desc-ui { line-height:1.5em; max-height: calc(#{$linesOfDescription} * 1.5em); overflow: hidden; } .stepper-and-adding-ui .error-ui { top: -20px; bottom:auto; } } /* list view */ .list-view-lq { .product-item-ui { border: 1px solid $lightBorderColor; margin-bottom: 10px; padding-left: calc(#{$imageWidthOnList} + 40px); min-height: 150px; } .name-and-code-ui { padding-top: 20px; width: calc(100% - 20px); } .product-name-ui{ color: $primaryColorFont; } .product-code-ui{ color: $productsListLabels; height: 24px; } .image-container-ui { position: absolute; top: 20px; left: 20px; height: 110px; width: $imageWidthOnList; i, .no-image-ui{ font-size: 100px; } } .product-flags-ui{ top: -22px; left: -21px; } .expand-data-ui{ padding: 0; } .product-desc-ui, .product-attributes-listed-in-grid-view-ui{ display: none; } .expandable-ui{ .product-desc-ui{ display: inline-block; width: calc(100% - 380px); max-height: none; margin: 50px 50px 20px 0; vertical-align: top; color: $productsListLabels; &.with-attributes-ui{ width: calc(100% - 760px); } } .product-attributes-listed-in-list-view-ui{ display: inline-block; width: 326px; vertical-align: top; margin: 50px 50px 20px 0; .clear-after-ui{ margin-bottom: 10px; } .f-left-ui{ width: 125px; color: $productsListLabels; } .f-right-ui{ width: 161px; } &:not(.show-all-attributes-on-list-view-ui) .clear-after-ui.last-list-view-attribute-ui ~ .clear-after-ui{ display: none; } } .attributes-ui{ display: inline-block; width: 325px; vertical-align: top; margin: 50px 0 20px; .clear-after-ui{ margin-bottom: 10px; } .f-left-ui{ width: 125px; color: $productsListLabels; } .f-right-ui{ width: 158px; } img{ vertical-align: middle; max-height: 25px; } } } .stepper-and-adding-ui{ position:absolute; top: 20px; right: 20px; height: 110px; } .add-to-cart-ui{ padding: 5px 10px; min-height: auto; margin-top: 76px; i{ font-size: 20px; margin-right: 5px; } .lower-text-ui{ display: inline-block; font-size: 14px; } .bigger-text-ui{ display: inline-block; margin-left: 5px; text-transform: lowercase; } } .editing-order-ui{ .lower-text-ui, .bigger-text-ui{ font-size: 12px; } } .choose-variant-ui{ position: absolute; right: 0; width: 158px; bottom: 0; padding: 5px 0; z-index: 2; span{ font-size: 12px; } } .choose-variant-icon-ui{ font-size: 24px; padding-right: 10px; } .btn-ui{ position: absolute; right: 0; bottom: 0; width: 158px; font-size: 14px; text-align: center; } .final-price-column-ui{ display: inline-block; position: absolute; width: 125px; right: 220px; top: 65px; .price-ui{ margin-top: 10px; color: $primaryColorFont; font-weight: 700; } } .amount-stepper-ui{ position: absolute; right: 190px; display: inline-block; width: 160px; bottom: 0; } .unit-name-ui{ color: $productsListLabels; font-size: smaller; position: absolute; bottom: 40px; right: 222px; } .price-column-ui{ display: inline-block; position: absolute; width: 125px; right: 600px; top: 100px; font-size: 1rem; padding: 0; text-align: left; .price-ui{ font-size: larger; font-weight: 700; } .price-label-ui{ position: absolute; top: -34px; left: 0; } .old-price-ui{ position: absolute; top: -17px; } } .stock-level-ui{ display: none; } @media only screen and (min-width: 1280px) and (max-width: 1599px) { .product-item-ui{ padding-left: 200px; .product-code-ui{ margin-top: 0; } } .image-container-ui{ width: 160px; } .price-column-ui{ right: 565px; } .final-price-column-ui{ right: 210px; } .amount-stepper-ui{ right: 175px; } .unit-name-ui{ right: 208px; } .expandable-mechanism-container-ui{ margin: 70px 0px 20px -180px; } .expandable-ui{ .product-desc-ui{ width: calc(100% - 340px); margin: 20px 20px 0 0; } .attributes-ui{ margin: 20px 0 0 0; width: 315px; .f-right-ui{ width: 156px; } } } } } /* grid view */ .grid-view-lq { .product-item-ui { width: 100% / $gridColumns; float: left; height: $gridItemHeight; padding: $gridItemSpacing; &:nth-child(even) { padding-right: $gridItemSpacing; } &:nth-child(odd) { padding-left: $gridItemSpacing; border-left: 1px solid $lightBorderColor; } &:not(:nth-last-child(-n+#{$gridColumns})) { border-bottom: 1px solid $lightBorderColor; } .product-name-ui{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .image-container-ui { width: 100%; height: 306px; img { margin-left:0; } } .name-and-code-ui { width: calc(100% - #{$priceColumnWidthOnList}); } .product-desc-ui { display:none; } .price-column-ui { position:absolute; top:$gridItemSpacing; right:$gridItemSpacing; padding:0; } .stepper-and-adding-ui { text-align: right; position: absolute; padding:0; right: $gridItemSpacing; bottom: $gridItemSpacing; } .choose-variant-ui{ position: relative; z-index: 2; font-size: 14px; } .amount-stepper-ui { justify-content:flex-end; display:flex; } .stock-level-ui { right: $gridItemSpacing; bottom: 200px; } .unit-name-ui { width: 100%; padding: 12px 0; } .stepper-and-adding-ui .error-ui { padding-right: 0; top: -30px; max-width: 100%; line-height: 1; text-align: right; white-space: normal; } .expandable-mechanism-container-ui, .final-price-column-ui{ display: none; } .product-attributes-listed-in-grid-view-ui{ height: 0; overflow: hidden; position: absolute; top: 99%; background: $bgColor; left: 0; right: 0; z-index: 3; padding: 0 30px; transition: all ease 300ms; .clear-after-ui{ margin-bottom: 10px; } .f-left-ui{ width: 150px; color: $productsListLabels; } .f-right-ui{ width: calc(100% - 150px); } &:not(.show-all-attributes-on-grid-view-ui) .clear-after-ui.last-grid-view-attribute-ui ~ .clear-after-ui{ display: none; } } .product-attributes-listed-in-grid-view-ui:hover, .product-item-ui:hover .product-attributes-listed-in-grid-view-ui{ height: auto; padding: 0 30px 20px; border-bottom: 1px solid $lightBorderColor; box-shadow: 0 14px 12px 0 $gridAndListHoverShadowColor; } } /* filters */ .product-filters-ui { width:100%; padding-top: 30px; .price-filter-ui { padding: 0 20px 20px 20px; > * { vertical-align: middle; } .price-label-ui { padding-bottom:10px; } } .filter-item-ui { border-bottom: 1px solid $lightBorderColor; } .filter-drop-ui { width: 100%; text-align: left; padding: 10px 20px; color: $primaryColorFont; } .filter-value-list-ui { padding: 0 20px 0 20px; overflow:hidden; + .filter-value-list-ui { transition:height $animations-time; } } .filter-drop-ui, .expandable-ui { background:transparent; transition:height $animations-time, background $animations-time; } .expanded-lq { background: $openedFiltersSectionBg; } .label-ui { line-height: 2.5em; } .show-more-ui { font-size:0.9rem; float: right; } .filters-apply-button-ui { position:fixed; bottom:0; left:0; width: $category-column-width; height: $filtersButtonHeight; } .price-range-ui input { max-width:28%; } } .selected-filters-ui { margin-bottom:20px; } .selected-filter-item-ui { display: inline-block; border: 1px solid $lightBorderColor; padding: 7px 14px; background: $selectedFilterButtonBg; color: $primaryColorFont; .filter-delete-ui { margin-right: 7px; } &.search-phrase-item-ui:hover { background: $searchPhraseButtonHover; color: $primaryColorFont; } } .search-phrase-mark-ui, .search-phrase-item-ui { background: $searchPhraseMark; } .add-variants-to-cart-from-products-list-popup-background-ui{ cursor: pointer; z-index: 149; .message-popup-ui{ width: auto; max-width: 80vw; cursor: default; } .attribute-button-ui{ background-color: $attributesButtonBg; color: $attributesButtonFont; border: 1px solid $lightBorderColor; padding: 10px; transition: all 300ms ease; &:not(.last-lvl-ui){ &:hover, &.active-lq{ border: 1px solid $primaryColor; } } &.active-lq{ cursor: default; } &.last-lvl-ui{ padding: 0; cursor: default; } } .table-ui{ display: block; border: none; margin-top: 20px; width: 100%; max-height: 50vh; overflow-y: auto; } .table-row-ui{ display: block; cursor: pointer; } .table-cell-ui{ display: inline-block; margin-right: -4px; width: 11%; vertical-align: middle; @media only screen and (min-width: 1830px) { width: 15%; } } .attribute-name-ui{ margin-top: 20px; background-color: transparent; cursor: auto; font-weight: 700; > div { font-weight: normal; &.name-column-ui{ font-weight: 700; } } } .attributes-list-ui{ cursor: auto; border: 1px solid $lightBorderColor; &:hover{ cursor: auto; border: 1px solid $lightBorderColor; } } .name-column-ui.solo-price-ui{ width: 34%; } .brutto-price-column-ui, .netto-price-column-ui{ width: 17%; &.many-units-ui{ width: 17%; } &.no-stock-ui{ width: 24%; } &.many-units-ui.no-stock-ui{ width: 21%; } } .brutto-price-column-ui.many-units-ui{ width: 16%; } .previous-price-ui { position:absolute; text-decoration: line-through; font-size:10px; line-height:10px; color: $primaryColorFont; &.suggested-retail-price-ui{ text-decoration: none; } } .brutto-ui, .netto-ui{ font-weight: 700; } .netto-ui{ font-size: 21px; color: $nettoPrice; } .stock-column-ui{ width: 13%; } .unit-column-ui{ width: 13%; } .many-units-ui{ width: 18%; @media only screen and (min-width: 1830px) { width: 14%; } } .quantity-column-ui{ width: 19%; .change-quantity-ui{ width: 30px; height: 30px; } [name="quantity"]{ width: 40px; height: 30px; } } .options-column-ui{ width: 44px; button{ padding: 0; &.no-animation-lq{ transition:none; } &.cant-toggle-lq{ cursor: default; color: $lightBorderColor; } } } .select-background-ui select{ padding: 3px 40px 3px 10px; } .more-attributes-ui{ padding: 0 10px 10px; .attribute-editable-ui{ vertical-align: top; margin: 0 10px 0 0; width: 180px; .select-background-ui, input{ width: 100%; margin-top: 3px; } } } }
W pliku __settings.liquid na samym końcu polskich tłumaczeń dodaj poniższy kod:
{% assign attributesOnProductsPage = "Atrybuty na listach towarów" -%} {% assign showAttributesOnProductsPage = "Prezentuj atrybuty na listach towarów" -%} {% assign attributesQuantityOnQuickView = "Ilość prezentowanych atrybutów w widoku Szybkie zakupy" -%} {% assign attributesQuantityOnListView = "Ilość prezentowanych atrybutów w widoku Lista" -%} {% assign attributesQuantityOnGridView = "Ilość prezentowanych atrybutów w widoku Kafelki" -%} {% assign all = "wszystkie" -%} {% assign multiVariantProducts = "Towary wielowariantowe" -%} {% assign multiVariantProductsInfo = "Pozwalaj na zakup towarów wielowariantowych z listy towarów" -%}
Dalej w pliku __settings.liquid na samym końcu angielskich tłumaczeń dodaj poniższy kod:
{% assign attributesOnProductsPage = "Attributes on products page" -%} {% assign showAttributesOnProductsPage = "Show attributes on products page" -%} {% assign attributesQuantityOnQuickView = "Attributes quantity on Quick shopping view" -%} {% assign attributesQuantityOnListView = "Attributes quantity on List view" -%} {% assign attributesQuantityOnGridView = "Attributes quantity on Grid view" -%} {% assign all = "all" -%} {% assign multiVariantProducts = "Multivariant products" -%} {% assign multiVariantProductsInfo = "Allow adding to cart multivariant products on products list" -%}
Następnie w tym samym pliku (__settings.liquid) dodaj analogicznie do innych opcji poniższy kod:
{{attributesOnProductsPage}}

{{showAttributesOnProductsPage}}

{{yesTranslation}}

{{noTranslation}}

{{attributesQuantityOnQuickView}}

{{all}}

{{attributesQuantityOnListView}}

{{all}}

{{attributesQuantityOnGridView}}

{{all}}

{{multiVariantProducts}}

{{multiVariantProductsInfo}}

{{yesTranslation}}

{{noTranslation}}

Teraz w tym samym pliku (__settings.liquid) w sekcji ze skryptami dodaj poniższy kod:
if($('#showAttributesOnProductsPage-yes').prop('checked')){ $('.attributesQuantitySections').show(); } else { $('.attributesQuantitySections').hide(); } $('[name=showAttributesOnProductsPage]').on('change', function(){ if($('#showAttributesOnProductsPage-yes').prop('checked')){ $('.attributesQuantitySections').show(); } else { $('.attributesQuantitySections').hide(); } });

Powiększanie zdjęć w szczegółach towaru w szablonie Topaz

W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order
Na początku w pliku elements\product-details-1.html lub elements\product-details-2.html (w zależności od typu wyglądu), za pomocą narzędzia wyszukiwania, znajdź linijkę: <img alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{image.Id}}/{{image.Link}}.jpg"> W miejsce tej linijki wklej następujacy kod: <img class="open-gallery" alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg"> Następnie w tym samym pliku, za pomocą narzędzia wyszukiwania, znajdź linijkę: <img alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg"> W jej miejsce wklej następujący kod: <img class="open-gallery" alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg"> Kolejnym krokiem jest przejście do pliku js\layout1.js. W pliku tym, za pomocą narzędzia wyszukiwania, znajdujemy frazę var productDetailsFunctions = {, a następnie bezpośrednio pod nią wklejamy następujący kod: openGallery: function (e) { var t = $(".product-details__image").slick("slickCurrentSlide"); var i = $(e.currentTarget).parents(".product-details__images"); i.addClass("opened-gallery"); i.append('<svg class="svgIcon close-gallery-button"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>'); $("body").addClass("modal-opened"); $(".open-gallery:not(.opened-gallery-switch)").addClass("opened-gallery-switch"); $(".product-details__image-list").addClass("slider-hidden"); $(".product-details__image").addClass("opened-gallery"); $(".product-details__image").slick("unslick"); this.setGallerySlider(t); $(".draggable").css("top", "25%"); }, closeGallery: function (e) { $(".product-details__images").removeClass("opened-gallery"); $(".product-details__image").removeClass("opened-gallery"); $(".open-gallery.opened-gallery-switch").removeClass("opened-gallery-switch"); $(e.currentTarget).remove(); $(".product-details__image-list").removeClass("slider-hidden"); $("body").removeClass("modal-opened"); $(".product-details__image").slick("unslick"); $(".draggable").css("top", "0"); this.setSlider(); }, setGallerySlider: function (t) { $(".product-details__image").slick ({ infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: false, nextArrow: '<button type="button" aria-label="nextArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowRight"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>', prevArrow: '<button type="button" aria-label="prevArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowLeft"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>', accessibility: false, dots: false, }); $(".product-details__image").slick("slickGoTo", t, true); }, W tym samym pliku za pomocą narzędzia wyszukiwania znajdź frazę var body = $('body'); a bezpośrednio pod nią wklej następujacy kod: body.on("click", ".open-gallery:not(.opened-gallery-switch)", function(e) { productDetailsFunctions.openGallery(e); }), $("body").on("click", ".close-gallery-button", function(e) { productDetailsFunctions.closeGallery(e); }), Przejdź do pliku css\elements\product-deatils-1-g.css lub css\elements\product-deatils-2-g.css (w zależności od typu wyglądu). Na koncu pliku wklej następujący kod: .close-gallery-button { position: fixed; right: 0; top: 0; background: transparent; color: #656565; z-index: 20; border: 0; font-size: 20px; width: 50px; height: 50px; cursor: pointer; } .slider-hidden { display: none; } .opened-gallery { position: fixed; display: flex; z-index: 20; top: 0; right: 0; bottom: 0; left: 0; background: #ffffff; width: 100%; .slick-next:last-child { right: 20px; } .slick-next:first-child { left: 20px; } .slick-next { height: 35px; width: 35px; } img { max-height: none; } } Ostatnim krokiem jest przeście do pliku css\base_layout-g.css. Znajdź frazę body { i bezpośrednio pod wyszukaną linijką wklej następujacy kod: &.modal-opened { overflow: hidden; }

Wyświetlanie drugiego zdjęcia na liście towarów

W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Wskazówka
Kod wykorzystany do przykładu należy do szablonu Opal

Uwaga
Do zrozumienia tego artykułu wymagana jest wiedza z zakresu HTML, CSS, JavaScript oraz Liquid

Pobranie numeru Id zdjęć
Pierwszym krokiem jest dodanie kodu odpowiadającego za sprawdzenie czy produkt, na który najechaliśmy myszką ma więcej niż jedno zdjęcie. W takim wypadu, pobieramy numery Id tych kolejnego ze zdjęć i osadzamy je w elemencie html, odpowiadającym za wyświetlanie się zdjęcia produktu.
Przyklad
Kod odpowiadający za wyświetlenie listy produktów oraz sprawdzenie, czy główne zdjęcie produktu istnieje.
{% for prod in productlist.Product-%} <div class="product-item {% if prod.ImageId == -1 -%} no-photo {% endif -%}"> {% if prod.ImageId <> -1 -%}{{ prod | Img:'large' }}{% endif -%} </div> {% endfor -%}
Gdzie prod jest przekazywanym w pętli for obiektem productlist.Products. Zwraca on informacje o aktualnie wyświetlonej liście produktów (w tym interesujący nas ImageId).
Odpowiednio dla reszty szablonów obiektami zwracającymi listę produktów są:

Szablon Topaz -- products

Szablon Agat -- productlist

Szablon Bursztyn -- productlist

Szablon Szafir -- products

Dodanie logiki
W celu sprawdzenia ilości dostępnych zdjęć dla danego produktu, zastosujemy następującą funkcje JavaScript (jQuery):

$('body').on('mouseenter', '.product-item', function () { var pItem = $(this); putPhoto(pItem); });

Funkcja ta "nasłuchuje" momentu, w którym myszka wejdzie na zdjęcie i uruchamia kolejną funkcję, która odpowiada za umiejscowienie kolejnego zdjęcia w kodzie strony.

window.putPhoto = function (pItem) { var imgContainer = pItem.find('.product-item'); var images = imgContainer.find('img'); var imagesCount = images.length; if (pItem.data('loaded') == undefined) { $.get(path, { __collection: 'productdetails.Product' }, function (res) { if (imagesCount == 1) { var imagesCol = res.collection.Images; if (imagesCol.length > 1) { pItem.addClass('hover'); pItem.data('loaded', 'true'); var img = imagesCol[1]; imgContainer.append('<img alt="" src="img/large/' + img.Id + '/.jpg"/>'); } } } }

Dodanie styli
Na końcu wystarczy dodać style w taki sposób,tak aby zdjęcia były wyświetlane za zmianę.

.product-item.hover img:nth-child(1) { display: block; } .product-item.hover img:nth-child(2) { display: none; } .product-item.hover:hover img:nth-child(1) { display: none; } .product-item.hover:hover img:nth-child(2) { display: block; }

Obsługa prezentacji wagi netto oraz wagi brutto towaru dla wskazanej jednostki miary

Wskazówka

W tym artykule dowiesz się jak zmodyfikować szablon, aby umożliwić przeliczanie i wyświetlanie wagi netto oraz wagi brutto towaru w zależności od wybranej jednostki.
Szafir
Na początku zmodyfikuj plik product/product-presentation-data.html. Należy znaleźć narzędziem wyszukiwania divy o klasie child-lq i dopisać atrybuty data z informacjami o wadze netto i brutto produktu w tagu otwierającym div (będą dwa takie divy). W pierwszym należy dopisać: data-weight="{{ supplyProduct.Weight }}" data-netweight="{{ supplyProduct.NetWeight}}" Cała linijka może wyglądać następująco: <div class="attribute-button-ui last-lvl-ui {% if supply.ValueId == key -%} active-lq {% endif -%} table-row-ui child-lq child-reload-lq parent-container-reload-lq expandable-mechanism-container-lq {% if supplyProduct.AskForPrice -%} ask-for-price-child-lq {% endif -%} {% if supplyProduct.AttributesEditable[0] or supplyProduct.AttributesPolyvalent[0] -%} higher-mobile-ui {% endif -%} {% if supplyProduct.SubtotalPreviousPrice != null and supplyProduct.SubtotalPreviousPrice > supplyProduct.SubtotalPrice -%} previous-with-units-ui {% endif -%}" data-url="{{ url }}?keys={{ dataKeys }}{% if unitId != null -%}&unit={{ unitId }}{% endif -%}" data-child-index="{{ forloop.index0 }}" data-supply-id="{{ supply.SupplyId }}" data-img="http:{{ page.BaseHref }}img/large/{{ supplyProduct.ImageId }}/.jpg" data-code="{{ supplyProduct.Code }}" data-weight="{{ supplyProduct.Weight }}" data-netweight="{{ supplyProduct.NetWeight}}"> W kolejnym divie należy dopisać data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight}}" Cała linijka może wyglądać następująco: <div class="attribute-button-ui last-lvl-ui child-lq table-row-ui attributes-list-ui expandable-mechanism-container-lq" data-child-index="{{ forloop.index0 }}" data-weight="{{ product.Weight }}" >data-netweight="{{ product.NetWeight}}"> Następnie w tym samym pliku należy wyszukać po frazie translations.Weight element listy, który zawiera informacje o wadze produktu ( znajdziesz trzy takie elementy ). Będą one wyglądać w ten sposób: {% if activeProduct.Weight != '' and activeProduct.Weight > 0 and attributesQuantity > 2 -%} <li> <div class="name-ui">{{ translations.Weight }}</div> <div class="value-ui">{{ activeProduct.Weight | Normalize }}{{ translations.Kg }}</div> </li> {% endif -%} Ten kod należy usunąć a następnie dodać poniższy (w obu znalezionych miejscach). {% if activeProduct.Weight != '' and activeProduct.Weight > 0 -%} <li> <div class="name-ui">{{ translations.Weight }}</div> <div class="value-ui weight-value-lq">{{ activeProduct.Weight | Normalize | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: 2 }}{{ translations.Kg }}</div> </li> {% endif -%} {% if activeProduct.NetWeight != '' and activeProduct.NetWeight > 0 -%} <li> <div class="name-ui">{{ translations.NetWeight }}</div> <div class="value-ui netweight-value-lq">{{ activeProduct.NetWeight | Normalize | DividedBy: product.BasicUnitRatio | Times: unitRatio | Round: 2 }}{{ translations.Kg }}</div> </li> {% endif -%} W tym samym pliku trzeba wyszukać frazę data-unit-ratio-info="{{unitRatioInfo}}". Powinieneś znaleźć dwie linie w kodzie. W każdej z nich należy dodać jeszcze jeden atrybut data oraz klasę unit-ratio-lq: class = "unit-ratio-lq" data-basic-unit-ratio="{{product.BasicUnitRatio}}" </code > Kolejnym krokiem będzie modyfikacja kodu w pliku js/init-ui1.js. Narzędziem wyszukiwania wyszukaj function saveChildsProps() . W funkcji saveChildProps() znajdziesz zainicjowane zmienne, których wartości pobierane są z atrubutów data. Pod nimi możemy dodać zmienne dotyczące wag. var weight = $(this).data('weight'); var netweight = $(this).data('netweight'); A następnie: if(typeof weight == 'string' && weight.indexOf(__decSep) !== -1){ weight = weight.replace(__decSep,'.'); weight = Number(weight); } if(typeof netweight == 'string' && netweight.indexOf(__decSep) !== -1){ netweight = netweight.replace(__decSep,'.'); netweight = Number(netweight); } W tej samej funkcji znajdziesz obiekt child. Należy do jego pól dopisać wagi: var child = { ... ... ... weight: weight, netweight: netweight }; Zaraz potem znajdziesz funkcję function loadChildsProps(). Pod linią: var childs = $('.child-lq'); należy dopisać poniższy kod: var attributes = $('.product-attributes-lq'); if($('.child-lq.active-lq').index() != -1){ var childIndex = $('.child-lq.active-lq').data('child-index'); } else { var childIndex = 0; } if(attributes.length > 0) { changeWeights(childIndex); } Ostatnim krokiem będzie stworzenie funkcji przeliczającej wagi. W tym samym pliku należy wkleić poniższy kod (np. pod funkcją function changePrices(){ ... }) : function changeWeights(index){ var basicUnitRatio = $('.unit-ratio-lq').data('basic-unit-ratio'); if(typeof(basicUnitRatio) == 'string' && basicUnitRatio.includes(',')){ basicUnitRatio = Number(basicUnitRatio.replace(',','.')); } if(window.childs[index]!=undefined){ var weight = window.childs[index].weight; if(window.childs[index].ratio!=undefined){ weight = (weight * window.childs[index].ratio / basicUnitRatio).toFixed(2); } $('.weight-value-lq').text(weight.toString().replace('.',',') + 'kg'); var netweight = window.childs[index].netweight; if(window.childs[index].ratio!=undefined){ netweight = (netweight * window.childs[index].ratio / basicUnitRatio).toFixed(2); } $('.netweight-value-lq').text(netweight.toString().replace('.',',') + 'kg'); } }
Bursztyn i Opal
W powyższych szablonach należy najpierw zmodyfikować plik productdetails.html. W pierwszej kolejności wyszukaj sekcję (section) o klasie technical-info. Należy w niej dopisać atrybuty data, zawierające informacje o wagach produktu. data-weight = "{{_pd.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{_pd.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}" Cała linijka może wówczas wyglądać następująco: <section class="technical-info col-sm-6" data-weight = "{{_pd.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{_pd.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}"> Zaraz pod tym znajdziesz element listy zawierający informacje o wadze: {% if _pd.Weight <> 0 and _pd.Weight <> "" %}<dt>{{translations.Com_Weight}}</dt><dd class="weight">{{_pd.Weight|Normalize}} {{translations.Com_UoMKg}}</dd>{% endif %} Ten fragment należy usunąć a wkleić poniższy zawierający informacje o wadze netto i brutto: <div class="weight-div {% if _pd.Weight == 0 or _pd.Weight == '' -%} hidden {% endif -%}"> <dt>{{translations.Com_Weight}}</dt><dd class="weight"><span class="weight-value">{{_pd.Weight|Normalize}}</span> {{translations.Com_UoMKg}}</dd> </div> <div class="net-weight-div {% if _pd.NetWeight == 0 or _pd.NetWeight == '' -%} hidden {% endif -%}"> <dt>{{translations.NetWeight}}</dt><dd class="net-weight"><span class="net-weight-value">{{_pd.NetWeight|Normalize}}</span> {{translations.Com_UoMKg}}</dd> </div> Teraz przejdź do pliku js/ details.js. W pierwszych liniach kodu znajdziesz zainicjowane zmienne. Należy do nich dopisać również: var technInfo = $('.technical-info'); Następnie wyszukaj frazę jednostka pomocnicza. Pod znalezionym komentarzem znajdziesz funkcję obsługującą zmianę elementu o id unitId. Pod linią zawierającą frazę prevPriceNode.data należy umieścić następujący kod: //weight var weight = technInfo.data('weight') / basicUnitRt * selectedRatio; var netWeight = technInfo.data('netweight') / basicUnitRt * selectedRatio; var weightNode = technInfo.find('.weight-value'); var netWeightNode = technInfo.find('.net-weight-value'); weightNode.text(weight); netWeightNode.text(netWeight); W ostatnim kroku narzędziem wyszukiwania znajdź funkcję function SetProduct(s,stock). Po kilku linijkach, przed instrukcją warunkową if (stock) umieść następujący kod: basicUnitRt = cnt.data('basicunitrt'); selectedRt = cnt.data('selectedrt'); var selectedUnit = cnt.data('selectedunit'); // weight technInfo.data('weight', s.Weight) if(ifUnits){ det.find('.technical-info .weight-value').text(s.Weight * priceUnitRt / basicUnitRt); } else{ det.find('.technical-info .weight-value').text(s.Weight); } if(s.Weight && s.Weight > 0){ $('.weight-div').removeClass('hidden'); } else { $('.weight-div').addClass('hidden'); } //net-weight technInfo.data('netweight', s.NetWeight); if(ifUnits){ det.find('.technical-info .net-weight-value').text(s.NetWeight * priceUnitRt / basicUnitRt); } else{ det.find('.technical-info .net-weight-value').text(s.NetWeight); } if(s.NetWeight && s.NetWeight > 0){ $('.net-weight-div').removeClass('hidden'); } else { $('.net-weight-div').addClass('hidden'); } Należy także usunąć z kodu w tym samym pliku linijkę det.find('.technical-info .weight').text(s.Weight+' kg');
Agat
W pliku partials/product/product-popup.html należy znaleźć input o id supplyId (pierwszy znaleziony) i wkleić atrybuty data: data-weight = "{{product.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{product.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}" Cała linijka może wyglądać następująco: <input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId" data-clip="1" data-parent-id="{{ product.Id }}" data-weight = "{{product.Weight | ToString | Replace: config.DecimalSeparator, '.'}}" data-netweight = "{{product.NetWeight | ToString | Replace: config.DecimalSeparator, '.'}}"/> Następnie w tym samym pliku wyszukaj frazę {% if product.Units[1] -%} . Pod nią znajdziesz div o klasie input-group. Pod tagiem otwierającym div wklej następujący kod: <input aria-label="initialWeight" type="hidden" name="initial-weight" value="{{ product.Weight }}"/> <input aria-label="initialNetWeight" type="hidden" name="initial-netweight" value="{{ product.NetWeight }}"/> Przejdź do pliku product-page.html. Należy wyszukać w nim div o klasie product-attributes. Wewnątrz niego znajdziesz input o nazwie "translations". Wklej do niego poniższy kod. data-netweight="{{ translations.NetWeight }}" Cała linijka może wyglądać następująco: <input aria-label="translations" type="hidden" name="translations" data-vat="{{ translations.Pps_VAT }}" data-weight="{{ translations.Pro_Weight }}" data-netweight="{{ translations.NetWeight }}" data-symbol="{{ translations.Pro_ProductSymbol }}" data-upc="{{ translations.Pro_UPC }}"> Następnie, kilka linii poniżej w liście ul znajdź fragment: {% if productD.Weight != '' -%} <li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ productD.Weight }}{{ translations.Com_kg }}</span></li> {% endif -%} Należy go usunąć. Zamiast niego wklej poniższy fragment: {% if productD.Weight != '' and productD.Weight != 0 -%} <li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ productD.Weight | Normalize }} {{ translations.Com_kg }}</span></li> {% endif -%} {% if productD.NetWeight != '' and productD.NetWeight != 0 -%} <li><span>{{ translations.NetWeight }}</span> <span class="net-weight-value">{{ productD.NetWeight | Normalize }} {{ translations.Com_kg }}</span></li> {% endif -%} Teraz przejdź do pliku js/init.js. Znajdziesz w nim warunek: if (spLast && spLast.Product) { , a kilka linijek poniżej: det.find('#supplyId').attr('data-weight', spLast.Product.Weight); Pod tą linijką należy dopisać obsługę wagi netto, czyli fragment: det.find('#supplyId').attr('data-netweight', spLast.Product.NetWeight); Kilkadziesiąt linii dalej znajdziesz warunek: if (s && s.Product) { Pod kodem det.find('#supplyId').attr('data-weight', s.Product.Weight); doklej det.find('#supplyId').attr('data-netweight', s.Product.NetWeight); W tym samym pliku znajdź funkcję changeValues: function(e) {. Wewnątrz instrukcji warunkowej: if ($(e.currentTarget).hasClass('unitId')) { pod koniec dopisz poniższy kod //recalulate weight if($('#supplyId').attr('data-weight')){ var calcWeight = Number(($('#supplyId').data('weight') / basicRatio * ratio).toFixed(2)); } else { var calcWeight = (Number($(e.currentTarget).parent().find('input[name="initial-weight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2); } $('.weight-value').text(calcWeight + ' kg'); //recalulate netweight if($('#supplyId').attr('data-netweight')){ var calcNetWeight = Number(($('#supplyId').data('netweight') / basicRatio * ratio).toFixed(2)); } else { var calcNetWeight = (Number($(e.currentTarget).parent().find('input[name="initial-netweight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2); } $('.net-weight-value').text(calcNetWeight + ' kg'); Następnie wyszukaj komentarz reload product attributes i wklej poniższy kod pod zainicjowanymi zmiennymi var basicRatio = Number($('input[name="basic-unit-ratio"]').val().replace(',', '.')); var weight = $('#supplyId').attr('data-weight') / basicRatio * ratio; var netWeight = $('#supplyId').attr('data-netweight') / basicRatio * ratio; var netweightTrans = translations.data('netweight'); //weight if ((weight == '' || weight == 0) && ul.find('.weight-value').index() >= 0) { $('.weight-value').parent().remove(); } else if (weight != '' && weight != 0) { if (ul.find('.weight-value').index() >= 0) { $('.weight-value').text(Number(weight.toFixed(2)) + ' kg'); } else { ul.append('<li><span>' + weightTrans + '</span> <span class="weight-value">' + weight + ' kg</span></li>'); } } //net-weight if ((netWeight == '' || netWeight == 0) && ul.find('.net-weight-value').index() >= 0) { $('.net-weight-value').parent().remove(); } else if (netWeight != '' && netWeight != 0) { if (ul.find('.net-weight-value').index() >= 0) { $('.net-weight-value').text(Number(netWeight.toFixed(2)) + ' kg'); } else { ul.append('<li><span>' + netweightTrans + '</span> <span class="net-weight-value">' + netWeight + ' kg</span></li>'); } } Na koniec należy usunąć z kodu w pliku poniższy fragment: if(weight == '' && ul.find('.weight-value').index() >= 0{ $('.weight-value').parent().remove(); } else if (weight != '') { if(ul.find('.weight-value').index()>=0 { $('.weight-value').text(weight + 'kg'); } else { ul.append('<li><span>' + weightTrans + '</span> <span class="weight-value">' + weight + 'kg</span></li>'); } }
Topaz

Wskazówka
Poniższa instrukcja jest uniwersalna dla obu wariantów widoku szczegółów towaru w szablonie Topaz. Jeśli chcesz dodać obsługę wag w pierwszym wariancie, należy zmodyfikować pliki src/assets/elements/productDetails/product-details1/html.js oraz src/assets/elements/productDetails/product-details1/js.js. Natomiast jeżeli chcesz dodać obsługę wag w drugim wariancie, należy zmodyfikować plikisrc/assets/elements/productDetails/product-details2/html.js oraz src/assets/elements/productDetails/product-details2/js.js
Na początku zmodyfikuj plik src/assets/elements/productDetails/product-details(1 lub 2)/html.js. Wyszukaj input o id supplyId i wklej do niego atrybuty data: data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight }}" Następnie około 35 linijek poniżej znajdziesz instrukcję warunkową {% if product.Units[1] -%} a pod nią div o klasie input-group. Będą się tam znajdować inputy o nazwie initial-.... Należy dopisać jeszcze dwa takie elementy widoczne poniżej: <input type="hidden" name="initial-weight" value="{{ product.Weight }}"/> <input type="hidden" name="initial-netweight" value="{{ product.NetWeight }}"/> Następnie wyszukaj div o klasie product-attributes. Tuż pod tagiem otwierającym znajdziesz input o nazwie translations. Należy dokleić do niego atrybut data: data-netweight = "{{ translations.NetWeight }} Kilka linii poniżej znajdziesz tag otwierający listę ul a w niej kawałek kodu wyglądający tak jak poniżej {% if product.Weight != '' and product.Weight != 0 -%} <li><span>{{ translations.Pro_Weight }}</span> <span class="weight-value">{{ product.Weight }} {{ translations.Com_kg }}</span></li> {% endif -%} Tuż pod nim wklej poniższy kod: {% if product.NetWeight != '' and product.NetWeight != 0 -%} <li><span>{{ translations.NetWeight }}</span> <span class="net-weight-value">{{ product.NetWeight }} {{ translations.Com_kg }}</span></li> {% endif -%} Kolejnym krokiem jest modyfikacja pliku js.js (w tym samym katalogu). Narzędziem wyszukiwania wyszukaj frazę spLast.Product.Weight. Pod linijką, która ją zawiera wklej poniższy kod: form.find('#supplyId').attr('data-netweight', spLast.Product.NetWeight); Następnie wyszukaj frazę s.Product.Weight. Pod znalezioną linią wklej poniższy kod: form.find('#supplyId').attr('data-netweight', s.Product.NetWeight); Podobnie wyszukaj frazę $('.quantity-field').trigger('change'); Pod znalezioną linijką znajdziesz klamrę zamykającą } . Tuż pod nią wklej poniższy kod: // weights if($('#supplyId').index>0){ var weight = (Number($('#supplyId').attr('data-weight').replace(',', '.')) / basicRatio * ratio).toFixed(2); var netweight = (Number($('#supplyId').attr('data-netweight').replace(',', '.')) / basicRatio * ratio).toFixed(2); } else { var weight = (Number($(e.currentTarget).parent().find('input[name="initial-weight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2); var netweight = (Number($(e.currentTarget).parent().find('input[name="initial-netweight"]').val().replace(',','.')) / basicRatio * ratio).toFixed(2); } $('.weight-value').text(weight + 'kg'); $('.net-weight-value').text(netweight + 'kg'); Wyszukaj frazę reload product attributes. Powinieneś znaleźć taki komentarz. Pod nim wklej poniższe linijki: var netweight = $('#supplyId').attr('data-netweight'); var netweightTrans = translations.data('netweight'); Około 50 linii dalej znajdziesz linię wyglądającą następująco: if (symbol == '' && ul.find('.symbol-value').index() >= 0) { Nad nią należy wkleić poniższy kod: if ((netweight == '' || netweight == 0) && ul.find('.net-weight-value').index() >= 0) { $('.net-weight-value').parent().remove(); } else if (netweight != '' && netweight != 0) { if (ul.find('.net-weight-value').index() >= 0) { $('.net-weight-value').text(netweight + 'kg'); } else { ul.append('<li><span>' + netweightTrans + '</span> <span class="net-weight-value">' + netweight + 'kg</span></li>'); } } // reload weights if ($('.unitId.active').index() >= 0) { var ratio = Number($('.unitId.active').next().attr('data-ratio').replace(',', '.')); } else { var ratio = Number($('input[name="basic-ratio"]').val().replace(',', '.')); } if ($('#supplyId').attr('data-weight') != '') { var weight = (Number($('#supplyId').attr('data-weight').replace(',', '.')) / basicratio * ratio).toFixed(2); $('.weight-value').text(weight + 'kg'); } if ($('#supplyId').attr('data-netweight') != '') { var netweight = (Number($('#supplyId').attr('data-netweight').replace(',', '.')) / basicratio * ratio).toFixed(2); $('.net-weight-value').text(netweight + 'kg'); Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.
Lista tłumaczeń:

Id: NetWeight , Tekst: Waga netto

Obsługa strony porównywania towarów w szablonie Szafir

W tym artykule dowiesz się jak dodać w szablonie Szafir stronę umożliwiającą porównywanie cech towarów.

Pierwszym modyfikowanym plikiem będzie __settings.liquid. Pierwsze dwie linijki pliku powinny wyglądać następująco:
{% case languageId %} {% when '1' %}
Tuż pod nimi umieść kod odpowiadający za polskie tłumaczenia:
{% assign productsComparison = "Porównywanie towarów" -%} {% assign compareProducts = "Pozwalaj na porównywanie towarów" -%}
Kolejne około 100-200 linii (w zależności od tego, jaką wersję teraz posiadasz) będzie zaczynało się od frazy {% assign ... . Następnie ujrzysz frazę {% else -%}, pod którą należy umieścić poniższy kod, odpowiadający za angielskie tłumaczenia.
{% assign productsComparison = "Products comparison" -%} {% assign compareProducts = "Allow for products comparison" -%}
Wyszukaj również frazę #lg-settings-content a. Nad znalezioną linią powinieneć widzieć tag <script> a nad nim tag zamykający </div> (jeden lub kilka), a nad nim(i) tag zamykający </fieldset>. Pod tagiem </fieldset> należy umieścić poniższy blok kodu.
<fieldset> <legend>{{productsComparison}}</legend> <section> <h3 class="section-title">{{compareProducts}}</h3> <div class="table"> <div class="trow"> <div class="tcell"> <input type="radio" name="compareProducts" value="yes" id="compareProducts-yes" {%="" if="" settings.compareproducts="=" 'yes'="" %}="" checked="" endif=""> <label class="label" for="compareProducts-yes">{{yesTranslation}}</label> </div> <div class="tcell"> <input type="radio" name="compareProducts" value="no" id="compareProducts-no" {%="" if="" settings.compareproducts="=" 'no'="" %}="" checked="" endif=""> <label class="label" for="compareProducts-no">{{noTranslation}}</label> </div> </div> </div> </section> </fieldset>
Kolejnym modyfikowanym plikiem będzie product/product-presentation-data.html. Narzędziem wyszukiwania należy wyszukać frazę page-title-ui.Nad znalezioną linią należy wkleić poniższy kod.
{% assign isInComparison = false -%} {% for itemId in customer.ComparisonToolItems -%} {% if itemId == product-presentation.Product.Id -%} {% assign isInComparison = true -%} {% endif -%} {% endfor -%} <div class="move-to-comparison-lq move-to-comparison-ui {% if customer.ComparisonToolItems == null or isInComparison == false-%} hidden-lq {% endif -%}"> <div class="compare-items-lq compare-items-ui"> {% for item in customer.ComparisonToolItems-%} <span class="comparison-item-icon-ui"></span> {% endfor -%} {% for i in (customer.ComparisonToolItems.size..3)-%} <span class="comparison-item-icon-ui available-ui"></span> {% endfor -%} </div> <a class="compare-ui btn-ui" href = "{{config.DefinedPages.ProductComparisonTool.Url}}">{{translations.Compare}}</a> </div>
Następnie należy wyszukać frazę product.Description != "" or. Do znalezionego warunku należy dopisać or settings.compareProducts == 'yes'. Cały warunek może wówczas wyglądać następująco:
{% if product.Description != "" or product.Attachments[0] or reviewsExist or setsExist or product.Related[0] or settings.compareProducts == 'yes' -%}
Następnie wyszukaj frazę product-presentation-menu-container-ui. Nad znalezioną linią wklej poniższy kod.
{% if settings.compareProducts == 'yes' -%} {% assign elementsQuantity = elementsQuantity | Plus:1 -%} {% endif -%}
Około 3 linie poniżej powinieneś znaleźć listę ul o klasie product-presentation-menu-ui. W tagu otwierającym należy dopisać atrybuty data
data-add-to-compare-translations = "{{translations.AddToCompare}}" data-delete-from-compare-translations = "{{translations.DeleteFromCompare}}"
Cała linia kodu może wyglądać następująco:
<ul class="product-presentation-menu-ui product-presentation-menu-lq attached-lq {% if elementsQuantity > 2 -%} more-elements-lq {% endif -%}" data-add-to-compare-translations = "{{translations.AddToCompare}}" data-delete-from-compare-translations = "{{translations.DeleteFromCompare}}">
Następnie wyszukaj frazę translations.RelatedProducts. Pod znalezioną linią powinieneś widzieć:
{% endif -%} </ul>
</ul> należy usunąć a zamiast tego tagu wkleić poniższy kod.
{% if settings.compareProducts == 'yes' and isInComparison == 'false' -%} <li class="add-to-comparison-lq add-to-comparison-ui"> <i class="ti-panel"></i> <span class="no-on-mobile-ui">{{ translations.AddToCompare }}</span><span class="mobile-ui">{{ translations.Compare }}</span> </li> {% endif -%} {% if settings.compareProducts == 'yes' and isInComparison == 'true' -%} <li class="delete-from-comparison-lq delete-from-comparison-ui"> <i class="ti-panel"></i> <span class="no-on-mobile-ui">{{ translations.DeleteFromCompare }}</span><span class="mobile-ui">{{ translations.Delete }}</span> </li> {% endif -%} </ul> <div class="hidden-lq add-to-compare-action-lq"> <input type="hidden" name="__action" value="Product/ComparisonToolAdd"/> <input type="hidden" name="productId" value="{{ product.Id }}"/> <input type="hidden" name="url" value="{{ page.BaseHref }}{{ config.DefinedPages.ProductComparisonTool.Url }}"/> </div> <div class="hidden-lq delete-from-compare-action-lq"> <input type="hidden" name="__action" value="Product/ComparisonToolDelete" /> <input type="hidden" name="productId" value="{{ product.Id }}"/> </div> <input class="comparison-items-count-lq hidden-lq" data-items-count="{{ customer.ComparisonToolItems | Size}}"> <div class="message-popup-background-ui after-adding-to-compare-popup-lq hidden-lq hide-lq container-to-hide-lq"> <div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-adding-to-cart-popup-container-lq"> <button aria-label="hide-container" class="btn-pure-ui close-ui hide-container-lq"> <i class="ti-close"></i> </button> <div class="box-ui product-added-to-compare-ui"> <span class="va-mid-ui line-height-1-ui"> <i class="va-mid-ui ti-check"></i> {{translations.AddedToCompare}} </span> </div> <div class="info-ui compare-info-ui"> <div > {{translations.2to4products}} </div> <div class="items-ui compare-items-lq"> {% for item in customer.ComparisonToolItems-%} <span class="comparison-item-icon-ui"></span> {% endfor -%} </div> <div class="compare-button-ui"> <a class="compare-ui btn-ui compare-button-lq {% if customer.ComparisonToolItems.size > 1 -%} hidden-lq {% endif -%}" href = "{{config.DefinedPages.ProductComparisonTool.Url}}">{{translations.Compare}}</a> </div> </div> </div> </div> <div class="message-popup-background-ui too-much-items-compare-popup-lq hidden-lq hide-lq container-to-hide-lq"> <div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-adding-to-cart-popup-container-lq"> <button aria-label="hide-container" class="btn-pure-ui close-ui hide-container-lq"> <i class="ti-close"></i> </button> <div class=" box-ui info-ui too-much-items-compare-ui "> <div > {{translations.TooMuchProductsInComparer}} </div> </div> </div> </div>
Teraz przejdź do pliku js/init-ui2.js. Należy w nim wkleić poniższy kod (można wkleić w pierwszej linii pliku).
//comparer functions var comparer = { addToComparison: function(e) { var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count'); var deleteFromCompareTranslation = $('.product-presentation-menu-lq').data('delete-from-compare-translations'); if(comparisonItemsCount < 4){ var data = $('.add-to-compare-action-lq').find('input').serializeArray(); data.push({name: "__csrf", value: __CSRF}); $.post(null, data, function (result) { if (result.action.Result) { $('.delete-from-comparison-lq').removeClass('hidden-lq'); $('.add-to-comparison-lq').addClass('hidden-lq'); comparisonItemsCount += 1; $('.comparison-items-count-lq').data('items-count', comparisonItemsCount) $('.move-to-comparison-lq').removeClass('hidden-lq'); $('.after-adding-to-compare-popup-lq').removeClass('hidden-lq'); itemsContent = ''; for( i=0; i<comparisonItemsCount; i++){ itemsContent += '<span class="comparison-item-icon-ui"></span>'; } for( i=comparisonItemsCount; i<4; i++){ itemsContent += '<span class="comparison-item-icon-ui available-ui"></span>'; } $('.compare-items-lq').html(itemsContent); if($(window).width() <= 1279){ $('.product-presentation-menu-lq').slick('unslick'); } $('.product-presentation-menu-lq li').last().remove(); $('.product-presentation-menu-lq').append('<li class="delete-from-comparison-lq delete-from-comparison-ui" ><i class="ti-panel"></i>' + deleteFromCompareTranslation + '</li>') if(comparisonItemsCount > 1 ) { $('.compare-button-lq').removeClass('hidden-lq'); } if($(window).width() <= 1279){ window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false }); } } }); } else { $('.too-much-items-compare-popup-lq').removeClass('hidden-lq'); } }, deleteFromComparison: function(e){ var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count'); var data = $('.delete-from-compare-action-lq').find('input').serializeArray(); data.push({name: "__csrf", value: __CSRF}); var addToCompareTranslation = $('.product-presentation-menu-lq').data('add-to-compare-translations'); $.post(null, data, function (result) { if (result.action.Result) { $('.delete-from-comparison-lq').addClass('hidden-lq'); $('.add-to-comparison-lq').removeClass('hidden-lq'); comparisonItemsCount -= 1; $('.comparison-items-count-lq').data('items-count', comparisonItemsCount); if(!comparisonItemsCount) { $('.move-to-comparison-lq').addClass('hidden-lq'); } itemsContent = ''; for( i=0; i<comparisonItemsCount; i++){ itemsContent += '<span class="comparison-item-icon-ui"></span>'; } for( i=comparisonItemsCount; i<4; i++){ itemsContent += '<span class="comparison-item-icon-ui available-ui"></span>'; } $('.compare-items-lq').html(itemsContent); if($(window).width() <= 1279){ $('.product-presentation-menu-lq').slick('unslick'); } $('.product-presentation-menu-lq li').last().remove(); $('.product-presentation-menu-lq').append('<li class="add-to-comparison-lq add-to-comparison-ui"><i class="ti-panel"></i>' + addToCompareTranslation + '</li>') if(comparisonItemsCount < 1 ) { $('.compare-button-lq').addClass('hidden-lq'); } if($(window).width() <= 1279){ window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false }); } } }); }, deleteFromComparisonSite: function(e) { var data = $(e.currentTarget).find('input').serializeArray(); data.push({name: "__csrf", value: __CSRF}); var id = $(e.currentTarget).find("input[name='productId']")[0].value; var comparisonItemsCount = $('.comparison-items-count-lq').data('items-count'); $.post(e, data, function (result) { if (result.action.Result) { comparisonItemsCount -= 1; if(comparisonItemsCount < 1 ) { $('.compare-button-lq').addClass('hidden-lq'); } location.reload(); } }); }, setCompareSlider: function(){ var windowWidth = $(window).width(); var amount = $('.comparison-items-count-lq').data('items-count'); if ((windowWidth <= 1279 )) { $(".compare-icons-arrow-lq").removeClass('hidden-lq'); $(".row-ui > .products-ui").addClass("comparer-slider-lq"); var slider = $('.comparer-slider-lq').slick({ infinite: true, slidesToShow: 2, slidesToScroll:1, draggable: false, autoplay: false, autoplaySpeed: 8000, arrows:false, swipe:false, responsive: [ { breakpoint: 1000, settings: { slidesToShow: 1, } } ] }); $(".itemPrev").on( "click", function() { slider.slick("slickPrev").delay(500); }); $(".itemNext").on( "click", function() { slider.slick("slickNext").delay( 500 ); }); } slider.slick('slickSetOption', 'infinite', false); var stickyTop = $('.comparer-header-ui .header-ui').offset().top; $(window).scroll(function() { var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { $('.comparer-header-ui .header-ui').addClass('sticky-lq') } else { $('.comparer-header-ui .header-ui').removeClass('sticky-lq') } }); } }
Następnie wyszukaj frazę product-presentation-menu-lq.more-elements-lq. Znajdziesz instrukcję warunkową if:
if($('.product-presentation-menu-lq.more-elements-lq').index() != -1) { window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false }); }
Kod ten należy usunąć i wkleić poniższy:
if(($('.product-presentation-menu-lq.more-elements-lq').index() != -1) && !($('.product-presentation-menu-lq').hasClass('slick-initialized')) ){ window.UIFeatures.initSlider('.product-presentation-menu-lq', { slidesToShow: 2.5, arrows: false, infinite: false, dots: false }); } if($('.comparer-lq').index() != -1) { comparer.setCompareSlider(); }
Wyszukaj frazę function adjustCategoryMenuToUrlBar(). Nad znalezioną linią wklej poniższy kod.
$('body').on('click', '.add-to-comparison-lq', function (e) { comparer.addToComparison(e); }); $('body').on('click', '.delete-from-comparison-lq', function (e) { comparer.deleteFromComparison(e); }); $('body').on('click', '.remove-from-compare-site-lq', function(e){ comparer.deleteFromComparisonSite(e); });
Kolejnym modyfikowanym plikiem będzie comparison-tool.html. Należy wkleić do pliku poniższy kod.
{% extends '_layout.html' -%} {% block pageContent -%} {% include 'product/comparison.html' -%} {% endblock -%}
Następnie w katalogu product należy utworzyć nowy plik i nazwać go comparison.html. Należy w nim umieścić poniższy kod.
{% assign productsInComparison = comparison-tool -%} {% assign products = comparison-tool.Products -%} {% assign attributes = comparison-tool.Attributes -%} {% if comparison-tool.Products.size > 0-%} <section class="container-ui comparer-header-ui"> <input type="hidden" class="comparison-items-count-lq" data-items-count={{products.size}}> <div class="product-presentation-breadcrumbs-ui border-bottom-ui breadcrumbs-in-comparison-ui"> {% include 'common/breadcrumbs.html' -%} </div> <div class="header-ui"> <h1 class="page-title-ui compare-title-ui">{{translations.ProductsComparison}}</h1> <div class="icons-ui btn-pure-ui hidden-lq compare-icons-arrow-lq"> <i class="itemPrev ti-angle-left"></i> <i class="itemNext ti-angle-right"></i> </div> </div> </section> <section class="container-ui comparer-ui comparer-lq"> <div class="row-ui first-row-ui"> <div class="column-ui property-ui white-space-ui"></div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui product-compare-info-ui"> <div class="remove-from-compare-site-lq remove-ui"> <i class="ti-trash"></i> {{translations.DeleteFromCompare}} <input type="hidden" name="__action" value="Product/ComparisonToolDelete" /> <input type="hidden" name="productId" value="{{ product.Id }}" /> </div> <div class="img-ui"> {% if product.ImageId == -1 -%} <div class="no-image-compare-ui"><i class="ti-image no-image-ui"></i></div> {% else -%} {{ product | Img:'large' }} {% endif -%} </div> <div class="prod-name-ui"> <a href="{{ product.Url }}">{{product.Name }}</a> </div> <div class="prod-price-ui"> <p class="price-ui compare-price-ui value-ui"> {{product.Price }} </p> <p class="price-ui compare-price-ui"> {{ customer.Currency}} </p> <small class="price-label-ui compare-brutto-ui">{{translations.Brutto | Downcase}}</small> </div> <div class="add-to-cart-compare-ui"> <a class="add-to-cart-ui" href="{{ product.Url }}"> {% if customer.Cart.EditedOrderId -%} <i class="ti-bag"></i> {% else -%} <i class="ti-shopping-cart"></i> {% endif -%} <span class="add-to-cart-label-ui add-to-cart-label-lq"> {% capture end -%} <span class="cart-name-lq"> {{ currentCartName }}</span>{% endcapture -%} {% assign cartsAmount = customer.Carts | Size -%} {% if customer.Cart.EditedOrderId or cartsAmount > 1 -%} {% unless customer.Cart.EditedOrderId -%} {{ translations.AddToCartSplittedWithName | Format: mid,end }} {% else -%} {% assign end = end | Prepend:mid -%} {{ translations.AddToOrderSplitted | Format: end }} {% endunless -%} {% else -%} {{ translations.AddToCartSplitted | Format: mid }} {% endif -%} </span> </a> </div> </div> {% endfor -%} </div> </div> <section class="compare-section-ui"> {% if config.Reviews.Enabled %} <div class="row-ui "> <div class="column-ui attr-name-ui property-ui"> {{translations.Rating}} </div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui attr-value-ui stars-ui"> {% for i in (1..5) -%} {% if product.Rating >= i -%} <img src="css/img/star.svg" alt="star"> {% else -%} <img src="css/img/star-o.svg" alt="star"> {% endif -%} {% endfor -%} <span class="rating-count-ui">({{ product.RatingCount }})</span> </div> {% endfor -%} </div> </div> {% endif -%} <div class="row-ui "> <div class="column-ui attr-name-ui property-ui"> {{translations.Availability}} </div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui attr-value-ui"> {{product.Availability.Text}} </div> {% endfor -%} </div> </div> </section> <section class="compare-section-ui"> <div class="name-of-property row-ui border-bottom-ui"> {{translations.BasicInformation}} </div> <div class="row-ui "> <div class="column-ui attr-name-ui property-ui"> {{translations.Manufacturer}} </div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui attr-value-ui"> {{product.Manufacturer.Name}} </div> {% endfor -%} </div> </div> <div class="row-ui"> <div class="column-ui attr-name-ui property-ui"> {{translations.Brand}} </div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui attr-value-ui"> {{product.Brand.Name}} </div> {% endfor -%} </div> </div> <div class="row-ui"> <div class="column-ui attr-name-ui property-ui"> {{translations.ManufacturerCode}} </div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui attr-value-ui"> {{product.ManufacturerCode}} </div> {% endfor -%} </div> </div> <div class="row-ui"> <div class="column-ui attr-name-ui property-ui"> {{translations.ProductCode}} </div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui attr-value-ui"> {{product.Code}} </div> {% endfor -%} </div> </div> <div class="row-ui"> <div class="column-ui attr-name-ui property-ui"> {{translations.VatTax}} </div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui attr-value-ui"> {{product.VAT | ToInt}}% </div> {% endfor -%} </div> </div> </section> {% if attributes != null -%} <section class="compare-section-ui"> <div class="name-of-property row-ui border-bottom-ui"> {{translations.TechnicalParameters}} </div> {% for i in attributes -%} <div class="row-ui"> <div class="column-ui attr-name-ui property-ui"> {{i}} </div> <div class="products-ui {%if products.size == 3-%} three-products-ui {% endif -%} {%if products.size < 3-%} two-products-ui {% endif -%} "> {% for product in products -%} <div class="column-ui attr-value-ui"> {% assign productAttr = product.Attributes[i]-%} {% if productAttr.size == 0 -%} - {% else -%} {% for attr in productAttr -%} {% if attr != productAttr.last-%} {{attr}}, {% else -%} {{attr}} {% endif -%} {% endfor -%} {% endif -%} </div> {% endfor -%} </div> </div> {% endfor -%} </section> {% endif -%} </section> {% else -%} <section class="container-ui comparer-header-ui"> <input type="hidden" class="comparison-items-count-lq" data-items-count={{products.size}}> <div class="product-presentation-breadcrumbs-ui border-bottom-ui breadcrumbs-in-comparison-ui"> {% include 'common/breadcrumbs.html' -%} </div> <div class="header-ui"> <h1 class="page-title-ui compare-title-ui">{{translations.ProductsComparison}}</h1> </div> <p>{{translations.NoProductsInComparer}}</p> </section> {% endif -%}
Teraz przejdź do katalogu css. W pliku desktop2.css w dowolnym miejscu wklej poniższy kod.
.move-to-comparison-ui { height: 80px; padding: 20px 13%; margin-top: 2px; width: 99.5vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background-color: #f6f6f6; display: flex; } @media (max-width: 1600px) { .move-to-comparison-ui { width: 99.3vw; padding: 20px 5%; } } .move-to-comparison-ui i { padding-right: 15px; } .move-to-comparison-ui .compare-items-ui .comparison-item-icon-ui { margin-right: 20px; width: 30px; height: 30px; margin-top: 5px; } .comparison-item-icon-ui { width: 40px; height: 40px; margin-right: 30px; -webkit-mask: url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%; mask: url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%; background-color: black; display: inline-block; } .comparison-item-icon-ui:last-child { margin-right: 0; } .comparison-item-icon-ui.available-ui { background-color: #d2d2d2; } .compare-ui { padding: 10px 0 10px 0; display: block; width: 300px; text-align: center; margin-left: 40px; } .product-added-to-compare-ui { font-size: 18px; font-weight: 500; text-align: center; padding: 50px 80px 0 40px; background: {{settings.bgColor}}; } .product-added-to-compare-ui .ti-check { color: #68a204; font-size: 30px; margin-right: 10px; } .product-added-to-compare-ui + .info-ui { padding: 25px; } .product-added-to-compare-ui + .info-ui.compare-info-ui { text-align: center; } .product-added-to-compare-ui + .info-ui .compare-button-ui a { margin-left: auto; margin-right: auto; } .product-added-to-compare-ui + .info-ui .items-ui { width: 260px; margin-left: auto; margin-right: auto; text-align: left; padding: 30px 0; } .too-much-items-compare-ui { padding: 30px; } .comparer-header-ui .header-ui { height: 70px; } .delete-from-comparison-ui { color: #7FBA01; float: left; } .delete-from-comparison-ui i { padding-right: 5px; } .add-to-comparison-ui { float: left; } .add-to-comparison-ui i { padding-right: 5px; } .breadcrumbs-in-comparison-ui { width: 100%; } .compare-title-ui { padding: 25px 0; margin: 15px 0 30px; font-size: 28px; color: {{settings.primaryColorFont}}; line-height: 1.2; } .comparer-ui { margin-bottom: 30px; } .comparer-ui .column-ui { margin-left: 35px; } .comparer-ui .column-ui.property-ui { margin-left: 0; } .comparer-ui .row-ui { display: flex; } .comparer-ui .row-ui .products-ui { display: flex; width: 80%; } .comparer-ui .row-ui .products-ui:last-child { margin-right: 0; } .comparer-ui .row-ui .products-ui .column-ui { width: 25%; } .comparer-ui .row-ui .products-ui .column-ui.stars-ui .rating-count-ui { position: relative; top: -2px; } .comparer-ui .row-ui .products-ui .column-ui.stars-ui img { width: 15px; height: 15px; } .comparer-ui .row-ui .products-ui.three-products-ui .column-ui { width: 33%; } .comparer-ui .row-ui .products-ui.two-products-ui .column-ui { width: 50%; } .comparer-ui .property-ui { min-width: 20%; } .comparer-ui .product-compare-info-ui { margin-bottom: 30px; } .comparer-ui .product-compare-info-ui .remove-ui { cursor: pointer; padding: 0 0 16px 0; color: #004B88; float: right; } .comparer-ui .product-compare-info-ui .img-ui { clear: both; height: 250px; width: 100%; text-align: center; } .comparer-ui .product-compare-info-ui .img-ui .no-image-compare-ui { padding-top: 70px; } .comparer-ui .product-compare-info-ui .img-ui img:not([src="css/img/alo.gif"]) { width: 100% !important; height: 200px !important; object-fit: contain !important; } .comparer-ui .product-compare-info-ui .prod-name-ui { color: #004B88; font-size: 18px; overflow: hidden; height: 30px; text-overflow: ellipsis; white-space: nowrap; } .comparer-ui .product-compare-info-ui .prod-price-ui { display: flex; margin-top: 10px; } .comparer-ui .product-compare-info-ui .prod-price-ui .compare-price-ui { font-size: 22px; margin: 0; } .comparer-ui .product-compare-info-ui .prod-price-ui .compare-price-ui.value-ui { margin-right: 7px; } .comparer-ui .product-compare-info-ui .prod-price-ui .compare-brutto-ui { font-size: 12px; line-height: 2.5em; margin-left: 15px; } .comparer-ui .product-compare-info-ui .add-to-cart-compare-ui { width: 100%; display: block; } .comparer-ui .product-compare-info-ui .add-to-cart-compare-ui a, .comparer-ui .product-compare-info-ui .add-to-cart-compare-ui button { text-align: center; width: 100%; padding: 10px; min-height: auto; margin-top: 20px; } .comparer-ui .name-of-property { font-size: 14px; font-weight: 600; background-color: white !important; padding: 7px; padding-left: 0; margin-top: 10px; } .comparer-ui section.compare-section-ui .row-ui:nth-child(odd) { background-color: #f8f8f8; } .comparer-ui .attr-name-ui { font-size: 14px; padding: 7px; } .comparer-ui .attr-value-ui { font-size: 14px; width: 330px; padding: 7px; margin-right: 35px; } .comparer-header-ui .sticky-lq { position: fixed; z-index: 10; width: 100%; top: 0; border-bottom: 1px solid {{settings.lightBorderColor}}; }
W pliku mobile.css należy na końcu pliku dodać poniższy kod.
@media only screen and (max-width: 1279px) { .comparer-ui { padding: 0; } .comparer-ui .column-ui { width: 80% !important; } .comparer-ui .remove-ui { padding-top: 20px !important; } .comparer-ui .stars-ui img { display: inline-block; } .comparer-ui .name-of-property { display: none; } .comparer-ui .property-ui { border-right: 1px solid {{settings.lightBorderColor}}; min-width: 20%; max-width: 20%; } .comparer-ui .first-row-ui { border-bottom: 1px solid {{settings.lightBorderColor}}; border-top: 1px solid {{settings.lightBorderColor}}; } .comparer-header-ui { padding: 0; } .comparer-header-ui h1 { padding: 20px; margin-bottom: 0; font-size: 16px; } .comparer-header-ui .header-ui { padding-left: 20px; display: flex; height: 70px; } .comparer-header-ui .header-ui .icons-ui { width: 30%; display: flex; justify-content: space-between; margin: 20px auto 30px auto; } } @media (max-width: 500px) { .comparer-ui .column-ui { width: 75% !important; } .comparer-ui .property-ui { min-width: 25% !important; max-width: 25% !important; overflow: scroll !important; } } @media (max-width: 650px) { .move-to-comparison-ui .compare-items-ui .comparison-item-icon-ui { width: 15px !important; height: 15px !important; margin-right: 10px !important; } .move-to-comparison-ui .compare-ui { width: 50% !important; margin-left: 10px !important; } }
Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Lista tłumaczeń:

Id: DeleteFromCompare ,Tekst: Usuń z porównania

Id: AddToCompare, Tekst: Dodaj do porównania

Id: AddedToCompare, Tekst: Dodano do listy porównania

Id: 2to4products, Tekst: Możesz dodać od 2 do 4 produktów

Id: Rating, Tekst: Ocena

Id: BasicInformation, Tekst: Informacje podstawowe

Id: TechnicalParameters, Tekst: Parametry techniczne

Id: ProductsComparison, Tekst: Porównywanie towarów

Id: NoProductsInComparer, Tekst: Nie wybrano żadnych towarów do porównania

Id: TooMuchProductsInComparer, Tekst: Możesz dodać maksymalnie 4 produkty

Obsługa prezentacji wymiarów towaru dla wskazanej jednostki miary

Wskazówka

W tym artykule dowiesz się jak umożliwić wyświetlanie wymiarów towarów w zależności od wybranej jednostki miary w szablonach Szafir, Bursztyn, Opal, Agat, Topaz.
Szafir
W pierwszej kolejności dokonaj zmian w pliku product-presentation-data.html. W narzędziu wyszukiwania wyszukaj frazę if unit.Id == unitId. Powinieneś znaleźć kilka wyników, jednak interesuje Cię tylko ten pierwszy. Tuż pod nim wklej poniższy fragment. {% assign unitDimensions = unit.Dimensions-%} Następnie wyszukaj frazę if unit.Default == true or unit.Id == null. Linia w kodzie, który znalazłeś powinna być około 10 linii pod tą, którą przed chwilą zmieniałeś. Tuż pod nią wklej poniższy kod. {% assign unitDimensions = unit.Dimensions-%} Następnie należy wyszukać frazę data-ratio. Znajdziesz prawdopodobnie dwa wyniki, jednak również interesuje Cię ten pierwszy. Pod linią, którą znajdziesz i która będzie rozpoczęta słowem <option powinieneś znaleźć linię {% endfor -%} a pod nią </select>. Pod linią </select> należy wpisać poniższy kod. <input class="dimensions-lq" type="hidden" {% for unit in product.Units -%} {% assign dimensionsByUnitIndex = unit.Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByUnitIndex.Height}}|{{dimensionsByUnitIndex.Length}}|{{dimensionsByUnitIndex.Width}}" {% endfor -%}> Potem w tym samym pliku wyszukaj frazę if activeProduct.Attributes[limitIndex]. Nad znalezionym wynikiem powinieneś widzieć {% if tableView -%} a powyżej </ul> oraz {% endif -%}. Nad linią {% endif -%} i poniżej linii {% endfor -%} wklej poniższy kod. {% if activeProduct.Attributes.size < 4-%} <li class="dimensions-height {% if unitDimensions == null or unitDimensions.Height == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Height }}</div> <div class="value-ui">{{unitDimensions.Height }} cm</div> </li> <li class="dimensions-length {% if unitDimensions == null or unitDimensions.Length == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Length }}</div> <div class="value-ui">{{unitDimensions.Length}} cm</div> </li> <li class="dimensions-width {% if unitDimensions == null or unitDimensions.Width == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Width }}</div> <div class="value-ui">{{unitDimensions.Width}} cm</div> </li> {% endif -%} Teraz wyzukaj frazę downloads-ui. Nad znalezioną linią powinieneś znaleźć poniższy kawałek kodu. </ul> </div> {% if product.Attachments[0] -%} Nad tagiem zamykającym </ul> wklej poniższy kod. <li class="dimensions-height-lq {% if unitDimensions == null or unitDimensions.Height == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Height }}</div> <div class="value-ui height-value-lq">{{unitDimensions.Height }} cm</div> </li> <li class="dimensions-length-lq {% if unitDimensions == null or unitDimensions.Length == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Length }}</div> <div class="value-ui length-value-lq">{{unitDimensions.Length}} cm</div> </li> <li class="dimensions-width-lq {% if unitDimensions == null or unitDimensions.Width == 0 -%} hidden-lq {% endif -%}"> <div class="name-ui">{{ translations.Width }}</div> <div class="value-ui width-value-lq">{{unitDimensions.Width}} cm</div> </li> Teraz przejdź do pliku init-ui1.js. Należy wyszukać frazę function loadChildsProps() . Pod pierwszą linijką (która będzie się zaczynać od słów var childs) należy wkleić poniższy kod. if($('.child-lq.active-lq').index() != -1){ var childIndex = $('.child-lq.active-lq').data('child-index'); } else { var childIndex = 0; } var childUnit = window.childs[childIndex].unit; if($('.dimensions-lq').index() != -1) { changeDimensions(childUnit); } Następnie wyszukaj frazę changePrices(child, index);. Nad znalezioną linią wklej poniższy kod. var childUnit = $('.child-lq.active-lq select').val(); if($('.dimensions-lq').index() != -1) { changeDimensions(childUnit); } W ostatnim kroku należy zaimplementować funkcję odpowiadającą za zmianę wymiarów w zależności od wybranej jednostki. W dowolnym miejscu w pliku (może być powyżej funkcji function changePrices(child, index), która znajduje się kilka linii poniżej) należy wkleić poniższy kod. function changeDimensions(childUnit){ // dimensions var selectedUnitDimensions = $('.dimensions-lq').attr('data-unit'+childUnit) if(selectedUnitDimensions != '||' ){ var selectedUnitDimensionsArr = selectedUnitDimensions.split('|'); var height = selectedUnitDimensionsArr[0]; var length = selectedUnitDimensionsArr[1]; var width = selectedUnitDimensionsArr[2]; if(height != 0){ $('.height-value-lq').text(height + ' cm'); $('.dimensions-height-lq').removeClass('hidden-lq'); } else { $('.dimensions-height-lq').addClass('hidden-lq'); } if(length != 0){ $('.length-value-lq').text(length + ' cm'); $('.dimensions-length-lq').removeClass('hidden-lq'); } else { $('.dimensions-length-lq').addClass('hidden-lq'); } if(width != 0){ $('.width-value-lq').text(width + ' cm'); $('.dimensions-width-lq').removeClass('hidden-lq'); } else { $('.dimensions-width-lq').addClass('hidden-lq'); } } }
Bursztyn
Pierwszym zmienianym plikiem będzie plik productdetails.html. Po kilku pierwszych linijkach kodu powinieneś zauważyć kod wyglądający w ten sposób. {% for u in _pd.Units -%} {% if u.Default -%} {% assign defaultUnitRatio = u.Ratio -%} {% assign defaultUnitName = u.Name -%} {% endif -%} {% endfor -%} Kod ten należy usunąć a wstawić poniższy. {% assign unitsCount = _pd.Units | Size -%} {% if unitsCount > 1 -%} {% for u in _pd.Units -%} {% if u.Default or u.Id == null -%} {% assign defaultUnitRatio = u.Ratio -%} {% assign defaultUnitName = u.Name -%} {% assign dimensions = u.Dimensions -%} {% endif -%} {% endfor -%} {% else -%} {% assign dimensions = _pd.Units[0].Dimensions -%} {% endif -%} Następnie wyszukaj frazę if attr. Pod znalezioną linią powinieneś widzień linię {% endfor -%}. Pod tą linią należy wkleić poniższy kod. <input class="dimensions-lq" type="hidden" {% for unit in _pd.Units -%} {% assign dimensionsByIndex = _pd.Units[forloop.index0].Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByIndex.Height}}|{{dimensionsByIndex.Length}}|{{dimensionsByIndex.Width}}" {% endfor -%}> {% if dimensions.Height == 0 and dimensions.Width == 0 and dimensions.Length == 0 -%} {% assign noDimensions = true -%} {% endif -%} <div class="dimensions {% if dimensions == null or noDimensions -%} hidden {% endif -%} "> <div class="dimensions-height {% if dimensions.Height == 0 -%} hidden {% endif -%}"><dt>{{translations.Height}}</dt><dd class=" dimensions-height-value">{{dimensions.Height}} cm</dd></div> <div class="dimensions-length {% if dimensions.Length == 0 -%} hidden {% endif -%}"><dt>{{translations.Length}}</dt><dd class=" dimensions-length-value">{{dimensions.Length}} cm</dd></div> <div class="dimensions-width {% if dimensions.Width == 0 -%} hidden {% endif -%}"><dt>{{translations.Width}}</dt><dd class=" dimensions-width-value">{{dimensions.Width}} cm</dd></div> </div> Teraz przejdź do pliku js/details.js. Wyszukaj frazę if (prevPrice. Nad znalezioną linią wklej poniższy kod. var unitId = $('option:selected', this)[0].value; var selectedDimension = $('.dimensions-lq').attr('data-unit'+unitId) if(selectedDimension != '||' && selectedDimension != '0|0|0' ){ ($('.dimensions').removeClass('hidden')) var selectedDimensionArr = selectedDimension.split('|'); var height = selectedDimensionArr[0]; var length = selectedDimensionArr[1]; var width = selectedDimensionArr[2]; if(height != 0){ $('.dimensions-height-value').text(height + ' cm'); $('.dimensions-height').removeClass('hidden'); } else { $('.dimensions-height').addClass('hidden'); } if(length != 0){ $('.dimensions-length-value').text(length + ' cm'); $('.dimensions-length').removeClass('hidden'); } else { $('.dimensions-length').addClass('hidden'); } if(width != 0){ $('.dimensions-width-value').text(width + ' cm'); $('.dimensions-width').removeClass('hidden'); } else { $('.dimensions-width').addClass('hidden'); } } else{ ($('.dimensions').addClass('hidden')) }
Opal
Pierwszym zmienianym plikiem będzie plik productdetails.html. Po kilku pierwszych linijkach kodu powinieneś zauważyć kod wyglądający w ten sposób. {% assign unitsCount = _pd.Units | Size -%} {% if unitsCount > 1 -%} {% assign defaultUnitRatio = _pd.Units[0].Ratio -%} {% assign defaultUnitName = _pd.Units[0].Name -%} {% endif -%} Kod ten należy usunąć a wstawić poniższy. {% assign unitsCount = _pd.Units | Size -%} {% if unitsCount > 1 -%} {% assign defaultUnitRatio = _pd.Units[0].Ratio -%} {% assign defaultUnitName = _pd.Units[0].Name -%} {% assign defaultUnitId = _pd.Units[0].Id-%} {% for unit in product.Units -%} {% if unit.Default or unit.Id == null -%} {% assign dimensions = unit.Dimensions -%} {% assign defaultUnitId = unit.Id-%} {% endif -%} {% endfor -%} {% else -%} {% assign dimensions = _pd.Units[0].Dimensions-%} {% endif -%} Następnie wyszukaj frazę if attr. Pod znalezioną linią powinieneś widzieć linię {% endfor -%}. Pod tą linią należy wkleić poniższy kod. <input class="dimensions-lq" type="hidden" {% for unit in _pd.Units -%} {% assign dimensionsByIndex = _pd.Units[forloop.index0].Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByIndex.Height}}|{{dimensionsByIndex.Length}}|{{dimensionsByIndex.Width}}" {% endfor -%}> {% if dimensions.Height == 0 and dimensions.Width == 0 and dimensions.Length == 0 -%} {% assign noDimensions = true -%} {% endif -%} <div class="dimensions {% if dimensions == null or noDimensions -%} hidden {% endif -%} "> <div class="dimensions-height {% if dimensions.Height == 0 -%} hidden {% endif -%}"><dt>{{translations.Height}}</dt><dd class=" dimensions-height-value">{{dimensions.Height}} cm</dd></div> <div class="dimensions-length {% if dimensions.Length == 0 -%} hidden {% endif -%}"><dt>{{translations.Length}}</dt><dd class=" dimensions-length-value">{{dimensions.Length}} cm</dd></div> <div class="dimensions-width {% if dimensions.Width == 0 -%} hidden {% endif -%}"><dt>{{translations.Width}}</dt><dd class=" dimensions-width-value">{{dimensions.Width}} cm</dd></div> </div> Teraz przejdź do pliku js/details.js. Wyszukaj frazę if (prevPrice. Nad znalezioną linią wklej poniższy kod. //wymiary var unitId = $('option:selected', this)[0].value; var selectedDimension = $('.dimensions-lq').attr('data-unit'+unitId) if(selectedDimension != '||' && selectedDimension != '0|0|0' ){ ($('.dimensions').removeClass('hidden')) var selectedDimensionArr = selectedDimension.split('|'); var height = selectedDimensionArr[0]; var length = selectedDimensionArr[1]; var width = selectedDimensionArr[2]; if(height != 0){ $('.dimensions-height-value').text(height + ' cm'); $('.dimensions-height').removeClass('hidden'); } else { $('.dimensions-height').addClass('hidden'); } if(length != 0){ $('.dimensions-length-value').text(length + ' cm'); $('.dimensions-length').removeClass('hidden'); } else { $('.dimensions-length').addClass('hidden'); } if(width != 0){ $('.dimensions-width-value').text(width + ' cm'); $('.dimensions-width').removeClass('hidden'); } else { $('.dimensions-width').addClass('hidden'); } } else{ ($('.dimensions').addClass('hidden')) }
Agat
Pierwszym modyfikowanym plikiem w szablonie Agat będzie product-page.html. Po kilku pierwszych linijkach kodu, przed <section class="product-details"> należy wstawić poniższy fragment. {% assign unitsCount = productD.Units | Size -%} {% if unitsCount > 1 -%} {% for u in productD.Units -%} {% if u.Default or u.Id == null -%} {% assign dimensions = u.Dimensions -%} {% endif -%} {% endfor -%} {% else -%} {% assign dimensions = productD.Units[0].Dimensions -%} {% endif -%} Następnie wyszukaj frazę if productD.UPC. Pod znalezioną linią powinieneś znaleźć linię zaczynającą się od < li a pod nią {% endif -%}. Pod tym fragmentem wklej poniższy kod. <li class="dimensions-height {% if dimensions == null or dimensions.Height == 0 -%} hidden {% endif -%}"><span>{{ translations.Height }}</span> <span class="dimensions-height-value" >{{ dimensions.Height }} cm</span></li> <li class="dimensions-length {% if dimensions == null or dimensions.Length == 0 -%} hidden {% endif -%}"><span>{{ translations.Length }}</span> <span class="dimensions-length-value" >{{ dimensions.Length }} cm</span></li> <li class="dimensions-width {% if dimensions == null or dimensions.Width == 0 -%} hidden {% endif -%}"><span>{{ translations.Width }}</span> <span class="dimensions-width-value" >{{ dimensions.Width }} cm</span></li> Kolejnym zmienianym plikiem będzie partials/product/product-popup.html. Wyszukaj frazę {{ unit.Id }}. Prawdopodobnie znajdziesz dwa wyniki, ale interesuje Cię ten drugi. Pod wyszukaną linią powinieneś widzieć linię {% endfor -%}. Pod nią należy wkleić poniższy kod. <input class="dimensions" type="hidden" {% for unit in product.Units -%} {% assign dimensionsByIndex = unit.Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByIndex.Height}}|{{dimensionsByIndex.Length}}|{{dimensionsByIndex.Width}}" {% endfor -%}> W ostatnim kroku przejdź do katalogu js/init.js. Wyszukaj frazę $(e.currentTarget).hasClass('attributeId'). Nad nią należy wkleić poniższy kod. var unitId = $(e.currentTarget).next().val(); // dimensions var selectedUnitDimensions = $('.dimensions').attr('data-unit'+unitId) if(selectedUnitDimensions != '||' ){ var selectedUnitDimensionsArr = selectedUnitDimensions.split('|'); var height = selectedUnitDimensionsArr[0]; var length = selectedUnitDimensionsArr[1]; var width = selectedUnitDimensionsArr[2]; if(height != 0){ $('.dimensions-height-value').text(height + ' cm'); $('.dimensions-height').removeClass('hidden'); } else { $('.dimensions-height').addClass('hidden'); } if(length != 0){ $('.dimensions-length-value').text(length + ' cm'); $('.dimensions-length').removeClass('hidden'); } else { $('.dimensions-length').addClass('hidden'); } if(width != 0){ $('.dimensions-width-value').text(width + ' cm'); $('.dimensions-width').removeClass('hidden'); } else { $('.dimensions-width').addClass('hidden'); } }
Topaz

Wskazówka
Poniższa instrukcja jest uniwersalna dla obu wariantów widoku szczegółów towaru w szablonie Topaz. Jeśli chcesz dodać obsługę wag w pierwszym wariancie, należy zmodyfikować pliki src/assets/elements/productDetails/product-details1/html.js oraz src/assets/elements/productDetails/product-details1/js.js. Natomiast jeżeli chcesz dodać obsługę wag w drugim wariancie, należy zmodyfikować plikisrc/assets/elements/productDetails/product-details2/html.js oraz src/assets/elements/productDetails/product-details2/js.js
Na początku zmodyfikuj plik html.js. Należy wyszukać frazę productDetails-js. Nad znalezioną linią wklej poniższy kod. {% for unit in product.Units -%} {% if unit.Default or unit.Id == null -%} {% assign defaultUnitDimensions = unit.Dimensions -%} {% endif -%} {% endfor -%} Następnie wyszukaj frazę if product.UPC. Pod znalezioną linią powinieneś znaleźć linię zaczynającą się od < li a pod nią {% endif -%}. Pod tym fragmentem wklej poniższy kod. <li class="dimensions-height {% if defaultUnitDimensions == null or defaultUnitDimensions.Height == 0 -%} hidden {% endif -%}"> <span>{{ translations.Height }}</span> <span class="height-value">{{defaultUnitDimensions.Height }} cm</span> </li> <li class="dimensions-length {% if defaultUnitDimensions == null or defaultUnitDimensions.Length == 0 -%} hidden {% endif -%}"> <span>{{ translations.Length }}</span> <span class="length-value">{{defaultUnitDimensions.Length}} cm</span> </li> <li class="dimensions-width {% if defaultUnitDimensions == null or defaultUnitDimensions.Width == 0 -%} hidden {% endif -%}"> <span>{{ translations.Width }}</span> <span class="width-value">{{defaultUnitDimensions.Width}} cm</span> </li> <input class="dimensions-lq" type="hidden" {% for unit in product.Units -%} {% assign dimensionsByUnitIndex = unit.Dimensions -%} data-unit{{unit.Id}}="{{dimensionsByUnitIndex.Height}}|{{dimensionsByUnitIndex.Length}}|{{dimensionsByUnitIndex.Width}}" {% endfor -%}> Następnie wuszukaj frazę else if ($('#supplyId').attr('data-clip'). Nad znalezioną linią wklej poniższy kod. // dimensions var unitId = $(e.currentTarget).next().val(); var selectedUnitDimensions = $('.dimensions-lq').attr('data-unit'+unitId); if(selectedUnitDimensions != '||' ){ var selectedUnitDimensionsArr = selectedUnitDimensions.split('|'); var height = selectedUnitDimensionsArr[0]; var length = selectedUnitDimensionsArr[1]; var width = selectedUnitDimensionsArr[2]; if(height != 0){ $('.height-value').text(height + ' cm'); $('.dimensions-height').removeClass('hidden'); } else { $('.dimensions-height').addClass('hidden'); } if(length != 0){ $('.length-value').text(length + ' cm'); $('.dimensions-length').removeClass('hidden'); } else { $('.dimensions-length').addClass('hidden'); } if(width != 0){ $('.width-value').text(width + ' cm'); $('.dimensions-width').removeClass('hidden'); } else { $('.dimensions-width').addClass('hidden'); } } Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.
Lista tłumaczeń:

Id: Height ,Tekst: Wysokość

Id: Length ,Tekst: Długość

Id: Width ,Tekst: Szerokość

Obsługa prezentacji informacji o limicie kredytowym w szablonie Szafir

W tym artykule dowiesz się jak dodać do szablonu Szafir informacje o limicie kredytowym w nagłówku strony. W tym celu należy zmodyfikować plik common/header/header-top-bar.html. Przejdź do końca pliku. Ostatnie dwie linijki powinny wyglądać następująco: </ul> </div> Przed nimi należy wstawić następujący kod: {% if customer.CreditLimit.OverdueUsed > 0 -%} <li class="f-right-ui"> <div class="label-ui">{{translations.OverduePayments}}:</div> {{customer.CreditLimit.OverdueUsed}} {{customer.Currency}} </li> {% endif -%} {% if customer.CreditLimit.Left > 0 -%} <li class="f-right-ui"> <div class="label-ui">{{translations.CreditLeft}}:</div> {{customer.CreditLimit.Left}} {{customer.Currency}} </li> {% endif -%} {% if customer.CreditLimit.Value > 0 -%} <li class="f-right-ui"> <div class="label-ui">{{translations.LimitGranted}}:</div> {{customer.CreditLimit.Value}} {{customer.Currency}} </li> {% endif -%}

Obsługa drugiej wersji widoku bloga na stronie głównej w szablonie Szafir

W tym artykule dowiesz się jak dodać drugą wersję widoku bloga na stronie głównej w szablonie Szafir - powiększone kafle z większą ilością tekstu. Od wersji 2020.3 w standardowym szablonie Szafir dostępne są dwie wersje widoku bloga. Poniższa instrukcja dedykowana jest dla szablonów starszych lub modyfikowanych. W pierwszej kolejności należy zmodyfikować plik __settings.liquid. Pierwsze dwie linijki w pliku powinny wyglądać następująco: {% case languageId %} {% when '1' %} Kolejne 100-200 linii (w zależności od posiadanej przez Ciebie wersji sklepu) będą zaczynać się od frazy {% assign. Następnie zauważysz linię {% else %}. Przed linią {% else %} należy wkleić poniższy kod. {% assign blogOnHomepage = "Blog na stronie głównej" -%} {% assign blogPresentationOnHomepage = "Prezentacja bloga na stronie głównej" -%} {% assign extended = "Rozszerzony" -%} {% assign compact = "Kompaktowy" -%} Po linii {% else %} znów zauważysz 100-200 linii zaczynających się od frazy {% assign, a następnie linię {% endcase %}. Przed linią {% endcase %} należy wkleić poniższy kod. {% assign blogOnHomepage = "Blog on homepage" -%} {% assign blogPresentationOnHomepage = "Blog presentation on homepage" -%} {% assign extended = "Extended" -%} {% assign compact = "Compact" -%} Następnie wyszukaj frazę #lg-settings-content a.Nad znalezioną linią powinieneś zauważyć tag <script> a nad nią tag </div> (jeden lub dwa). Nad nimi powinieneś widzieć tag </fieldset>. Pod tagiem </fieldset> umieść następujący kod. <fieldset> <legend>{{blogOnHomepage}}</legend> <section> <h3 class="section-title">{{blogPresentationOnHomepage}}</h3> <div class="table"> <div class="trow"> <div class="tcell"> <input type="radio" name="blogPresentationOnHomepage" value="extended" id="blogPresentationOnHomepage-extended" {%="" if="" settings.blogpresentationonhomepage="=" 'extended'="" %}="" checked="" endif=""> <label class="label" for="blogPresentationOnHomepage-extended">{{extended}}</label> </div> <div class="tcell"> <input type="radio" name="blogPresentationOnHomepage" value="compact" id="blogPresentationOnHomepage-compact" {%="" if="" settings.blogpresentationonhomepage="=" 'compact'="" %}="" checked="" endif=""> <label class="label" for="blogPresentationOnHomepage-compact">{{compact}}</label> </div> </div> </div> </section> </fieldset> Następnie przejdź do pliku blog/blog-news-partial.html. Usuń pierwszą linię kodu i wklej poniższy. <div class="blog-posts-slider-lq blog-posts-slider-ui {% if settings.blogPresentationOnHomepage == 'extended' %} extended-ui {% endif -%}"> Następnie wyszukaj frazę <time. Znalezioną linię usuń i w tym miejscu wklej poniższy kod. {% if settings.blogPresentationOnHomepage == 'extended' %} <div class="blog-publication-date-ui">{{post.Content}}</div> {% else -%} <time class="blog-publication-date-ui">{{post.PublishedDate}}</time> {% endif -%} Ostatnim modyfikowanym plikiem będzie css/desktop1.css. W dowolnym miejscu wklej poniższy kod. .blog-posts-slider-ui.extended-ui .blog-home-ui { border: none; } @media only screen and (min-width: 1280px) { .blog-posts-slider-ui.extended-ui .blog-home-ui { width: calc(33% - 49px); border: none; margin: 40px 80px 0 0; } .blog-posts-slider-ui.extended-ui .blog-home-ui .product-caption-ui { height: auto; } .blog-posts-slider-ui.extended-ui .blog-home-ui .blog-publication-date-ui { height: 50px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } .blog-posts-slider-ui.extended-ui .blog-home-ui .latest-blog-post-heading { font-weight: 700; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child { width: 100%; margin: 0; padding-bottom: 0; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .blog-home-news-ui { width: 45%; height: 213px; margin-right: 4%; float: left; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .product-caption-ui { width: 50%; float: left; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .latest-blog-post-heading { font-size: 22px; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .blog-publication-date-ui { height: auto; font-size: 16px; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .read-more-ui { float: left; } .blog-posts-slider-ui.extended-ui .blog-home-ui:last-child { margin-right: 0; } }

Obsługa zawężania kategorii w wynikach wyszukiwania w szablonie Szafir

W tym artykule dowiesz się jak dodać możliwość zawężania kategorii przy prezentacji wyników wyszukiwania w szablonie Szafir. W pierwszej kolejności otwórz plik common/categories-navigation/sliding-navigation-partial.html. Wyszukaj frazę sliding-categories-ui. Pod znalezioną linią wklej poniższy kod. {% if page.PageId == config.DefinedPages.ProductList.Id and products.Search != null -%} {% for group in products.FilteringOptions.Groups -%} <div class="filtered-category-group-ui"> {% if group.Parent != null and group.Parent.Id != config.DefinedPages.ProductList.Id -%} <a class="parent-ui" href="{{group.Parent.Url}}">{{group.Parent.Name}}</a> {% endif -%} {% assign groupCount = 0 -%} {% for node in group.Nodes -%} {% assign groupCount = groupCount | Plus: node.Count -%} {% endfor -%} <a class="group-ui" href="{{group.Group.Url}}">{{group.Group.Name}} <span class="count-ui">{{groupCount}}</span></a> <ul> {% for node in group.Nodes -%} <li><a class="node-ui" href="{{node.Group.Url}}">{{node.Group.Name}} <span class="count-ui">{{node.Count}}</span></a></li> {% endfor -%} </ul> </div> {% endfor -%} {% else -%} Przejdź na koniec dokumentu. Powinieneś zauważyć tam dwa tagi zamykające <div>. </div> </div> Nad nimi umieść poniższą linię. {% endif -%} Następnie otwórz plik css/desktop2.css i w dowolnym miejscu (np. na końcu pliku) wklej poniższy kod. .filtered-category-group-ui { margin: 20px; } .filtered-category-group-ui a { display: block; position: relative; } .filtered-category-group-ui .parent-ui { color: #696666; } .filtered-category-group-ui .node-ui { padding-left: 20px; } .filtered-category-group-ui .count-ui { position: absolute; right: 0; }

Obsługa blokowania pracownika w Profilu Klienta przez głównego administratora w szablonie Szafir

W tym artykule dowiesz się dodać głównemu administratorowi uprawnienie umożliwiające blokowanie i odblokowanie pracownika w Profilu Klienta w szablonie Szafir. Pierwszym modyfikowanym plikiem będzie customer-profile/employees-list/employees-view-list.html. Cały kod w pliku należy usunąć a wkleić poniższy. {% for employee in customer-profile.Employees -%} <div class="customer-details-tile-ui customer-details-lq container-lq"> <div class="content-ui"> <div><strong>{{employee.Name}} {{employee.Name2}}</strong></div> <br> <div><i class="ti-email"></i> <span class="employee-email-lq">{{employee.Email}}</span></div> {% if employee.PhoneNo != '' -%} <div><i class="ti-headphone-alt"></i> {{employee.PhoneNo}}</div> {% endif -%} </div> <div class="buttons-ui"> <div class="edit-ui"> <div class="form-lq flr-ui form-into-data-lq"> <input type="hidden" name="id" value="{{employee.Id}}" /> <input type="hidden" name="__template" value="customer-profile/employees-list/employees-view-list.html" /> {% if employee.Active -%} <input type="hidden" name="__action" value="Customer/EmployeeLock" /> <button class="btn-pure-ui toggle-employee-lq" data-container=".employees-list-view-lq"> <i class="ti-lock"></i> <span class="icon-label-ui">{{ translations.Lock }}</span> </button> {% else-%} <input type="hidden" name="__action" value="Customer/EmployeeUnlock" /> <button class="btn-pure-ui toggle-employee-lq" data-container=".employees-list-view-lq"> <i class="ti-unlock"></i> <span class="icon-label-ui">{{ translations.Unlock }}</span> </button> {% endif -%} </div> </div> </div> </div> {% endfor -%} Drugim plikiem, który należy zmodyfikować jest js/init-ui2.js. Na końcu dokumentu należy wkleić poniższy kod. function toggleEmployee(e) { if(app.validationBeforePost(e) != 'error'){ var form = $(e.currentTarget).parents('.form-lq'); var data = form.find('input:not([disabled])').serializeArray(); data.push({name: "__csrf", value: __CSRF}); $.post('', data, function(result) { app.serverMessage(result, form, e); if (result.action.Result) { $('.employees-list-view-lq').html(result.template); } }); } }; $('body').on('click', '.toggle-employee-lq', function (e) { toggleEmployee(e); });

Zawężanie filtrów

Wskazówka

Zawężanie filtrów
W tym artykule dowiesz się jak dodać możliwość zawężanie filtrów w swoim szablonie.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

Agat
Pierwszym krokiem jest otwarcie pliku category-page.html. Przy użyciu narzędzia wyszukiwania wyszukaj frazę {% assign long = value.Text | Size %}. Usuń następujący kod, znajdujący się pod wyszukaną linijką: <li {% if long > 40 -%} class="long" {% endif -%}> <span class="switch-name">{{ value.Text }}</span> <label class="switch"> <input id="flt_{{ value.Field | H }}_{{ value.Value | H }}" class="switch-input" name="{{ value.Field | H }}" type="checkbox" {%if value.Selected%}checked{%endif%} value="{{ value.Value | H }}"/> <span class="switch-label"></span><span class="switch-handle"></span> </label> </li> Następnie w to samo miejsce wklej kod: <li {% if long > 36 -%} class="long" {% endif -%}> <span class="switch-name">{{ value.Text }} ({{value.Count}})</span> <label class="switch"> <input id="flt_{{ value.Field | H }}_{{ value.Value | H }}" class="switch-input" name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value | H }}"/> <span class="switch-label"></span><span class="switch-handle"></span> </label> </li> Teraz przejdź do pliku scss/mobile1.scss i wklej na końcu następujący kod: [disabled] + .switch-label, [disabled] + .switch-label + .switch-handle { opacity: 0.5; cursor: default; }
Bursztyn
Otwórz plik categories.html. Za pomocą narzędzia wyszukiwania znajdź frazę <div class="switch"> a następnie usuń następujący kod : <div class="switch"> <input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/> <div class="input-switch"> <div class="switch-button"></div> </div> <label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label> </div> W miejsce usuniętego kodu wklej następujący: <div class="switch"> <input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/> <div class="input-switch"> <div class="switch-button"></div> </div> <label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label> </div> Kolejnym krokiem jest otwarcie pliku scss/main.scss. Na jego końcu wklej następujący kod: .switch input:disabled { & + .input-switch, & + .input-switch + label { opacity: 0.5; cursor: default; } }
Opal
Otwórz plik categories.html. Za pomocą narzędzia wyszukiwania znajdź frazę <div class="switch"> a następnie usuń następujący kod : <div class="switch"> <input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {%if v.Selected%}checked{%endif%}/> <div class="input-switch"> <div class="switch-button"></div> </div> <label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} {% if v.Count > 0%}({{v.Count}}/{{v.TotalCount}}){% endif -%}</label> </div> W miejsce usuniętego kodu wklej następujący: <div class="switch"> <input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/> <div class="input-switch"> <div class="switch-button"></div> </div> <label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label> </div> Kolejnym krokiem jest otwarcie pliku scss/main.scss. Na jego końcu wklej następujący kod: .switch input:disabled { & + .input-switch, & + .input-switch + label{ opacity: 0.5; cursor: default; } }
Szafir
Otwórz plik product-filters.html. Za pomocą narzędzia wyszukiwania znajdź frazę <input name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value | H }}" />, a następnie zamień znalezioną linijkę na nastepujacą: <input name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value | H }}" /> Następnie wyszukaj {% if value.Field != colorFilterName -%}, a następnie usuń kod: {% if value.Field != colorFilterName -%} {% if value.Field == "REWARD" -%} {{ translations.PointsProduct }} {% else -%} {{ value.Text }} {% endif -%} {% endif -%} W to miejsce wklej następujący kod: {% if value.Field != colorFilterName -%} {% if value.Field == "REWARD" -%} {{ translations.PointsProduct }} {% else -%} {{ value.Text }} {% endif -%} ({{value.Count}}) {% endif -%} Kolejnym krokiem jest otwarcie pliku scss/globals/_globals1.scss. Za pomocą narzędzia wyszukiwania znajdź frazę [type="checkbox"], [type="radio"] { a następnie bezpośrednio pod nią wklej następujący kod: &:disabled + .label-ui{ opacity: 0.5; cursor: default; &::before{ cursor: default; } }
Następnie otwórz plik js/init-ui1.js. Za pomocą narzędzia wyszukiwania znajdź frazę for (var i in newFilterValues) i usuń następujący kod:
for (var i in newFilterValues) { var value = newFilterValues[i]; var isChecked = (value.Selected) ? 'checked' : ''; if(value.Field == 'REWARD'){ value.Text = __translations.pointsProduct; } var valueItemHtml = '<label class="checkbox-ui">' + '<input name="' + value.Field + '" type="checkbox" ' + isChecked + ' value="' + value.Value + '" />' + '<span class="label-ui">' + value.Text + '</span>' + '</label>'; newFiltersContainerHtml.append(valueItemHtml); } W miejsce usuniętego kodu należy wkleić następujący: for (var i in newFilterValues) { var value = newFilterValues[i]; var count = value.Count; var isChecked = (value.Selected) ? 'checked' : ''; var isDisabled = (count == 0) ? 'disabled' : ''; if(value.Field == 'REWARD'){ value.Text = __translations.pointsProduct; } var valueItemHtml = '<label class="checkbox-ui">' + '<input name="' + value.Field + '" type="checkbox" ' + isChecked + isDisabled + ' value="' + value.Value + '" />' + '<span class="label-ui">' + value.Text + ' (' + count + ')</span>' + '</label>'; newFiltersContainerHtml.append(valueItemHtml); }
Topaz
Otwórz plik elements/products-list/products-1.html ( lub elements/products-list/products-2.html w zależności od wybranego modułu). Następnie za pomocą narzędzia wyszukiwania znajdź frazę <li class="filter-group-wrapper"> i usuń następujący kod:

<li class="filter-group-wrapper"> <ul class="filter-group"> <li class="filter-group__title product-list__title">{{ filter.Heading }}</li> {% for value in visibleValues -%} <li class="filter checkBoxes__container"> <input type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index}}" name="{{ value.Field }}" {%if value.Selected%}checked{%endif%} value="{{ value.Value }}"/> <label for="flt_{{value.Field}}_{{forloop.index}}"> <span class="checkBoxes__checkIcon"> <svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg> </span> <span class="filter-label">{{ value.Text }} ({{ value.TotalCount }})</span> </label> </li> {% endfor -%} </ul> {% if valuesSize > 4 -%} <ul class="filter-group filter-group--redundant"> {% for value in redundantValues -%} <li class="filter checkBoxes__container"> <input type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index | Plus: 4}}" name="{{ value.Field }}" {%if value.Selected%}checked{%endif%} value="{{ value.Value }}"/> <label for="flt_{{value.Field}}_{{forloop.index | Plus: 4}}"> <span class="checkBoxes__checkIcon"> <svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg> </span> <span class="filter-label">{{ value.Text }} ({{ value.TotalCount }})</span> </label> </li> {% endfor -%} </ul> <span class="filter-toggle filter-more">{{ translations.Com_More }}</span> <span class="filter-toggle filter-less">{{ translations.Com_Less }}</span> {% endif -%} </li>

W to miejsce wklej następujący kod:
<li class="filter-group-wrapper"> <ul class="filter-group"> <li class="filter-group__title product-list__title">{{ filter.Heading }}</li> {% for value in visibleValues -%} <li class="filter checkBoxes__container"> <input type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index}}" name="{{ value.Field }}" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value }}"/> <label for="flt_{{value.Field}}_{{forloop.index}}"> <span class="checkBoxes__checkIcon"> <svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg> </span> <span class="filter-label">{{ value.Text }} ({{ value.Count }})</span> </label> </li> {% endfor -%} </ul> {% if valuesSize > 4 -%} <ul class="filter-group filter-group--redundant"> {% for value in redundantValues -%} <li class="filter checkBoxes__container"> <input type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index | Plus: 4}}" name="{{ value.Field }}" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value }}"/> <label for="flt_{{value.Field}}_{{forloop.index | Plus: 4}}"> <span class="checkBoxes__checkIcon"> <svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg> </span> <span class="filter-label">{{ value.Text }} ({{ value.Count }})</span> </label> </li> {% endfor -%} </ul> <span class="filter-toggle filter-more">{{ translations.Com_More }}</span> <span class="filter-toggle filter-less">{{ translations.Com_Less }}</span> {% endif -%} </li>

Następnie otwórz plik scss/elements/products-list/products-1-g.scss ( lub scss/elements/products-list/products-2-g.scss w zależności od wybranego modułu ). Za pomocą narzędzia wyszukiwania znajdź frazę .filter {, a poniżej wklej następujący kod:
input[disabled]+label { opacity: 0.5; cursor: not-allowed; }

Baner na stronie z podziękowaniami w szablonie Szafir

W tym artykule dowiesz się jak dodać baner na stronę z podziękowaniami w swoim szablonie.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order
Pierwszym krokiem będzie dodanie kodu w pliku order/thx.html. Przy pomocy narzędzia wyszukiwania, szukamy frazy {% include 'edrone/order.html' %}. Następujący kod należy wkleić bezpośrednio nad linijką:
{% assign thxpageBannerSize = config.Banners['thxpage'].Images | Size -%} {% if thxpageBannerSize > 0 -%} <div class="thxpage-slider-ui thxpage-slider-lq slider-lq"> {% for slide in config.Banners['thxpage'].Images -%} <div> <figure class="thxpage-slider-figure-ui"> <img data-lazy="{{slide.Url}}" alt="{{slide.Alt | H}}" title="{{slide.Title | H}}" /> <figcaption class="thxpage-slider-figcaption-ui"> <h2 class="thxpage-slider-heading-ui">{{slide.Heading}}</h2> <p class="thxpage-slider-text-ui">{{slide.Text}}</p> {% if slide.Link != empty -%} <a class="btn-ui" href="{{slide.Link}}" {% if slide.TargetBlank -%} target="_blank" {% endif -%}>{{ translations.CheckDetails }}</a> {% endif -%} </figcaption> </figure> </div> {% endfor -%} </div> {% endif -%} Następnie w pliku js/init-ui1.js proszę wyszukać za pomocą narzędzia wyszukiwania frazę $('.crossselling-slider-in-cart-lq img').each(function () {, a następnie wkleić następujący kod: if ($('.thxpage-slider-lq').length > 0) { window.UIFeatures.initSlider('.thxpage-slider-lq', { autoplay: true, slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: false }); } Kod musi wyglądać w następujący sposób: Kolejnym plikiem, który musimy edytować jest js/init-js2.js. Proszę wyszukać za pomocą narzędzia wyszukiwania frazę $('.crossselling-slider-in-cart-lq img').each(function () {, a następnie wkleić następujący kod: if ($('.thxpage-slider-lq').length > 0) { UIFeatures.initSlider('.thxpage-slider-lq', { autoplay: true, slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: false }); } Kod musi wyglądać w następujący sposób: Po wykonaniu powyższych instrukcji otwieramy plik scss/_globals2.css, na którego końcu wklejamy następujący kod: .thxpage-slider-ui{ margin: 20px 0; } .slick-slide .thxpage-slider-figure-ui{ position: relative; text-align: right; margin: 0; &:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 6px); display: inline-block; background: linear-gradient(90deg, rgba(#f8f8f8, 1) 0%, rgba(#f8f8f8, 1) 40%, rgba(#f8f8f8, 0) 70%, rgba(#f8f8f8, 0) 100%); } img{ display: inline-block; width: 60%; } .thxpage-slider-figcaption-ui{ text-align: left; z-index: 1; position: absolute; top: 20px; left: 20px; bottom: 20px; right: calc(60% + 20px); } .thxpage-slider-heading-ui{ border-left: none; padding: 0; font-weight: 700; } .thxpage-slider-text-ui{ color: $labelsColor; } .btn-ui{ display: inline-block; width: 300px; padding: 10px; margin-top: 20px; text-align: center; background-color: $lowerPriceAndCart; color: $lowerPriceAndCartFont; &:hover{ background-color: $cartButtonHover; color: $cartButtonHoverFont; } } } Przedostatnim krokiem jest otworzenie pliku scss/_globals-m.css i wklejenie na końcu następującego kodu (przed ostatnią klamrą): .thxpage-slider-ui{ margin: 20px 0; } .slick-slide .thxpage-slider-figure-ui{ position: relative; text-align: right; margin: 0; &:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 6px); display: inline-block; background: linear-gradient(90deg, rgba(#f8f8f8, 1) 0%, rgba(#f8f8f8, 1) 40%, rgba(#f8f8f8, 0) 70%, rgba(#f8f8f8, 0) 100%); } img{ display: inline-block; width: 60%; } .thxpage-slider-figcaption-ui{ text-align: left; z-index: 1; position: absolute; top: 20px; left: 20px; bottom: 20px; right: calc(60% + 20px); } .thxpage-slider-heading-ui{ border-left: none; padding: 0; font-weight: 700; } .thxpage-slider-text-ui{ color: $labelsColor; } .btn-ui{ display: inline-block; width: 300px; padding: 10px; margin-top: 20px; text-align: center; background-color: $lowerPriceAndCart; color: $lowerPriceAndCartFont; &:hover{ background-color: $cartButtonHover; color: $cartButtonHoverFont; } } } Ostatnim krokiem jest dodanie zdjęć i utworzenie banera w panelu administracyjnym w obszarze Wygląd sklepu/ Ustawienia. W sekcji Bannery skorzystaj z przycisku Dodaj. Wypełnij pole Nazwa wpisując thxpage, następnie wciśnij Dodaj. Wejdź na nowo utworzony baner i dodaj zdjęcia według własnego uznania.

Strona producentów w szablonie Szafir

W tym artykule dowiesz się jak dodać stronę producentów w swoim szablonie.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Uwaga
Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order
Nową stronę dodamy w panelu administracyjnym w obszarze Wygląd sklepu/ Strony. W sekcji Użytkownika skorzystaj z przycisku Dodaj. Wypełnij pola z nazwą, linkiem i tytułem strony i zatwierdź przyciskiem Dodaj. Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywowania wystarczy kliknąć na jej kafelek i zmienić przełącznik opcji Aktywna na TAK. Teraz zajmiemy się dodaniem pliku strony. Przejdź do obszaru Wygląd sklepu/ Ustawienia, następnie użyj przycisku Więcej i wybierz Edytuj ustawienia zaawansowane. Przejdź na zakładkę Strony. Dla nowo dodanej strony w kolumnie Plik należy wpisać nazwę pliku który będziemy tworzyć z końcówką html, przykładowo: manufacturers.html. Wprowadzone zmiany zachowaj za pomocą przycisku Zapisz. Następnie proszę dodać tłumaczenia. W sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Id: ShowProducts -- Tekst: Pokaż produkty

Id: ShowMore -- Tekst: Pokaż więcej

W głównym folderze szablonu Szafir stwórz plik o nazwie manufacturers.html. Do pliku wklej następujący kod: {% extends '_layout.html' %} {% block pageContent -%} {% assign manufacturers = manufacturer-brand.Manufacturers -%} {% assign manufacturersSize = manufacturers | Size -%} <section class="product-presentation-ui container-ui manufacturers-container-ui"> <div class="manufacturers-breadcrumbs-ui"> {% include 'common/breadcrumbs.html' -%} </div> <div class="manufacturers-ui manufacturers-lq"> {% for manufacturer in manufacturers -%} <div class="manufacturer-ui manufacturer-lq {% if forloop.index > 12 -%} hidden-lq {% endif -%}"> {% if manufacturer.ImageId != 0 -%} {{ manufacturer | Img:'large' }} {% endif -%} <h2>{{ manufacturer.Name }}</h2> <a href="{{ manufacturer.Url }}" name="{{ manufacturer.Name }}" title="{{ manufacturer.Name }}"> {{ translations.ShowProducts }} <i class="ti-arrow-right"></i> </a> </div> {% endfor -%} </div> {% if manufacturersSize > 12 -%} <button class="show-more-manufacturers-ui show-more-manufacturers-lq">{{ translations.ShowMore }}</button> {% endif -%} </section> {% endblock -%} Na końcu pliku scss/globals/_globals2.scss wklej taki kod: .manufacturers-container-ui{ text-align: center; .manufacturers-breadcrumbs-ui{ text-align: left; } .manufacturers-ui{ text-align: left; } .manufacturer-ui{ width: calc(25% - 64px); margin-right: 60px; margin-bottom: 60px; display: inline-block; i{ margin-left: 5px; } } .show-more-manufacturers-ui{ margin: 40px auto; width: 300px; } }
A na końcu pliku (przed ostatnią klamrą) scss/globals/_globals-m.scss wklej taki kod:
.manufacturers-container-ui{ .manufacturer-ui{ width: calc(50% - 43px); margin: 40px 20px; } .show-more-manufacturers-ui{ display: none; } } Następnie przechodzimy do pliku js/init-ui2.js, a na jego końcu doklejamy następujący kod: function showMoreManufacturers(e) { $('.manufacturer-lq.hidden-lq').each(function(index){ if(index < 12){ $(this).removeClass('hidden-lq'); app.loadImages(); } }); if($('.manufacturer-lq.hidden-lq').length == 0){ $(e.currentTarget).addClass('hidden-lq'); } }; $('body').on('click', '.show-more-manufacturers-lq', function (e) { showMoreManufacturers(e); }); if($(window).width() <= 1279 && $('.manufacturer-lq.hidden-lq').length > 0) { $('.manufacturer-lq.hidden-lq').removeClass('hidden-lq'); }

Slajder marek w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał slajder marek.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.
W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Naciśnij przycisk Dodaj. W formularzu wybierz Menu producentów i marek, a jako nazwę ustaw manufacturer-brand. Teraz kliknij na nowo utworzony obiekt na liście. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna, Produkty i Szczegóły produktu, w zależności od tego na jakiej stronie ma być umiejscowiony slajder (istnieje możliwość wyświetlenia slajdera na wszystkich w.w. stronach). Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie logo producentów na stronie sklepu. Kolejnym krokiem jest dodanie na stronę sklepu podglądu slidera. Dostępne są dwa warianty. Pierwszy z nich wyświetla loga producentów w prosty sposób, a drugi wokół każdego logo dodaje cienką ramkę. W celu wykonania tej operacji, przejdź do plików sklepu, otwórz katalog elements a następnie utwórz w nim nowy katalog o nazwie brand. W nowo utworzonym katalogu należy stworzyć pliki o nazwie brand-1.html oraz brand-2.html (w zależności czy chcemy wariant pierwszy, drugi czy obydwa). Następnie w pliku tym należy dodać poniższy kod:
Uwaga
Na jednej stronie można dodać tylko jeden slider!

Wariant zwykły:

{% if manufacturer-brand.Brands -%} {% assign brands = manufacturer-brand.Brands -%} <div class="brand1-slider"> {% for brand in brands -%} {% if brand.ImageId > 0 -%} <div class="brand1-slider__wrapper"> {% if brand.Url != empty -%} <a aria-label="brand-url" class="item" href="{{brand.Url}}"> {% endif -%} <figure> {% if brand.Heading != null -%} {% assign title = {{brand.Heading | H}} -%} {% else -%} {% assign title = {{brand.Name | H}} -%} {% endif -%} {{brand | Img: "compact"}} </figure> {% if brand.Url != empty -%} </a> {% endif -%} </div> {% endif -%} {% endfor -%} </div> {% endif -%}
Wariant z ramką wokół logo:
{% if manufacturer-brand.Brands -%} {% assign brands = manufacturer-brand.Brands -%} <div class="brand2-slider"> {% for brand in brands -%} {% if brand.ImageId > 0 -%} <div class="brand2-slider__wrapper"> <div class="slider2-element-border"> {% if brand.Url != empty -%} <a class="item" href="{{brand.Url}}"> {% endif -%} <figure> {% if brand.Heading != null -%} {% assign title = {{brand.Heading | H}} -%} {% else -%} {% assign title = {{brand.Name | H}} -%} {% endif -%} {{brand | Img: "compact"}} </figure> {% if brand.Url != empty -%} </a> {% endif -%} </div> </div> {% endif -%} {% endfor -%} </div> {% endif -%}
Po wprowadzeniu powyższego kodu, otwieramy pliki dla stron, na których chcemy umieścić slider. Odpowiednio:

Strona główna -- home-page.html

Lista produktów -- product-list.html

Strona produktu -- product-page.html

Znajdują się w głównym katalogu. Należy dodać w nich linijkę:
Wariant zwykły:

{% include 'elements/manufacturer/brand-1.html' with 'manufacturer-brand' -%}
Wariant z ramką wokół logo:

{% include 'elements/manufacturer/brand-2.html' with 'manufacturer-brand' -%} Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie bloga na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji. Następnie należy otworzyć katalog css a w nim plik layout.css. Na jego końcu wklejamy następujący kod:
Wariant zwykły:
.brand1-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.brand1-slider .slick-track{height:100%;display:flex;align-items:center;justify-content:center}.brand1-slider__wrapper{width:100%;box-sizing:border-box;position:relative}.brand1-slider__wrapper a{height:100px}.brand1-slider__wrapper a figure{display:flex;align-items:center;justify-content:center}.brand1-slider__wrapper a figure img{filter:grayscale(100%)}.brand1-slider__wrapper a figure img:hover{filter:none}
Wariant z ramką wokół logo:
.brand2-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.brand2-slider .slick-track{display:flex;align-items:center;justify-content:center}.brand2-slider__wrapper{margin:0 25px;box-sizing:border-box}.brand2-slider__wrapper .slider2-element-border{display:flex;align-items:center;border:1px #ebebeb solid;justify-content:center;height:150px}.brand2-slider__wrapper a figure{display:flex;justify-content:center;box-sizing:content-box}.brand2-slider__wrapper a figure img{filter:grayscale(100%);max-width: 150px;}.brand2-slider__wrapper a figure img:hover{filter:none} Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout1.js. Następujący kod należy wkleić na końcu pliku:
Wariant zwykły:

$('.brand1-slider').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 5, slidesToScroll: 1, draggable: true, autoplay: true, autoplaySpeed: 3000, arrows: false, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 4 } }, { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 550, settings: { centerMode: true, slidesToShow: 1 } } ] });

Wariant z ramką wokół logo:

$('.brand2-slider').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 4, slidesToScroll: 1, draggable: true, autoplay: true, autoplaySpeed: 3000, arrows: false, responsive: [ { breakpoint: 1600, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 2 } }, { breakpoint: 768, settings: { slidesToShow: 1 } }, { breakpoint: 550, settings: { centerMode: true, slidesToShow: 1 } } ] });

Slajder producentów w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał slajder producentów.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.
W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Naciśnij przycisk Dodaj. W formularzu wybierz Menu producentów i marek, a jako nazwę ustaw manufacturer-brand. Teraz kliknij na nowo utworzony obiekt na liście. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna, Produkty i Szczegóły produktu, w zależności od tego na jakiej stronie ma być umiejscowiony slajder (istnieje możliwość wyświetlenia slajdera na wszystkich w.w. stronach). Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie logo producentów na stronie sklepu. Kolejnym krokiem jest dodanie na stronę sklepu podglądu slidera. Dostępne są dwa warianty. Pierwszy z nich wyświetla loga producentów w prosty sposób, a drugi wokół każdego logo dodaje cienką ramkę. W celu wykonania tej operacji, przejdź do plików sklepu, otwórz katalog elements a następnie utwórz w nim nowy katalog o nazwie manufacturer. W nowo utworzonym katalogu należy stworzyć pliki o nazwie manufacturer-1.html oraz manufacturer-2.html (w zależności czy chcemy wariant pierwszy, drugi czy obydwa). Następnie w pliku tym należy dodać poniższy kod:
Uwaga
Na jednej stronie można dodać tylko jeden slider!

Wariant zwykły:

{% if manufacturer-brand.Manufacturers -%} {% assign manufacturers = manufacturer-brand.Manufacturers -%} <div class="manufacturer1-slider"> {% for manufacturer in manufacturers -%} {% if manufacturer.ImageId > 0 -%} <div class="manufacturer1-slider__wrapper"> {% if manufacturer.Url != empty -%} <a aria-label="manufacturer" class="item" href="{{manufacturer.Url}}"> {% endif -%} <figure> {% if manufacturer.Heading != null -%} {% assign title = {{manufacturer.Heading | H}} -%} {% else -%} {% assign title = {{manufacturer.Name | H}} -%} {% endif -%} {{manufacturer | Img: "compact"}} </figure> {% if manufacturer.Url != empty -%} </a> {% endif -%} </div> {% endif -%} {% endfor -%} </div> {% endif -%} Wariant z ramką wokół logo: {% assign manufacturerSliderSize = manufacturer-brand.Manufacturers | Size -%} {% if manufacturer-brand.Manufacturers -%} {% assign manufacturers = manufacturer-brand.Manufacturers -%} <div class="manufacturer2-slider"> {% for manufacturer in manufacturers -%} {% if manufacturer.ImageId > 0 -%} <div class="manufacturer2-slider__wrapper"> <div class="slider2-element-border"> {% if manufacturer.Url != empty -%} <a class="item" href="{{manufacturer.Url}}"> {% endif -%} <figure> {% if manufacturer.Heading != null -%} {% assign title = {{manufacturer.Heading | H}} -%} {% else -%} {% assign title = {{manufacturer.Name | H}} -%} {% endif -%} {{manufacturer | Img: "compact"}} </figure> {% if manufacturer.Url != empty -%} </a> {% endif -%} </div> </div> {% endif -%} {% endfor -%} </div> {% endif -%}
Po wprowadzeniu powyższego kodu, otwieramy pliki dla stron, na których chcemy umieścić slider. Odpowiednio: Strona główna -- home-page.html Lista produktów -- product-list.html Strona produktu -- product-page.html Znajdują się w głównym katalogu. Należy dodać w nich linijkę: Wariant zwykły: {% include 'elements/manufacturer/manufacturer-1.html' with 'manufacturer-brand' -%} Wariant z ramką wokół logo: {% include 'elements/manufacturer/manufacturer-2.html' with 'manufacturer-brand' -%} Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie bloga na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji. Następnie należy otworzyć katalog css a w nim plik layout.css. Na jego końcu wklejamy następujący kod: Wariant zwykły: .manufacturer1-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.manufacturer1-slider .slick-track{height:100%;display:flex;align-items:center;justify-content:center}.manufacturer1-slider__wrapper{width:100%;box-sizing:border-box;position:relative}.manufacturer1-slider__wrapper a{height:100px}.manufacturer1-slider__wrapper a figure{display:flex;align-items:center;justify-content:center}.manufacturer1-slider__wrapper a figure img{filter:grayscale(100%)}.manufacturer1-slider__wrapper a figure img:hover{filter:none} Wariant z ramką wokół logo: .manufacturer2-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.manufacturer2-slider .slick-track{display:flex;align-items:center;justify-content:center}.manufacturer2-slider__wrapper{margin:0 25px;box-sizing:border-box}.manufacturer2-slider__wrapper .slider2-element-border{display:flex;align-items:center;border:1px #ebebeb solid;justify-content:center;height:150px}.manufacturer2-slider__wrapper a figure{display:flex;justify-content:center;box-sizing:content-box}.manufacturer2-slider__wrapper a figure img{filter:grayscale(100%);max-width: 150px;}.manufacturer2-slider__wrapper a figure img:hover{filter:none} Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout1.js. Następujący kod należy wkleić na końcu pliku: Wariant zwykły: $('.manufacturer1-slider').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 5, slidesToScroll: 1, draggable: true, autoplay: false, autoplaySpeed: 3000, arrows: false, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 4 } }, { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 550, settings: { centerMode: true, slidesToShow: 1 } } ] }); Wariant z ramką wokół logo: $('.manufacturer2-slider').slick({ lazyLoad: 'progressive', infinite: true, slidesToShow: 4, slidesToScroll: 1, draggable: true, autoplay: true, autoplaySpeed: 3000, arrows: false, responsive: [ { breakpoint: 1600, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 2 } }, { breakpoint: 768, settings: { slidesToShow: 1 } }, { breakpoint: 550, settings: { centerMode: true, slidesToShow: 1 } } ] });

`Nowy sposób prezentacji rabatów w profilu klienta w szablonie Szafir`

W tym artykule dowiesz się, jak zmodyfikować szablon Szafir, aby obsługiwał nowy sposób prezentacji rabatów w profilu klienta. Wskazówka Do poprawnego działania potrzebujesz sklepu 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ć 1. Otwórz plik common -> navigation-bars -> main-navigation-bar-partial.html. W pliku tym wyszukaj frazę {% if usr.Authenticated == true -%}. Trzy linie poniżej, powinna znajdować się linia zaczynająca się od <a href. Podmień tę linię na następującą: 2. Otwórz plik common -> pagination.html. Wyszukaj linię {% assign tab = 'loyalty' -%}. Tuż pod nią wklej następujący kod: {% elseif page.QueryString contains 'tab=discounts' -%} {% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%} {% assign paginationPageCount = customer-profile.DiscountsERP.PageCount -%} {% assign paginationPageNo = customer-profile.DiscountsERP.PageNo -%} {% assign template = 'customer-profile/discounts/discounts-list.html' -%} {% assign templateContainer = '.discounts-list-lq' -%} {% assign tab = 'discounts' -%} {% elseif page.QueryString contains 'tab=discount-details' -%} {% assign pageQueryName = customer-profile.DiscountDetPageQueryGET -%} {% assign paginationPageCount = customer-profile.DiscountERPDetails.PageCount -%} {% assign paginationPageNo = customer-profile.DiscountERPDetails.PageNo -%} {% assign template = 'customer-profile/discounts/discount-elements.html' -%} {% assign templateContainer = '.discount-elements-lq' -%} {% assign tab = 'discount-details' -%} {% assign id = customer-profile.DiscountERPDetails.Id -%} {% assign discountString = customer-profile.DiscountQueryGET -%} 3. Otwórz katalog customer-profile -> discounts. W nim otwórz plik discounts.html. Usuń jego treść, i wklej następujący kod: {{ translations.BackToShopping }} {{translations.Promotions}} {% include 'customer-profile/menu.html' -%}
{{translations.DiscountsInfo}} {% include 'customer-profile/discounts/discounts-list.html' -%} 4. W tym samym katalogu utwórz plik discount-details.html. Wklej do niego następujący kod: {% include 'common/date-format.html' -%} {% assign discount = customer-profile.DiscountERPDetails -%} {% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%} {% assign queries = page.QueryString | Split: '&' -%} {% for query in queries -%} {% if query contains 'page=' -%} {% assign pageQueryNo = query | Split: '=' | Last -%} {% break -%} {% else -%} {% assign pageQueryNo = 1 -%} {% endif -%} {% endfor -%} {{ discount.Name }} {% if discount.Description != '' and discount.Description != null -%} {{discount.Description}} {% endif -%} {% if discount.Thresholds -%} {% for threshold in discount.Thresholds -%} {{translations.Threshold}}: {% if threshold.ThresholdType == 1 -%} {{threshold.Threshold | ToPrice}} {{threshold.ThresholdSymbol}} {% else -%} {{threshold.Threshold}} {% endif -%} {{translations.QuantityThreshold}}: {{threshold.ThresholdMinPositionsCount}} {% include 'customer-profile/discounts/discount-elements.html' with threshold -%} {% endfor -%} {% else -%} {% include 'customer-profile/discounts/discount-elements.html' with discount -%} {% endif -%} 5. W tym samym katalogu utwórz plik discount-elements.html i wklej do niego następujący kod: {% assign discount = customer-profile.DiscountERPDetails -%} {% if include -%} {% assign elementsParent = include -%} {% else -%} {% assign elementsParent = discount -%} {% endif -%} {% assign anyGroup = false -%} {% assign anyProduct = false -%} {% assign anyThreshold = false -%} {% assign anyBundleThreshold = false -%} {% assign anyTotalPrice = false -%} {% assign anySubtotalPrice = false -%} {% for element in elementsParent.Elements -%} {% if element.Group != null -%} {% assign anyGroup = true -%} {% endif -%} {% if element.Product != null -%} {% assign anyProduct = true -%} {% endif -%} {% if element.Threshold != null and element.Threshold > 0 -%} {% assign anyThreshold = true -%} {% endif -%} {% if element.BundleThreshold != null and element.BundleThreshold > 0 -%} {% assign anyBundleThreshold = true -%} {% endif -%} {% if element.FixedPrice -%} {% if element.TotalPrice != null and element.TotalPrice > 0 -%} {% assign anyTotalPrice = true -%} {% endif -%} {% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%} {% assign anySubtotalPrice = true -%} {% endif -%} {% endif -%} {% endfor -%} {% if anyGroup and anyProduct -%} {{translations.Product}}/{{translations.Category}} {% elseif anyGroup -%} {{translations.Category}} {% else -%} {{translations.Product}} {% endif -%} {% unless element.FixedPrice and anySubtotalPrice == false -%} {% if element.FixedPrice and anySubtotalPrice -%} {{translations.Price}} {{translations.Netto | Downcase }} {% else -%} {{translations.Discount}} {% endif -%} {% endunless -%} {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%} {% if element.FixedPrice and anyTotalPrice -%} {{translations.Price}} {{translations.Brutto | Downcase}} {% elseif anyBundleThreshold -%} {{translations.BundleThreshold}} {% else -%} {{translations.Threshold}} {% endif -%} {% endif -%} {% for element in elementsParent.Elements -%} {{ forloop.index }} {% if element.Group != null -%} {% if element.Group.Url -%} {% endif -%} {{ element.Group.Name }} {% if element.Group.Url -%} {% endif -%} {% else -%} {% if element.Product.Url -%} {% endif -%} {{ element.Product.NameNoHtml }} {% if element.Product.Url -%} {% endif -%} {% endif -%} {% unless element.FixedPrice and anySubtotalPrice == false -%} {% if element.FixedPrice -%} {% if element.SubtotalPrice > 0 -%} {{ translations.Price | Downcase }} {{ translations.Netto | Downcase }} {% endif -%} {% else -%} {{ translations.Discount | Downcase }} {% endif -%} {% if element.FixedPrice -%} {% if element.SubtotalPrice > 0 -%} {{ element.SubtotalPrice | ToPrice }} {% endif -%} {% else -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.Value | ToPrice }} {% else -%} {{ element.Value | Normalize }} {% endif -%} {% endif -%} {{ element.ValueSymbol }} {% endunless -%} {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%} {% if element.FixedPrice -%} {% if element.TotalPrice > 0 -%} {{ translations.Price | Downcase }} {{ translations.Brutto | Downcase }} {% endif -%} {% elseif element.BundleThreshold > 0 -%} {{ translations.BundleThreshold | Downcase }} {% elseif element.Threshold > 0 -%} {{ translations.Threshold | Downcase }} {% endif -%} {% if element.FixedPrice -%} {% if element.TotalPrice > 0 -%} {{ element.TotalPrice | ToPrice }} {% endif -%} {{ element.ValueSymbol }} {% elseif element.BundleThreshold > 0 -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.BundleThreshold | ToPrice }} {% else -%} {{ element.BundleThreshold | Normalize }} {% endif -%} {{ element.BundleThresholdSymbol }} {% elseif element.Threshold > 0 -%} {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%} {{ element.Threshold | ToPrice }} {% else -%} {{ element.Threshold | Normalize }} {% endif -%} {{ element.ThresholdSymbol }} {% endif -%} {% endif -%} {% endfor -%} {% assign paginationPageCount = discount.PageCount -%} {% if paginationPageCount > 1 -%} {% include 'common/pagination.html' -%} {% endif -%} 6. W tym samym katalogu utwórz plik discounts-list.html i wklej do niego następujący kod: {% include 'common/date-format.html' -%} {% assign discountsERP = customer-profile.DiscountsERP -%} {% assign discountString = customer-profile.DiscountQueryGET | H -%} {% assign paginationPageNo = discountsERP.PageNo -%} {% if paginationPageNo == 1 -%} {% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%} {% if orderValuesSize > 0 -%} {% assign anyDiscount = true -%} {% for orderValue in customer-profile.DiscountsEshop.OrderValue -%} {{ orderValue.Discount | Normalize }} % {{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }} {% if orderValue.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%} {% endfor -%} {% endif -%} {% if customer-profile.DiscountsEshop.Regular -%} {% assign anyDiscount = true -%} {% assign regular = customer-profile.DiscountsEshop.Regular -%} {{ regular.Discount | Normalize }} % {{ translations.ForRegularCustomer }} {% if regular.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%} {% endif -%} {% if customer-profile.DiscountsEshop.FirstOrder -%} {% assign anyDiscount = true -%} {% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%} {{ firstOrder.Discount | Normalize }} % {{ translations.ForNewCustomer }} {% if firstOrder.DateTill -%} {{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%} {% endif -%} {% endif -%} {% if discountsERP.TotalItems > 0 -%} {% assign anyDiscount = true -%} {% for discount in discountsERP.Discounts -%} {{ translations.Details }} {{ discount.Name }} {% if discount.DateTill -%} {% if discount.DateFrom -%} {{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }} {% endif -%} {{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }} {% else -%} {{ translations.ValidLifetime | Downcase }} {% endif -%} {% endfor -%} {% include 'common/pagination.html' -%} {% endif -%} {% unless anyDiscount -%} {{ translations.NoDicountsInfo }} {% endunless -%} 7. Następnie przejdź do katalogu customer-profile. Otwórz plik menu.html. Wyszukaj linię <ul class="category-column-ui customer-profile-menu-ui category-column-lq attached-lq customer-profile-menu-lq" data-container=".customer-profile-content-lq">. Linia pod spodem zaczyna się od <li class="load-erp-data-lq. Podmień ją na następującą: W tym samym pliku wyszukaj frazę {% if settings.discountsPresentationInCustomerProfileInPromotionsTab == 'yes' %}. Linia pod spodem zaczyna się od <li class="discounts-menu-button-lq". Podmień ją na następującą: 8. Otwórz katalog js a w nim plik init-ui2.js. Wyszukaj linię function setProductNameMaxWidthInTable() {. Należy podmienić całą funkcję (od znalezionej linii włącznie, do linii o treści }; znajdującej się ok. 70 linii poniżej - 2 linie przed tą znajduje się linia $('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);): function setProductNameMaxWidthInTable() { if($(window).width() > 1279) { function calculateProductNameMaxWidthInTable(parent) { if(parent){ var header = parent.find('.products-table-header-container-lq'); } else { var header = $('.products-table-header-container-lq'); } var headerWidth = header.width(); var nameWidth = headerWidth; function calculateNameWidth(className) { var elements = header.find(className); var size = elements.length; if (size == 1) { nameWidth -= elements.outerWidth(); } else if (size > 1) { elements.each(function () { nameWidth -= $(this).outerWidth(); }); } } calculateNameWidth('.remove-product-lq'); calculateNameWidth('.open-complaint-form-container-lq'); calculateNameWidth('.price-like-column-lq'); calculateNameWidth('.percent-column-lq'); calculateNameWidth('.amount-stepper-column-lq'); calculateNameWidth('.currency-column-lq'); calculateNameWidth('.options-column-lq'); calculateNameWidth('.number-column-lq'); if ($('.attributes-view-lq').index() != -1) { var freeSpaceWidth = headerWidth; function calculateFreeSpaceWidth(className) { var elements = header.find(className); var size = elements.length; if(className == '.attributes-view-lq' && size > 5){ size = 5; } if (size == 1) { freeSpaceWidth -= elements.outerWidth(); } else if (size > 1) { elements.each(function (i) { if(i < size){ freeSpaceWidth -= $(this).outerWidth(); } else { return false; } }); } } calculateFreeSpaceWidth('.remove-product-lq'); calculateFreeSpaceWidth('.open-complaint-form-container-lq'); calculateFreeSpaceWidth('.attributes-view-lq'); calculateFreeSpaceWidth('.arrow-lq'); calculateFreeSpaceWidth('.options-column-lq'); calculateFreeSpaceWidth('.name-column-lq'); if (nameWidth > freeSpaceWidth) { var difference = nameWidth - freeSpaceWidth; var amountStepperWidth = $('.amount-stepper-column-lq').outerWidth() + difference; $('.amount-stepper-column-ui').css('width', amountStepperWidth); nameWidth = freeSpaceWidth; } } if(parent){ parent.find('.name-and-code-lq').css('width', nameWidth); } else { $('.name-and-code-lq').css('width', nameWidth); } if ($('.choose-cart-table-view-lq').index() != -1) { nameWidth -= $('.choose-cart-table-view-lq').width(); } if(parent){ parent.find('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth); } else { $('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth); } }; if($('.discount-elements-table-lq').index() != -1){ $('.discount-elements-table-lq').each(function(){ calculateProductNameMaxWidthInTable($(this)); }); } else { calculateProductNameMaxWidthInTable() } } }; 9. Otwórz plik scss -> globals -> _globals-m.scss. Wyszukaj frazę .position-attributes-set-form-lq{. Poniżej znajdują się dwie linie o treści }. Tuż pod nimi wklej poniższy kod: &.discount-element-ui{ height: 100px; .name-and-code-lq{ margin-top: 4px; } .price-like-column-ui{ left: 60px; text-align: left; .prices-ui{ left: 0; } } .value-ui{ position: absolute; left: 40px; font-size: 10px; top: 2px; } } W tym samym katalogu otwórz plik _globals2.scss. Wyszukaj linię // Discounts in customer-profile. Poniżej znajduje się linia .discount-item-ui{. Tuż pod nią wklej poniższą linijkę: height: 72px; Poniżej znajduje się linia .discount-value-ui{. Klika linii poniżej znajdziesz linię o treści vertical-align: middle;. Słowo middle zamień na top. Kolejne kilka linii poniżej znajduje się linia o treści .currency-ui{. Tuż nad nią wklej ten kod: &.clickable-ui{ cursor: pointer; } 10. Otwórz Panel administracyjny, a w nim zakładkę Wygląd sklepu -> Ustawienia -> Tłumaczenia. Nowe tłumaczenia dodaj poprzez kliknięcie przycisku Dodaj, wprowadzenie Id, Tekstu i zatwierdzenie przyciskiem Dodaj. Należy dodać następujące tłumaczenia (Id - Tekst): 1. Threshold - Próg 2. QuantityThreshold - Próg ilościowy 3. BundleThreshold - Próg pakietowy Wskazówka Kopiując Id tłumaczeń upewnij się, że przed lub za danym Id nie znajduje się żadna spacja, inaczej tłumaczenie może nie zadziałać w sposób poprawny! Wskazówka Pamiętaj, aby po wprowadzeniu zmian w plikach scss i js, wykonać odpowiednie komendy opisane w artykule o minifikacji, do którego link znajduje się na samej górze niniejszego artykułu. Przed wykonaniem odpowiedniej komendy dla plików js, usuń z katalogu js pliki: init-ui1.min.js, collection-points.min.js, init-ui2.min.js, init.min.js, sw.min.js. Po wykonaniu komendy możesz usunąć plik slick.min.min.js. Zmiany w zakresie wymagalności adresu e-mail do kuponu rabatowego w szablonie Topaz Zmiany w zakresie wymagalności adresu e-mail do kuponu rabatowego w szablonie Topaz Z tego artykułu dowiesz się, jak wprowadzić zmiany w zakresie wymagalności adresu e-mail do kuponu rabatowego w Twoim szablonie Topaz. Dzięki wprowadzonym zmianom, adres e-mail będzie wymagany tylko dla kuponów subsksrybentów. Wskazówka UWAGA! Do poprawnego działania wszystkich funkcji wymagana jest wersja sklepu 2020.2 lub nowsza! Wskazówka Podczas kopiowania fraz do wyszukania z niniejszego artykułu, mogą wystąpić problemy ze znakami -, _, ', ". Jeśli nie jesteś w stanie odnaleźć poszczególnych fraz w kodzie, spróbuj przepisać te znaki ręcznie, lub zamiast kopiować frazy do wyszukania z artykułu, przepisać je. Wskazówka W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować 1. Przejdź do katalogu staticElements -> cart i otwórz plik cart.html. Wyszukaj w nim frazę js-close-coupon. Cała znaleziona linia powinna wyglądać w ten sposób: Tuż nad nią, dodaj poniższy kod: {{translations.InvalidEmail}} 2. Przejdź do katalogu js i otwórz plik layout0.js. Odszukaj linię z frazą $.post(obj.url, data, function (result) {. Tuż pod nią wstaw następujący kod: var emailInput = $('.cart__input-email'); if(result.action.Code == "107" && emailInput.hasClass('hidden')) { var msg =__translations.DiscountEmail; app.showTemporaryPopup(msg, 'error'); emailInput.removeClass('hidden'); return; } W celu upewnienia się, sprawdź, czy następna linia po wstawionym przez Ciebie kodzie wygląda następująco: if (result.action.Result) {. 3. Otwórz plik base_layout.html znajdujący się w głównym katalogu z plikami szablonu Topaz. Wyszukaj frazę __translations. Pod znalezioną linią wstaw następujący fragment kodu: DiscountEmail: "{{translations.DiscountEmail}}", 4. Ostatnim krokiem jest dodanie jednego tłumaczenia. W tym celu otwórz Panel Administracyjny, a następnie Wygląd sklepu -> Ustawienia -> Tłumaczenia. Kliknij przycisk z napisem Dodaj. W polu Id wprowadź DiscountEmail a w polu tekst Dla wybranego kuponu wymagane jest podanie e-mail. Zatwierdź przyciskiem Dodaj. W ten sposób zmodyfikowałeś swój szablon Topaz pod względem zmian w zakresie wymagalności adresu e-mail do kuponu rabatowego. Pamiętaj, że aby powyższe zmiany działały poprawnie, wymagany jest sklep w wersji 2020.2 i nowszej! Nowoczesne dolne menu nawigacji w wersji mobilnej w szablonie Topaz Nowoczesne dolne menu nawigacji w wersji mobilnej w szablonie Topaz W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby w wersji mobilnej posiadał nowoczesne dolne menu nawigacji. 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ć Dodanie kodu dolnego menu 1. Pierwszym krokiem jest dodanie pliku z kodem dolnego menu. W tym celu w plikach szablonu otwórz katalog partials a w nim utwórz plik bottom-menu.html. Wklej do niego poniższy kod: {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%} {{translations.Start}} {% endif -%} {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%} {{translations.Hea_Menu}} {% endif -%} {{customer.Cart.Count}} {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%} {{translations.Crt_Cart}} {% endif -%} {{customer.WishListCount}} {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%} {{translations.Favourite}} {% endif -%} {% if settings.displayLabelsOnBottomNavigationMenu == "yes" -%} {{translations.Account}} {% endif -%} Dodanie tłumaczeń Następnie należy dodać tłumaczenia. W tym celu otwórz Panel Administracyjny, a w nim odpowiednio Wygląd sklepu -> Ustawienia -> zakładka Tłumaczenia. Aby dodać nowe tłumaczenia, kliknij przycisk Dodaj, podaj odpowiednie Id, Tekst i zatwierdź przyciskiem Dodaj. Lista tłumaczeń do wprowadzenia (Id - Tekst): 1. Start - Start 2. SearchInShop - Szukaj w sklepie 3. Account - Konto Wskazówka Uważaj, aby przy kopiowaniu Id nie znalazła się żadna spacja przed ani po Id, w przeciwnym wypadku tłumaczenie nie wyświetli się w sposób poprawny! Ustawienie wyświetlania etykiet w Panelu Administracyjnym Dolne menu obsługuje ustawienie wyświetlania etykiet. Można je wyświetlać lub nie (wtedy zostają same ikonki). Aby wszystko działało poprawnie, otwórz plik __settings.liquid. Kolejny krok to dodanie kodu odpowiedzialnego za wygląd dolnego menu. W tym celu otwórz katalog css i wklej poniższy kod na końcu pliku layout.css. Wyszukaj linię o treści {% when '1' %}. Pod nią wklej ten kod: {% assign displayLabelsOnBottomNavigationMenu = "Wyświetlaj etykiety w dolnym menu nawigacji" -%} W tym samym pliku wyszukaj linię z frazą {% else %}. Pod nią wklej ten kod: {% assign displayLabelsOnBottomNavigationMenu = "Display labels in the bottom navigation menu" -%} Poniżej znajdują się sekcje kodu do ustawień. Każda sekcja zaczyna się od <section> a kończy się </section>. Poniższy kod wklej tuż pod sekcją (czyli pod jej tagiem </section>), której kolejna linijka zawiera frazę productListType {{displayLabelsOnBottomNavigationMenu}} {{yesTranslation}} {{noTranslation}} Wskazówka Po dodaniu niniejszego kodu, koniecznie otwórz zakładkę Wygląd sklepu -> Ustawienia w Twoim Panelu Administracyjnym, i wybierz "TAK" lub "NIE" przy nowo dodanej opcji włączania/wyłączania wyświetlania etykiet w dolnym menu! Dodanie kodu odpowiedzialnego za wygląd dolnego menu Kolejny krok to dodanie kodu odpowiedzialnego za wygląd dolnego menu. W tym celu otwórz katalog css i wklej poniższy kod na końcu pliku layout.css @media only screen and (min-width: 769px){.bottomMenuBack{display:none}.bottomMenu{display:none}}@media only screen and (max-width: 769px){.bottomMenuBack{display:block;width:100%;height:56px}.bottomMenu{width:100%;height:41px;background-color:{{settings.primaryPageBgColor}};display:flex;flex-direction:row;flex-wrap:wrap;position:fixed;bottom:0;padding-top:10px;padding-bottom:5px;z-index:12}.bottomMenu .menuItem{flex:0 1 20%;margin:0 auto;display:flex;flex-direction:column;justify-content:center}.bottomMenu .menuItem .svgContainer{margin:0 auto;position:relative}.bottomMenu .menuItem svg{fill:{{settings.primaryFontColor}};width:20px;height:18px;margin:0 auto}.bottomMenu .menuItem .itemsCounter{position:absolute;border-radius:50%;font-size:9px;width:14px;height:14px;top:-5px;right:-6px;font-weight:500;color:{{settings.primaryPageBgColor}};background-color:{{settings.linkFontColor}};text-align:center}.bottomMenu .menuItem .text{font-size:11px;line-height:18px;color:{{settings.primaryFontColor}};font-weight:300;font-family:{{settings.fontFamily}};text-align:center;margin:0 auto}.bottomMenu .activePage svg{fill:{{settings.linkFontColor}}}} Dodanie funkcji Następnie należy dodać odpowiednie funkcje do plików w katalogu js. W tym celu otwórz wspomniany przed chwilą katalog, a w nim otwórz plik layout0.js 1. Wyszukaj linię z frazą $('body').toggleClass('noscroll');. Kolejna linia pod nią zawiera znak }. Pod nią wklej następujący kod: $('.headerMainMenu-js').scroll(function(){ if(($(this).css('display') != 'none' && $('.bottomMenu').css('display') != 'none')) { if($(this).scrollTop() > 0) { $('.go-to-top__btn-js').fadeIn(); } else { $('.go-to-top__btn-js').fadeOut(); } } }); 2. Wyszukaj linię z frazą closePopup: function (e) {. Tuż nad nią wklej poniższy kod: showBottomMenuOnMobile: function () { var windowWidth = $(window).width(); if(windowWidth < 769) { $('.bottomMenu').removeClass('hidden'); $('.bottomMenuBack').removeClass('hidden'); } else if (windowWidth >= 769) { $('.bottomMenu').addClass('hidden'); $('.bottomMenuBack').addClass('hidden'); } }, 3. Modyfikacja funkcji dodawania i usuwania przedmiotów z listy ulubionych. Wyszukaj frazę productWishListAdd: function (e) {. Należy usunąć całą funkcję (od wyszukanej linijki włącznie, do najbliższej linijki o treści }, (ok. 13 linijek). W ich miejsce wklej ten kod: productWishListAdd: function (e) { var data = $(e.currentTarget).find('input').serializeArray(); $.post(null, data, function (result) { if (result.action.Result) { $(e.currentTarget).addClass(['active-js', 'productWishListRemove-js']); $(e.currentTarget).removeClass('productWishListAdd-js'); sessionStorage.removeItem('wish-list'); app.showTemporaryPopup(result.action.Message, 'success'); if($(e.currentTarget).hasClass('addToFavouriteButton')) { $(e.currentTarget).children('.favouriteIcon').addClass('wishList'); $(e.currentTarget).addClass('wishListBorder'); } } else if (result.action.Code != 100) { app.showTemporaryPopup(result.action.Message, 'error'); } }); if($('.bottomMenu')) { var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) +1; $('.bottomMenu .menuItem .favouriteItems').text(items); if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) { $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden'); } else { $('.bottomMenu .menuItem .favouriteItems').addClass('hidden'); } } }, Pod spodem znajduje się linijka o treści productWishListRemove: function (e) {. Usuń treść tej funkcji analogicznie jak poprzednio (do najbliższej linii o treści }, - ok. 13 linijek). Wklej w to miejsce następujący kod: productWishListRemove: function (e) { var data = $(e.currentTarget).find('input').serializeArray(); $.post(null, data, function (result) { if (result.action.Result) { $(e.currentTarget).removeClass(['active-js', 'productWishListRemove-js']); $(e.currentTarget).addClass('productWishListAdd-js'); sessionStorage.removeItem('wish-list'); app.showTemporaryPopup(result.action.Message, 'success'); if($(e.currentTarget).hasClass('addToFavouriteButton')) { $(e.currentTarget).children('.favouriteIcon').removeClass('wishList'); $(e.currentTarget).removeClass('wishListBorder'); } } else if (result.action.Code != 100) { app.showTemporaryPopup(result.action.Message, 'error'); } }); if($('.bottomMenu')) { var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) -1; $('.bottomMenu .menuItem .favouriteItems').text(items); if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) { $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden'); } else { $('.bottomMenu .menuItem .favouriteItems').addClass('hidden'); } } }, 4. Wyszukaj linię z frazą $(e.currentTarget).parents('.inputs-container-js').find('.enterKeyTrigger-js').trigger('click');. Pod nią będą dwie linie, pierwsza o treści } a druga o treści });. Pod nimi wklej poniższy kod: $(window).on('load', function(e) { app.showBottomMenuOnMobile(); }); $(window).on('resize', function(e) { app.showBottomMenuOnMobile(); }); $('.showBottomMenuSection-js').on('click', function(e) { $('.pageHeader-js .headerMainMenu-js').toggle(200); }) 5.Wyszukaj linię z frazą updateProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod: if($('.bottomMenu')) { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue); if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden'); } else { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden'); } } 6. Wyszukaj linię z frazą incrementProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod: if($('.bottomMenu')) { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue); if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden'); } else { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden'); } } 7. Wyszukaj linię z frazą decrementProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod: if($('.bottomMenu')) { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text(newValue); if(parseInt($('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').text()) > 0) { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').removeClass('hidden'); } else { $('.bottomMenu .menuItem .itemsCounter').not('.favouriteItems').addClass('hidden'); } } 8. W pliku layout1.js wyszukaj linię productWishListDelete: function (e) {. Pod nią znajduje się linia z kodem app.post(e, customerProfile.currentTabTemplateUpdate, 'wish-list');. Pod tą linią wklej poniższy kod: if($('.bottomMenu')) { var items = parseInt( $('.bottomMenu .menuItem .favouriteItems').text()) -1; $('.bottomMenu .menuItem .favouriteItems').text(items); if(parseInt($('.bottomMenu .menuItem .favouriteItems').text()) > 0) { $('.bottomMenu .menuItem .favouriteItems').removeClass('hidden'); } else { $('.bottomMenu .menuItem .favouriteItems').addClass('hidden'); } } Modyfikacja stopki - obie wersje stopki Kolejny krok to modyfikacja pliku ze stopką, pozwalająca na wyświetlanie dolnego menu. Aby to zrobić, otwórz katalogi elements -> footer. W środku znajdziesz jeden plik .html, o nazwie footer-1.html albo footer-2.html. Otwórz plik, i na samym jego końcu wklej tę linię: {% include 'partials/bottom-menu.html' -%} Uwaga! Jeśli stopka w Twoim szablonie Topaz jest w wersji 2 (w powyższym katalogu posiadasz plik footer-2.html), to konieczne jest dodanie jednej zmiany w wyglądzie stopki. Otwórz katalog css a w nim plik layout-m.css i doklej na jego końcu poniższy kod: @media screen and (max-width: 599px){.footer{margin-bottom:56px}} Modyfikacja przycisku powrotu na górę strony W pliku layout.css wyszukaj frazę {.go-to-top__btn-js{width:50px;height:50px;bottom:20px}}. Powinna znajdować się pod koniec jednej z linii/jednego z bloków kodu. W znalezionej frazie zamień wartość przy bottom z 20px na 60px. Dzięki temu przycisk odpowiedzialny za powrót na górę strony nie będzie zasłaniał dolnego menu. Modyfikacja profilu Klienta Następnie otwórz katalog css a w nim plik layout.css. Wyszukaj duży blok kodu rozpoczynający się od .customer{position:relative}. Usuń cały blok, po czym wklej w jego miejscu następujący: .customer{position:relative}.customer__blockContent.hide-on-mobile{display:block}.customer .form__input-wrapper:focus-within>label{color:{{settings.inputActiveLabelColor}}}.customer .form input:focus,.customer .form select:focus{border-bottom:1px solid {{settings.inputActiveLabelColor}}}.customer .form input,.customer .form select{border-bottom:1px solid {{settings.primaryFontColor}}}.customer .customer__emptySection{width:100%}.customer .customer__emptySection ol{padding:30px 20px 30px 71px;margin:0;box-sizing:border-box;counter-reset:my-counter;list-style:none}.customer .customer__emptySection ol li{position:relative;counter-increment:my-counter;margin-bottom:30px;color:#959494;font-size:14px;font-weight:400;line-height:1.8}.customer .customer__emptySection ol li:before{content:counter(my-counter);border-radius:50%;padding:8px 11px 7px;font-size:12px;color:{{settings.linkFontColor}};background-color:#f5f4f4;position:absolute;font-weight:600;left:-51px;line-height:normal;top:-2px}.customer .loyaltyProgram .customer__emptySectionImage .icon{top:39px;left:34px}.customer .loyaltyProgram .customer__emptySectionImage .icon .svgIcon{width:44px;height:33px}.customer .customer__emptySectionImage{width:115px;height:115px;border:1px solid #E5E5E5;text-align:center;position:relative;margin:40px auto}.customer .customer__emptySectionImage--bg:before,.customer .customer__emptySectionImage--bg{background:white;height:121px;position:absolute;width:57px;left:28px;top:-3px}.customer .customer__emptySectionImage--bg:before{content:' ';transform:rotate(90deg);left:-1px;top:0}.customer .customer__emptySectionImage .icon{fill:#E5E5E5;position:absolute;top:37px;left:39px}.customer .customer__emptySectionImage .icon .svgIcon{width:37px;height:37px}.customer .customer__emptySectionImage .icon--small{fill:#e5e5e5;position:absolute;background-color:#fff;bottom:30px;right:35px}.customer .customer__emptySectionImage .icon--small .svgIcon{width:19px;height:19px}.customer .customer__sectionTitle,.customer .customer__emptySectionTitle{color:#a9a8a8;display:block;font-size:14px;font-weight:400;max-width:90%}.customer .customer__sectionTitle--center,.customer .customer__emptySectionTitle--center{text-align:center;margin:0 auto}.customer .customer__sectionTitle--left,.customer .customer__emptySectionTitle--left{margin:0 0 10px 22px}.customer .customer__sectionTitle--bold,.customer .customer__emptySectionTitle--bold{margin-top:45px;color:{{settings.primaryFontColor}};font-weight:500}.customer .customer__emptySectionButton{display:block;width:265px;margin:40px auto;text-decoration:none;box-sizing:border-box}.customer__flexboxContainer{display:flex}@media screen and (min-width: 600px){.customer__flexboxContainer{margin-top:40px}}.customer__content{max-width:100%;min-width:62%;min-height:500px}.customer .customer__addresses .customer__contentBox{min-height:100px}@media screen and (min-width: 600px){.customer .popupBackground-js{background-color:#00000014;position:fixed;top:0;left:0;right:0;z-index:11;bottom:0;content:' '}}.customer .customer__contentSection{display:block;position:relative;margin:0 22px 45px;max-width:100%}.customer .customer__contentSection--edit{position:absolute;color:{{settings.linkFontColor}};top:0;right:-5px;padding:0 5px;cursor:pointer}.customer .customer__contentSection--edit .svgIcon__pen{width:16px;height:16px;fill:{{settings.linkFontColor}}}@media screen and (min-width: 600px){.customer .customer__contentSection{max-width:310px}}.customer .customer__contentSection.customer__contentBox{border:1px solid #d6d6d6;padding:20px 30px 18px;box-sizing:border-box}.customer .customer__contentSection.customer__contentBox .customer__contentBoxTitle{display:none;visibility:hidden}.customer .customer__contentSection.customer__contentBox--color{border-color:{{settings.linkFontColor}}}.customer .customer__contentSection.customer__contentBox .customer__contentPreview>span{color:#999}.customer .customer__contentSection.customer__contentBox .customer__contentPreview>span:first-of-type{display:block;height:45px;line-height:27px;font-size:18px;font-weight:300;color:{{settings.primaryFontColor}}}.customer .customer__contentSection.customer__contentBox .customer__contentSection--edit{bottom:15px;right:15px;top:unset}.customer .customer__contentSection.customer__contentBox.editSection-js{margin:0;border-color:white;position:absolute;background-color:white;z-index:11}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentBox.editSection-js{position:fixed !important;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{cursor:pointer;display:block;visibility:visible;padding:0 0 40px;position:relative;font-size:18px;font-weight:500}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{color:{{settings.primaryBtnBgColor}};position:absolute;padding:12px;border-radius:50%;bottom:unset;width:43px;height:43px;text-align:center;box-sizing:border-box}.customer__title{text-transform:uppercase;font-size:14px;font-weight:500;color:{{settings.primaryFontColor}};display:block;padding-bottom:35px}.customer__title--smallLetters{text-transform:none;font-size:12px}.customer__title--color{color:{{settings.linkFontColor}};text-transform:none}@media screen and (max-width: 599px){.customer .customer__breadcrumbs--desktop{display:none;visibility:hidden}}.customer .customer__breadcrumbs--mobile{background-color:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};font-size:14px}@media screen and (min-width: 600px){.customer .customer__breadcrumbs--mobile{display:none;visibility:hidden}}.customer .customer__breadcrumbs--mobile>span{padding:27px 0;display:inline-block;margin:0 22px}.customer .customer__breadcrumbs--mobile>span>svg{margin:0 15px -4px -5px}.customer .customer__menu{background-color:#fff;transition:200ms;z-index:9}.customer .customer__menu .mobileLogout{display:none}@media screen and (min-width: 600px){.customer .customer__menu{margin-right:4%;padding-left:3%}}@media screen and (min-width: 768px){.customer .customer__menu{margin-right:5%}}@media screen and (min-width: 600px){.customer .customer__menu li.active-js .customer__menu--submenu{display:block;background-color:#fff;padding:5px 0 5px 25px;margin:9px 0 -10px -30px}.customer .customer__menu>ul>li.active-js{border-left:5px solid {{settings.linkFontColor}}}.customer .customer__menu>ul>li{border-left:5px solid #fff}.customer .customer__menu li .customer__menu--submenu .active-js{color:{{settings.linkFontColor}}}}.customer .customer__menu--submenu{display:none}@media screen and (min-width: 600px){.customer .customer__menu>ul{border-right:1px solid #d6d6d6}}.customer .customer__menu ul{list-style:none;padding:5px 0 5px 43px;font-size:14px;color:#959494;margin:0}@media screen and (min-width: 600px){.customer .customer__menu ul{padding:5px 0 0 2px;margin-left:-10px;box-sizing:border-box;min-width:210px}}.customer .customer__menu ul>li{padding:10px 0 10px 23px}.customer .customer__menu ul>li:first-of-type{padding-top:10px}.customer .customer__menu ul>li li{padding:10px 0 10px 23px}.customer .customer__menu ul>li li:first-of-type{padding-top:10px}.customer .customer__menu ul li{cursor:pointer}.customer .customer__submenu{font-size:14px}.customer .customer__submenu ul{margin:0;padding:0;list-style:none;position:relative}.customer .customer__submenu li{color:#a9a8a8;display:inline-block;padding:20px 17px 20px 22px}@media screen and (min-width: 600px){.customer .customer__submenu li{padding-bottom:30px}.customer .customer__submenu li.active-js{position:absolute;left:0}}@media screen and (min-width: 600px){.customer .customer__submenu{font-weight:400;margin-bottom:6px}}@media screen and (min-width: 600px){.customer .customer__submenu--mobile{display:none;visibility:hidden}}@media screen and (min-width: 600px){.customer .customer__addresses .customer__contentSection.customer__contentBox{min-height:140px}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{top:18px}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{padding:15px;top:18px;left:unset;right:15px}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit .svgIcon{width:16px;height:16px}}.customer .customer__contentSection .customer__contentSection--inner{font-size:14px}.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>.form__input-wrapper,.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>button,.customer .customer__contentSection .customer__hiddenForm-js.editMode-js>.form__checkBox{display:inline-block;visibility:visible}.customer .customer__contentSection .customer__hiddenForm-js.editMode-js .customer__contentPreview{display:none;visibility:hidden}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper,.customer .customer__contentSection .customer__hiddenForm-js>button,.customer .customer__contentSection .customer__hiddenForm-js>.form__checkBox{display:none;visibility:hidden}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper{margin-bottom:13px}.customer .customer__contentSection .customer__hiddenForm-js>.form__input-wrapper.form__input-lastSmall{padding-bottom:15px}.customer .customer__contentSection .customer__hiddenForm-js .secondary-action-button{margin-top:0}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview{display:block;visibility:visible;line-height:2}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview label{display:block;font-size:11px;color:#d6d6d6}.customer .customer__contentSection .customer__hiddenForm-js .customer__contentPreview input:disabled{font-size:26px;color:#AEADAD;background-color:transparent;border:none}.customer .customer__contentSection.customer__contentSection--hidden{border:none}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{font-size:16px;color:{{settings.primaryBtnBgColor}}}}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{display:inline-block}@media screen and (min-width: 600px){.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};font-size:40px;background-color:transparent;cursor:pointer;position:absolute;top:55px;left:128px}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit .svgIcon{width:48px;height:48px}}.customer .smallBoxesSection .customer__title{padding-bottom:25px;margin:-40px 0 0 22px}@media screen and (min-width: 600px){.customer .smallBoxesSection .customer__title{margin:-25px 0 0 22px;width:100%;box-sizing:border-box}}.customer .smallBoxesSection .customer__contentBox{position:relative}.customer .smallBoxesSection .customer__contentSection.customer__contentBox{margin-bottom:35px}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span{display:block;font-size:14px}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(1){font-size:18px;font-weight:300}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(2){padding:15px 0}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(2):first-letter{text-transform:uppercase}.customer .smallBoxesSection .customer__contentSection.customer__contentBox span:nth-child(3){opacity:.5}.customer .smallBoxesSection .customer__contentBoxButton{cursor:pointer;fill:{{settings.linkFontColor}};position:absolute;padding:12px;bottom:3px;right:5px}.customer .smallBoxesSection .customer__contentBoxButton .svgIcon{width:15px;height:15px}.customer .complaints .complaints__productBox,.customer .complaints .reviews__productBox,.customer .complaints .wishList__productBox,.customer .customerReviews .complaints__productBox,.customer .customerReviews .reviews__productBox,.customer .customerReviews .wishList__productBox,.customer .wishList .complaints__productBox,.customer .wishList .reviews__productBox,.customer .wishList .wishList__productBox{margin:20px 25px 40px;position:relative;max-width:375px;box-sizing:border-box}.customer .complaints .wishList__removeProduct span,.customer .customerReviews .wishList__removeProduct span,.customer .wishList .wishList__removeProduct span{font-size:19px;color:#939292;fill:#939292;position:absolute;right:-15px;top:-16px;padding:15px;cursor:pointer}.customer .complaints .complaints__product,.customer .complaints .reviews__product,.customer .complaints .wishList__product,.customer .customerReviews .complaints__product,.customer .customerReviews .reviews__product,.customer .customerReviews .wishList__product,.customer .wishList .complaints__product,.customer .wishList .reviews__product,.customer .wishList .wishList__product{text-decoration:none;display:flex;padding-bottom:25px;border-bottom:1px solid #e5e5e5}.customer .complaints .complaints__productDetails,.customer .complaints .reviews__productDetails,.customer .complaints .wishList__productDetails,.customer .customerReviews .complaints__productDetails,.customer .customerReviews .reviews__productDetails,.customer .customerReviews .wishList__productDetails,.customer .wishList .complaints__productDetails,.customer .wishList .reviews__productDetails,.customer .wishList .wishList__productDetails{margin-left:15px;width:calc(100% - 145px)}.customer .complaints .complaints__productDetails span,.customer .complaints .reviews__productDetails span,.customer .complaints .wishList__productDetails span,.customer .customerReviews .complaints__productDetails span,.customer .customerReviews .reviews__productDetails span,.customer .customerReviews .wishList__productDetails span,.customer .wishList .complaints__productDetails span,.customer .wishList .reviews__productDetails span,.customer .wishList .wishList__productDetails span{display:block;color:#191616;font-size:14px;max-width:100%;overflow:hidden;max-height:23px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px}.customer .complaints .complaints__productDetails span.product__previousPrice,.customer .complaints .reviews__productDetails span.product__previousPrice,.customer .complaints .wishList__productDetails span.product__previousPrice,.customer .customerReviews .complaints__productDetails span.product__previousPrice,.customer .customerReviews .reviews__productDetails span.product__previousPrice,.customer .customerReviews .wishList__productDetails span.product__previousPrice,.customer .wishList .complaints__productDetails span.product__previousPrice,.customer .wishList .reviews__productDetails span.product__previousPrice,.customer .wishList .wishList__productDetails span.product__previousPrice{margin-bottom:0;color:#999fa2;font-weight:400}.customer .complaints .complaints__productDetails span a,.customer .complaints .reviews__productDetails span a,.customer .complaints .wishList__productDetails span a,.customer .customerReviews .complaints__productDetails span a,.customer .customerReviews .reviews__productDetails span a,.customer .customerReviews .wishList__productDetails span a,.customer .wishList .complaints__productDetails span a,.customer .wishList .reviews__productDetails span a,.customer .wishList .wishList__productDetails span a{color:#191616;text-decoration:none}.customer .complaints .complaints__productDetails span.wishList__addToCart,.customer .complaints .reviews__productDetails span.wishList__addToCart,.customer .complaints .wishList__productDetails span.wishList__addToCart,.customer .customerReviews .complaints__productDetails span.wishList__addToCart,.customer .customerReviews .reviews__productDetails span.wishList__addToCart,.customer .customerReviews .wishList__productDetails span.wishList__addToCart,.customer .wishList .complaints__productDetails span.wishList__addToCart,.customer .wishList .reviews__productDetails span.wishList__addToCart,.customer .wishList .wishList__productDetails span.wishList__addToCart{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};text-transform:uppercase;bottom:25px;margin-bottom:0;position:absolute}.customer .complaints .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .complaints .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .complaints .wishList__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .customerReviews .wishList__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .complaints__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .reviews__productDetails span.wishList__addToCart .svgIcon,.customer .wishList .wishList__productDetails span.wishList__addToCart .svgIcon{width:19px;height:19px;margin-bottom:-2px}.customer .complaints .complaints__productDetails .complaint__statusText,.customer .complaints .complaints__productDetails p.reviews__reviewText,.customer .complaints .reviews__productDetails .complaint__statusText,.customer .complaints .reviews__productDetails p.reviews__reviewText,.customer .complaints .wishList__productDetails .complaint__statusText,.customer .complaints .wishList__productDetails p.reviews__reviewText,.customer .customerReviews .complaints__productDetails .complaint__statusText,.customer .customerReviews .complaints__productDetails p.reviews__reviewText,.customer .customerReviews .reviews__productDetails .complaint__statusText,.customer .customerReviews .reviews__productDetails p.reviews__reviewText,.customer .customerReviews .wishList__productDetails .complaint__statusText,.customer .customerReviews .wishList__productDetails p.reviews__reviewText,.customer .wishList .complaints__productDetails .complaint__statusText,.customer .wishList .complaints__productDetails p.reviews__reviewText,.customer .wishList .reviews__productDetails .complaint__statusText,.customer .wishList .reviews__productDetails p.reviews__reviewText,.customer .wishList .wishList__productDetails .complaint__statusText,.customer .wishList .wishList__productDetails p.reviews__reviewText{display:none;line-height:2;font-size:14px;margin:10px 0 0 -115px}.customer .complaints .complaints__productDetails .complaint__statusText,.customer .complaints .reviews__productDetails .complaint__statusText,.customer .complaints .wishList__productDetails .complaint__statusText,.customer .customerReviews .complaints__productDetails .complaint__statusText,.customer .customerReviews .reviews__productDetails .complaint__statusText,.customer .customerReviews .wishList__productDetails .complaint__statusText,.customer .wishList .complaints__productDetails .complaint__statusText,.customer .wishList .reviews__productDetails .complaint__statusText,.customer .wishList .wishList__productDetails .complaint__statusText{max-height:100px}.customer .complaints .complaints__productDetails .complaint__statusText span,.customer .complaints .reviews__productDetails .complaint__statusText span,.customer .complaints .wishList__productDetails .complaint__statusText span,.customer .customerReviews .complaints__productDetails .complaint__statusText span,.customer .customerReviews .reviews__productDetails .complaint__statusText span,.customer .customerReviews .wishList__productDetails .complaint__statusText span,.customer .wishList .complaints__productDetails .complaint__statusText span,.customer .wishList .reviews__productDetails .complaint__statusText span,.customer .wishList .wishList__productDetails .complaint__statusText span{display:inline-block;font-weight:400}.customer .complaints .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .complaints .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .complaints .wishList__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .customerReviews .wishList__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .complaints__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .reviews__productDetails .complaint__statusText span:nth-child(odd),.customer .wishList .wishList__productDetails .complaint__statusText span:nth-child(odd){width:111px;opacity:.5}.customer .complaints .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .complaints .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .complaints .wishList__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .customerReviews .wishList__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .complaints__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .reviews__productDetails .complaint__statusText span:nth-child(even),.customer .wishList .wishList__productDetails .complaint__statusText span:nth-child(even){width:50%}.customer .complaints .complaints__productDetails span.complaint__moreDetails,.customer .complaints .complaints__productDetails span.review__link,.customer .complaints .reviews__productDetails span.complaint__moreDetails,.customer .complaints .reviews__productDetails span.review__link,.customer .complaints .wishList__productDetails span.complaint__moreDetails,.customer .complaints .wishList__productDetails span.review__link,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails,.customer .customerReviews .complaints__productDetails span.review__link,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails,.customer .customerReviews .reviews__productDetails span.review__link,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails,.customer .customerReviews .wishList__productDetails span.review__link,.customer .wishList .complaints__productDetails span.complaint__moreDetails,.customer .wishList .complaints__productDetails span.review__link,.customer .wishList .reviews__productDetails span.complaint__moreDetails,.customer .wishList .reviews__productDetails span.review__link,.customer .wishList .wishList__productDetails span.complaint__moreDetails,.customer .wishList .wishList__productDetails span.review__link{font-size:14px;margin-top:70px;text-decoration:underline;font-weight:400;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};margin-bottom:0;cursor:pointer}.customer .complaints .complaints__productDetails span.complaint__moreDetails a,.customer .complaints .complaints__productDetails span.review__link a,.customer .complaints .reviews__productDetails span.complaint__moreDetails a,.customer .complaints .reviews__productDetails span.review__link a,.customer .complaints .wishList__productDetails span.complaint__moreDetails a,.customer .complaints .wishList__productDetails span.review__link a,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails a,.customer .customerReviews .complaints__productDetails span.review__link a,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails a,.customer .customerReviews .reviews__productDetails span.review__link a,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails a,.customer .customerReviews .wishList__productDetails span.review__link a,.customer .wishList .complaints__productDetails span.complaint__moreDetails a,.customer .wishList .complaints__productDetails span.review__link a,.customer .wishList .reviews__productDetails span.complaint__moreDetails a,.customer .wishList .reviews__productDetails span.review__link a,.customer .wishList .wishList__productDetails span.complaint__moreDetails a,.customer .wishList .wishList__productDetails span.review__link a{color:{{settings.linkFontColor}}}.customer .complaints .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .complaints__productDetails span.review__link .svgIcon,.customer .complaints .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .reviews__productDetails span.review__link .svgIcon,.customer .complaints .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .complaints .wishList__productDetails span.review__link .svgIcon,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .complaints__productDetails span.review__link .svgIcon,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .reviews__productDetails span.review__link .svgIcon,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .customerReviews .wishList__productDetails span.review__link .svgIcon,.customer .wishList .complaints__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .complaints__productDetails span.review__link .svgIcon,.customer .wishList .reviews__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .reviews__productDetails span.review__link .svgIcon,.customer .wishList .wishList__productDetails span.complaint__moreDetails .svgIcon,.customer .wishList .wishList__productDetails span.review__link .svgIcon{margin-bottom:-4px;transition:300ms}.customer .complaints .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .complaints .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .complaints .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .complaints .wishList__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .customerReviews .wishList__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .complaints__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .complaints__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .reviews__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .reviews__productDetails span.review__link .svgIcon.rotateUp-js,.customer .wishList .wishList__productDetails span.complaint__moreDetails .svgIcon.rotateUp-js,.customer .wishList .wishList__productDetails span.review__link .svgIcon.rotateUp-js{transform:rotate(-90deg);transition:300ms}.customer .complaints .complaints__productDetails span.complaint__moreDetails,.customer .complaints .reviews__productDetails span.complaint__moreDetails,.customer .complaints .wishList__productDetails span.complaint__moreDetails,.customer .customerReviews .complaints__productDetails span.complaint__moreDetails,.customer .customerReviews .reviews__productDetails span.complaint__moreDetails,.customer .customerReviews .wishList__productDetails span.complaint__moreDetails,.customer .wishList .complaints__productDetails span.complaint__moreDetails,.customer .wishList .reviews__productDetails span.complaint__moreDetails,.customer .wishList .wishList__productDetails span.complaint__moreDetails{margin-top:45px}.customer .complaints .complaints__productDetails span.complaint__link,.customer .complaints .reviews__productDetails span.complaint__link,.customer .complaints .wishList__productDetails span.complaint__link,.customer .customerReviews .complaints__productDetails span.complaint__link,.customer .customerReviews .reviews__productDetails span.complaint__link,.customer .customerReviews .wishList__productDetails span.complaint__link,.customer .wishList .complaints__productDetails span.complaint__link,.customer .wishList .reviews__productDetails span.complaint__link,.customer .wishList .wishList__productDetails span.complaint__link{color:#939292;fill:#939292;margin-top:0;padding:15px;cursor:pointer;position:absolute;top:-17px;right:-17px}.customer .complaints .complaints__productDetails span.complaint__type,.customer .complaints .reviews__productDetails span.complaint__type,.customer .complaints .wishList__productDetails span.complaint__type,.customer .customerReviews .complaints__productDetails span.complaint__type,.customer .customerReviews .reviews__productDetails span.complaint__type,.customer .customerReviews .wishList__productDetails span.complaint__type,.customer .wishList .complaints__productDetails span.complaint__type,.customer .wishList .reviews__productDetails span.complaint__type,.customer .wishList .wishList__productDetails span.complaint__type{font-size:12px;font-weight:400;text-transform:uppercase;display:inline}.customer .complaints .complaints__productDetails span.complaint__type>span,.customer .complaints .reviews__productDetails span.complaint__type>span,.customer .complaints .wishList__productDetails span.complaint__type>span,.customer .customerReviews .complaints__productDetails span.complaint__type>span,.customer .customerReviews .reviews__productDetails span.complaint__type>span,.customer .customerReviews .wishList__productDetails span.complaint__type>span,.customer .wishList .complaints__productDetails span.complaint__type>span,.customer .wishList .reviews__productDetails span.complaint__type>span,.customer .wishList .wishList__productDetails span.complaint__type>span{margin-left:2px;font-size:12px;font-weight:400;text-transform:capitalize;text-overflow:ellipsis;white-space:nowrap;display:inline-block;margin-bottom:-3px;max-width:50%}.customer .complaints .complaints__image,.customer .complaints .reviews__image,.customer .complaints .wishList__image,.customer .customerReviews .complaints__image,.customer .customerReviews .reviews__image,.customer .customerReviews .wishList__image,.customer .wishList .complaints__image,.customer .wishList .reviews__image,.customer .wishList .wishList__image{position:relative;width:100px;margin:0;height:130px;padding:0;text-align:center;font-size:50px;color:#E5E5E5;overflow:hidden}.customer .complaints .complaints__image img,.customer .complaints .reviews__image img,.customer .complaints .wishList__image img,.customer .customerReviews .complaints__image img,.customer .customerReviews .reviews__image img,.customer .customerReviews .wishList__image img,.customer .wishList .complaints__image img,.customer .wishList .reviews__image img,.customer .wishList .wishList__image img{width:auto;min-width:100px;max-width:100%}.customer .complaints span.complaints__lightText,.customer .customerReviews span.complaints__lightText,.customer .wishList span.complaints__lightText{opacity:.5;font-weight:400;margin-top:8px}.customer .customer__dateHourSpace{display:inline !important;padding:0 7px}@media screen and (min-width: 600px){.customer .customerReviews{margin-top:20px}}.customer .customerReviews .customer__title{margin-left:22px}.customer .customerPagination{list-style:none;margin:0 0 0 22px;padding:0}.customer .customerPagination li{display:inline-block;margin:0;color:rgba(25,22,22,0.5);padding:0;cursor:pointer}.customer .customerPagination li.active span{color:#191616}.customer .customer__orderContent{color:{{settings.primaryFontColor}};position:absolute;top:0;background-color:white;right:0;left:0}.customer .customer__orderContent .orderContent__setIcon{margin-bottom:-2px;fill:{{settings.secondaryFontColor}}}.customer .customer__orderContent .orderContent__showSet{display:block;font-size:14px;font-weight:400;cursor:pointer}.customer .customer__orderContent .orderContent__productsRow.orderContent__setElement{display:none;max-height:159px}.customer .customer__orderContent .orderContent__productsRow.orderContent__setElement.elementVisible-js{animation:showSetAnimation .5s;animation-fill-mode:both;display:flex}@keyframes showSetAnimation{from{height:0}to{height:210px}}@media screen and (min-width: 600px){.customer .customer__orderContent{left:240px;width:calc(100% - 250px);z-index:11;top:125px}}.customer .customer__orderContent .form__input-info[for="defectDate"]{top:-5px;font-size:11px}.customer .customer__orderContent .form__icons{fill:{{settings.linkFontColor}}}.customer .customer__orderContent textarea{height:auto}.customer .customer__orderContent .form .form__icon_padding{padding-left:25px}.customer .customer__orderContent .customer__title{padding-bottom:25px}.customer .customer__orderContent .orderContent{padding:25px;box-sizing:border-box}.customer .customer__orderContent .orderContent__infoBox{margin-bottom:30px}.customer .customer__orderContent .orderContent__infoBox>span{display:block}.customer .customer__orderContent .orderContent__infoBox .orderContent__lightText{font-size:14px;color:#adabab;line-height:2;font-weight:400}.customer .customer__orderContent .orderContent__productDetails{font-weight:500;font-size:14px;width:calc(100% - 130px)}.customer .customer__orderContent .orderContent__productTitle{display:block;color:#191616;font-size:14px;max-width:100%;overflow:hidden;max-height:70px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px}.customer .customer__orderContent .orderContent__productTitle a{text-decoration:none;color:#191616;max-height:20px}.customer .customer__orderContent .orderContent__productDetails span.orderContent__productAttributes{font-size:12px;color:#a9a7a7;display:block;line-height:1.2;white-space:normal}.customer .customer__orderContent .orderContent__productPrice{display:block}.customer .customer__orderContent .orderContent__bottomText{margin-top:62px;display:inline-block}.customer .customer__orderContent .orderContent__complainBtn{display:block;margin:20px 0 5px;text-decoration:underline;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};font-weight:400;cursor:pointer}.customer .customer__orderContent .orderContent__complainBtn svg{margin:0 3px -4px 0}.customer .customer__orderContent .orderContent__summary div{display:flex;justify-content:space-between;align-items:center;font-size:14px}.customer .customer__orderContent .orderContent__summary div span:nth-child(2){font-weight:500}.customer .customer__orderContent .orderContent__summary .orderContent__finalPrice{font-weight:500;font-size:18px;margin:40px 0}.customer .customer__orderContent .orderContent__status{margin:37px 0;font-size:14px;justify-content:space-between;display:flex}.customer .customer__orderContent .orderContent__status span:first-letter{text-transform:uppercase}.customer .customer__orderContent .orderContent__status span:first-of-type{color:#a9a7a7}.customer .customer__orderContent .orderContent__status span:last-of-type{color:{{settings.linkFontColor}};font-weight:500}.customer .customer__orderContent .orderContent__btn{width:100%;margin:0 0 20px}.customer .customer__orderContent .orderContent__productsRow{border-bottom:1px solid {{settings.borderColor}};padding:14px 0;max-height:210px;box-sizing:border-box;display:flex}.customer .customer__orderContent .orderContent__productsRow.orderContent__titleRow{height:auto;padding:0}.customer .customer__orderContent .orderContent__productsRow.orderContent__titleRow span:nth-child(2){min-width:190px}.customer .customer__orderContent .orderContent__productImage{width:100px;height:130px;overflow:hidden;margin-right:22px;flex-shrink:0}.customer .customer__orderContent .orderContent__productImage img{width:auto;min-width:100px;max-width:100%}.customer .customer__orderContent .checkBoxes__container--radio{display:flex;justify-content:flex-start;margin:30px 0 25px -10px}.customer .customer__orderContent .orderContent__link{text-decoration:underline;color:{{settings.linkFontColor}}}.customer .customer__orderContent .orderContent__docsToPrint{font-size:14px;margin:-10px -4px 23px}.customer .customer__orderContent .orderContent__docsToPrint__item{display:block;padding:0 0 5px 5px;margin-bottom:5px}.customer .customer__orderContent .orderContent__docsToPrint__item svg{width:14px;margin:0 3px -3px 0;fill:{{settings.secondaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .quantityField__label{display:block;margin-bottom:10px}.customer .customer__orderContent .form__input-wrapper.min-js .button-minus-add-product svg{fill:#dddddd;transition:200ms}.customer .customer__orderContent .form__input-wrapper.max-js .button-plus-add-product svg{fill:#dddddd;transition:200ms}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product,.customer .customer__orderContent .form__input-wrapper .button-plus-add-product{cursor:pointer;outline:none;background-color:{{settings.primaryPageBgColor}};border:none;color:{{settings.primaryFontColor}};width:55px;height:55px;display:inline-block;font-weight:700;margin:0}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product{font-size:23px}.customer .customer__orderContent .form__input-wrapper .button-minus-add-product svg{transition:200ms;margin-bottom:-2px;fill:{{settings.primaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .button-plus-add-product{font-size:20px}.customer .customer__orderContent .form__input-wrapper .button-plus-add-product svg{margin-bottom:-2px;transition:200ms;fill:{{settings.primaryFontColor}}}.customer .customer__orderContent .form__input-wrapper .quantity-field{border:1px solid #191616;background-color:{{settings.primaryPageBgColor}};color:{{settings.primaryFontColor}};width:70px;height:55px;text-align:center;padding:0;box-sizing:border-box;font-size:17px;font-weight:500;left:-2px;margin-right:-4px;display:inline-block;position:relative}.customer .complain__product{display:flex;margin:35px 0 20px;padding:12px 0;border-bottom:1px solid {{settings.borderColor}}}.customer .complain__product figure svg{display:none;visibility:hidden}.customer .complain__product figure img{display:inline-block;visibility:visible}.customer .complain__product figure.noImage-js img{display:none;visibility:hidden}.customer .complain__product figure.noImage-js svg{display:inline-block;visibility:visible;height:40px;margin-top:25px}.customer .complain__product .complain__productTitle{font-weight:500;color:{{settings.primaryFontColor}};display:block;font-size:14px}.customer .complain__product .complain__lightText{font-weight:400;color:#adabab;font-size:13px}.customer .complain__product figure{width:85px;height:100px;overflow:hidden;margin:0 15px 0 0;display:inline-block}.customer .complain__product img{width:100%;height:auto}.customer .complain__product p{margin:0}.customer .customer__consents{font-size:14px}@media screen and (max-width: 599px){.customer .customer__consents{margin-top:20px}}.customer .customer__consents .primary-action-button,.customer .customer__consents .secondary-action-button{display:block;margin:15px 0 30px;width:100%}.customer .customer__consents ul{margin:0;padding:0;list-style:none}.customer .customer__consents li{line-height:1.8}.customer .customer__consents span{display:block}.customer .customer__consents .consentWithdraw__warning{color:#CE283E;font-size:12px;margin-top:15px}.customer .customer__consents .consentAccepted__date{color:#959494}.customer .customer__consents .acceptedConsents li{margin-bottom:30px}.customer .customer__consents .consentChannel{margin-top:10px}.customer .customer__consents .consentDetails{display:none;margin-bottom:-10px}.customer__socialButton{color:#fff;font-size:14px;text-transform:uppercase;font-weight:400;display:block;margin-bottom:20px;padding:17px;text-align:center;cursor:pointer;letter-spacing:1px}.customer__socialButton svg{fill:#fff}.customer__socialButton__google{background-color:#DD4B39}.customer__socialButton__google svg{margin:0 5px -7px 0;height:26px;width:26px}.customer__socialButton__facebook{background-color:#3B5998}.customer__socialButton__facebook svg{margin:0 5px -4px 0;height:20px;width:20px}@media screen and (min-width: 600px){.customer .complaints.complaints__emptySectionMargin{margin-top:-52px}.customer .complaints{margin-top:-60px}}.customer .showOrder-js{cursor:pointer}.customer .orderContent__additionalInformation .customer__title__attachments{padding-top:25px;text-align:left !important}.customer .orderContent__additionalInformation .attachmentsFile{display:block;text-decoration:none}.customer .orderContent__additionalInformation .attachmentsFile .attachmentsFile__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%;display:inline-block;margin-bottom:-9px}.customer .orderContent__additionalInformation .attachmentsFile .svgIcon{margin-bottom:-3px}.customer .customer__history{width:100%;padding:0 20px;box-sizing:border-box;text-align:center}.customer .customer__history__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #f2f2f2;margin-bottom:5px;font-size:13px;font-weight:300;align-items:center}.customer .customer__history__row:last-of-type{border-bottom:none;margin-bottom:20px}.customer .customer__history__rowTitle{font-size:15px;width:35%;text-align:left;font-weight:400}.customer .popupDialog__complain .popupDialog__wrapper{max-width:700px;padding-bottom:0}.customer .complain__product{width:40%;padding:0;margin:40px 0;vertical-align:top;display:inline-block;border:none}.customer .complain__product figure{width:100%;height:auto;margin:0 0 20px}.customer .complain__form{width:calc(60% - 84px);display:inline-block;margin:40px}.customer .complain__form>strong{display:block;margin-bottom:20px}.customer .complain__form textarea{margin-top:10px;padding:10px}.customer .customer__orderContent .checkBoxes__container--radio{margin-top:0}.customer .form__attachement-input-container{position:relative}.customer .form__clear-attachement-input{position:absolute;top:11px;cursor:pointer} W tym samym katalogu otwórz plik layout-m.css. Wyszukaj blok kodu z frazą .hide-on-mobile-order. Usuń go i wklej w jego miejsce następujący kod: @media screen and (max-width: 768px){.hide-on-mobile-order{display:none;visibility:hidden}.customer__blockContent.hide-on-mobile{display:none}.hide-on-desktop-order{display:inline-block;visibility:visible}.customer .customer__menu ul{border-right:none}}@media screen and (max-width: 599px){.temporaryPopup{width:100%;text-align:center;min-height:72px;background-color:#f2f2f2;box-sizing:border-box;top:0;margin:0;padding:26px 0}.customer .customer__menu ul{padding:12px 0 5px 0}.customer .customer__menu ul>li.active-js{color:{{settings.linkFontColor}}}.customer .customer__menu ul>li{padding:18px 0 18px 23px}.customer .customer__orderContent .orderContent__status{margin:0 0 37px}.customer .customer__orderContent{min-height:100%}}@media screen and (max-width: 359px){.customer .customer__orderContent .orderContent__complainBtn{margin:7px 0 0 -130px}}@media screen and (max-width: 479px){.customer .popupDialog__complain{padding:0}.customer .popupDialog__complain .popupDialog__closeBtn{top:17px;right:17px}}@media screen and (max-width: 768px){.customer__flexboxContainer{flex-direction:column}}@media screen and (max-width: 599px){.customer .customer__contentSection.customer__contentBox.editSection-js{padding:5px 20px 15px;top:155px}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{display:none;visibility:hidden}.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentSection--edit{top:-77px;right:13px;background-color:#fff;width:45px;height:44px;padding:14px 11px 11px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}}@media screen and (min-width: 600px) and (max-width: 768px){.customer .customer__contentSection.customer__contentBox.editSection-js .customer__contentBoxTitle{font-size:16px;padding:10px 0 30px}}@media screen and (min-width: 630px){.customer .customer__contentSection.customer__contentBox.editSection-js{max-width:360px}}@media screen and (max-width: 599px){.customer .customer__contentSection.customer__contentSection--hidden{position:static}.customer .customer__contentSection.customer__contentSection--hidden .customer__contentSection--edit{position:absolute;color:white;fill:white;background-color:{{settings.linkFontColor}};border-radius:50%;font-size:18px;width:43px;height:43px;text-align:center;box-sizing:border-box;top:80px;padding:13px 11px 11px;box-shadow:0 2px 5px 1px #0000001c}.customer .customer__contentSection.customer__contentSection--hidden.editSection-js .customer__contentSection--edit{background-color:transparent}}@media screen and (max-width: 599px){.customer__content{flex-grow:5}}@media screen and (max-width: 768px){.customer .customer__breadcrumbs--desktop{display:none;visibility:hidden}}@media screen and (max-width: 768px){.customer .customer__breadcrumbs--mobile{display:inherit;visibility:visible}}@media screen and (max-width: 768px){.customer .customer__menu{position:absolute;top:71px;left:-300px;flex-grow:1}.customer .customer__menu.customer__menuActive-js{left:0;bottom:0;right:0}}@media screen and (max-width: 768px){.customer .mobileLogout{display:block !important;width:100% !important;margin-top:50px}.customer .mobileLogoutButton{width:calc(100% - 40px);padding:18px 0;margin-left:20px;margin-right:20px;text-align:center;color:{{settings.primaryBtnFontColor}};background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400}.customer .mobileLogoutButton:hover{cursor:pointer;color:{{settings.primaryBtnHoverFontColor}};background-color:{{settings.primaryBtnHoverBgColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}}}}@media screen and (max-width: 599px){.customer .customer__submenu{margin-bottom:30px}}@media screen and (max-width: 599px){.customer .customer__submenu.customer__submenu--desktop{display:none;visibility:hidden}}@media screen and (max-width: 599px){.customer .customer__menu .active-js,.customer .customer__submenu .active-js{color:{{settings.linkFontColor}}}}.customer .complain__product{width:100%;margin:20px 0}.customer .complain__form{width:100%;margin:20px 0}@media screen and (max-width: 599px){.loyaltyProgram .customer__title,.wishList .customer__title{margin:-40px 0 0 22px}} Kolejnym krokiem jest otwarcie pliku static-elements -> customer-profile -> customer-profile.html. Kilka linii przed końcem pliku znajduje się linia z frazą </nav>. Tuż nad nią (a przed linią z frazą </ul>) wstaw poniższy kod: {{ translations.Cpr_Logout }} Inne zmiany Otwórz plik layout1.js. Wyszukaj linię z frazą var mainSection = $('main');. Tuż pod nią wklej poniższy kod: mainSection.on('click', '.customerLogout-js', function (e) { app.customerLogout(e); }); Następnie w tym samym pliku wyszukaj linijkę mainSection.on('click', '.customer__menuActivate-js', customerProfile.showCustomerProfileMenu); i tuż nad nią wklej: jest $(window).on('load', function(e) { let searchFavParam = new URLSearchParams(window.location.search); if(searchFavParam.has('fav')) { $('.customer__menu').addClass('customer__menu-js'); $('.customerProfileButton').removeClass('activePage'); $('.favouriteItemsButton').addClass('activePage'); var favourites = $('.customerPrimaryMenu-js').find('[data-template="wish-list"]'); favourites.click(); } else if (searchFavParam.has('accountData')) { var accountData = $('.customerPrimaryMenu-js').find('[data-template="account-data"]'); accountData.click(); } }); Otwórz plik css -> layout.css. Wyszukaj .popup-dialog.after-adding-to-cart-popup{z-index:12;bottom:0;top:0;right:0;left:0;margin:auto;position:fixed;padding:30px;box-sizing:border-box}. Zamień liczbę 12 przy z-index na 101. Modyfikacja nagłówków - obie wersje nagłówka Na koniec należy zmodyfikować wygląd nagłówków. Aby sprawdzić, którą wersję nagłówka posiadasz, wejdź do katalogu elements -> header. Jeśli w środku znajduje się plik header-1.html to posiadasz wersję 1. Jeśli header-2.html to wersję 2. W zależności od posiadanej wersji, wykonaj odpowiednie instrukcje (kod dla obu wersji będzie się różnić). Jeśli posiadasz nagłówek w wersji 1: Otwórz katalog css a w nim plik layout-m.css. W nim znajduje się bardzo długa linia, w której treści pojawia się fraza headerSection. Usuń całą tę linię i wklej w jej miejsce poniższy kod: @media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}.headerSection .header__icon svg{width:18px;height:18px}.headerSection .header__icon.header__login{display:none}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__shopData{position:absolute;top:30px;right:30px}.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:none}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg,.headerSection .headerSection__logo{min-height:30px;height:30px}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 35px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none;position:fixed;top:0;bottom:56px;overflow-y:auto;overflow-x:hidden;z-index:1}.headerSection .headerSection__mainMenu{position:absolute;top:50px;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{text-align:left;position:absolute;padding:15px;width:105px;box-sizing:border-box;left:20px;top:-40px;font-size:16px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};background-color:{{settings.headerBgColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn span{display:none}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn svg{margin-bottom:-3px;margin-top:50px}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 22px)}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:50px 40px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block;margin-top:5px}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text i{display:none}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:15px}.headerSection .mobileMenuIcon .iconsMenuItem__text{text-transform:uppercase}.headerSection .mobileMenuIcon svg{top:3px;margin:4px 0 0;width:20px;height:20px}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;font-size:10px;position:static;bottom:22px;right:35px}.headerSection .headerSection__searchForm{position:fixed;top:45px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;max-width:100%;height:100%;padding:35px 0 0;margin:-45px 0 0 0}.headerSection .headerSection__searchForm svg{fill:{{settings.linkFontColor}};display:block;margin-left:33px;margin-bottom:25px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__btn{background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__phrase{margin:10px 0;width:calc(100% - 71px);max-width:calc(100% - 71px)}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:15px;position:relative}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:block}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}.headerSection .hideOnMobile{display:none}} W tym samym katalogu otwórz plik layout.css. Znajdź cały blok kodu, w którym występują frazy headerSection. Usuń go i wklej w jego miejsce następujący kod: .headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:120px;box-sizing:border-box;position:relative;z-index:13}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:120px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;z-index:1}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{height:36px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__row{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .mainNavigation{display:none}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative;padding:10px 0 0}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px;position:absolute;bottom:-37px;right:0;z-index:1}.headerSection .headerSection__iconsMenu .mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .iconsMenuItem__text i{font-style:normal}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{position:absolute;top:100px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;display:none;padding:30px 15px;margin:0;overflow:hidden;box-sizing:border-box;text-align:center;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .headerSection__searchForm__searchButtonMobile{display:none}.headerSection .headerSection__searchForm__phrase{max-width:436px;width:100%;height:36px;padding:0 0 11px;box-sizing:border-box;border-bottom:1px solid {{settings.linkFontColor}};color:{{settings.headerFontColor}};background-color:transparent}.headerSection .headerSection__searchForm__btn{position:absolute;top:30px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:none;display:none}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:45px;position:relative;box-sizing:border-box;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;position:absolute;top:-40px;right:0}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.breadcrumbsFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;margin:10px 0 5px;opacity:.5}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}} Jest to konieczne, ponieważ zmian w nagłówku było zbyt wiele, by wyszukiwać i zmieniać pojedyncze elementy. Podobnie należy zrobić z kodem nagłówka. Otwórz katalog elements -> header a następnie otwórz znajdujący się w nim plik header-1.html, usuń jego zawartość i wklej następujący kod: {% assign categories = page.GroupNodes %} {% assign lngCount = config.Languages | Size -%} {% assign currentLang = config.Languages[page.LanguageId] -%} {{ translations.Hea_Menu }} {% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}} {{ translations.Com_Search }} {% if usr.Authenticated -%} {{ translations.Hea_CustomerProfile }} {{ translations.Cpr_Logout }} {% else -%} {{ translations.Log_Login }} {% endif -%} {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%}) {{ translations.Hea_Menu }} {% if header.Nodes[0] -%} {{ translations.Com_Categories }} {% endif -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize > 0 -%} {{ category | A }} {% for undercategory in category.Groups -%} {{undercategory.Name}} {% endfor -%} {% endif -%} {% endfor -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize == 0 -%} {{ category | A }} {% endif -%} {% endfor -%} {% assign name = 'menuBanner' -%} {% if config.Banners[name].Images[0] -%} {% assign banner = config.Banners[name].Images[0] -%} {% if banner -%} {% assign bannerAlt = banner.Alt | H -%} {{banner.Url | Img: '', bannerAlt}} {% endif -%} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} 220x295 {% endif -%} {{ translations.Hea_Pages }} {{config.DefinedPages.About.Name}} {{config.DefinedPages.Payment.Name}} {{config.DefinedPages.Shipping.Name}} {{config.DefinedPages.Terms.Name}} {{ config.DefinedPages.Contact | A }} {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} {{ translations.Lookbook }} {% for lookbook in config.Lookbook.List -%} {{lookbook.Text}} {% endfor -%} {% elseif lookbooksQuantity == 1 or fakeLookbook -%} {{ config.DefinedPages.Lookbook | A }} {% endif -%} {% if config.Shop.Contact.PhoneNo != '' -%} {{config.Shop.Contact.PhoneNo}} {% endif -%} {% if config.Shop.Contact.Email != '' -%} {{ config.Shop.Contact.Email }} {% endif -%} {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }} {{ translations.Prf_Language }} {% for language in config.Languages -%} {{ language.Language }} {% endfor -%} {{ translations.Com_Currency }} {% for currency in config.Currencies -%} {{ currency.Code }} {% endfor -%} {% if usr.Authenticated == false -%} {{translations.Com_Login}} / {{translations.Registration}} {% endif -%} {% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%} {% if msg.Title != '' -%} {% if msg.Url != '' -%} {{ msg.Title }} {% else -%} {{ msg.Title }} {% endif -%} {% endif -%} {{ msg.Message }} {% endif -%} {% endif -%} {% endfor -%} Następnie otwórz katalog js a w nim plik layout0.js. Wyszukaj linię pageHeader.on('click', '.openCategoryMenu-js', function() { i wstaw tuż nad nią kod: pageHeader.on('click', '.closeSearchButton > svg', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); }); pageHeader.on('input', '.searchFormPhrase-js', function() { if($(this).val().length > 0) { $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden'); } else { $('.headerSection__searchForm__searchButtonMobile').addClass('hidden'); } }); Jeśli posiadasz nagłówek w wersji 2: Otwórz katalog css a w nim plik layout-m.css. W nim znajduje się bardzo długa linia, w której treści pojawia się fraza headerSection. Usuń całą tę linię i wklej w jej miejsce poniższy kod: @media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon svg{width:15px;height:15px}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg,.headerSection .headerSection__logo{min-height:30px;height:30px}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 20px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none}.headerSection .headerSection__mainMenu{position:fixed;top:0;bottom:56px;overflow:auto;z-index:1;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{display:block;text-align:left;position:relative;padding:15px;width:50px;box-sizing:border-box;left:-15px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 20px)}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:10px 20px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .headerSection__row{flex-direction:row}.headerSection .headerSection__iconsMenu .hideOnMobile{display:none !important}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text,.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:block;margin-top:5px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:0}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;margin-top:-9px;font-size:10px}.headerSection .headerSection__searchForm{position:fixed;top:0;padding-top:25px;left:0;right:0;width:100%;max-width:100%;bottom:0;overflow:auto;height:auto;background-color:{{settings.primaryPageBgColor}};z-index:1}.headerSection .headerSection__searchForm .closeSearchButton{display:block;margin-bottom:25px;margin-left:20px}.headerSection .headerSection__searchForm .closeSearchButton:hover{cursor:pointer}.headerSection .headerSection__searchForm .closeSearchButton svg{width:18px;height:18px;fill:{{settings.linkFontColor}}}.headerSection .headerSection__searchForm__btn{display:none;background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__phrase{margin:10px 20px 10px 20px;width:calc(100% - 40px);max-width:calc(100% - 40px);border-left:none;border-right:none;border-top:none;padding-bottom:14px;border-bottom:1px solid {{settings.primaryFontColor}}}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:-5px}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__searchForm__phrase{background-color:rgba(255,255,255,0.4);color:{{settings.secondaryFontColor}}}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.secondaryFontColor}}}.headerSection .searchForm__searchAutocomplete{position:fixed;display:block;top:110px;left:0;width:100%}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}}@media only screen and (max-width: 360px){.headerSection.headerSection__bg>.headerSection__row{padding:15px}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{padding:10px 20px 40px}.headerSection .headerSection__shopData{left:0}} W tym samym katalogu otwórz plik layout.css. Znajdź cały blok kodu, w którym występują frazy headerSection. Usuń go i wklej w jego miejsce następujący kod: .headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:150px;box-sizing:border-box;position:relative;z-index:13}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:150px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;overflow:hidden}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{height:36px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .headerSection__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;position:relative}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2),.headerSection .mainNavigation{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{height:36px;position:relative;box-sizing:border-box;width:30%;max-width:420px}.headerSection .headerSection__searchForm__searchButtonMobile,.headerSection .headerSection__searchForm .closeSearchButton{display:none}.headerSection .headerSection__searchForm__phrase{max-width:420px;width:100%;height:36px;padding:12px 10px 11px;box-sizing:border-box;border:1px solid {{settings.borderColor}};color:{{settings.headerFontColor}};background-color:rgba(255,255,255,0.25)}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.headerFontColor}};opacity:.7}.headerSection .headerSection__searchForm__btn{position:absolute;top:0;right:-35px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:1px solid {{settings.borderColor}}}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{display:block;margin:0 auto;padding:20px 0;top:45px;z-index:9;width:100%;position:absolute;box-sizing:border-box}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;width:80%;max-width:500px;margin:0 auto;padding:15px 20px;background-color:{{settings.headerBgColor}};border-bottom:1px solid #f2f2f2;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2);font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;top:7px;position:relative;color:{{settings.headerFontColor}}}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.headerFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;opacity:.5;margin:10px 0 5px}@media screen and (min-width: 768px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:0}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory{margin-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__undercategory a{text-transform:none;color:{{settings.headerFontColor}};width:100%;font-weight:300;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__category a{color:{{settings.headerFontColor}};font-size:12px;font-weight:500;width:100%;display:inline-block}}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (max-width: 949px){.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:inline-block}}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}} Jest to konieczne, ponieważ zmian w nagłówku było zbyt wiele, by wyszukiwać i zmieniać pojedyncze elementy. Podobnie należy zrobić z kodem nagłówka. Otwórz katalog elements -> header a następnie otwórz znajdujący się w nim plik header-2.html, usuń jego zawartość i wklej następujący kod: {% assign categories = page.GroupNodes %} {% assign lngCount = config.Languages | Size -%} {% assign currentLang = config.Languages[page.LanguageId] -%} {% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}} {{ translations.Hea_Menu }} {% if usr.Authenticated -%} {{ translations.Hea_CustomerProfile }} {{ translations.Cpr_Logout }} {% else -%} {{ translations.Log_Login }} {% endif -%} {{ translations.Com_Search }} {{ translations.Crt_Cart }} ({% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%}) {% if header.Nodes[0] -%} {{ translations.Com_Categories }} {% endif -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize > 0 -%} {{ category | A }} {% for undercategory in category.Groups -%} {{undercategory.Name}} {% endfor -%} {% endif -%} {% endfor -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize == 0 -%} {{ category | A }} {% endif -%} {% endfor -%} {% assign name = 'menuBanner' -%} {% if config.Banners[name].Images[0] -%} {% assign banner = config.Banners[name].Images[0] -%} {% if banner -%} {% assign bannerAlt = banner.Alt | H -%} {{banner.Url | Img: '', bannerAlt}} {% endif -%} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} 220x295 {% endif -%} {{ translations.Hea_Pages }} {{config.DefinedPages.About.Name}} {{config.DefinedPages.Payment.Name}} {{config.DefinedPages.Shipping.Name}} {{config.DefinedPages.Terms.Name}} {{ config.DefinedPages.Contact | A }} {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} {{ translations.Lookbook }} {% for lookbook in config.Lookbook.List -%} {{lookbook.Text}} {% endfor -%} {% elseif lookbooksQuantity == 1 or fakeLookbook -%} {{ config.DefinedPages.Lookbook | A }} {% endif -%} {% if config.Shop.Contact.PhoneNo != '' -%} {{config.Shop.Contact.PhoneNo}} {% endif -%} {% if config.Shop.Contact.Email != '' -%} {{ config.Shop.Contact.Email }} {% endif -%} {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }} {{ translations.Prf_Language }} {% for language in config.Languages -%} {{ language.Language }} {% endfor -%} {{ translations.Com_Currency }} {% for currency in config.Currencies -%} {{ currency.Code }} {% endfor -%} {% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%} {% if msg.Title != '' -%} {% if msg.Url != '' -%} {{ msg.Title }} {% else -%} {{ msg.Title }} {% endif -%} {% endif -%} {{ msg.Message }} {% endif -%} {% endif -%} {% endfor -%} Następnie otwórz katalog js a w nim plik layout0.js. Wyszukaj linię pageHeader.on('click', '.openCategoryMenu-js', function() { i wstaw tuż nad nią kod: pageHeader.on('click', '.closeSearchButton > svg', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); }); pageHeader.on('input', '.searchFormPhrase-js', function() { if($(this).val().length > 0) { $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden'); } else { $('.headerSection__searchForm__searchButtonMobile').addClass('hidden'); } }); W tym samym pliku wyszukaj linię z frazą $('.go-to-top__btn-js').click(function(){. Tuż pod nią wklej ten kod: $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 800); Porównywarka towarów w szablonie Topaz
Porównywarka towarów w szablonie Topaz W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał porównywarkę towarów. 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ć Pierwszy krok to przypisanie obiektu porównywarki do właściwej strony sklepu. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. W prawym górnym rogu kliknij przycisk z trzema kwadratami a następnie z rozwijanego menu wybierz opcję Edytuj ustawienia zaawansowane. Wybierz zakładkę Strony. Znajdź stronę Porównywarka (9). W tym samym wierszu, w kolumnie z nazwą pliku, wpisz comparer.html, a następnie zapisz. Kliknij na pole z napisem Porównywarka (9). Pojawi się lista dostępnych obiektów. Kliknij kwadrat przy obiekcie o nazwie comparison-tool, by pokazał się znak wyboru (tzw. "ptaszek"). A następnie zapisz. Wskazówka Jeśli na liście obiektów nie widzisz obiektu comparison-tool, wykonaj następujące czynności. 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 Porównywarka towarów a w polu Nazwa podaj comparison-tool, po czym kliknij Dodaj. Następnie wykonaj opisane wcześniej kroki. 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) i zatwierdzić przyciskiem Dodaj. Lista Id oraz fraz do wprowadzenia: 1. NoItemsSelectedToCompare - Nie wybrano żadnych towarów do porównania 2. ProductsComparison - Porównanie towarów 3. ProductsComparisonRemove - Usuń porównanie 4. AddMoreProductsToCompare - Dodaj kolejne towary, które chcesz porównać (max. 3) 5. ShowProductsFromCategory - Pokaż inne towary z tej kategorii 6. ComparerReview - Ocena 7. ComparerAvailability - Dostępność 8. ComparerInformations - Informacje podstawowe 9. Manufacturer - Producent 10. Brand - Marka 11. ComparerTechnicalParameters - Parametry techniczne 12. RemoveFromComparisonTool - Usuń z porównania 13. AddedToComparisonTool - Dodano do porównania 14. ItemsToCompare - Możesz porównać od 2 do 4 towarów. 15. ProductsComparisonRemove - Usuń porównanie 16. MaxItemsInComparisonTool - Osiągnięto maksymalną ilość produktów Wskazówka Kopiując Id z powyższej instrukcji do Panelu Administracyjnego, upewnij się, że po danym Id nie została skopiowana żadna spacja. Kolejnym krokiem jest utworzenie nowego pliku o nazwie comparer.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 'staticElements/comparer/comparer.html' -%} {% endblock -%} Możesz pominąć ten krok, jeżeli plik już istnieje, a jego treść jest identyczna jak powyżej. Następnie otwórz folder staticElements. W nim utwórz nowy katalog o nazwie comparer, a w nim utwórz nowy plik o nazwie comparer.html. W pliku tym, umieść następujący kod: {% include 'partials/common/breadcrumbs.html' -%} {% assign comparer = comparison-tool -%} {% assign amount = comparer.Products | Size %} {% if amount == 0 %} {{translations.NoItemsSelectedToCompare}} {{translations.Crt_BackToShop}} {% else %} {{translations.ProductsComparison}} ({{amount}}) {{translations.ProductsComparisonRemove}} {% for p in comparer.Products -%} {% endfor -%} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {% assign productAlt = p.NameNoHtml|H %} {{p|Img: 'medium', productAlt}} {{p|A}} {% if p.Price %} {{p.Price|ToPrice}} {{currency}} {% if p.PreviousPrice > p.Price %} {{p.PreviousPrice|ToPrice}} {{currency}} {% endif %} {% else -%} {{ translations.Com_AskForPrice }} {% endif %} {% if p.Price == null or p.Availability.Status == 3 or noProductInStock -%} {% else -%} {{translations.Cmp_ToCart}} {% endif -%} {% endfor -%} {% if amount == 1 -%} {{translations.AddMoreProductsToCompare}} {{translations.ShowProductsFromCategory}} {% endif -%} {% if config.Reviews.Enabled %} {{translations.ComparerReview}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {% for i in (1..p.Rating)%} {% endfor %} {% for i in (p.Rating..4)%} {% endfor %} ({{ p.RatingCount }}) {% endfor -%} {% endif -%} {% if config.Stock.Enabled == true -%} {{translations.ComparerAvailability}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {{p.Availability.Text}} {% endfor -%} {{translations.Com_StockLvl}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {{p.StockLevel.Text}} {% endfor -%} {% endif -%} {{translations.ComparerInformations}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {% endfor -%} {{translations.Manufacturer}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {{p.Manufacturer.Name}} {% endfor -%} {{translations.Brand}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {{p.Brand.Name}} {% endfor -%} {{translations.Man_ManufacturerCode}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {{p.ManufacturerCode}} {% endfor -%} {{translations.Pro_ProductCode}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {{p.Code}} {% endfor -%} {% if comparison-tool.Attributes != null -%} {{translations.ComparerTechnicalParameters}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {% endfor -%} {% for attr in comparer.Attributes -%} {{attr}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {% assign attributeValue = p.Attributes[attr] -%} {% assign lastItem = attributeValue | Last -%} {% assign attributesLength = attributeValue | Size -%} {% if attributesLength == 0 -%} - {% else -%} {% for a in attributeValue -%} {% if a != lastItem -%} {{a}}, {% else -%} {{a}} {% endif -%} {% endfor -%} {% endif -%} {% endfor -%} {% endfor -%} {{translations.Pro_Weight}} {% assign index = 0 -%} {% for p in comparer.Products -%} {% assign index = index | Plus: 1 -%} {{p.Weight | Normalize}} {{ translations.Com_kg }} {% endfor -%} {% endif -%} {% endif -%} {% include 'partials/newsletter-global.html' -%} Kolejnym krokiem jest dodanie odpowiedniego kodu do plików css, odpowiadających za wygląd porównywarki. W tym celu przejdź do katalogu css. Na końcu pliku layout.css wklej następujący kod: .comparerContainer{font-family:{{settings.fontFamily}};background:{{settings.primaryPageBgColor}};max-width:1400px;margin:40px auto}.comparerContainer #firstRow{background:{{settings.primaryPageBgColor}} !important}.comparerContainer .row{width:100%;display:block;display:flex;flex-direction:row}.comparerContainer .row section{width:100%;display:inherit}.comparerContainer .groupInfo{background-color:#f8f8f8}.comparerContainer .lastProduct{border-right:none !important}.comparerContainer .noProducts{width:100%;margin-bottom:40px}.comparerContainer .noProducts .title{display:block;font-size:24px;line-height:32px;color:{{settings.primaryFontColor}}}.comparerContainer .noProducts .noProductsLinks{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .noProducts .noProductsLinks:hover{cursor:pointer}.comparerContainer .topSection-info{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .topSection-info .title{display:block;font-size:20px;line-height:32px;color:{{settings.primaryFontColor}};padding-right:10px}.comparerContainer .topSection-info .removeComparer{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .topSection-info .removeComparer:hover{cursor:pointer}.comparerContainer .topSection-productInfo{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;position:relative}.comparerContainer .topSection-productInfo .productImage{height:150px;position:relative}.comparerContainer .topSection-productInfo .productImage a{cursor:initial}.comparerContainer .topSection-productInfo .productImage .itemPrev,.comparerContainer .topSection-productInfo .productImage .itemNext{position:absolute;border-radius:50%;background-color:{{settings.sliderBgColor}};width:30px;height:30px;top:50%;border:none;transition:200ms}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover,.comparerContainer .topSection-productInfo .productImage .itemNext:hover{background-color:{{settings.linkFontColor}};border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover .svgIcon,.comparerContainer .topSection-productInfo .productImage .itemNext:hover .svgIcon{fill:{{settings.sliderHoverArrowColor}} !important;border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev{left:5px}.comparerContainer .topSection-productInfo .productImage .itemNext{right:5px}.comparerContainer .topSection-productInfo .productImage .svgItemPrev{padding-left:0px !important;margin-left:-9px !important;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important}.comparerContainer .topSection-productInfo .productImage .svgItemNext{float:right;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important;padding-top:0 !important;margin-right:-7px !important}.comparerContainer .topSection-productInfo .productImage img{display:block;margin:0 auto;max-height:150px;object-fit:contain;max-width:50%;cursor:pointer !important}.comparerContainer .topSection-productInfo .productImage .svgIcon{width:43px;height:34px;fill:#e5e5e5;margin:0 auto;display:block;padding-top:58px;padding-left:40px}.comparerContainer .topSection-productInfo .addMoreProducts{margin-top:10px;display:block;color:{{settings.secondaryFontColor}};text-align:center;font-size:14px;line-height:24px;margin-left:40px;font-weight:400}.comparerContainer .topSection-productInfo .showMoreProducts{font-weight:500;font-size:14px;line-height:24px;color:{{settings.linkFontColor}};margin-top:15px;margin-left:40px;text-align:center}.comparerContainer .topSection-productInfo .showMoreProducts>a:hover{cursor:pointer}.comparerContainer .topSection-productInfo .removeItem{position:absolute;top:10px;right:37px;background-color:{{settings.linkFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:15px;height:15px}.comparerContainer .topSection-productInfo .removeItem:hover{cursor:pointer}.comparerContainer .topSection-productInfo .productName{font-size:16px;line-height:24px;height:50px;margin-top:10px;margin-left:40px;color:{{settings.primaryFontColor}}}.comparerContainer .topSection-productInfo .productPrice{font-size:18px;line-height:26px;display:inline;font-weight:bold;color:{{settings.productPriceFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .redPrice{color:{{settings.ribbonPromotionColor}}}.comparerContainer .topSection-productInfo .previousPrice{font-size:14px;font-weight:400;display:inline;text-decoration:line-through;color:{{settings.productPricePreviousFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .currency{font-size:12px;line-height:18px;color:{{settings.primaryFontColor}};font-weight:bold}.comparerContainer .topSection-productInfo .buttons{margin:30px 40px 50px;width:calc(100% - 80px);height:40px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.comparerContainer .topSection-productInfo .buttons .disableCartButton{visibility:hidden}.comparerContainer .topSection-productInfo .buttons .addToCartButton{width:75%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0}.comparerContainer .topSection-productInfo .buttons .addToCartButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton{border:1px solid {{settings.secondaryBtnBorderColor}};width:40px;height:40px;background-color:{{settings.primaryPageBgColor}};transition:200ms}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover{border-color:{{settings.secondaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover .favouriteIcon{background-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .wishList{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;background-color:{{settings.secondaryBtnHoverBorderColor}} !important}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .favouriteIcon{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);background-color:{{settings.primaryFontColor}};width:20px;height:20px;display:block;margin:10px auto 0}.comparerContainer .topSection-productInfo .buttons .wishListBorder{border-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .lastAttribute{border-bottom:1px solid {{settings.borderColor}}}.comparerContainer .property{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .property .propertyName{font-size:16px;color:{{settings.primaryFontColor}};font-weight:400;line-height:24px;text-align:left;padding:18px 10px;text-transform:capitalize}.comparerContainer .property .groupName{color:{{settings.secondaryFontColor}};font-size:14px;font-weight:bold;padding:8px 0 8px 10px;text-transform:capitalize}.comparerContainer .propertyValueContainer{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 80px);margin:18px 40px}.comparerContainer .propertyValueContainer .rating .stars{width:13px;height:13px}.comparerContainer .propertyValueContainer .rating .productRating--color{fill:{{settings.linkFontColor}}}.comparerContainer .propertyValueContainer .rating .ratingCount{font-size:14px;color:{{settings.secondaryFontColor}};line-height:24px;font-weight:400;margin-left:12px}.comparerContainer .propertyValueContainer .propertyValue{width:calc(100% - 80px);margin:18px 40px;font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};font-weight:300;word-break:break-word}.comparerContainer .propertyValueContainer .delivery{color:{{settings.linkFontColor}}}@media only screen and (max-width: 1350px){.comparerContainer .fourItems .removeItem{right:20px}.comparerContainer .fourItems .productName,.comparerContainer .fourItems .buttons{margin-left:20px;margin-right:20px}.comparerContainer .fourItems .buttons{width:calc(100% - 40px);margin-bottom:20px}.comparerContainer .fourItems .productPrice,.comparerContainer .fourItems .previousPrice{margin-left:20px;display:block}.comparerContainer .fourItems .previousPrice{height:0}.comparerContainer .twoItems{width:50%}.comparerContainer .propertyValueContainer .propertyValue,.comparerContainer .propertyValueContainer .rating{margin-left:20px;margin-right:20px}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 40px)}} Do pliku layout-m.css wklej następujący kod: @media only screen and (max-width: 768px){.oneItem{margin-left:20px !important;margin-right:20px !important;width:calc(100% - 40px) !important}.row>section{width:75% !important}.row>section .comparerSlider{width:50% !important}.row>section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.topSection-info .title,.topSection-info .removeComparer,.property .groupName,.property .propertyName{padding-left:20px !important}.noProducts{margin-left:20px}}@media only screen and (max-width: 580px){.row section{width:60% !important}.row .topSection-info,.row .property{width:40% !important}.previousPrice{display:block !important}}@media only screen and (max-width: 385px){.buttons{width:calc(100% - 10px) !important;margin-left:5px !important;margin-right:5px !important}.title{font-size:16px !important}.removeComparer{font-size:12px !important}} Do pliku layout-d.css wklej następujący kod: @media only screen and (max-width: 1150px){.comparerContainer .fourItems .buttons .addToCartButton{display:block !important;width:auto !important;padding:8px 15px !important}.comparerContainer .fourItems .buttons .addToFavouriteButton{margin:10px auto}}@media only screen and (min-width: 971px) and (max-width: 1050px){.buttons{margin-left:10px !important;margin-right:10px !important;width:calc(100% - 20px) !important}}@media only screen and (max-width: 970px){.row .property{border-right:none}.row section{width:75% !important}.row section .comparerSlider{width:50% !important}.row section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.copmarerContainer .topSection-info .buttons{width:calc(100% - 40px)}.copmarerContainer .topSection-info .removeItem{right:20px}.copmarerContainer .topSection-info .productName,.copmarerContainer .topSection-info .buttons{margin-left:20px;margin-right:20px}.copmarerContainer .topSection-info .productPrice,.copmarerContainer .topSection-info .previousPrice{margin-left:20px;display:block}.copmarerContainer .topSection-info .previousPrice{height:0}} 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('.comparerContainer').index() >= 0) { comparerFunctions.init(); } Otwórz plik layout1.js znajdujący się w tym samym katalogu. Poniższy kod możesz wkleić na samym początku pliku: var comparerFunctions = { init: function() { this.events(); }, events: function() { $(document).ready(function(){ $('.propertyValue-js').each(function(index) { var t = $(this).text(); t = t.replace(/([A-Z])/g, ' $1').trim(); $(this).text(t); }) $('.row').each(function() { if(!($(this).hasClass('groupInfo'))) { $(this).children('.property').css('box-shadow', '2px 0 2px -2px #E5E5E5'); $(this).children('.topSection-info').css('box-shadow', '2px 0 2px -2px #E5E5E5'); } }); var amount = $('#amount').attr('value'); var windowWidth = $(window).width(); if (amount <= 2) { $('.topSection-productInfo').css('width', '50%'); $('.propertyValueContainer').css('width', '50%'); if(amount == 1 && windowWidth <= 768) { $('.productPrice').addClass('oneItem'); $('.productName').addClass('oneItem'); $('.buttons').addClass('oneItem'); $('.lastProduct > *').css('margin-left', '10px', '!important'); $('.lastProduct > *').css('margin-right', '10px', '!important'); } else if(amount == 1 && windowWidth <= 600) { $('.topSection-productInfo').css('width', '100%', '!important'); $('.propertyValueContainer').css('width', '100%', '!important'); $('.lastProduct').css('display', 'none'); } } if ((windowWidth <= 970 && amount > 2) || (windowWidth <= 742 && amount == 2)) { $(".row > section").addClass("comparerSlider"); var slider = $('.comparerSlider').slick({ infinite: true, slidesToShow: 2, slidesToScroll:1, draggable: false, autoplay: false, autoplaySpeed: 8000, arrows:false, swipe:false, responsive: [ { breakpoint: 768, settings: { slidesToShow: 1, } } ] }); if(amount == 2) { slider.slick('slickSetOption', 'infinite', false); } if(windowWidth <= 970 && windowWidth > 768 && amount > 2) { showSliderArrows(); } if (windowWidth <= 768 && amount > 2) { $(".itemPrev").removeClass('hidden'); $(".itemNext").removeClass('hidden'); } if(windowWidth <= 742 && amount == 2) { $(".itemNext").removeClass('hidden'); } $(".itemPrev").on( "click", function() { slider.slick("slickPrev").delay(500); if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) { showSliderArrows(); } if(amount == 2) { $('.itemPrev').addClass('hidden'); $('.itemNext').removeClass('hidden'); } }); $(".itemNext").on( "click", function() { slider.slick("slickNext").delay( 500 ); if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) { showSliderArrows(); } if(amount == 2) { $('.itemNext').addClass('hidden'); $('.itemPrev').removeClass('hidden'); } }); } }); var topSection = document.getElementById("firstRow"); var topPosition = topSection.offsetTop; $(window).on('scroll', function() { if (window.pageYOffset > (topPosition)) { topSection.style.position = 'sticky'; topSection.style.top = '0'; topSection.style.zIndex = '100'; } else { topSection.style.position = 'inherit'; topSection.style.top = 'none'; topSection.style.zIndex = 'inherit'; } }); $('body').on('click', '.productWishListAdd-js', function (e) { app.productWishListAdd(e); }); $('body').on('click', '.productWishListRemove-js', function (e) { app.productWishListRemove(e); }); $('body').on('click', '.removeItem', function (e) { app.productComparisonToolDeleteItem(e); }); $('body').on('click', '.removeComparer', function (e) { var productIds = $(this).parent('.removeComparerContainer').children($('input [name="productId"]')); app.productComparisonToolDeleteAll(productIds); }); function showSliderArrows() { var currentProducts = $('.topSection-productInfo'); var activeProducts = []; var i=0; currentProducts.each(function() { if($(this).attr('aria-hidden') == 'false') { activeProducts[i++] = $(this); } }); activeProducts[0].find('.itemPrev').removeClass('hidden'); activeProducts[0].find('.itemNext').addClass('hidden'); activeProducts[1].find('.itemNext').removeClass('hidden'); activeProducts[1].find('.itemPrev').addClass('hidden'); } } } Następnie należy dodać możliwość dodawania produktów do porównywarki z poziomu szczegółów towaru. Otwórz katalog elements -> product. W zależności do tego, jaką wersję szczegółów towaru wybrałeś w Kreatorze, w katalogu będzie plik product-details-1.html lub product-details-2.html. Wykonaj kolejne kroki w zależności od tego, który plik znajduje się w Twoim Topazie. Dalsza instrukcja dla pliku product-details-1.html Otwórz plik i wyszukaj linię, w której znajduje się fragment comparison-tool-add-button. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod: {% assign isInComparisonTool = false -%} {% for itemId in customer.ComparisonToolItems -%} {% if itemId == product-details.Product.Id -%} {% assign isInComparisonTool = true -%} {% endif -%} {% endfor -%} {{translations.Cmp_Compare}} {{translations.RemoveFromComparisonTool}} a pod nimi wklej następujący kod: {% assign comparisonToolItems = customer.ComparisonToolItems | Size | Plus: 1 -%} {{translations.AddedToComparisonTool}} ({{comparisonToolItems}}/4) {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%} {{translations.Cmp_Compare}} Następnie należy dodać kod odpowiadający za wygląd wyskakującego okienka z informacją o dodaniu towaru do porównywarki. Aby to zrobić, przejdź do katalogu css. W pliku layout.css wklej na samym dole następujący kod: .product-details .addToComparePopup{display:none;position:fixed;z-index:100;right:10%;bottom:51px;transition:200ms;width:400px;height:62px;box-shadow:0 3px 8px #616060;background-color:{{settings.primaryPageBgColor}}}.product-details .addToComparePopup .comparisonIcons{margin-left:25px;display:inline-block}.product-details .addToComparePopup .comparisonIcons .comparerItemIcon{width:5px;height:5px;margin-right:10px;-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;background-color:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonIcons .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:6px;line-height:24px;display:block}.product-details .addToComparePopup .addToCompare{display:inline-block;font-size:14px;line-height:24px;margin-left:25px;color:{{settings.primaryFontColor}};font-weight:500}.product-details .addToComparePopup .closeComparePopup{position:absolute;top:0;right:0;margin-right:25px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:14px;height:14px}.product-details .addToComparePopup .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .comparisonIcon{float:right;margin-top:5px;margin-right:2px}.product-details .addToComparePopup .comparisonIcon .svgIcon{fill:{{settings.linkFontColor}};margin:0 5px -3px 0;width:15px;height:15px}.product-details .addToComparePopup .goToComparisonTool{color:{{settings.linkFontColor}};line-height:24px;font-size:14px;font-weight:400;margin-right:25px} W pliku layout-m.css wklej następujący kod: @media only screen and (min-width: 461px) and (max-width: 768px){.addToComparePopup{bottom:16px !important;right:15% !important}} @media only screen and (max-width: 599px){.addToComparePopup{width:100% !important;bottom:0 !important;right:0 !important;left:0 !important}} A w pliku layout-d.css wklej następujący kod: @media only screen and (min-width: 769px) and (max-width: 900px){.addToComparePopup{bottom:16px !important;right:15% !important}} Pozostało dodać kod w plikach js. Otwórz katalog js a w nim plik layout0.js. Wyszukaj frazę productComparisonToolAdd. Musisz usunąć kilka linii kodu, od znalezionej przed chwilą (włącznie) do najbliższej linii o treści }, (około 11 linii kodu). W miejsce usuniętego kodu, wklej poniższy: productComparisonToolAdd: function (e) { var data = $(e.currentTarget).find('input').serializeArray(); var comparisonItems = data[4].value; if(comparisonItems >= 4) { $('.addToComparePopup').fadeIn(); var msg =__translations.MaxItemsInComparisonTool; $('.addToCompare').text(msg); } else { var url = data[2].value; $.post(null, data, function (result) { if (result.action.Result) { $('.addToComparePopup').fadeIn(); $('#comparison-tool-delete-button').removeClass('hidden'); $('#comparison-tool-add-button').addClass('hidden'); } else if (result.action.Code != 100) { app.showTemporaryPopup(result.action.Message, 'error'); } }); } }, productComparisonToolDelete: function (e) { var data = $(e.currentTarget).find('input').serializeArray(); var pId = data[1].value; $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){ setInterval(function() { location.reload(); }, 1000); }); }, productComparisonToolDeleteItem: function (e) { var pId = $(e.currentTarget).attr('data-id'); $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){ setInterval(function() { location.reload(); }, 1000); }); }, productComparisonToolDeleteAll: function (e) { e.each(function() { var pId = $(this).attr('data-id'); $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'}); }) setInterval(function() { location.reload(); }, 3000); }, Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });: body.on('click', '.productComparisonToolDelete-js', function (e) { app.productComparisonToolDelete(e); }); body.on('click', '.closeComparePopup', function (e) { $('.addToComparePopup').addClass('hidden'); }); Jeśli posiadasz pierwszą wersję szczegółów towaru, to koniec instrukcji. Dalsza część dotyczy zmian dla wersji drugiej szczegółów towaru.
Dalsza instrukcja dla pliku product-details-2.html
Otwórz plik i wyszukaj linię, w której znajduje się fragment productComparisonToolAdd-js. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod: {% assign isInComparisonTool = false -%} {% for itemId in customer.ComparisonToolItems -%} {% if itemId == product-details.Product.Id -%} {% assign isInComparisonTool = true -%} {% endif -%} {% endfor -%} {{translations.Cmp_Compare}} {{translations.RemoveFromComparisonTool}} a pod nimi wklej następujący kod: {{translations.AddedToComparisonTool}} {{translations.ItemsToCompare}} {{translations.ProductsComparisonRemove}} {% for itemId in customer.ComparisonToolItems -%} {% endfor -%} {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%} {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%} {% if ComparerItems > 1 -%} {{translations.Cmp_Compare}} {% endif -%} Następnie należy dodać kod odpowiadający za wygląd wyskakującego okienka z informacją o dodaniu towaru do porównywarki. Aby to zrobić, przejdź do katalogu css. W pliku layout.css wklej na samym dole następujący kod: .product-details .addToComparePopup{display:none;position:fixed;margin-left:auto;margin-right:auto;right:0;left:0;top:30%;width:30%;height:auto;background-color:{{settings.primaryPageBgColor}};transition:200ms;z-index:100;opacity:1 !important;box-shadow:0 3px 8px #616060}.product-details .addToComparePopup .comparisonIcons{width:calc(100% - 70px);margin:40px auto !important;text-align:center}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:40px;line-height:26px;display:block}.product-details .addToComparePopup .comparisonInfo .comparerItemIcon{width:40px;height:40px;margin-right:10px;-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;background-color:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonInfo .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo .addToCompare{margin-left:70px;font-size:18px;font-weight:500;color:{{settings.primaryFontColor}}}.product-details .addToComparePopup .comparisonInfo .comparisonItems{font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};display:inline-block;margin-left:70px}.product-details .addToComparePopup .comparisonInfo .removeComparison{margin-right:42px;margin-top:2px;float:right;font-size:14px;line-height:24px;font-weight:400;color:{{settings.linkFontColor}}}.product-details .addToComparePopup .comparisonInfo .removeComparison:hover{cursor:pointer}.product-details .addToComparePopup .comparisonInfo .closeComparePopup{position:absolute;top:4px;right:0;margin-right:40px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:18px;height:18px}.product-details .addToComparePopup .comparisonInfo .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .goToComparisonTool{width:60%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0;margin:40px auto;display:block}.product-details .addToComparePopup .goToComparisonTool:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}@media only screen and (max-width: 1550px){.product-details .comparisonItems,.product-details .removeComparison{display:block;width:100%;text-align:center;float:none !important}.product-details .comparisonItems{margin:0 auto !important}.product-details .removeComparison{margin:20px auto 0 !important}} W pliku layout-m.css wklej następujący kod: @media only screen and (max-width: 768px){.addToComparePopup{width:calc(100% - 40px) !important}} @media only screen and (max-width: 330px){.addToComparePopup>.addToCompare{margin-left:20px !important}} A w pliku layout-d.css wklej następujący kod: @media only screen and (min-width: 641px) and (max-width: 1077px){.addToComparePopup{width:50% !important}} Pozostało dodać kod w plikach js. Otwórz katalog js a w nim plik layout0.js. Wyszukaj frazę productComparisonToolAdd. Musisz usunąć kilka linii kodu, od znalezionej przed chwilą (włącznie) do najbliższej linii o treści }, (około 11 linii kodu). W miejsce usuniętego kodu, wklej poniższy: productComparisonToolAdd: function (e) { var data = $(e.currentTarget).find('input').serializeArray(); var comparisonItems = data[4].value; if(comparisonItems >= 4) { $('.addToComparePopup').fadeIn(); var msg =__translations.MaxItemsInComparisonTool; $('.addToCompare').text(msg); } else { var url = data[2].value; $.post(null, data, function (result) { if (result.action.Result) { $('.addToComparePopup').fadeIn(); $('#comparison-tool-delete-button').removeClass('hidden'); $('#comparison-tool-add-button').addClass('hidden'); } else if (result.action.Code != 100) { app.showTemporaryPopup(result.action.Message, 'error'); } }); } }, productComparisonToolDelete: function (e) { var data = $(e.currentTarget).find('input').serializeArray(); var pId = data[1].value; $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){ setInterval(function() { location.reload(); }, 1000); }); }, productComparisonToolDeleteItem: function (e) { var pId = $(e.currentTarget).attr('data-id'); $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){ setInterval(function() { location.reload(); }, 1000); }); }, productComparisonToolDeleteAll: function (e) { e.each(function() { var pId = $(this).attr('data-id'); $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'}); }) setInterval(function() { location.reload(); }, 3000); }, Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });: body.on('click', '.removeComparison', function (e) { var productIds = $(this).parent('.deleteComparison-js').children($('input [name="productId"]')); app.productComparisonToolDeleteAll(productIds); }); body.on('click', '.productComparisonToolDelete-js', function (e) { app.productComparisonToolDelete(e); }); body.on('click', '.closeComparePopup', function (e) { $('.addToComparePopup').addClass('hidden'); });
Dodawanie zgód do płatności online w szablonach
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Dodawanie zgód do płatności online w szablonach
W tym artykule dowiesz się, jak dodać zgody do swoich płatności online.
1. Bursztyn lub Opal
W pliku order/thank-you.html wyszukaj frazę Fields. Będzie to fragment takiej pętli: {% for f in cart.PlacedOrder.ExternalPayment.Fields -%} {% endfor -%} Pod nią wklej poniższy kod:
{% for c in cart.PlacedOrder.ExternalPayment.Consents -%}
{% if c.Statement -%} {{c.Text}} {% else -%}

{% if c.Required -%}*{% endif -%} {{c.Text}}
{% endif -%}
{% endfor %}

2. Szafir
W pliku order/thx.html wyszukaj frazę Fields. Będzie to fragment takiej pętli: {% for field in order.PlacedOrder.ExternalPayment.Fields -%} {% endfor -%} Pod nią wklej poniższy kod: {% for consent in order.PlacedOrder.ExternalPayment.Consents -%}
{% if consent.Statement -%}
{{ consent.Text }}
{% else -%} {% if consent.Required -%}* {% endif -%}{{ consent.Text }} {% if consent.Required -%} {{ translations.RequiredField }} {% endif -%} {% endif -%}
{% endfor -%} W pliku scss/globals/_globals2.scss na samym końcu wklej poniższy fragment kodu: .order-ui .in-external-payment-ui{ padding-bottom: 0; margin: 20px 0; } Następnie taki plik należy zapisać zminifikować.
Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat
W pliku partials/cart/summary.html wyszukaj frazę online-payment-step. Jest to klasa elementu form, do którego należy dodać atrybut data-tos-invalid="{{translations.TosRequired}}" tak, aby ostatecznie wyglądał jak kod poniżej:
Pozostając dalej w tym samym pliku (partials/cart/summary.html) wyszukaj frazę Fields. Będzie to fragment takiej pętli: {% for f in cart.PlacedOrder.ExternalPayment.Fields -%} {% endfor -%} Pod nią wklej poniższy kod:

{% for consent in cart.PlacedOrder.ExternalPayment.Consents -%}

{% if consent.Statement %}
{{ consent.Text }}
{% else %} {{translations.MainConsentWarning}} {% if consent.Required -%}* {% endif -%}{{ consent.Text }} {% endif -%}

{% endfor %} Na końcu pliku js/order.js wklej ten kod: $('body').on('click', '.external-payment-lq', function (e) { e.preventDefault(); var validate = application.uiValidateForm($('.online-payment-step')); if (validate) { $('.online-payment-step').submit(); } }); W pliku js/init.js wyszukaj funkcję uiSetSwitchNameWidthInNewsletter i na jej końcu dodaj poniższy kod: $('#main-section').find('.online-payment-step .switch-name').each(function () { var width = $('.online-payment-info').width(); $('.online-payment-consents').css('width', width); $(this).css('width', width - 65); }); Na końcu pliku scss/main2.scss wklej ten kod: .online-payment-consents{ display: inline-block; list-style-type: none; padding: 0; text-align: left; .switches:after{ content: ''; display: block; clear: both; } }
Wskazówka
Pamiętaj, że pliki js i scss należy zminifikować. O tym jak skompilować i zminifikować pliki js i scss dowiesz się z artykułu o kompilacji i minifikacji plików.
Obsługa lookbooka w szablonie Topaz
Obsługa lookbooka w szablonie Topaz
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał lookbooka.
Topaz
W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu -> Ustawienia -> Tłumaczenia) i dodaj tam dwie frazy. ShowProducts - Pokaż towary, Lookbook - Lookbook. Następnie przejdź do zakładki Bannery (Wygląd sklepu -> Ustawienia -> Bannery) i dodaj tam banner o nazwie lookbook. Po jego dodaniu wejdź w jego ustawienia i zaznacz Lookbook zamiast Standardowy. Resztę uzupełnij wedle własnego uznania. W polu Nazwa (Lookbook) będzie nazwa lookbooka, która będzie się wyświetlać w sklepie. Teraz przejdź do zakładki Strony (Wygląd sklepu -> Ustawienia -> Trzykropek w prawym górnym rogu -> Edytuj ustawienia zaawansowane -> Strony) i przy stronie Lookbook wpisz lookbook.html, a następnie wejdź w ustawienia danej strony i zaznacz check-box header [Nagłówek]. Zapisz to wszystko kliknięciem w dyskietkę w prawym górnym rogu. W pliku elements/header/header-1.html (lub header-2.html - w zależności od wybranej w szablonie wersji nagłówka) wyszukaj frazę config.DefinedPages.Contact. Pod linijką z tą frazą wklej poniższy kod: {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} {{ translations.Lookbook }} {% for lookbook in config.Lookbook.List -%} {{lookbook.Text}} {% endfor -%} {% elseif lookbooksQuantity == 1 or fakeLookbook -%} {{ config.DefinedPages.Lookbook | A }} {% endif -%} Następnie w folderze staticElements dodaj folder lookbook, a w nim plik lookbook.html, który będzie zawierał poniższy kod: {% include 'partials/common/breadcrumbs.html' -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} {% assign lookbook = config.Lookbook.Current -%} {% elseif lookbooksQuantity == 1 -%} {% assign lookbook = config.Lookbook.List[0] -%} {% endif -%} {% if lookbooksQuantity > 0 -%} {{ lookbook.Text }} {% for image in lookbook.Images -%} {% if image.JSON != "" -%} {{translations.Hide | Upcase}} {{translations.ShowProducts | Upcase}} {% endif -%} {% endfor -%} {% else -%} {{ translations.Lookbook }} {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}} 560x630 {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}} 700x850 {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}} 1260x540 {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}} 630x950 {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}} 560x630 {% endif -%} Teraz w pliku css/layout.css dodaj poniższy kod: .lookbookSection{width:85%;max-width:1400px;margin:50px auto 150px}.lookbook__name{margin-bottom:100px}.lookbook__imageContainer{position:relative;vertical-align:top}.lookbook__imageContainer:nth-child(5n+1){display:inline-block;width:40%;margin-right:calc(10% - 5px)}.lookbook__imageContainer:nth-child(5n+2){display:inline-block;width:50%}.lookbook__imageContainer:nth-child(5n+3){width:90%}.lookbook__imageContainer:nth-child(5n+4){display:inline-block;width:45%;margin-right:calc(15% - 5px)}.lookbook__imageContainer:nth-child(5n){display:inline-block;width:40%}.lookbook__imageContainer img{max-width:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.lookbook__imagePlaceholder{background-color:#f2f2f2}.lookbook__imagePlaceholderSize{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.lookbook__productsToggleButton{position:absolute;right:0;bottom:0;padding:20px;background:#fff;width:250px;text-align:center;cursor:pointer}.lookbook__productsContainer{position:absolute;right:0;bottom:59px;padding:0 20px;background:#fff;width:250px}.lookbook__product{position:relative;padding:20px 0;border-bottom:1px solid #f2f2f2}.lookbook__productName{color:{{settings.inputLabelColor}};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:10px}.lookbook__productPrice{font-size:18px;font-weight:700;display:inline-block;width:calc(100% - 50px)}.lookbook__checkProductLink{position:absolute;right:0;bottom:20px;color:{{settings.linkFontColor}}} Następnie w pliku css/layout-m.css dodaj poniższy kod: .lookbookSection{margin:20px auto}.lookbookSection .lookbook__imageContainer{width:100%;margin:0 0 100px}.lookbookSection .lookbook__imageContainer:last-child{margin-bottom:20px}.lookbook__name{margin-bottom:20px}.lookbook__showProductsButton{bottom:0;right:auto;left:50%;transform:translate(-50%, 50%);border:1px solid #f2f2f2}.lookbook__hideProductsButton,.lookbook__productsContainer{position:fixed;width:calc(100% - 40px);z-index:102}.lookbook__productsContainerBackgroundMobile{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,0.8);z-index:101} Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) dodaj poniższy kod: if($('.lookbookImageContainer-js').length > 0){ var setLookbookImages = function () { $('.lookbookImageContainer-js').each(function(index){ if(index == 0){ var heightRatio = 1.13; } else if(index == 1){ var heightRatio = 1.22; var marginTopRatio = 0.39; } else if(index == 2){ var heightRatio = 0.43; var marginTopRatio = 0.25; var marginBottomRatio = 0.36; } else if(index == 3){ var heightRatio = 1.52; } else if(index == 4){ var heightRatio = 1.13; var marginTopRatio = 0.46; } var width = $(this).width(); var height = width * heightRatio; $(this).css('height', height); if($(window).width() > 768){ if(marginTopRatio){ var marginTop = height * marginTopRatio; $(this).css('margin-top', marginTop); } if(marginBottomRatio){ var marginBottom = height * marginBottomRatio; $(this).css('margin-bottom', marginBottom); } } else { if(marginTopRatio){ $(this).css('margin-top', 0); } if(marginBottomRatio){ $(this).css('margin-bottom', 100); } } }) }; setLookbookImages(); $(window).resize(function() { setLookbookImages(); }); var addLookbookProducts = function () { var url = $('[data-product-details-url]').data('product-details-url'); var checkTranslation = $('[data-check-translation]').data('check-translation'); $('[data-lookbook-products]').each(function(){ var productContainer = $(this); var products = JSON.stringify(productContainer.data('lookbook-products')); var objProducts = JSON.parse(products); $.each(objProducts, function (index, value) { var productUrl = url + ',,' + value.id; var data = {__collection: 'product-details.Product.Name|product-details.Product.Price'}; $.get(productUrl, data, function (res) { productContainer.append( ''+ ''+res.collection['product-details.Product.Name']+''+ ''+res.collection['product-details.Product.Price']+' '+__curr+''+ ''+checkTranslation+' '+ '
' ); }); }); }); }; addLookbookProducts(); $('body').on('click', '.showLookbookProducts-js', function (e) { $(e.currentTarget).siblings().show(); $(e.currentTarget).hide(); }); $('body').on('click', '.hideLookbookProducts-js', function (e) { $(e.currentTarget).siblings().hide(); $(e.currentTarget).next().show(); $(e.currentTarget).hide(); }); } Następnie w pliku js/layout0.js (lub layout.js jeśli nie ma layout0.js) znajdź zmienną var headerFunctions i podmień ją na jeden z poniższych kodów. Pierwszy jest do nagłówka z domyślnie ukrytą wyszukiwarką, a drugi do nagłówka z domyślnie odkrytą wyszukiwarką. header-1 var headerFunctions = { init: function () { headerFunctions.events(); }, events: function () { var pageHeader = $('.pageHeader-js'); pageHeader.on('click', '.showSearchSection-js', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $('.searchFormPhrase-js').focus(); }); pageHeader.on('click', '.showMenuSection-js', function() { $('.pageHeader-js .headerMainMenu-js').toggle(200); }); pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() { $('.pageHeader-js .headerMainMenu-js').hide(200); }); pageHeader.on('click', '.openCategoryMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').toggle(200); $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); app.loadImages(); }); pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openPagesMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .sitesNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openLookbooksMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('change', '.customerLanguageChange-js', function(e) { if($(this).is(':checked')) {app.customerLanguageChange(e)} }); pageHeader.on('change', '.customerCurrencyChange-js', function(e) { if($(this).is(':checked')) {app.customerCurrencyChange(e)} }); pageHeader.on('click', '.openUndercategoryMenu-js', function(e) { var undercategory = $(e.currentTarget).closest('li').find('ul').first(); $(undercategory).toggle(200); }); } }; header-2 var headerFunctions = { init: function () { headerFunctions.events(); }, events: function () { var pageHeader = $('.pageHeader-js'); pageHeader.on('click', '.showSearchSection-js', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); $('.searchFormPhrase-js').focus(); }); pageHeader.on('click', '.showMenuSection-js', function() { $('.pageHeader-js .headerMainMenu-js').toggle(200); }); pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() { $('.pageHeader-js .headerMainMenu-js').hide(200); }); pageHeader.on('click', '.openCategoryMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').toggle(200); $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); app.loadImages(); }); pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openPagesMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .sitesNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openLookbooksMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('change', '.customerLanguageChange-js', function(e) { if($(this).is(':checked')) {app.customerLanguageChange(e)} }); pageHeader.on('change', '.customerCurrencyChange-js', function(e) { if($(this).is(':checked')) {app.customerCurrencyChange(e)} }); pageHeader.on('click', '.openUndercategoryMenu-js', function(e) { var undercategory = $(e.currentTarget).closest('li').find('ul').first(); $(undercategory).toggle(200); }); } };
Obsługa dostawy o typie negocjowalnym w szablonach
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Obsługa dostawy o typie negocjowalnym w szablonach
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsłużyć dostawy o typie negocjowalnym.
Szafir
Na samym początku pliku common/order-summary.html jest warunek z kilkoma assignami. W warunku dodaj taką linijkę {% assign notDeterminedDeliveryCost = order.Delivery.NotDeterminedDeliveryCost -%}, a w elsie dodaj taką {% assign notDeterminedDeliveryCost = order.SelectedDelivery.NotDeterminedDeliveryCost -%}. Kawałek niżej znajduje się warunek {% if order.NotDeterminedDeliveryCost and order.OrderStep != 'Start' -%}. Zamień go na poniższy kod: {% if order.NotDeterminedDeliveryCost or order.SelectedDelivery.NotDeterminedDeliveryCost -%} {% assign notDeterminedDeliveryCost = true -%} {% endif -%} {% if notDeterminedDeliveryCost and order.OrderStep == 'Start' -%} Następnie w tym samym pliku wyszukaj frazę {% unless order.NotDeterminedDeliveryCost -%} i zamień ją na warunek {% if order.NotDeterminedDeliveryCost == false and notDeterminedDeliveryCost == false -%}. Pamiętaj aby kilka linijek niżej zamienić {% endunless -%} na {% endif -%}. Kawałek dalej znajduje się warunek {% if paymentCost != null -%}. Zamień go na {% if paymentCost != null and order.NotDeterminedDeliveryCost == false and notDeterminedDeliveryCost == false -%} Teraz w pliku order/delivery-partials/delivery-section.html, wyszukaj warunek {% if order.NotDeterminedDeliveryCost == false -%} i zamień go na {% if order.NotDeterminedDeliveryCost == false and deliveryMethod.NotDeterminedDeliveryCost == false -%}. Następnie wyszukaj warunek {% if order.NotDeterminedDeliveryCost == false -%} i zamień go na {% if order.NotDeterminedDeliveryCost == false and order.SelectedDelivery.NotDeterminedDeliveryCost == false -%} W pliku order/cart.html znajdź warunek {% if order.NotDeterminedDeliveryCost and order.OrderStep == 'Start' -%}. Zamień go na poniższy kod: {% if order.NotDeterminedDeliveryCost or order.SelectedDelivery.NotDeterminedDeliveryCost -%} {% assign notDeterminedDeliveryCost = true -%} {% endif -%} {% if notDeterminedDeliveryCost and order.OrderStep == 'Start' -%}
Agat
W pliku partials/cart/cart-content.html znajdź warunek {% if cart.NotDeterminedDeliveryCost == true %} i zamień go na {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %}. Kawałek dalej w tym samym pliku znajdź warunek {% if cart.NotDeterminedDeliveryCost == false %}. Zamień go na poniższy kod: {% if deliveryMethod.Name == cart.SelectedDelivery.Name %} {% assign notDeterminedDeliveryCost = cart.SelectedDelivery.NotDeterminedDeliveryCost -%} {% else %} {% assign notDeterminedDeliveryCost = deliveryMethod.NotDeterminedDeliveryCost -%} {% endif %} {% if cart.NotDeterminedDeliveryCost == false and notDeterminedDeliveryCost == false %} Kawałek niżej znajdź warunek {% if cart.NotDeterminedDeliveryCost == false %} i zamień go na {% if cart.NotDeterminedDeliveryCost == false and deliveryMethodLvl.NotDeterminedDeliveryCost == false %}. Dalej w tym samym pliku (partials/cart/cart-content.html), oraz w plikach partials/cart/delivery-and-payment.html i partials/cart/summary.html znajdź frazę {% unless cart.NotDeterminedDeliveryCost -%} i zamień ją na {% if cart.NotDeterminedDeliveryCost == false and cart.SelectedDelivery.NotDeterminedDeliveryCost == false -%}. Pamiętaj aby kilka linijek niżej zamienić {% endunless -%} na {% endif -%}. We wszystkich przypadkach przesuń ten {% endif -%} tak aby warunek obejmował też dane związane z kosztami płatności. Podobną zmianę należy wprowadzić w pliku partials/customer/order-details.html. Frazę {% unless customer-profile.Order.NotDeterminedDeliveryCost -%} należy zamienić na {% if customer-profile.Order.NotDeterminedDeliveryCost == false and customer-profile.Order.Delivery.NotDeterminedDeliveryCost == false -%} W plikach partials/cart/delivery-and-payment.html i partials/cart/summary.html znajdź warunek {% if cart.NotDeterminedDeliveryCost -%} i zamień go na {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %}
Bursztyn lub Opal
Na początku pliku order/cart.html znajdź warunek {% if cart.NotDeterminedDeliveryCost %} i zamień go na {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %}. Następnie trochę dalej znajdź warunek {% if cart.NotDeterminedDeliveryCost == false %} i zamień go na {% if cart.NotDeterminedDeliveryCost == false and delivery.NotDeterminedDeliveryCost == false %}. Kawałek dalej znajdziesz warunek {% if delivery.FreeDeliveryFrom > cart.ProductsTotalValue and cart.NotDeterminedDeliveryCost == false and delivery.TotalValue > 0 %}. Zamień go na {% if delivery.FreeDeliveryFrom > cart.ProductsTotalValue and cart.NotDeterminedDeliveryCost == false and delivery.NotDeterminedDeliveryCost == false and delivery.TotalValue > 0 %} Następnie w pliku order/stepsummary.html znajdź frazę {{translations.Crt_DeliveryCost}} i całą linijkę z tą frazą nadpisz poniższym kodem: {% if deliveryData.NotDeterminedDeliveryCost == false %}{{translations.Crt_DeliveryCost}}{{deliveryData.TotalValue|ToPrice}} {{cartCurrency}}{% endif %}
Topaz
W pliku staticElements/cart/cart.html znajdź warunek (występuje dwa razy) {% if cart.NotDeterminedDeliveryCost == true %} i zamień go na {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %} (w obu przypadkach). Następnie wyszukaj frazę {{deliveryMethod.DateText}}. Pod linijką z tą frazą znajduje się warunek. Zastąp go wraz z jego zawartością poniższym kodem: {% if deliveryMethod.NotDeterminedDeliveryCost == false and cart.NotDeterminedProductsDeliveryCost == false -%} {{ deliveryMethod.TotalValue | ToPrice }} {{ currency }} {% endif -%} Teraz wyszukaj frazę {{ payment.DueDateText }}. Pod linijką z tą frazą znajduje się warunek. Zastąp go wraz z jego zawartością poniższym kodem: {% if deliveryMethodLvl.NotDeterminedDeliveryCost == false and cart.NotDeterminedProductsDeliveryCost == false -%} {{ payment.TotalValue | ToPrice }} {{ currency }} {% endif -%}
Obsługa dodawania załączników do reklamacji i zwrotów
Obsługa dodawania załączników do reklamacji i zwrotów
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby przy składaniu reklamacji i zwrotów było możliwe dołączenie załączników.
Wskazówka
Na podstawie tego artykułu trzeba będzie wprowadzać zmiany w plikach js oraz scss. Pamiętaj, że te pliki należy zminifikować. O tym jak skompilować i zminifikować pliki js oraz scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Szafir
W pliku product/cart-product.html wyszukaj frazę note-ui. Nad linijką z tą frazą wklej poniższy kod:
{% if config.Complaints.AttachmentsEnabled -%} <div> <label class="add-attachement-label-ui" for="file"><i class="ti-clip"></i> {{ translations.AddAttachement }}</label> {% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Complaints.AttachmentsMaxCount) -%} <div class="input-file-container-ui"><input class="add-attachement-in-complaint-ui add-attachement-in-complaint-lq" accept="{{ config.Complaints.AttachmentExtensions }}" name="file" type="file" data-file-size="{{ config.Complaints.AttachmentMaxSize }}" data-size-exceeded="{{ translations.Com_FileSizeExceeded | Format: maxSize }}" data-invalid-file="{{ translations.Com_InvalidFile | Format: config.Complaints.AttachmentExtensions }}" /> <i class="ti-close clear-file-input-ui clear-file-input-lq hidden-lq"></i></div> {% endfor -%} </div> {% endif -%}
Następnie w pliku customer-profile/complaints/complaints.html wyszukaj frazę complaint.Response. Będzie to linijka z warunkiem. Pod tym warunkiem wklej poniższy kod:
{% assign complaintsSize = customer-profile.Complaint.Attachments | Size -%} {% if config.Complaints.AttachmentsEnabled and complaintsSize > 0 -%}</code> <div class="attachements-ui remarks-ui"> {% for file in customer-profile.Complaint.Attachments -%} {% assign type = file.Name | Split: '.' | Last -%} {% if type == "jfif" or type == "jpe" or type == "jpeg" or type == "jpg" -%} {% assign icon = 'ti-image' -%} {% elseif type == "csv" or type == "txt" -%} {% assign icon = 'ti-receipt' -%} {% elseif type == "docx" or type == "odt" -%} {% assign icon = 'ti-write' -%} {% elseif type == "xlsx" or type == "ods" -%} {% assign icon = 'ti-bar-chart' -%} {% elseif type == "pdf" -%} {% assign icon = 'ti-agenda' -%} {% else -%} {% assign icon = 'ti-file' -%} {% endif -%} <div class="file-container-ui file-container-lq"><a href="{{ file.Url }}"><i class="{{ icon }} icon-ui"></i> <span class="line-height-1-ui va-mid-ui">{{ file.Name }}</span></a></div> {% endfor -%} </div> {% endif -%}
Teraz w pliku js/init-ui2.js wyszukaj frazę sendComplaintSuccess(e). Będzie to funkcja, którą należy usunąć. Usuń również jej wywołanie, które jest tuż pod nią. Na samym końcu tego pliku (js/init-ui2.js) wklej poniższy kod:
function addAttachementInComplaint(e) { window.attachementsInComplaint = []; var filesArr = $(e.currentTarget).parents('.form-lq').find('.add-attachement-in-complaint-lq'); filesArr.each(function () { if(this.files.length > 0){ var maxSize = $(this).data('file-size'); if(this.files[0].size > maxSize){ var message = $(this).data('size-exceeded'); var popup = '</code> <div class="message-popup-background-ui errors-lq cancel-lq container-to-delete-lq" style="overflow: auto;"> '+ ' <div class="message-popup-ui box-ui after-adding-to-cart-popup-ui message-popup-on-background-lq" style="position: absolute; top: 0; transform: none; margin: 10% auto;"> '+ ' <div class="box-ui product-added-to-cart-ui" style="position: relative; padding: 20px;">'+ __translations.AttachementsNotAdded+ '<i class="ti-close cancel-lq" style="position: absolute; right: 20px; top: 20px; cursor: pointer;"></i>'+ '</div> '+ ' <div style="padding: 20px;"><strong>'+this.files[0].name+'</strong>: '+message+'</div> '+ ' </div> '+ ' </div> '; $('body').append(popup); $('body').addClass('modal-opened-ui'); $(this).val(''); } else { window.attachementsInComplaint.push(this.files[0]); $(this).next().removeClass('hidden-lq'); } } }); }; $('body').on('change', '.add-attachement-in-complaint-lq', function (e) { addAttachementInComplaint(e); }); function sendComplaint(e) { if(app.validationBeforePost(e) != 'error'){ var form = $(e.currentTarget).parents('.form-lq'); var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); var fileList = window.attachementsInComplaint; if(fileList != undefined){ var filesSize = fileList.length; } var fd = new FormData(); fd.append('__csrf', __CSRF); for(var i=0; i<dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize > 0) { window.AttachementsErrors = 0; function addAttachementError(file, message) { if(window.AttachementsNotAdded == undefined){ window.AttachementsNotAdded = []; } var attachement = ' <div style="padding: 20px;"><strong>'+file.name+'</strong>: '+message+'</div> '; window.AttachementsNotAdded.push(attachement); window.AttachementsErrors += 1; }; var input = form.find('[name=file]').eq(0); var extensions = input.attr('accept').split(', '); var fileSize = input.data('file-size'); for (var i=0; i<filesSize; i++) { var file = fileList.pop(); if(file.size < fileSize){ var extensionArr = file.name.split('.'); var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase(); var wrongExtension = true; for(var j=0; j<extensions.length; j++){ if(extension == extensions[j]){ fd.append('file'+i, file); var wrongExtension = false; } } if(wrongExtension){ var message = input.data('invalid-file'); addAttachementError(file, message); } } else { var message = input.data('size-exceeded'); addAttachementError(file, message); } } if(window.AttachementsNotAdded){ var popup = ' <div class="message-popup-background-ui errors-lq cancel-lq container-to-delete-lq" style="overflow: auto;"> '+ ' <div class="message-popup-ui box-ui after-adding-to-cart-popup-ui message-popup-on-background-lq" style="position: absolute; top: 0; transform: none; margin: 10% auto;"> '+ ' <div class="box-ui product-added-to-cart-ui" style="position: relative; padding: 20px;">'+ __translations.AttachementsNotAdded+ '<i class="ti-close cancel-lq" style="position: absolute; right: 20px; top: 20px; cursor: pointer;"></i>'+ '</div> '+ window.AttachementsNotAdded.join('')+ ' </div> '+ ' </div> '; $('body').append(popup); $('body').addClass('modal-opened-ui'); window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined; } } $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { $('.add-attachement-in-complaint-lq').val(''); if (data.action.Result) { form.parents('.add-complaint-form-lq').find('.success-message-lq').removeClass('hidden-lq'); form.addClass('hidden-lq'); } else { app.serverMessage(data, form, e); } } }); } }; $('body').on('click', '.send-complaint-lq', function(e) { sendComplaint(e); }); $('body').on('click', '.clear-file-input-lq', function(e) { var index = $(e.currentTarget).parent().index(); $(e.currentTarget).prev().val(''); window.attachementsInComplaint.splice(index - 1, 1); $(e.currentTarget).addClass('hidden-lq'); });
W plikach scss/globals/_globals2.scss i scss/globals/_globals-m.scss znajdź linijkę z frazą .select-background-ui, input[type="date"]{ i zamień ją na .select-background-ui, input[type="date"], input[type="file"]{.
Topaz
W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu/ Ustawienia/ Tłumaczenia) i dodaj tam trzy frazy:

ReportDetails – Szczegóły zgłoszenia,

ReportSuccessInfo – Na adres e-mail zostało wysłane potwierdzenie. Oczekuj kolejnych wiadomości e-mail o zmianie statusu zgłoszenia.,

AttachementsNotAdded – Nie dodano wszystkich załączników.

W pliku partials/customer/order-content.html wyszukaj frazę popupDialog__complain. Kontener z wyszukaną klasą podmień (wraz z zawartością) poniższym kodem:
<div class="popupDialog popupDialog__complain popupDialog-js"> <div class="popupDialog__wrapper"> <span class="popupDialog__title">{{ translations.SendComplaintOrReturn }}</span> <div class="complain__product"> <figure><img class="productImage-js" alt="" /></figure> </div> <div class="form complain__form inputs-container-js" data-success-info="{{ translations.ReportSuccessInfo }}"> <div class="form__checkBox checkBoxes__container checkBoxes__container--radio radioContainer-js"> <div class="radioComplaint-js"><input id="radio-complaint" class="checkbox-input" name="__action" type="radio" value="Order/ComplaintAdd" data-name="complaint" /> <label for="radio-complaint"> {{ translations.Prf_OrderComplaint }} </label></div> <div class="radioReturn-js"><input id="radio-return" class="checkbox-input" name="__action" type="radio" value="Order/ReturnAdd" data-name="return" /> <label for="radio-return"> {{ translations.Prf_OrderReturn }} </label></div> </div> <strong>{{ translations.ReportDetails }}</strong> <div class="form__input-wrapper complaintInputWrapper-js"> {% if config.Complaints.Defects <> null -%} {% assign defectsSize = config.Complaints.Defects | Size -%}<select class="form__input-value form__input-value-js" name="defectId" required="">{% if defectsSize > 1 -%} <option value="-1">{% if defectsSize > 1 -%}* {% endif -%} {{translations.ChooseComplaintCause}}</option>{% endif -%} {% for def in config.Complaints.Defects -%} <option value="{{def.Id}}">{{def.Name}}</option>{% endfor -%} </select> {% endif -%} <p class="form__invalid-input form__validation-required-js" style="display: none;">{{ translations.Com_FieldIsMandatory }}</p> </div> <div class="form__input-wrapper complaintInputWrapper-js"><input id="defectDate" class="form__input-value form__icon_padding form__input-value-js" max="{{config.Now | Date: 'yyyy-MM-dd'}}" min="{{order.Date | Date: 'yyyy-MM-dd'}}" name="defectDate" type="date" value="{{config.Now | Date: 'yyyy-MM-dd'}}" placeholder="yyyy-MM-dd" /> <label class="form__input-info" for="defectDate">* {{translations.Prf_DefectDate}}</label></div> <div class="form__input-wrapper complaintInputWrapper-js"> {% if config.Complaints.Requests <> null -%} {% assign requestsSize = config.Complaints.Requests | Size -%}<select class="form__input-value form__input-value-js" name="requestId" required="">{% if requestsSize > 1 -%} <option value="-1">{% if requestsSize > 1 -%}* {% endif %} {{translations.Prf_ComplainRequest}}</option>{% endif %} {% for req in config.Complaints.Requests -%} <option value="{{req.Id}}">{{req.Name}}</option>{% endfor -%} </select> {% endif -%} <p class="form__invalid-input form__validation-required-js" style="display: none;">{{ translations.Com_FieldIsMandatory }}</p> </div> {% assign returnTypes = config.Complaints.Returns | Size -%} {% if returnTypes > 1 -%} <div class="form__input-wrapper returnInputWrapper-js"> <select class="form__input-value form__input-value-js" name="returnId" required=""> <option value="-1">{% if returnTypes > 1 -%}* {% endif %} {{translations.ChooseReturn}}</option>{% for return in config.Complaints.Returns -%} <option value="{{return.Id}}">{{return.Name}}</option>{% endfor -%} </select> <p class="form__invalid-input form__validation-required-js" style="display: none;">{{ translations.Com_FieldIsMandatory }}</p> </div> {% endif %} <div class="form__input-wrapper min-js"><label class="quantityField__label">{{translations.Com_Quantity}}</label> <button class="button-minus-add-product" type="button" data-field="quantity"> </button> <input class="quantity-field quantity__field-js" max="" min="1" name="quantity" type="number" value="1" data-decimal="false" /> <button class="button-plus-add-product" type="button" data-field="quantity"> </button></div> <div class="form__input-wrapper"><input id="accountNumber" class="form__input-value form__input-value-js" maxlength="50" name="accountNumber" type="text" /> <label class="form__input-info form__input-info-js" for="accountNumber">{{translations.Crt_BankAccountNumber}}</label></div> <div class="form__input-wrapper">{{translations.Prf_AdditionalInfo}} <textarea class="form__input-value" name="message"></textarea></div> <div class="form__input-wrapper"><span class="form__requiredFields--info">* {{ translations.Com_RequiredFields }}</span></div> {% if config.Complaints.AttachmentsEnabled -%} <div class="form__input-wrapper attachementsInputWrapper" data-not-added-info="{{translations.AttachementsNotAdded}}"> <div class="form__attachementsLabel">{{ translations.AddAttachment }}</div> {% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Complaints.AttachmentsMaxCount) -%} <div class="form__attachement-input-container"><input class="addAttachementInComplaint-js" accept="{{ config.Complaints.AttachmentExtensions }}" name="file" type="file" data-file-size="{{ config.Complaints.AttachmentMaxSize }}" data-size-exceeded="{{ translations.Com_FileSizeExceeded | Format: maxSize }}" data-invalid-file="{{ translations.Com_InvalidFile | Format: config.Complaints.AttachmentExtensions }}" /></div> {% endfor -%} </div> {% endif -%} <input class="productId-js" name="no" type="hidden" value="" /> <input name="orderId" type="hidden" value="{{order.Id}}" /> <button class="primary-action-button orderComplaintOrReturnAdd-js" type="button" data-id="{{order.Id}}">{{translations.Report}}</button> </div> </div> </div>
Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) znajdź zmienną var customerProfile, a w niej funkcję events. Tuż przed nią dodaj poniższy kod:
addAttachementInComplaint: function(e) { window.attachementsInComplaint = []; var filesArr = $(e.currentTarget).parents('.inputs-container-js').find('.addAttachementInComplaint-js'); filesArr.each(function () { if(this.files.length > 0){ var maxSize = $(this).data('file-size'); if(this.files[0].size > maxSize){ var message = $('[data-not-added-info]').data('not-added-info') + '. </code></code><strong>' + this.files[0].name + '</strong><code class="lang:ruby decode:true ">: ' + $(this).data('size-exceeded'); app.showTemporaryPopup(message, 'error', '', 8000); $(this).val(''); $(this).next().hide(); } else { window.attachementsInComplaint.push(this.files[0]); $(this).next().show(); } } }); }, sendComplaint: function(e) { if(app.validationBeforePost(e) != 'error'){ var form = $(e.currentTarget).parents('.inputs-container-js'); var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); var fileList = window.attachementsInComplaint; if(fileList != undefined){ var filesSize = fileList.length; } var fd = new FormData(); fd.append('__csrf', __CSRF); for(var i=0; i<dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize > 0) { window.AttachementsErrors = 0; function addAttachementError(file, message) { if(window.AttachementsNotAdded == undefined){ window.AttachementsNotAdded = []; } var attachement = '</code> <div style="padding: 20px;"><strong>'+file.name+'</strong>: '+message+'</div> '; window.AttachementsNotAdded.push(attachement); window.AttachementsErrors += 1; }; var input = form.find('[name=file]').eq(0); var extensions = input.attr('accept').split(', '); var fileSize = input.data('file-size'); for (var i=0; i<filesSize; i++) { var file = fileList.pop(); if(file.size < fileSize){ var extensionArr = file.name.split('.'); var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase(); var wrongExtension = true; for(var j=0; j<extensions.length; j++){ if(extension == extensions[j]){ fd.append('file'+i, file); var wrongExtension = false; } } if(wrongExtension){ var message = input.data('invalid-file'); addAttachementError(file, message); } } else { var message = input.data('size-exceeded'); addAttachementError(file, message); } } if(window.AttachementsNotAdded){ var message = $('[data-not-added-info]').data('not-added-info') + window.AttachementsNotAdded.join(''); app.showTemporaryPopup(message, 'error', '', 8000); window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined; } } $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { $('.addAttachementInComplaint-js').val(''); if (data.action.Result) { var message = form.data('success-info'); app.showTemporaryPopup(message, 'success', '', 8000); $('.clearFileInput-js').hide(); app.hidePopup(e); sessionStorage.removeItem('complains'); sessionStorage.removeItem('order' + (e.currentTarget).dataset.id); $('.order' + (e.currentTarget).dataset.id).remove(); customerProfile.showOrderDetails(e); } else { app.showTemporaryPopup(result.action.Description, 'error', '', 8000); } } }); } },
Następnie w funkcji events dodaj poniższy kod:
mainSection.on('change', '.addAttachementInComplaint-js', function (e) { customerProfile.addAttachementInComplaint(e); }); mainSection.on('click', '.orderComplaintOrReturnAdd-js', function(e) { customerProfile.sendComplaint(e); }); mainSection.on('click', '.clearFileInput-js', function(e) { var index = $(e.currentTarget).parent().index(); $(e.currentTarget).prev().val(''); window.attachementsInComplaint.splice(index - 1, 1); $(e.currentTarget).hide(); });
Teraz wyszukaj funkcję orderComplaintOrReturnAdd i usuń ją. Następnie wyszukaj wywołanie tej funkcji (w funkcji events) i również usuń. Następnie w pliku css/layout.css dodaj poniższy kod:
.customer .popupDialog__complain .popupDialog__wrapper{max-width:700px;padding-bottom:0}.customer .complain__product{width:40%;padding:0;margin:40px 0;vertical-align:top;display:inline-block;border:none}.customer .complain__product figure{width:100%;height:auto;margin:0 0 20px}.customer .complain__form{width:calc(60% - 84px);display:inline-block;margin:40px}.customer .complain__form>strong{display:block;margin-bottom:20px}.customer .complain__form textarea{margin-top:10px;padding:10px}.customer .customer__orderContent .checkBoxes__container--radio{margin-top:0}.customer .form__attachement-input-container{position:relative}.customer .form__clear-attachement-input{position:absolute;top:11px;cursor:pointer}
Teraz w pliku css/layout-m.css dodaj poniższy kod:
.customer .complain__product{width:100%;margin:20px 0}.customer .complain__form{width:100%;margin:20px 0}

Obsługa cross-sellingu po złożeniu zamówienia
Obsługa cross-sellingu po złożeniu zamówienia
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby po złożeniu zamówienia wyświetliła się sekcja z Cross-Sellingiem.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js oraz scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir
W pliku order/thx.html wyszukaj frazę date-format.html. Pod linijką z tą frazą będzie się znajdował warunek, który trzeba zastąpić poniższym kodem: {% if order.SelectedDelivery.Payment.MethodType == 2 and order.PlacedOrder.ExternalPayment.Success == false -%} {% assign externalPaymentError = true -%} {% endif -%} {% if externalPaymentError or crossSellingSize > 0 -%} Dalej w tym samym pliku (order/thx.html) wyszukaj frazę lastpagescripts.html. Nad linijką z tą frazą będzie się znajdowało zamknięcie warunku, które trzeba zastąpić poniższym kodem: {% elseif crossSellingSize > 0 -%}{{ translations.CrossSellingInfo }} {% for product in cross-selling.Products -%} {{ product | Img:'compact' }} {{ product | Img:'large' }} {{ product.Name }} {% unless customer.HidePrices -%} {% if product.Price == null or product.AskForPrice -%} {{ translations.AskForPrice }} {% else -%} product.Price -%} class="price-container-ui" {% endif -%}> {{ product.Price | ToPrice }} {{ currency }} {% if customer.Cart.SubtotalPrices -%} {{ translations.Netto | Downcase }} {% else -%} {{ translations.Brutto | Downcase }} {% endif -%} {% if product.PreviousPrice > product.Price -%} {{ product.PreviousPrice | ToPrice }} {{ currency }} {% if customer.Cart.SubtotalPrices -%} {{ translations.Netto | Downcase }} {% else -%} {{ translations.Brutto | Downcase }} {% endif -%} {% endif -%} {% endif -%} {% endunless -%}{% endfor -%} Następnie w pliku js/init-ui1.js wyszukaj frazę 1019. Będzie to linijka z warunkiem dotyczącym kodu błędu. Pod tym warunkiem wklej poniższy kod: if ($('.crossselling-slider-in-cart-lq').length) { window.UIFeatures.initSlider('.crossselling-slider-in-cart-lq', { dots: true, slidesToShow: 3, slidesToScroll: 3, arrows: false, infinite: false, responsive: [{ breakpoint: 1279, settings: { slidesToShow: 1.7, slidesToScroll: 1, arrows: false, infinite: false, dots: false } }] }); $('.crossselling-slider-in-cart-lq img').each(function () { var src = $(this).data('src'); $(this).attr('src', src); }) } Na samym końcu pliku js/init-ui2.js wklej poniższy kod: $(document).ready(function () { if ($('.crossselling-slider-in-cart-lq').length) { UIFeatures.initSlider('.crossselling-slider-in-cart-lq', { dots: true, slidesToShow: 3, slidesToScroll: 3, arrows: false, infinite: false, responsive: [{ breakpoint: 1279, settings: { slidesToShow: 1.7, slidesToScroll: 1, arrows: false, infinite: false, dots: false } }] }); $('.crossselling-slider-in-cart-lq img').each(function () { var src = $(this).data('src'); $(this).attr('src', src); }) } }); Na końcu pliku scss/globals/_globals2.scss wklej poniższy kod: .cross-selling-ui{ padding: 40px 0; .minibox-product-container-ui{ padding: 10px; } .minibox-product-ui{ margin: 0; height: 300px; width: 100%; } }
Topaz
W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu -> Ustawienia -> Tłumaczenia) i dodaj tam frazę CrossSellingInfo - Inni kupili również. Następnie przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Trzykropek w prawym górnym rogu -> Edytuj ustawienia zaawansowane -> Obiekty) i dodaj tam nowy obiekt typu Nowości i Promocje o nazwie cross-selling. Po jego dodaniu wejdź w jego ustawienia i wybierz Typ Cross-Selling. Następnie pozostając w tych ustawieniach przejdź na zakładkę Strony i zaznacz tam check-box Zamówienie. Zapisz to wszystko kliknięciem w dyskietkę w prawym górnym rogu. W pliku partials/product-item.html wyszukaj frazę config.Products.ShowCode, a następnie usuń warunek (wraz z jego zawartością), którego częścią jest ta fraza. Następnie w pliku staticElements/cart/cart.html wyszukaj frazę cart--step-five. Zastąp kontener z tą klasą (wraz z jego zawartością) poniższym kodem:

<class="cart cart--step-five {% if crossSellingSize ><p> 0 -%} with-crossselling {% endif -%}"> <class="cart--step-five-content-container">{{translations.Thx}}, {{ translations.Crt_Order }} nr {{ cart.PlacedOrder.Id }} {{translations.Crt_BeenPlaced}}{{ translations.Crt_DetailsOnMail }} {% if cart.NotDeterminedDeliveryCost or cart.SelectedDelivery.NotDeterminedDeliveryCost %} {{ translations.Crt_NotDeterminedDeliveryCostInfo }}. {% endif -%} {{ translations.Crt_CheckSPAM }}{{ translations.Crt_BackToShop }} {% if cart.SelectedDelivery.Payment.MethodType == 2 and cart.PlacedOrder.ExternalPayment.Success == false -%} <class="cart cart--unfinished-payment">
{{ translations.Crt_RestoreTitle }}

{{ translations.Crt_RestoreText }}
<class="shoppingCart__form--restore inputs-container-js"> {{ translations.IPay }} {{ translations.Crt_BackToShop }} {% endif -%} {% if crossSellingSize > 0 -%} <class="cart--step-five-crossselling-container"> {{ translations.CrossSellingInfo }} <class="cart--step-five-crossselling-container"> {% include 'partials/product-item.html' with product -%} <class="cart--step-five-crossselling-container">{% assign products = cross-selling.Products | Randomize -%} {% for product in products -%} {% unless product.Url == null and product.Url == '' -%} {% endunless -%} {% endfor -%}{% endif -%}

Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) wyszukaj zmienną var cartFunctions. W niej należy znaleźć funkcję init (zaraz na samym początku) i dodać na jej końcu linijkę this.initializeCrossSellingSlider();. Następnie trzeba wyszukać linijkę z frazą $('.activeCart').removeClass('activeCart'); (będzie w funkcji placeOrder) i pod nią dodać cartFunctions.initializeCrossSellingSlider();. Teraz trzeba dodać poniższy kod pod funkcją placeOrder: initializeCrossSellingSlider: function () { $('.crossselling-slider').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 1441, settings: { slidesToShow: 2 } }, { breakpoint: 769, settings: { slidesToShow: 1 } } ] }); }, Następnie w pliku css/layout.css dodaj poniższy kod: .cart--step-five.with-crossselling{display:block}.cart--step-five a{display:block;width:calc(100% - 50px);max-width:387px;margin-bottom:35px}.crossselling-slider{padding:0}.crossselling-slider .slick-track{margin:0 -20px}.crossselling-slider .slick-prev,.crossselling-slider .slick-next{background:{{settings.sliderBgColor}}}.crossselling-slider .slick-prev:before,.crossselling-slider .slick-next:before{border:solid {{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;width:4px;height:4px;top:14px;content:" "}.crossselling-slider .slick-prev:hover,.crossselling-slider .slick-next:hover{background:{{settings.sliderHoverBgColor}}}.crossselling-slider .slick-prev:hover:before,.crossselling-slider .slick-next:hover:before{border-color:{{settings.sliderHoverArrowColor}}}.crossselling-slider .slick-prev{left:-40px}.crossselling-slider .slick-prev:before{left:16px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.crossselling-slider .slick-next{right:-40px}.crossselling-slider .slick-next:before{left:14px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.crossselling-slider button.slick-prev.slick-arrow.slick-disabled,.crossselling-slider button.slick-arrow.slick-disabled{display:none !important} Teraz w pliku css/layout-m.css dodaj poniższy kod: .cart--step-five-crossselling-container{margin-top:60px}.crossselling-slider .slick-prev{left:0}.crossselling-slider .slick-next{right:0} Następnie w pliku css/layout-d.css dodaj poniższy kod: .cart.with-crossselling{display:block}.cart--step-five.with-crossselling .cart--step-five-content-container{width:30%;margin-right:9%;display:inline-block;vertical-align:top}.cart--step-five-crossselling-container{display:inline-block;width:60%;vertical-align:top}
Dodawanie wyboru działu na formularzu kontaktowym
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.
Ta instrukcja przeznaczona jest dla standardowych szablonów Comarch starszych niż wersja 2019.6. Jeśli posiadasz w sklepie kilka adresów do kontaktu, możesz umożliwić swoim klientom wybór jednego z nich na formularzu kontaktowym. Aby to zrobić, skorzystaj z poniższych instrukcji. Poszczególne pliki, które należy zmodyfikować znajdują się w Panelu administracyjnym w sekcji: Wygląd sklepu/ Ustawienia/ Więcej/ Edytuj ustawienia zaawansowane następnie Więcej/ Edytuj HTML.
Wskazówka
Pamiętaj, aby wprowadzone zmiany w szablonie Zapisać i Opublikować.

1. Bursztyn i Opal
1.1. W pliku contact.html odnajdź element z id "ContactSendForm" i powyżej pola e-mail dodaj poniższy kod: {% if config.Contact.Contacts[0] -%} <select name="contactId" class="department" required> {% for contact in config.Contact.Contacts -%} <option value="{{ contact.Id }}">{{ contact.Name }}</option> {% endfor -%} </select> {% endif -%} 1.2. Aby wygląd nowego pola był spójny z resztą formularza, w pliku scss/contact.scss odnajdź selektor ".contact-info .contact-form input, .contact-info .contact-form textarea" i zamień go na: .contact-info .contact-form input, .contact-info .contact-form textarea, .contact-info .contact-form select 1.3. Skompiluj i zminifikuj pliki scss.
Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.
1.4. Aby walidacja działała poprawnie, w pliku js/init.js, odnajdź funkcję resetForm(form) i podmień ją na: function resetForm(form) { var inputs = form.find('input:not([disabled]):not([type=hidden]), select:not([disabled]):not(".department"), textarea:not([disabled])'); inputs.each(function () { $(this).val(''); }); $('.loader-icon').remove(); $('.send-contact-form').removeClass('posting'); } 1.5. Zminifikuj pliki js.
Wskazówka
O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

2. Agat
2.1. W pliku contact.html odnajdź element z id "contact-form" i powyżej pola e-mail dodaj poniższy kod: {% if config.Contact.Contacts[0] -%} <div class="input-group"> <span class="required-fields-info">{{ translations.Department }} *</span> <select name="contactId" required> {% for contact in config.Contact.Contacts -%} <option value="{{ contact.Id }}">{{ contact.Name }}</option> {% endfor -%} </select> </div> {% endif -%} 2.2. Aby wygląd nowego pola był spójny z resztą formularza, w pliku scss/mobile1.scss odnajdź selektor "input, textarea" i zamień go na: input, textarea, .contact-form-popup select 2.3. Skompiluj i zminifikuj pliki scss.
Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.
2.4. Dodaj tłumaczenie dla frazy Department [Dział] Tłumaczenie należy dodać w Panelu administracyjnym: Wygląd sklepu/ Ustawienia na zakładce Tłumaczenia.
3. Szafir
3.1. W pliku common/navigation-bars/navigation-contact.html odnajdź element z klasą "form-lq form-ui" i wewnątrz niego dodaj poniższy kod: {% if config.Contact.Contacts[0] -%} <div> <label>{{ translations.Department }}<span class='required-ui'>*</span></label> <span class="select-background-ui w100-ui"> <select name="contactId" required> {% for contact in config.Contact.Contacts -%} <option value="{{ contact.Id }}">{{ contact.Name }}</option> {% endfor -%} </select> </span> <i class="ti-angle-down select-arrow-ui"></i> </div> {% endif -%} 3.2. Dodaj tłumaczenie dla frazy Department [Dział] Tłumaczenie należy dodać w Panelu administracyjnym: Wygląd sklepu/ Ustawienia na zakładce Tłumaczenia. 3.3. Aby walidacja działała poprawnie, w pliku js/init-ui2.js, odnajdź funkcję sendContactForm(e) i podmień ją na: function sendContactForm(e) { if(app.validationBeforePost(e) != 'error'){ $('.during-ajax-modal-lq').removeClass('hidden-lq'); var form = $(e.currentTarget).parents('.form-lq'); var inputs = form.find('input, textarea, select'); var data = inputs.serializeArray(); data.push({name: "__csrf", value: __CSRF}); $.post('', data, function(result) { $('.during-ajax-modal-lq').addClass('hidden-lq'); if (result.action.Result) { var message = form.data('success'); app.temporaryMessage(form, message); $.each(inputs, function (index, value) { if ($(value).attr('name') !== 'contactId' && $(value).attr('name') !== '__action') { $(value).val(''); } }); form.find('.message-lq').remove(); } else { var message = '<p>' + result.action.Message + '</p>'; if(result.action.Code != 100){ app.message(form, message); } } }); $(e.currentTarget).removeClass('error-lq'); } else { $(e.currentTarget).addClass('error-lq'); } } 3.4. Zminifikuj pliki js.
Wskazówka
O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.
Obsługa załączników do zamówienia
Obsługa załączników do zamówienia
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby było możliwe dodanie załączników do składanego zamówienia.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js oraz scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir
Na potrzeby tej funkcji zdecydowaliśmy się na drobne zmiany w wyglądzie elementów związanych z dodawaniem notatki do zamówienia. Poniższe fragmenty kodu uwzględniają owe zmiany. Na początku dodaj w swoim szablonie nowe frazy w zakładce Tłumaczenia: AddAttachement - Dodaj załącznik AddMessage - Dodaj wiadomość YourMessage - Twoja wiadomość AttachementsNotAdded - Nie dodano wszystkich załączników Attachements - Załączniki W pliku _layout.html w elemencie head znajduje się skrypt, który dodaje do zmiennej __translations różne tłumaczenia. Dodaj tam taką linijkę: AttachementsNotAdded: "{{ translations.AttachementsNotAdded | H }}", Jeśli miałeś w swoim szablonie funkcję do importowania koszyka z pliku to w pliku common/navigation-bars/main-navigation-bar-partial.html wyszukaj frazę id="file", a następnie w tym inpucie, w którym występuje to ID dodaj klasę import-cart-input-lq. Następnie w pliku js/init.js wyszukaj frazę [name="file"] i zamień ją na .import-cart-input-lq. W pliku order/cart.html wyszukaj frazę note-lq. Jest to klasa kontenera, w którym znajdują się wszystkie elementy związane z dodawaniem notatki do zamówienia. Wytnij cały ten kontener czyli taki kod: {% if usr.Authenticated -%} {% if order.Note == '' -%} {% include 'order/note-partials/note-form.html' -%} {% else -%} {% include 'order/note-partials/note-presentation.html' -%} {% endif -%} {% endif -%} i wklej go pod taką linijką: {% include 'common/order-summary.html' -%} Następnie trzeba w całości podmienić zawartość plików order/note-partials/note-form.html oraz order/note-partials/note-presentation.html. Poniżej właściwa zawartość obu plików: order/note-partials/note-form.html {% assign isExpanded = include -%} {% if config.Orders.AttachmentsEnabled -%} {% endif -%} {% if isExpanded == true or isExpanded == 'true' -%} {% else -%} {% endif -%} {% if config.Orders.AttachmentsEnabled -%} {{ translations.AddAttachement }} (Max. {{ config.Orders.AttachmentsMaxCount }}) {% endif -%} {{order.Note}} {% if config.Orders.AttachmentsEnabled -%} {% include 'order/attachements.html' -%} {% endif -%} order/note-partials/note-presentation.html {% if config.Orders.AttachmentsEnabled -%} {% endif -%} {% if config.Orders.AttachmentsEnabled -%} {{ translations.AddAttachement }} (Max. {{ config.Orders.AttachmentsMaxCount }}) {% endif -%} {{order.Note}} {% if config.Orders.AttachmentsEnabled -%} {% include 'order/attachements.html' -%} {% endif -%} Kolejnym krokiem będzie dodanie nowego pliku HTML o nazwie attachements. Należy go dodać do folderu order. Poniżej zawartość tego pliku: order/attachements.html {% for file in order.Attachments -%} {% assign type = file.Name | Split: '.' | Last -%} {% if type == "jfif" or type == "jpe" or type == "jpeg" or type == "jpg" -%} {% assign icon = 'ti-image' -%} {% elseif type == "csv" or type == "txt" -%} {% assign icon = 'ti-receipt' -%} {% elseif type == "docx" or type == "odt" -%} {% assign icon = 'ti-write' -%} {% elseif type == "xlsx" or type == "ods" -%} {% assign icon = 'ti-bar-chart' -%} {% elseif type == "pdf" -%} {% assign icon = 'ti-agenda' -%} {% else -%} {% assign icon = 'ti-file' -%} {% endif -%} {{ file.Name }} {% endfor -%} Następnie w pliku customer-profile/orders/order-details.html wyszukaj frazę {% if order.Note != "" -%}. W tym warunku znajdują się dodane notatki do zamówienia. Pod tym warunkiem wklej poniższy kod: {% if config.Orders.AttachmentsEnabled -%} {% for file in order.Attachments -%} {% assign type = file.Name | Split: '.' | Last -%} {% if type == "jfif" or type == "jpe" or type == "jpeg" or type == "jpg" -%} {% assign icon = 'ti-image' -%} {% elseif type == "csv" or type == "txt" -%} {% assign icon = 'ti-receipt' -%} {% elseif type == "docx" or type == "odt" -%} {% assign icon = 'ti-write' -%} {% elseif type == "xlsx" or type == "ods" -%} {% assign icon = 'ti-bar-chart' -%} {% elseif type == "pdf" -%} {% assign icon = 'ti-agenda' -%} {% else -%} {% assign icon = 'ti-file' -%} {% endif -%} {{ file.Name }} {% endfor -%} {% endif -%} Na samym końcu pliku js/init-ui2.js dodaj poniższy kod: function processFilesList(fileInput, fileList) { var file = fileList.pop(); if (file) { var fd = new FormData(); fd.append('__CSRF',__CSRF); fd.append('__action','Order/AttachmentAdd'); fd.append('__template','order/attachements.html'); fd.append('file', file); $.ajax({data: fd, processData: false, contentType: false, type: 'POST', success: function(data){ fileInput.val(''); if(data.action.Result){ $('.attachements-lq').html(data.template); } else { if(window.AttachementsNotAdded == undefined){ window.AttachementsNotAdded = []; } var attachement = ' '+file.name+': '+data.action.Message+' '; window.AttachementsNotAdded.push(attachement); } processFilesList(fileInput, fileList); } }); } else { $('.during-ajax-modal-lq').addClass('hidden-lq'); fileInput.removeClass('prevent-double-change-lq'); if(window.AttachementsNotAdded){ var popup = ' '+ ' '+ ' '+ __translations.AttachementsNotAdded+ ''+ ' '+ window.AttachementsNotAdded.join('')+ ' '+ ' '; $('body').append(popup); $('body').addClass('modal-opened-ui'); window.AttachementsNotAdded = undefined; } } }; function addAttachementInOrder(e) { $('.during-ajax-modal-lq').removeClass('hidden-lq'); var fileInput = $(e.currentTarget); fileInput.addClass('prevent-double-change-lq'); var fileList = Object.values(e.currentTarget.files); processFilesList(fileInput, fileList); }; $('body').on('change', '.add-attachement-in-order-lq:not(.prevent-double-change-lq)', function (e) { addAttachementInOrder(e); }); function removeAttachementInOrder(e) { $.post('', {__csrf: __CSRF, __action: 'Order/AttachmentDelete', id: $(e.currentTarget).data('id')}, function(result) { $(e.currentTarget).parents('.file-container-lq').remove(); }); }; $('body').on('click', '.remove-attachement-in-order-lq', function (e) { removeAttachementInOrder(e); }); W pliku scss/globals/_globals-m.scss wyszukaj frazę &.confirm-in-cart-ui. Zmień tam top: 93px na top: 70px. Usuń też right: 20px. W pliku scss/globals/_globals2.scss wyszukaj frazę .add-note-in-cart-ui. Dopisz do niej po spacji w tej samej linijce .ti-notepad a następnie usuń margin-top: -10px i dodaj font-size: 20px. W pliku scss/globals/partials/_order.scss wyszukaj frazę .note-ui. Nadpisz wszystkie style znajdujące się w tej klasie poniższym kodem: margin-top: 20px; border-top: 1px solid $lightBorderColor; border-bottom: 1px solid $lightBorderColor; padding: 15px; .half-ui{ padding: 10px; float: left; &:first-child{ border-right: 1px solid $lightBorderColor; } } button { padding: 0; line-height: 1; } .note-in-order-ui{ margin-top: 20px; position: relative; .edit-ui{ margin-left: 15px; vertical-align: baseline; } } .label-note-in-cart-ui{ color: $labelsColor; cursor: default; } .form-to-confirm-in-cart-ui{ resize: none; } .confirm-in-cart-ui{ top: -20px; } .file-container-ui{ background: $bgColor; border: 1px solid $lightBorderColor; border-radius: 20px; margin: 0 10px 10px 0; padding: 5px 15px 10px; display: inline-block; &:first-child{ margin-top: 20px; } .icon-ui{ font-size: 20px; vertical-align: middle; } .remove-attachement-in-order-ui{ vertical-align: middle; margin-left: 10px; cursor: pointer !important; } }
Obsługa funkcji przypomnienia o wystawieniu opinii za zakupiony towar
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Obsługa funkcji przypomnienia o wystawieniu opinii za zakupiony towar
W wersji sklepu oznaczonej numerkiem 2019.5 w Panelu Administracyjnym doszła funkcja przypomnienia o wystawieniu opinii za zakupiony towar. Ta funkcja będzie wysyłać maila z owym przypomnieniem. W tym mailu będzie również link do szczegółów danego towaru. W tym artykule dowiesz się jak zmodyfikować swój szablon, aby po kliknięciu w ten link otworzyła się strona ze szczegółami danego towaru, a w niej był już otwarty i gotowy do uzupełnienia formularz wystawienia opinii.
Agat
W pliku js/init.js znajdź funkcję addReview i w niej zaraz pod zmienną validate dodaj taki kod: if(window.location.hash.includes('#rate')){ var hash = window.location.hash.split('&')[1].split('=')[1]; data.push({ name: 'orderHash', value: hash }); } A następnie w pliku js/init2.js na samym końcu dodaj taki kod: function autoOpenReviewsForm(){ $('.new-review-label').trigger('click'); $('html, body').animate({ scrollTop: $('.new-review-label').offset().top - 81 }, 500); } $(document).ready(function () { if(window.location.hash.includes('#rate')){ autoOpenReviewsForm(); } });
Wskazówka
Z tego artykułu dowiesz się jak zminifikować swoje pliki js

Bursztyn
W pliku js/init.js wyszukaj frazę #opinion-form .primary-action. Będzie to trigger funkcji do wystawiania opinii. W tej funkcji pod zmienną data dodaj taki kod: if(window.location.hash.includes('#rate')){ var hash = window.location.hash.split('&')[1].split('=')[1]; data.push({ name: 'orderHash', value: hash }); } A następnie w pliku js/details.js na samym końcu dodaj taki kod: $(document).ready(function () { if(window.location.hash.includes('#rate')){ $('#add-first-review').trigger('click'); } });
Wskazówka
Z tego artykułu dowiesz się jak zminifikować swoje pliki js

Opal
W pliku js/init.js wyszukaj frazę #opinion-form .primary-action. Będzie to trigger funkcji do wystawiania opinii. W tej funkcji pod zmienną data dodaj taki kod: if(window.location.hash.includes('#rate')){ var hash = window.location.hash.split('&')[1].split('=')[1]; data.push({ name: 'orderHash', value: hash }); } A następnie w pliku js/details.js na samym końcu dodaj taki kod: $(document).ready(function () { if(window.location.hash.includes('#rate')){ $('#main-rating > .glyphicon').trigger('click'); } });
Wskazówka
Z tego artykułu dowiesz się jak zminifikować swoje pliki js
Obsługa szczegółów zamówienia dla klienta niezalogowanego
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Obsługa szczegółów zamówienia dla klienta niezalogowanego
W tym artykule dowiesz się jak zmodyfikować szablon, aby klienci niezalogowani mogli w profilu klienta zobaczyć szczegóły zamówienia do którego posiadają link.
Szafir
W pliku customer-profile.html w pierwszym warunku dopisz and customer-profile.Order == null tak żeby warunek wyglądał w ten sposób: {% if customer.Authenticated == false and config.DefinedPages.CustomerProfile.Id == page.PageId and customer-profile.Order == null -%} W pliku customer-profile/orders/order-details.html wyszukaj frazę {{ page.Url }}?{{ pageQueryName }}. Będzie to część atrybutu przypisanego do przycisku powrotu do listy zamówień. Ten przycisk trzeba uwarunkować, aby zamiast niego pojawiał się link prowadzący do strony głównej sklepu. Ostatecznie powinno to wyglądać tak jak poniższy kod: {% if customer.Authenticated -%} {% else -%} {{ translations.BackToShopping }}{% endif -%} Pozostając dalej w tym samym pliku (customer-profile/orders/order-details.html) wyszukaj frazę Order/Cancel. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/Accept i Order/RestorePayment). Pod każdą z nich wklej: Nadal w tym samym pliku (customer-profile/orders/order-details.html) wyszukaj frazę copy-to-cart-lq. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba w nim dodać atrybut data-hash="{{ order.Hash }}" tak, aby ostatecznie przycisk wyglądał następująco: Następnie w pliku js/init-ui2.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak: var id = $(e.currentTarget).data('id'); var hash = $(e.currentTarget).data('hash'); var data = { orderId: id, hash: hash, __csrf: __CSRF, __action: 'Order/Copy' };
Wskazówka
Pamiętaj, że pliki js należy zminifikować. O tym jak skompilować i zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn lub Opal
W pliku customerprofile.html podmień warunek, aby wyglądał tak: {% if customer.Authenticated and page.PageId == config.DefinedPages.CustomerProfile.Id %}
{% include 'customer/profile.html' %}
{% elseif customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customerprofile.Order != null %}
{% include 'customer/profile.html' %}
{% else %}
{% include 'customer/login.html' %}
{% endif %} W pliku customer/profile-orders.html wyszukaj frazę Order/RestorePayment. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/Cancel i Order/Accept). Pod każdą z nich wklej: Nadal w tym samym pliku (customer/profile-orders.html) wyszukaj frazę copy-to-cart. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba go zmodyfikować tak, aby wyglądał następująco: Następnie w pliku js/profile.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak: var id = $(e.currentTarget).data('id'); var hash = $(e.currentTarget).data('hash'); var newLocation = $(e.currentTarget).data('url'); var added = $(e.currentTarget).data('added'); var copy = $(e.currentTarget).data('copy'); var notCopied = $(e.currentTarget).data('not-copied'); var data = [ { name: '__action', value: 'Order/Copy' }, { name: 'orderId', value: id }, { name: 'hash', value: hash }, { name: '__csrf', value: __CSRF } ];
Wskazówka
Pamiętaj, że pliki js należy zminifikować. O tym jak skompilować i zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat
W pliku customer-profile.html podmień warunek, aby wyglądał tak: {% if page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null %} {% include 'partials/customer/order-details.html' -%} {% elseif customer.Authenticated and page.PageId == config.DefinedPages.CustomerProfile.Id %} W pliku partials/customer/order-details.html wyszukaj frazę Order/Accept. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/RestorePayment i Order/Cancel). Pod każdą z nich wklej: Będąc przy akcji Order/Cancel dodaj warunek do inputa z templatką tak, aby wyglądał następująco: {% if customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null -%} {% else -%} {% endif -%} Nadal będąc przy tej akcji (Order/Cancel) zmodyfikuj przycisk odpowiadający za anulowanie zamówienia tak, aby wyglądał jak tu: Pozostając w tym samym pliku (partials/customer/order-details.html) wyszukaj frazę copy-to-cart. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba w nim dodać atrybut data-hash="{{ order.Hash }}" tak, aby ostatecznie przycisk wyglądał następująco: Następnie w pliku js/init2.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak: var copyButton = $(e.currentTarget); var copySection = copyButton.parents('.copy-section'); var id = copyButton.data('id'); var hash = copyButton.data('hash'); var data = [ { name: '__action', value: 'Order/Copy' }, { name: 'orderId', value: id }, { name: 'hash', value: hash }, { name: '__csrf', value: __CSRF } ]; W pliku js/init.js znajdź funkcję cancelOrder i podmień w niej posta, żeby wyglądał tak: $.post(url, data, function (result) { if (result.action.Result) { if($(e.currentTarget).hasClass('not-authenticated')){ application.createMessage(message); $('#main-section').html(result.template); application.loadImages(); } else { window.templateChanged['under-execution'] = true; application.createMessage(message); if (parent.index() != -1) { $('.under-execution').eq(1).replaceWith(result.template); } application.uiPreventScrolling(); } } else if (result.action.Code != 100) { application.createMessage(result.action); } }); W pliku partials/customer/order-details-products.html do kontenera z klasą cart-items dodaj warunek, tak aby ostatecznie kontener wyglądał następująco:
Na końcu pliku scss/main2.scss dodaj taki kod: @media only screen and (min-width: 481px) { .cart-items.not-authenticated .cart-item { width: calc(50% - 40px); display: inline-block; } } @media only screen and (min-width: 769px) { .cart-items.not-authenticated .cart-item { width: calc(50% - 25px); } } @media only screen and (min-width: 1025px) { .cart-items.not-authenticated { width: 66%; } } Na końcu pliku scss/mobile2.scss dodaj taki kod: .cart-items.not-authenticated{ text-align: center; margin: 20px auto; }
Wskazówka
Pamiętaj, że pliki js i scss należy zminifikować. O tym jak skompilować i zminifikować pliki js i scss dowiesz się z artykułu o kompilacji i minifikacji plików.
Obsługa funkcji autocomplete w wyszukiwarce szablonu
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Obsługa funkcji autocomplete w wyszukiwarce szablonu
W tym artykule dowiesz się jak zaimplementować funkcję autocomplete w swoim szablonie. Funkcja ta wyświetli klientowi listę towarów, które będą najlepiej pasowały do wpisanej przez niego frazy w wyszukiwarce.
Szafir
W pliku common/header/header.html wyszukaj frazę quick-search-form-lq. Zmodyfikuj element, do którego należy ta klasa, aby wyglądał tak:
Na końcu pliku js/init-ui2.js wklej ten kod:

<class="lang:ruby decode:true">function autocomplete(e) { var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~`\\|]*/gi, ''); if (phrase != '' && phrase.length > 1) { $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (res) { if($(window).width() > 1280){ var right = 'right: 50px'; } else if($(window).width() > 680){ var right = ''; } else { var right = 'right: 61px'; } var loader = ''; $('.quick-search-form-lq.autocomplete-form-lq').append(loader); var url = res.action.Redirect302; $.get(url, {__csrf:__CSRF, __collection:'products.Products|page.BaseHref|currency|config.Products.ShowCode'}, function(res) { $('.autocomplete-lq').remove(); var list = res.collection['products.Products']; var showCode = res.collection['config.Products.ShowCode']; if (list.length > 0){ if (list.length > 5) { var size = 5; } else { var size = list.length; } var baseHref = res.collection['page.BaseHref']; var currency = res.collection['currency']; var autocompleteList = '

'; var regPhrase = '(' + phrase.split(' ').join('|') + ')'; var reg = new RegExp(regPhrase, 'gi'); for (i = 0; i < size; i++) { var nameNoQuotes = list[i].Name.replace(/"/g, '"'); var name = list[i].Name.replace(reg, function(str) {return ''+str+''}); if(showCode){ var code = list[i].Code.replace(reg, function(str) {return ''+str+''}); } else { var code = ''; } if(list[i].Price){ var price = list[i].Price.toPrice() + ' ' + currency; } else { var price = ''; } if(list[i].ImageId != -1){ var img = ''; } else { var img = ''; } var product = ' ' + '
' + img + '
' + '
' + '
' + name + '
' + '
' + code + '
' + '
' + '
' + price + '
' + ''; autocompleteList += product; } autocompleteList += '
'; $('.quick-search-form-lq.autocomplete-form-lq').append(autocompleteList); } $('.loader-for-autocomplete-lq').remove(); }); }); } else { $('.autocomplete-lq').remove(); $('.loader-for-autocomplete-lq').remove(); } }; $('body').on('input', '.quick-search-form-lq.autocomplete-form-lq [name="search"]', function (e) { if(timeOutAutocomplete!=null){ clearTimeout(timeOutAutocomplete); timeOutAutocomplete=null; } timeOutAutocomplete = setTimeout(function(){ autocomplete(e); }, 300); }); //variable to clearTimeout in autocomplete function var timeOutAutocomplete = null; $('body').on('blur', '.quick-search-form-lq.autocomplete-form-lq [name="search"]', function () { setTimeout(function () { $('.autocomplete-lq').remove(); $('.loader-for-autocomplete-lq').remove(); },200); });

Na końcu pliku scss/globals/_header.scss wklej ten kod: .autocomplete-ui{ position: absolute; z-index: 1000; width: 100%; box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); @media only screen and (max-width: 1280px) { max-width: 550px; left: 50%; transform: translateX(calc(-50% - 25px)); text-align: left; } @media only screen and (max-width: 680px) { left: auto; transform: none; } .product-ui{ display: block; padding: 10px; background: $bgColor; border: 1px solid $lightBorderColor; border-bottom: none; font-size: 16px; color: $primaryColorFont; transition: all ease 300ms; &:last-child{ border-bottom: 1px solid $lightBorderColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ width: 100px; margin-right: 0; text-align: right; } } .img-ui{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names-ui{ width: calc(100% - 50px - 100px - 20px); } .name-ui{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: $primaryColor; transition: all ease 300ms; } .code-ui{ font-size: 12px; color: $bgColorFont; transition: all ease 300ms; } &:hover{ background: $btnSolidHoverBgColor; color: $btnSolidHoverTextColor; .name-ui, .code-ui{ color: $btnSolidHoverTextColor; } } } }
Wskazówka
Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat
W pliku partials/common/header.html wyszukaj frazę id="search-form". Zmodyfikuj element, do którego należy to ID, aby wyglądał tak: W pliku js/init.js wyszukaj frazę events:. Linijkę wyżej wklej kod:

<class="lang:ruby decode:true ">autocomplete: function(e){ var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~`\\|]*/gi, ''); if (phrase != '' && phrase.length > 1) { $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (result) { if (result.action.Result) { var loader = ''; $('#search-form').append(loader); var url = result.action.Redirect302; $.get(url, {__csrf:__CSRF, __collection:'products.Products|page.BaseHref|currency'}, function(res) { $('.autocomplete').remove(); var list = res.collection['products.Products']; if (list.length > 0){ if (list.length > 5) { var size = 5; } else { var size = list.length; } var baseHref = res.collection['page.BaseHref']; var currency = res.collection['currency']; var autocompleteList = '

'; var regPhrase = '(' + phrase.split(' ').join('|') + ')'; var reg = new RegExp(regPhrase, 'gi'); for (i = 0; i < size; i++) { var nameNoQuotes = list[i].Name.replace(/"/g, '"'); var name = list[i].Name.replace(reg, function(str) {return ''+str+''}); if(list[i].Price){ var price = list[i].Price.toPrice() + ' ' + currency; } else { var price = ''; } if(list[i].ImageId != -1){ var img = '' } else { var img = ''; } var product = '' + '
' + img + '
' + '
' + '
' + name + '
' + '
' + price + '
' + '
' + ''; autocompleteList += product; } autocompleteList += '
'; $('#search-form').append(autocompleteList); } $('.loader-for-autocomplete').remove(); }); } else if (result.action.Code != 100) { application.createMessage(result.action); } }); } else { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); } },

Natomiast pod koniec pliku tuż pod takim kodem: $('body').on('blur', 'input', function () { application.uiCheckLabels(); }); Wklej taki kod: $('body').on('input', '#header-section #search-form.autocomplete-form [name="search"]', function (e) { if(timeOutAutocomplete!=null){ clearTimeout(timeOutAutocomplete); timeOutAutocomplete=null; } timeOutAutocomplete = setTimeout(function(){ self.autocomplete(e); }, 300); });

//variable to clearTimeout in autocomplete function var timeOutAutocomplete = null;$('body').on('blur', '#header-section #search-form.autocomplete-form [name="search"]', function () { setTimeout(function () { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); }, 200); });

Na końcu pliku scss/main2.scss wklej kod: .autocomplete{ position: absolute; z-index: 101; width: 100%; @media only screen and (max-width: 1024px) { width: calc(100% - 240px); } @media only screen and (max-width: 768px) { width: calc(100% - 20px); } box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); .product{ display: block; padding: 10px; background: $bgColor; border: 1px solid $primaryColor; border-bottom: none; font-size: 16px; color: $bgDarkerColorFont; &:last-child{ border-bottom: 1px solid $primaryColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ margin-right: 0; } } .img{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names{ width: calc(100% - 50px - 10px); } .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price{ margin-top: 5px; font-size: 12px; color: $primaryColor; opacity: 0.63; } } }
Wskazówka
Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn
W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak:
Na końcu pliku js/init2.js wklej ten kod:

<class="lang:ruby decode:true ">$('header').on('input', '#SearchForm.autocomplete-form [name="search"]', function (e) { if(timeOutAutocomplete!=null){ clearTimeout(timeOutAutocomplete); timeOutAutocomplete=null; } timeOutAutocomplete = setTimeout(function(){ var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~`\\|]*/gi, ''); if (phrase != '' && phrase.length > 1) { $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (d) { var a = d.action; if (!a.Result) CreateTooltip(a); else if (a.Redirect302){ var loader = ''; $('#SearchForm').append(loader); var url = a.Redirect302; $.get(url, {__csrf:__CSRF, __collection:'productlist.Products|page.BaseHref|currency'}, function(res) { $('.autocomplete').remove(); var list = res.collection['productlist.Products']; if (list.length > 0){ if (list.length > 5) { var size = 5; } else { var size = list.length; } var baseHref = res.collection['page.BaseHref']; var currency = res.collection['currency']; var autocompleteList = '

'; var regPhrase = '(' + phrase.split(' ').join('|') + ')'; var reg = new RegExp(regPhrase, 'gi'); for (i = 0; i < size; i++) { var nameNoQuotes = list[i].Name.replace(/"/g, '"'); var name = list[i].Name.replace(reg, function(str) {return ''+str+''}); if(list[i].Price){ var price = list[i].Price.toPrice() + ' ' + currency; } else { var price = ''; } if(list[i].ImageId != -1){ var img = '' } else { var img = ''; } var product = ' ' + '
' + img + '
' + '
' + '
' + name + '
' + '
' + price + '
' + '
' + ''; autocompleteList += product; } autocompleteList += '
'; $('#SearchForm').append(autocompleteList); } $('.loader-for-autocomplete').remove(); }); } }); } else { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); } }, 300); }); //variable to clearTimeout in autocomplete function var timeOutAutocomplete = null; $('header').on('blur', '#SearchForm.autocomplete-form [name="search"]', function () { setTimeout(function () { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); }, 200); });

Na końcu pliku scss/main2.scss wklej ten kod:

<class="lang:ruby decode:true ">.autocomplete{ position: absolute; top: 43px; left: 0; z-index: 101; width: 100%; box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); .product{ display: block; padding: 10px; background: $bgColor; border: 1px solid $primaryColor; border-bottom: none; font-size: 14px; color: $secondaryColorFont; transition: all ease 300ms; &:last-child{ border-bottom: 1px solid $primaryColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ margin-right: 0; } } .img{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names{ width: calc(100% - 50px - 10px); } .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price{ margin-top: 5px; font-size: 12px; color: $primaryColor; opacity: 0.63; transition: all ease 300ms; } &:hover{ background: $primaryColor; color: $primaryColorFont; .price{ color: $primaryColorFont; opacity: 1; } } } }

Wskazówka
Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Opal
W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak:
Na końcu pliku js/init2.js wklej ten kod:

<class="lang:ruby decode:true ">$('header').on('input', '#SearchForm.autocomplete-form [name="search"]', function (e) { if(timeOutAutocomplete!=null){ clearTimeout(timeOutAutocomplete); timeOutAutocomplete=null; } timeOutAutocomplete = setTimeout(function(){ var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~`\\|]*/gi, ''); if (phrase != '' && phrase.length > 1) { $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (d) { var a = d.action; if (!a.Result) CreateTooltip(a); else if (a.Redirect302){ var loader = ''; $('#SearchForm').append(loader); var url = a.Redirect302; $.get(url, {__csrf:__CSRF, __collection:'productlist.Products|page.BaseHref|currency|config.Products.ShowCode'}, function(res) { $('.autocomplete').remove(); var list = res.collection['productlist.Products']; var showCode = res.collection['config.Products.ShowCode']; if (list.length > 0){ if (list.length > 5) { var size = 5; } else { var size = list.length; } var baseHref = res.collection['page.BaseHref']; var currency = res.collection['currency']; var input = $('#SearchForm').find('[name=search]'); var width = input.width(); var top = input.offset().top + input.height() - 16; var autocompleteList = '

'; var regPhrase = '(' + phrase.split(' ').join('|') + ')'; var reg = new RegExp(regPhrase, 'gi'); for (i = 0; i < size; i++) { var nameNoQuotes = list[i].Name.replace(/"/g, '"'); var name = list[i].Name.replace(reg, function(str) {return ''+str+''}); if(showCode){ var code = list[i].Code.replace(reg, function(str) {return ''+str+''}); } else { var code = ''; } if(list[i].Price){ var price = list[i].Price.toPrice() + ' ' + currency; } else { var price = ''; } if(list[i].ImageId != -1){ var img = '' } else { var img = ''; } var product = ' ' + '
' + img + '
' + '
' + '
' + name + '
' + '
' + code + '
' + '
' + '
' + price + '
' + ''; autocompleteList += product; } autocompleteList += '
'; $('#SearchForm').parent().append(autocompleteList); } $('.loader-for-autocomplete').remove(); }); } }); } else { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); } }, 300); }); //variable to clearTimeout in autocomplete function var timeOutAutocomplete = null; $('header').on('blur', '#SearchForm.autocomplete-form [name="search"]', function () { setTimeout(function () { $('.autocomplete').remove(); $('.loader-for-autocomplete').remove(); }, 200); });

Na końcu pliku scss/main2.scss wklej ten kod:

<class="lang:ruby decode:true ">.autocomplete{ position: absolute; left: calc(50% - 20px); transform: translateX(-50%); z-index: 1000; box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); .product{ display: block; padding: 10px; background: $bgColor; border: 1px solid $primaryColor; border-bottom: none; font-size: 16px; color: $secondaryColorFont; transition: all 300ms ease; &:last-child{ border-bottom: 1px solid $primaryColor; } > div{ display: inline-block; vertical-align: top; margin-right: 10px; &:last-child{ width: 100px; margin-right: 0; text-align: right; } } .img{ width: 50px; height: 50px; position: relative; } img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .names{ width: calc(100% - 50px - 100px - 20px); } .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .code{ font-size: 12px; opacity: 0.63; } &:hover{ background: $primaryColor; color: $primaryColorFont; } } }

Wskazówka
Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.
Obsługa towaru archiwalnego
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Obsługa towaru archiwalnego
W tym artykule dowiesz się jak obsłużyć towar archiwalny na stronie ze szczegółami towaru w swoim szablonie.
Szafir
W pliku product/product-presentation-data.html wyszukaj frazę header. Jest to element, w którym trzeba dodać warunek, aby ostatecznie wyglądało to tak: {% if product.Archival == false -%} . . . {% endif -%} Następnie wyszukaj frazę add-to-cart-container-ui. Jest to kontener, w którym na samym początku wyświetlane są punkty lojalnościowe i flagi. Trzeba je uwarunkować, żeby nie pojawiały się przy towarze archiwalnym. Zamiast nich powinna się pojawić informacja o tym, że jest to towar archiwalny. Początek tego kontenera powinien wyglądać następująco: {% if product.Archival -%}
{{ translations.ArchivalProductInfo }}
{% else -%} {% if activeProduct.Points != null and usr.Authenticated -%} {% capture quantityUnit -%}1 {{ product.SaleUnit }}{% endcapture -%}
{{ translations.EarnLoyaltyPoints | Format:quantityUnit }}: {{ activeProduct.Points }} {{ translations.PointsShortcut }}
{% endif -%}

{% assign flagsQuantity = product.Flags | Size -%} {% for flag in product.Flags limit: 3 -%}
{% if flag.Type == "Reward" -%} {{ translations.PointsProduct }}{% if usr.Authenticated and activeProduct.PointsPrice != null -%}: {{ activeProduct.PointsPrice }} {{ translations.PointsShortcut }}/{{ product.SaleUnit }}{% endif -%} {% else -%} {{ flag.Text }} {% endif -%}

{% endfor -%} {% endif -%}
. . .
Parę linijek niżej znajdują się etykiety {{ translations.ChooseProductVariant }} i {{ translations.Availability }}: {{ activeProduct.Availability.Text }}. Trzeba zmodyfikować ich warunki tak, aby nie wyświetlały się w przypadku towaru archiwalnego. Powinno to wyglądać w ten sposób: {% if tableView and product.Archival == false -%} {{ translations.ChooseProductVariant }} {% endif -%} {% if activeProduct.Availability.Text != '' and product.Archival == false -%}
{{ translations.Availability }}: {{ activeProduct.Availability.Text }}
{% endif -%} W podobny sposób należy ukryć całą resztę dotyczącą różnych danych o towarze. Aby to zrobić należy wyszukać taki warunek {% if activeProduct.StockLevel.Control and tableView == false -%} i linijkę wyżej dopisać {% if product.Archival == false -%}. Natomiast zamknięcie tego warunku trzeba będzie dopisać dużo dalej. Aby znaleźć odpowiednie miejsce należy wyszukać taką frazę CheaperInSet. Jest to etykieta przycisku przewijającego do sekcji z zestawami (o ile takowe istnieją dla danego towaru). Pod tym przyciskiem znajduje się {% endif -%}, który zamyka warunek sprawdzający właśnie istnienie owych zestawów. Pod nim trzeba dopisać jeszcze jedno {% endif -%}, aby zamknąć warunek, który dodaliśmy wyżej. Ostatecznie powinno to wyglądać tak: {% if product.Archival == false -%} {% if activeProduct.StockLevel.Control and tableView == false -%} . . . {% if product.Sets != null and product.Sets != empty -%}
{{ translations.CheaperInSet }}
{% endif -%} {% endif -%} . . . Na końcu pliku scss/globals/_globals2.scss wklej taki kod: .archival-product-info-ui{ position: absolute; top: -40px; right: 0; text-transform: uppercase; color: $primaryColor; font-style: italic; } A na końcu pliku scss/globals/_globals-m.scss wklej taki kod: .archival-product-info-ui{ right: 20px; }
Wskazówka
Zwróć uwagę, aby ten styl znajdował się wewnątrz głównej klamry, która otwiera się w pierwszej linijce pliku i zamyka w ostatniej

Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat
W pliku product-page.html wyszukaj frazę button-container. Jest to klasa kontenera, w którym znajdują się najważniejsze dane związane z towarem. Pod tym kontenerem wklej taki kod: {% if product.Archival -%}
{{translations.ArchivalProductInfo}}
{% endif -%} Pozostając w tym samym pliku (product-page.html) wyszukaj frazę config.Reviews.Enabled. Jest to część warunku, odpowiedzialnego za dodawanie opinii o produkcie. Zmodyfikuj go tak, aby wyglądał następująco: {% if product.Archival -%} {% if config.Reviews.Enabled == true and productD.Archival == false -%} {% endif -%} W pliku partials/product/product-popup.html wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak: {% if usr.Authenticated and product.Archival == false -%} W tym samym pliku (partials/product/product-popup.html) wyszukaj frazę add-to-cart-popup. Jest to klasa kontenera, który trzeba zmodyfikować, aby wyglądał tak:
Dalej w tym samym pliku (partials/product/product-popup.html) wyszukaj frazę AddToCartForm. Jest to ID formularza odpowiedzialnego za dodawanie towaru do koszyka. Linijkę wyżej otwórz taki warunek: {% if product.Archival == false -%} Będzie on obejmował resztę kodu znajdującego się w tym pliku. Na końcu znajdziesz kontener z klasą ask-for-price-popup. Pod tym kontenerem zamknij wcześniej otworzony warunek dopisując linijkę niżej {% endif -%}. Na końcu pliku scss/main2.scss wklej taki kod: .archival{ padding-bottom: 20px; } .archival-info{ background: $pageNameColor; color: $primaryColor; padding: 20px; margin-bottom: 20px; text-transform: uppercase; @media only screen and (min-width: 481px) { box-shadow: 2px 2px 1px 0 $bgColorFont; } }
Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn
W pliku productdetails.html wyszukaj frazę itemprop="offers". Jest to jeden z atrybutów kontenera, na którego początku trzeba wkleić taki kod: {% if _pd.Archival -%}
{{ translations.ArchivalProductInfo }}
{% endif %} W tym samym pliku (productdetails.html) wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak: {% if usr.Authenticated and _pd.Archival == false -%} Dalej w tym samym pliku (productdetails.html) wyszukaj frazę class="availability". Linijkę wyżej nad elementem, który ma taką klasę dopisz {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć trochę niżej. Aby znaleźć to miejsce wyszukaj frazę {% if customer.HidePrices %}. Jest to warunek przed, którym trzeba zakończyć ten nasz nowy, który właśnie dodaliśmy. Aby tego dokonać należy linijkę wyżej dopisać {% endif %}. Kolejną frazą w tym pliku (productdetails.html), którą trzeba wyszukać jest add-to-cart. Jest to klasa przycisku dodawania towaru do koszyka. Będą dwa wystąpienia. Interesuje nas tylko pierwsze, które dotyczy danego towaru. Drugie wystąpienie dotyczy zestawów i znajduje się w warunku {% if set.Price <> null %}. To nas nie interesuje więc zostańmy przy tym pierwszym. Linijkę wyżej dopisz {% if _pd.Archival == false %}. Pod tym przyciskiem znajdują się jeszcze dwa przyciski (powiadamiania o dostępności i pytania o cenę). Pod tym drugim należy zamknąć warunek dopisując linijkę niżej {% endif %}. Będąc przy tych przyciskach możemy zauważyć element nav z klasą options. Linijkę wyżej wklej {% if _pd.Archival == false %}, a zaraz za końcem tego elementu dopisz linijkę niżej {% endif %}. Ostatni warunek w tym pliku (productdetails.html), który trzeba zmienić znajdziesz wyszukując frazę productuserreviews.TotalItems. Trzeba ją podmienić, aby wyglądała tak: {% unless productuserreviews.TotalItems == 0 and _pd.Archival %} Plik productdetails/opinions-partial.html należy zmodyfikować tak, żeby wyglądał w ten sposób: {% if productuserreviews.TotalItems == 0 %} {% if _pd.Archival == false -%} . . . {% endif -%} {% else %} {% for o in productuserreviews.Reviews %} . . . {% endfor %} {% if _pd.Archival == false -%} {% endif -%} {% endif%} Na końcu pliku scss/main2.scss wklej: .archival-product-info{ padding: 15px 20px; border-radius: 5px 0 0 5px; box-shadow: rgba(0,0,0,.2) -2px 2px 10px; background: #F5F5F5; position: relative; right: -20px; left: -20px; width: calc(100% + 40px); margin: 10px 0 30px; font-style: italic; }
Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Opal
W pliku productdetails.html wyszukaj frazę details-section. Jest to klasa kontenera, nad którym trzeba wkleić linijkę wyżej taki kod: {% if _pd.Archival -%}
{{ translations.ArchivalProductInfo }}
{% endif %} Następnie wyszukaj frazę usr.Authenticated. W tym pliku będą dwa wystąpienia takiej frazy. W obu to część warunku. W obu przypadkach zmodyfikuj te warunki, aby wyglądały tak: {% if usr.Authenticated and _pd.Archival == false -%} Kolejna fraza to class="stock". Będzie to klasa elementu, który trzeba "ubrać" w warunek {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć linijkę pod elementem poprzez dopisanie {% endif %}. Teraz wyszukaj frazę class="attributes". Linijkę wyżej nad elementem, który ma taką klasę dopisz {% if _pd.Archival == false %}. Będzie to początek warunku, który trzeba zakończyć trochę niżej. Aby znaleźć to miejsce wyszukaj frazę {% if customer.HidePrices %}. Jest to warunek przed, którym trzeba zakończyć ten nasz nowy, który właśnie dodaliśmy. Aby tego dokonać należy linijkę wyżej dopisać {% endif %}. Następna fraza to add-to-cart. Jest to klasa przycisku dodawania towaru do koszyka. Będą dwa wystąpienia. Interesuje nas tylko pierwsze, które dotyczy danego towaru. Drugie wystąpienie dotyczy zestawów i znajduje się w warunku {% if set.Price <> null %}. To nas nie interesuje więc zostańmy przy tym pierwszym. Linijkę wyżej dopisz {% if _pd.Archival == false %}. Pod tym przyciskiem znajdują się jeszcze dwa przyciski (powiadamiania o dostępności i pytania o cenę). Pod tym drugim należy zamknąć warunek dopisując linijkę niżej {% endif %}. Będąc przy tych przyciskach możemy zauważyć element nav z klasą options. Linijkę wyżej wklej {% if _pd.Archival == false %}, a zaraz za końcem tego elementu dopisz linijkę niżej {% endif %}. Na końcu pliku scss/main2.scss wklej: .archival-product-info{ background: #f7f7f7; color: $placeholderColorFont; padding: 20px; margin-top: 20px; text-align: center; }
Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Topaz
Wzależności od wybranego wariantu szczegółów towaru zmiany będą inne. Wersja z miniaturkami zdjęć po lewej W pliku elements/product/product-details-1.html wyszukaj frazę product-details__images. Zastąp kontener z tą klasą poniższym kodem:

{% for flag in product.Flags -%} {{ flag.Text }} {% endfor %}
{% if product.Images[1] -%}

{% for image in product.Images -%}
{% if image.Id != -1 -%} {{image | Img: 'compact'}} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% endif -%}

{% endfor -%}
{% for image in product.Images -%}
{% if image.Id != -1 -%} {{image | Img: 'grande'}} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% endif -%} {% if product.Archival -%}
{{translations.ArchivalProduct}}
{% endif -%}
{% endfor -%}
{% elseif product.Images[0] -%}

{{product.Images[0] | Img: 'grande'}} {% if product.Archival -%}
{{translations.ArchivalProduct}}
{% endif -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% if product.Archival -%}
{{translations.ArchivalProduct}}
{% endif -%}

{% endif -%} {% if product.Images[0] -%} {% endif -%} {% if product.Archival == false -%}
{% if product.DeliveryCost != null and product.DeliveryCost > 0 -%}
{{ translations.Crt_Delivery }}: {{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}
| {% endif -%} {% if stockLevel.Control -%}
{{ translations.Com_StockLvl }}: {% unless stockLevel.Type == 2 or stockLevel.Type == 4 or stockLevel.Text == null -%} {{ stockLevel.Text }} {% endunless -%} {% if stockLevel.Type == 4 -%} {{ stockLevel.Value | Normalize }} {{ product.SaleUnit }} {% endif -%} {% if stockLevel.Type == 1 or stockLevel.Type == 2 -%} {% unless stockLevel.ImageUrl == null -%} {{stockLevel.ImageUrl | Img: '', stockLevel.Text}} {% endunless -%} {% endif -%}
| {% endif -%}
{{ translations.Com_Availability }}: {% unless product.Availability.Text == '' or product.Availability.Type == 2 -%} {{ product.Availability.Text }} {% endunless -%} {% if product.Availability.Type == 1 or product.Availability.Type == 2 -%} {{product.Availability.ImageUrl | Img: '', product.Availability.Text}} {% endif -%} {% unless product.Availability.Date == null -%} ({{ product.Availability.Date | Date:'d' }}) {% endunless -%}

{% endif -%}
Następnie wyszukaj frazę product-details__add-to-cart. Na początku kontenera z tą klasą wklej poniższy kod: {% if product.Archival -%}
{{translations.ArchivalProductInfo}}
{% endif -%} Kawałek niżej znajdziesz kontener z klasą product-details__reviewsContainer. Podmień go poniższym kodem: {% unless product.Archival and product.RatingCount == 0 -%}
{% include 'partials/common/product-rating.html', rating: product.Rating -%} ({{ product.RatingCount }})
{% endunless -%} Teraz wyszukiaj basic-unit-ratio. Podmień wszystko co jest pod tą linijką, aż do linijki, w której znajduje się kontener z klasą product-details__info-container (tej linijki nie podmieniaj) poniższym kodem: {% if product.Archival == false -%} {% if product.Clip or product.Batch -%}
{% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%}
{% elseif product.AttributesPolyvalent != empty -%} {% for attribute in product.AttributesPolyvalent -%}
{{ attribute.Name }}
{% for value in attribute.Values -%} {{ value.Value | H }} {% endfor -%}

{% endfor -%} {% endif -%} {% if product.Batch == null or product.Batch == false -%} {% if product.AttributesEditable != empty -%} {% assign i = 0 -%} {% for attribute in product.AttributesEditable -%}
{% assign i = i | Plus: 1 -%} {% endfor -%} {{ i }} {% endif -%} {% endif -%} {% if product.Units[1] -%}
{{ translations.Com_MeasureUnit }} {% for unit in product.Units -%} {% endfor -%}
{% endif -%} {% endif -%} Następnie znajdź kontener z klasą product-details__other-options i podmień go (wraz z jego zawartością) poniższym kodem: <codeclass="lang:ruby decode:true"> {% if product.Archival == false -%}

{{ translations.Com_RecommendProduct }}

{{ translations.Com_AskAboutProduct }}

{{ translations.Com_AskForPrice }}

{% endif -%} Teraz znajdź kontener z klasą product-details__prices. Na samym początku w tym kontenerze będzie warunek {% if customer.Authenticated == true -%}. Zmień go na {% if customer.Authenticated == true and product.Archival == false -%}. Następnie znajdź kontener z klasą product-details__button-group i podmień go (wraz z jego zawartością) na poniższy kod: {% if product.Archival == false -%}
{% if product.AskForPrice == false or customer.HidePrices == false -%} {% unless product.Availability.Status == 3 or noProductInStock == true -%}
{% if stockLevel -%} {% assign stockValue = stockLevel.Value | ToString | Split: "," -%} {% endif -%} {% if stockLevel and stockLevel.Control -%} {% assign stockValue = stockLevel.Value | ToString | Split: ',' -%} {% endif -%}
{% endunless -%} {% endif -%} {% if customer.HidePrices == true -%} {{ translations.Com_LogInToSeePrice }} {% else -%} {{ translations.Com_NotifyMeAboutAvailability }} {{ translations.BuyNow }} {% endif -%}
{% else -%} {{translations.ArchivalProductCheckInfo}} {% endif -%} Teraz w pliku css/layout.css dodaj poniższy kod: .product-details .product-details__image__archival{position:absolute;bottom:0;left:0;right:0;padding:20px;font-size:18px;background:rgba(204,204,204,0.9);color:#fff;text-align:center}.product-details .product-details__archivalProductInfo{background:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};padding:30px;margin-bottom:30px;text-align:center}.product-details .parent-category-link{color:{{settings.linkFontColor}};margin-top:50px;display:inline-block}.product-details .parent-category-link svg{fill:{{settings.linkFontColor}};height:19px;width:19px;vertical-align:middle} Wersja z miniaturkami zdjęć pod głównym zdjęciem W pliku elements/product/product-details-2.html wyszukaj frazę product-details__images. Zastąp kontener z tą klasą poniższym kodem:

{% for flag in product.Flags -%} {{ flag.Text }} {% endfor %}
{% if product.Images[1] -%}
{% for image in product.Images -%}
{% if image.Id != -1 -%} {{image | Img: 'grande'}} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% endif -%} {% if product.Archival -%}
{{translations.ArchivalProduct}}
{% endif -%}
{% endfor -%}

{% for image in product.Images -%}
{% if image.Id != -1 -%} {{image | Img: 'compact'}} {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% endif -%}

{% endfor -%} {% elseif product.Images[0] -%}

{{product.Images[0] | Img: 'grande'}} {% if product.Archival -%}
{{translations.ArchivalProduct}}
{% endif -%}

{% else -%}

{{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} {% if product.Archival -%}
{{translations.ArchivalProduct}}
{% endif -%}

{% endif -%} {% if product.Archival == false -%}

{{ translations.Com_RecommendProduct }}

{{ translations.Com_AskAboutProduct }}

{{ translations.Com_AskForPrice }}

{% endif -%} {% if product.Images[0] -%} {% endif -%}
Następnie wyszukaj frazę product-details__add-to-cart. Na początku kontenera z tą klasą wklej poniższy kod: {% if product.Archival -%}
{{translations.ArchivalProductInfo}}
{% endif -%} Teraz wyszukiaj {% if product.Clip or product.Batch -%}. Podmień wszystko co jest pod tą linijką (łącznie z nią), aż do linijki {% include 'partials/common/after-adding-to-cart-popup.html' %} (jej nie podmieniaj) poniższym kodem: {% if product.Archival == false -%} {% if product.Clip or product.Batch -%}
{% for attribute in product.Supplies.AttributeNames -%} {{ attribute.Name | H }}
{% endfor -%}
{% elseif product.AttributesPolyvalent != empty -%} {% for attribute in product.AttributesPolyvalent -%}
{{ attribute.Name }}
{% for value in attribute.Values -%} {{ value.Value | H }} {% endfor -%}

{% endfor -%} {% endif -%} {% if product.Batch == null or product.Batch == false -%} {% if product.AttributesEditable != empty -%} {% assign i = 0 -%} {% for attribute in product.AttributesEditable -%}
{% assign i = i | Plus: 1 -%} {% endfor -%} {{ i }} {% endif -%} {% endif -%} {% endif -%} {% if product.Units[1] -%}
{{ translations.Com_MeasureUnit }} {% for unit in product.Units -%} {% endfor -%}
{% endif -%} {% if product.Archival == false -%}
{% if stockLevel.Control -%}
{{ translations.Com_StockLvl }}: {% unless stockLevel.Type == 2 or stockLevel.Type == 4 or stockLevel.Text == null -%} {{ stockLevel.Text }} {% endunless -%} {% if stockLevel.Type == 4 -%} {{ stockLevel.Value | Normalize }} {{ product.SaleUnit }} {% endif -%} {% if stockLevel.Type == 1 or stockLevel.Type == 2 -%} {% unless stockLevel.ImageUrl == null -%} {{stockLevel.ImageUrl | Img: '', stockLevel.Text}} {% endunless -%} {% endif -%}
{% endif -%}
{{ translations.Com_Availability }} {% unless product.Availability.Text == '' or product.Availability.Type == 2 -%} {{ product.Availability.Text }}: {% endunless -%} {% if product.Availability.Type == 1 or product.Availability.Type == 2 -%} {{product.Availability.ImageUrl | Img: '', product.Availability.Text}} {% endif -%} {% unless product.Availability.Date == null -%} ({{ product.Availability.Date | Date:'d' }}) {% endunless -%}
{% if product.DeliveryCost != null and product.DeliveryCost > 0 -%}
{{ translations.Crt_Delivery }} {{ translations.Sea_From | Downcase }} {{ product.DeliveryCost | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}
{% endif -%}

{% if product.AskForPrice == false or customer.HidePrices == false -%} {% unless product.Availability.Status == 3 or noProductInStock == true -%}
{% if stockLevel -%} {% assign stockValue = stockLevel.Value | ToString | Split: "," -%} {% endif -%} {% if stockLevel and stockLevel.Control -%} {% assign stockValue = stockLevel.Value | ToString | Split: ',' -%} {% endif -%}
{% endunless -%} {% endif -%}
{% if customer.HidePrices == true -%} {{ translations.Com_LogInToSeePrice }} {% else -%} {{ translations.Com_NotifyMeAboutAvailability }} {{ translations.BuyNow }} {% endif -%} {% if customer.Authenticated == true -%} {% endif -%}

{% else -%} {{translations.ArchivalProductCheckInfo}} {% endif -%} Teraz w pliku css/layout.css dodaj poniższy kod: .product-details .product-details__image__archival{position:absolute;bottom:0;left:0;right:0;padding:20px;font-size:18px;background:rgba(204,204,204,0.9);color:#fff;text-align:center}.product-details .product-details__archivalProductInfo{background:{{settings.$breadcrumbsBgColor}};color:{{settings.breadcrumbsFontColor}};padding:30px;margin-bottom:30px;text-align:center}.product-details .parent-category-link{color:{{settings.linkFontColor}};margin-top:50px;display:inline-block}.product-details .parent-category-link svg{fill:{{settings.linkFontColor}};height:19px;width:19px;vertical-align:middle}
Dodawanie kanałów do płatności online w szablonach
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Dodawanie kanałów do płatności online
Kanały w płatnościach online to inaczej sposób zapłaty. W tym artykule dowiesz się, jak je dodać w swoim szablonie.
1. Bursztyn i Opal
W pliku order/cart.html dodaj poniższy kod: {% for delivery in cart.DeliveryMethods %} {% for payment in delivery.Payments %} {% if payment.Channels[0] and payment.Id == cart.SelectedDeliveryPaymentId %}
{% for channel in payment.Channels -%} {% endfor -%}
{% endif %} {% endfor %} {% endfor %} Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/main2.scss dodaj poniższe style: .payment-channels{ background-color: $middleColor; display: flex; flex-wrap: wrap; margin-top: 11px; } .payment-channel{ display: inline-block; width: calc(100%/6 - 30px); min-width: 100px; height: 50px; margin: 15px; position: relative; [type=radio]{ position: absolute; opacity: 0; width: 0; height: 0; & + img{ cursor: pointer; max-width: 100px; max-height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } &:checked + img{ outline: 1px solid $primaryColor; } } }
Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.
Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/order.js należy wkleić poniższy kod: $('body').on('change', '.payment-channels [name=channel]', function (e) { e.preventDefault(); var id = $('.payment-channels').data('id'); var channel = $(e.currentTarget).val(); $.post(null, { __csrf: __CSRF, __action: 'Order/DeliveryChange', id: id, channel: channel }); });
Wskazówka
O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.
Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/order.js odnajdź funkcję oznaczoną komentarzem //next i dodaj w niej (w pierwszym warunku if ($(this).hasClass('start'))) w zależności od szablonu: Bursztyn: if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){ var tt = $('
'); tt.append('
'+$('.payment-channels').data('validation')+'
'); $('body').append(tt); setTimeout(function(){tt.fadeOut(function(){tt.remove();});},3000); return tt; } Opal: if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){ var tt; if (sessionStorage.getItem('tooltip') != null){ tt = $(".tt.err"); } else { tt = $('
'); tt.append(''+$('.payment-channels').data('validation')+''); $('body').append(tt); sessionStorage.setItem('tooltip', 'err'); } showTooltip(); return; } Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentChannel i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).
2. Agat:
W pliku partials/cart/cart-content.html dodaj poniższy kod: {% for deliveryMethodLvl in cart.DeliveryMethods -%} {% if deliveryMethodLvl.Name == cart.SelectedDelivery.Name %} {% for payment in deliveryMethodLvl.Payments -%} {% if payment.Channels[0] and payment.Id == cart.SelectedDeliveryPaymentId %}
{% for channel in payment.Channels -%} {% endfor -%}
{% endif %} {% endfor -%} {% endif %} {% endfor -%} Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/main2.scss dodaj poniższe style: .payment-channels{ background-color: $bgColor; border: 1px solid $lighterColor; box-shadow: 2px 2px 1px 0 $bgColorFont; margin: 0 auto 20px; display: inline-flex; flex-wrap: wrap; width: calc(100% - 2px); @media only screen and (min-width: 481px) { width: calc(50% - 22px); min-width: 298px; margin: 0 10px 20px } @media only screen and (min-width: 769px) { width: calc(100% - 22px); } @media only screen and (min-width: 1441px) { width: calc(75% - 22px); } } .payment-channel{ display: inline-block; width: calc(100%/6 - 30px); min-width: 100px; height: 50px; margin: 15px; position: relative; [type=radio]{ position: absolute; opacity: 0; width: 0; height: 0; & + img{ cursor: pointer; max-width: 100px; max-height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } &:checked + img{ outline: 1px solid $primaryColor; } } }
Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.
Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/order.js należy wkleić poniższy kod: $('body').on('change', '.payment-channels [name=channel]', function (e) { e.preventDefault(); var id = $('.payment-channels ').data('id'); var channel = $(e.currentTarget).val(); $.post(null, { __csrf: __CSRF, __action: 'Order/DeliveryChange', id: id, channel: channel }); });
Wskazówka
O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.
Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/order.js odnajdź funkcję orderNextStep i dodaj w niej (na początku else'a warunku if ($('#delivery-address-data').index() >= 0)) kolejny warunek do sprawdzenia: if($('.payment-channels').index() != -1 && $('.payment-channels [name=channel]:checked').index() == -1){ application.createMessage($('.payment-channels').data('validation'), 3000); return; } Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentChannel i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).
3. Szafir
W pliku order/delivery-partials/delivery-section.html dodaj poniższy kod: {% for indexString in matchedDeliveriesIndexesArray -%} {% assign index = indexString | ToInt -%} {% if order.SelectedDelivery.Name == order.DeliveryMethods[index].Name -%} {% for payment in order.DeliveryMethods[index].Payments -%} {% if payment.Id == order.SelectedDelivery.Payment.Id and payment.Channels[0] -%}
{% for channel in payment.Channels -%} {% endfor -%}
{% endif -%} {% endfor -%} {% endif -%} {% endfor -%} Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/globals/_globals2.scss dodaj poniższe style: .order-ui .payment-channels-ui{ padding: 0; margin: 0 30px 15px 0; width: calc(100% - 30px); display: flex; flex-wrap: wrap; .message-bar-ui{ width: 100%; margin: 0; } } .payment-channel-ui:not(.checkbox-ui):not(.radio-ui){ width: calc(100%/6 - 30px); min-width: 100px; height: 50px; margin: 15px; position: relative; [type=radio]{ position: absolute; opacity: 0; width: 0; height: 0; & + img{ cursor: pointer; max-width: 100px; max-height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } &:checked + img{ outline: 1px solid $primaryColor; } } } oraz w pliku scss/globals/_globals-m.scss: .order-ui .payment-channels-ui { margin-right: 0; width: 100%; }
Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.
Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/init-ui2.js należy wkleić poniższy kod: function choosePaymentChannel(e) { var form = $('.delivery-form-lq'); var data = form.serializeArray(); data.push({ name: '__csrf', value: __CSRF }); data.push({ name: 'channel', value: $(e.currentTarget).val() }); $.post('', data); $('.payment-channels-lq .form-error-lq').remove(); }; $('body').on('change', '.payment-channel-lq [name=channel]', function (e) { choosePaymentChannel(e); });
Wskazówka
O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.
Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/init-ui1.js odnajdź funkcję addOrder i dodaj w niej (zaraz pod pierwszym warunkiem if (ajaxModalSelector && this.hiddingClass)) kolejny warunek do sprawdzenia: if ($('.payment-channels-lq').index() != -1 && $('.payment-channel-lq [name=channel]:checked').index() == -1) { $('.payment-channels-lq').append('
' + __translations.ChoosePaymentMethod + '
'); guardian = false; } Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w pliku _layout.html odnajdź skrypt ze zmienną __translations i dopisz w nim kolejną linijkę: ChoosePaymentMethod: '{{ translations.ChoosePaymentMethod | H }}'. Następnie w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentMethod i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).
Jak dostosować szablony do integracji z Google Tag Manager?
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Spis treści

1. Wstęp

2. Implementacja skryptów

3. Przydatne linki

1. Wstęp
W związku ze zmianami w Comarch e-Sklep od wersji 2018.6, które poszerzają zakres integracji z Google Tag Manager, szablony w wersji starszej będą wymagały wprowadzenia zmian, które pozwolą na wykorzystanie w pełni funkcjonalności opisanych w artykule Integracja z Google Tag Manager.
Uwaga
Poniższa konfiguracja przeznaczona jest dla użytkowników posiadających e-Sklep w wersji 2018.6 lub wyższej ale z szablonami w starszej wersji. Pliki szablonu, fragmenty ich kodu oraz modyfikacje przedstawione w instrukcji dotyczą darmowych szablonów Comarch. W przypadku szablonów indywidualnych miejsce wklejenia skryptów niezbędnych do dostosowania szablonu powinien wskazać twórca szablonu

2. Implementacja skryptów
Jeżeli przed wersją 2018.6 integracja była już konfigurowana to konieczne będzie usunięcie starego skryptu dodanego do ostatniej strony zamówienia. W tym celu w panelu administracyjnym sklepu przejdź do obszaru Wygląd sklepu / Ustawienia / Edytuj ustawienia zaawansowane / Edytuj HTML i usuń z pliku lastpagescripts.html poniższy skrypt: <script> dataLayer.push({{ page.GTMDataLayer }}); dataLayer.push({event:'UaTrack',VirtualPath:null}); </script> W zależności od szablonu plik lastpagescripts.html będzie zlokalizowany w innym miejscu w strukturze plików:

Szablon Bursztyn, Opal i Szafir - order / lastpagescripts.html

Szablon Agat - partials / cart / lastpagescripts.html

Następnym krokiem będzie implementacja dwóch nowych skryptów. W pliku _layout.html znajdującym się bezpośrednio w obszarze Edytuj HTML zamień istniejący skrypt znajdujący się na początku sekcji <body> <script>var dataLayer=[{{ page.GTMDataLayer }}];</script> na nowy: <script>var dataLayer={{ page.GtmDL }};</script> Kolejny skrypt należy umieścić w pliku odpowiedzialnym za koszyk <script> (function(){ var i,dl={{ page.GtmDL }}; for(i in dl) dataLayer.push(dl[i]); })(); </script> W zależności od szablonu będzie to inny plik - nazwa i lokalizacja pliku oraz miejsce wklejenia powyższego skryptu wskazane poniżej:

Szablon Bursztyn, Opal - order-cart-container.html

Szablon Agat - partials / cart / cart-template.html

Szablon Szafir - order / cart.html

oraz w pliku order / thx.html
Wskazówka
Pamiętaj o zapisaniu i publikacji wszystkich zmian wykonanych w szablonie. Po przygotowaniu szablonu zgodnie z powyższymi instrukcjami możesz przejść do konfiguracji integracji Twojego sklepu z Google Tag Manager opisanej w artykule Integracja z Google Tag Manager.

3. Przydatne linki
Google Tag Manager: Pomoc Strona serwisu Dokumentacja programistyczna Google Analytics: Strona serwisu Dokumentacja programistyczna
Obsługa kanałów do zgody na newsletter w darmowych szablonach graficznych Comarch e-Sklep
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.
Listę zgód wyświetlanych w newsletterze możemy znaleźć w tablicy przechowywanej w obiekcie config.TOS.Consents.Newsletter. Poniższa pętla pozwoli nam wyświetlić wszystkie zgody znajdujące się w obiekcie Newsletter:
{% for tos in config.TOS.Consents.Newsletter -%}
<label class="statement tos-name">{{tos.Text}}</label> {% endif -%} Jeżeli interesuje nas pokazanie wszystkich kanałów znajdujących się w danej zgodzie to warto najpierw przypisać ich ilość do konkretnej zmiennej liquidowej. W każdej pojedynczej zgodzie kanały możemy znaleźć w obiekcie Channels.
{% assign channelsSize = tos.Channels | Size -%} Teraz wystarczy tylko napisać prostą pętle „for” Poniżej przykład wykorzystujący listę.

{% if channelsSize > 0 -%} <ul class="channels disabled"> {% for chn in tos.Channels -%} <li class="channel"> <input id="channel{{ chn.Key }}" type="checkbox" name="channelKey" value="{{ chn.Key }}" disabled/> <div class="channel-switch input-switch "><div class="switch-button"></div></div> <label for="channel{{ chn.Key }}">{{chn.Name}}</label> </li> {% endfor -%} </ul> {% endif -%}

Spis treści

Szablon Agat

Szablon Opal

Szablon Bursztyn

Szablon Agat
1.Zmień pętlę for wyświetlającą checkboxy ze zgodami w pliku 'footer.html', który znajduje się w folderze 'partials/common' {% for tos in config.TOS.Consents.Newsletter -%} <div class="input-group switches"> <label class="switch"> <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span> <input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%}/> <span class="switch-label"></span> <span class="switch-handle"></span> </label> </div> {% endfor -%} {% for tos in config.TOS.Consents.Newsletter -%} {% assign channelsSize = tos.Channels | Size -%} <li class="{% if channelsSize > 0 -%}multiple-choice {% endif -%} {% if tos.Required -%} required-consent{% endif -%}"> <div class="input-group switches"> {% if tos.Statement %} <p class="multiple-switch">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</p> {% else %} <span class="main-consent-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.MainConsentWarning}}</span> <label class="switch"> <span class="switch-name summary-tos-switch-name">{% if tos.Required -%}* {% endif -%}{{ tos.Text }}</span> <input class="switch-input" type="checkbox" name="tos" value="{{ tos.Id }}" {% if tos.Required -%} data-required="req" {% endif -%}/> <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endif -%} {% if channelsSize > 0 -%} <span class="channel-warning tos-warning"><span class="fa fa-exclamation-triangle"></span>{{translations.ChannelWarning}}</span> {% for chn in tos.Channels -%} <label class="switch channel-switch {% if tos.Statement == false %} unactive-switch{% endif -%}"> <span class="switch-name">{{chn.Name}}</span> <input class="switch-input channel-checkbox" type="checkbox" name="channelKey" value="{{ chn.Key }}" {% if tos.Required -%} data-required="req" {% endif -%} {% if tos.Statement == false %} disabled{% endif -%}/> <span class="switch-label"></span> <span class="switch-handle"></span> </label> {% endfor -%} {% endif -%} </div> </li> {% endfor -%} 2.W pliku 'init.js' uzupełnij funkcję uiValidateForm o walidację pól kanałów. Plik znajduje się w folderze 'js'. uiValidateForm: function (form) { var formRequiredInputs = form.find('input[required], textarea[required]'); var tosInputs = form.find('input[type="checkbox"]'); var formInvalidInfo = form.data('invalid'); var emailInvalidInfo = form.data('email-invalid'); var postCodeInvalidInfo = form.data('pcode-invalid'); var tinInvalidInfo = form.data('tin-invalid'); var tosRequiredInfo = form.data('tos-invalid'); var warningTosInfos = form.find('.tos-warning'); var tosRequiredValid = true; var tinInputValid = true; var emailInputValid = true; var postCodeInputValid = true; var isEmpty = false; var checkedChannels = []; var channelsInputs; $.each(formRequiredInputs, function (key, value) { $(value).addClass('validationStyles'); if ($(value).val() == '') { isEmpty = true; } if ($(value).attr('name') === 'email') { emailInputValid = application.uiValidateEmail($(value).val()); } if ($(value).attr('name') === 'zipCode') { postCodeInputValid = application.uiValidatePostCode($(value).val(), $(value).attr('pattern')); } if ($(value).attr('name') === 'tin') { tinInputValid = application.uiValidateTinCode($(value).val(), $(value).attr('pattern')); } }); $.each(tosInputs, function (key, value) { if ($(value).data('required') === 'req') { if (!$(value).prop('checked')) { $(value).closest('label').addClass('required-checkbox-warning'); } if ($(value).hasClass('channel-checkbox')) { channelsInputs = $(value).closest('.input-group').find('.channel-checkbox'); $.each(channelsInputs, function (key, value) { if ($(value).prop('checked')) { checkedChannels.push($(value)); } }); if (checkedChannels.length > 0) { tosRequiredValid = true } else { tosRequiredValid = false } if (warningTosInfos.length > 0) { $.each(warningTosInfos, function (key, value) { if ($(value).is(":visible")) { tosRequiredValid = false; } }); } } else if (!$(value).prop('checked')) { tosRequiredValid = false; } } }); if (tosRequiredValid && tinInputValid && postCodeInputValid && emailInputValid && !isEmpty) { return true; } else if (!emailInputValid) { application.createMessage(emailInvalidInfo); } else if (!postCodeInputValid) { application.createMessage(postCodeInvalidInfo); } else if (!tinInputValid) { application.createMessage(tinInvalidInfo); } else if (!tosRequiredValid) { application.createMessage(tosRequiredInfo); } else { application.createMessage(formInvalidInfo); } }, uiValidateForm: function (form) { var formRequiredInputs = form.find('input[required], textarea[required]'); var tosInputs = form.find('input[type="checkbox"]'); var formInvalidInfo = form.data('invalid'); var emailInvalidInfo = form.data('email-invalid'); var postCodeInvalidInfo = form.data('pcode-invalid'); var tinInvalidInfo = form.data('tin-invalid'); var tosRequiredInfo = form.data('tos-invalid'); var warningTosInfos = form.find('.tos-warning'); var tosRequiredValid = true; var tinInputValid = true; var emailInputValid = true; var postCodeInputValid = true; var isEmpty = false; var checkedChannels = []; var channelsInputs; $.each(formRequiredInputs, function (key, value) { $(value).addClass('validationStyles'); if ($(value).val() == '') { isEmpty = true; } if ($(value).attr('name') === 'email') { emailInputValid = application.uiValidateEmail($(value).val()); } if ($(value).attr('name') === 'zipCode') { postCodeInputValid = application.uiValidatePostCode($(value).val(), $(value).attr('pattern')); } if ($(value).attr('name') === 'tin') { tinInputValid = application.uiValidateTinCode($(value).val(), $(value).attr('pattern')); } }); $.each(tosInputs, function (key, value) { if ($(value).data('required') === 'req') { if (!$(value).prop('checked')) { $(value).closest('label').addClass('required-checkbox-warning'); } if ($(value).hasClass('channel-checkbox')) { channelsInputs = $(value).closest('.input-group').find('.channel-checkbox'); $.each(channelsInputs, function (key, value) { if ($(value).prop('checked')) { checkedChannels.push($(value)); } }); if (checkedChannels.length > 0) { tosRequiredValid = true } else { tosRequiredValid = false } if (warningTosInfos.length > 0) { $.each(warningTosInfos, function (key, value) { if ($(value).is(":visible")) { tosRequiredValid = false; } }); } } else if (!$(value).prop('checked')) { tosRequiredValid = false; } } }); if (tosRequiredValid && tinInputValid && postCodeInputValid && emailInputValid && !isEmpty) { return true; } else if (!emailInputValid) { application.createMessage(emailInvalidInfo); } else if (!postCodeInputValid) { application.createMessage(postCodeInvalidInfo); } else if (!tinInputValid) { application.createMessage(tinInvalidInfo); } else if (!tosRequiredValid) { application.createMessage(tosRequiredInfo); } else { application.createMessage(formInvalidInfo); } }, 3.Aby walidacja działała poprawnie, dodaj dodatkowe funkcje w pliku 'init.js', w obiekcie application (uicheckIfParentChecked, uicheckIfTosChannelChecked) uicheckIfParentChecked: function(e) { var parentBox = $(e.currentTarget).closest('.multiple-choice'); var elementParentTos = parentBox.find('input[name=tos]'); var consentWarning = parentBox.find('.main-consent-warning'); var channelWarning = parentBox.find('.channel-warning'); var tosChannels = parentBox.find('.channel-checkbox'); var checkedChannels = []; var elementParentTosChecked, parentTosName; if (elementParentTos.length > 0) { elementParentTosChecked = $(elementParentTos[0]).prop('checked'); parentTosName = parentBox.find('.input-group > label .switch-name'); consentWarning = $(elementParentTos[0]).closest('.input-group').find('.main-consent-warning'); if (!elementParentTosChecked) { $(parentTosName[0]).css({ 'color': '#ff3a3a', 'transition': '200ms' }); $(consentWarning[0]).show(); } if (!$(e.currentTarget).prop('checked') || elementParentTosChecked) { $(parentTosName[0]).css({ 'color': '', 'transition': '200ms' }); $(consentWarning[0]).hide(); } if (!$(e.currentTarget).prop('checked') && !elementParentTosChecked) { $(parentTosName[0]).css({ 'color': '', 'transition': '200ms' }); $(consentWarning[0]).hide(); $(e.currentTarget).prop('disabled', true); $(e.currentTarget).closest('.channel-switch').addClass('unactive-switch'); } if ($(e.currentTarget).prop('checked')) { $(channelWarning[0]).hide(); } else { $.each(tosChannels, function (key, value) { if ($(value).prop('checked')) { checkedChannels.push($(value)); } }); if (checkedChannels.length === 0 && elementParentTosChecked) { $(channelWarning[0]).show(); } } } }, uicheckIfTosChannelChecked: function (e) { var parentBox = $(e.currentTarget).closest('.multiple-choice'); var tosChannels = parentBox.find('.channel-checkbox'); var checkedChannels = []; var channelWarning = parentBox.find('.channel-warning'); var consentWarning = parentBox.find('.main-consent-warning'); var isChecked = $(e.currentTarget).prop('checked'); var tosName = $(e.currentTarget).closest('label').find('.switch-name'); $.each(tosChannels, function (key, value) { if ($(value).prop('checked')) { checkedChannels.push($(value)); } }); if (checkedChannels.length > 0 && !isChecked) { $(channelWarning[0]).hide(); $.each(tosChannels, function (key, value) { $(value).closest('.channel-switch').addClass('unactive-switch'); $(value).prop('disabled', true); $(value).prop("checked", false); }); } if (checkedChannels.length > 0 && isChecked) { $(channelWarning[0]).hide(); $(tosName[0]).css({ 'color': '', 'transition': '200ms' }); $(consentWarning[0]).hide(); } if (checkedChannels.length === 0 && isChecked) { $(channelWarning[0]).show(); $.each(tosChannels, function (key, value) { $(value).closest('.channel-switch').removeClass('unactive-switch'); $(value).removeAttr('disabled'); }); } if (checkedChannels.length === 0 && !isChecked) { $(channelWarning[0]).hide(); $.each(tosChannels, function (key, value) { $(value).closest('.channel-switch').addClass('unactive-switch'); $(value).prop('disabled', true); }); } }, 4.Wywołaj nowe funkcje w pliku 'init.js', w obiekcie application.events $('body').on('click', '.channel-checkbox', function (e) { self.uicheckIfParentChecked(e); }); $('body').on('click', '.multiple-choice .input-group > label .switch-input[name=tos]', function (e) { self.uicheckIfTosChannelChecked(e); }); 5.Dodaj tłumaczenia: - MainConsentWarning: "Wyraź zgodę" - ChannelWarning: "Wybierz przynajmniej jeden kanał" 6.Uzupełnij plik '480plus.css', który znajduje się w folderze 'css', o style: .multiple-switch { margin: 0 0 20px; } .multiple-choice .main-consent-warning, .multiple-choice .channel-warning, .input-group.switches .main-consent-warning, .input-group.switches .channel-warning { display: none; position: relative; font-size: 11px; color: #ff3a3a; top: -20px; left: -51px; } .multiple-choice .main-consent-warning .fa, .multiple-choice .channel-warning .fa, .input-group.switches .main-consent-warning .fa, .input-group.switches .channel-warning .fa { margin: 0 5px 0 0; } .input-group label.required-checkbox-warning .switch-name { color: #ff3a3a !important; } .input-group label.required-checkbox-warning .switch-name a.cp_link { color: #ff3a3a; } form .input-group .switch.unactive-switch { opacity: .5; cursor: not-allowed; }
Szablon Bursztyn
W pliku homepage.html proszę zastąpić poniższy kod: {% for tos in config.TOS.Consents.Newsletter -%} {% if tos.Statement -%} <label>{{tos.Text}}</label> {% else -%} <input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} /> <div class="input-switch "><div class="switch-button"></div></div> <label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label> {% endif -%} {% endfor -%} następującym: {% for tos in config.TOS.Consents.Newsletter -%} {% assign channelsSize = tos.Channels | Size -%} <div class="single-tos {% if channelsSize > 0 -%} channels {% endif %}"> {% if tos.Statement -%} <label class="statement tos-name">{{tos.Text}}</label> {% else -%} <div class="tos-switch"> <input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} /> <div class="input-switch "><div class="switch-button"></div></div> <label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label> </div> {% endif -%} {% if channelsSize > 0 -%} <ul class="channels disabled"> {% for chn in tos.Channels -%} <li class="channel"> <input id="channel{{ chn.Key }}" type="checkbox" name="channelKey" value="{{ chn.Key }}" disabled/> <div class="channel-switch input-switch "><div class="switch-button"></div></div> <label for="channel{{ chn.Key }}">{{chn.Name}}</label> </li> {% endfor -%} </ul> {% endif -%} </div> {% endfor -%}
Szablon Opal
W pliku homepage.html proszę zastąpić poniższy kod: {% for tos in config.TOS.Consents.Newsletter -%} {% if tos.Statement -%} <label>{{tos.Text}}</label> {% else -%} <input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} /> <div class="input-switch "><div class="switch-button"></div></div> <label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label> {% endif -%} {% endfor -%} następującym: {% for tos in config.TOS.Consents.Newsletter -%} {% assign channelsSize = tos.Channels | Size -%} <div class="single-tos"> {% if tos.Statement -%} <label class="statement-reg tos-name">{{tos.Text}}</label> {% else -%} <div class="tos-switch single-switch"> <input name="tos" id="tos{{ tos.Id }}" type="checkbox" value="{{ tos.Id }}" {% if tos.Required -%} required {% endif -%} /> <div class="input-switch "><div class="switch-button"></div></div> <label for="tos{{ tos.Id }}">{% if tos.Required -%}*{% endif -%} {{tos.Text}}</label> </div> {% endif -%} {% if channelsSize > 0 -%} <ul class="channels-list"> {% for chn in tos.Channels -%} <li class="channel single-switch"> <input id="channel{{ chn.Key }}" type="checkbox" name="channelKey" value="{{ chn.Key }}"/> <div class="input-switch "><div class="switch-button"></div></div> <label for="channel{{ chn.Key }}">{{chn.Name}}</label> </li> {% endfor -%} </ul> {% endif -%} </div> {% endfor -%}
Kanał e-mail
Jeśli wprowadziłeś powyższe zmiany, a w swoich zgodach posiadasz tylko kanał e-mail i chcesz zaoszczędzić zbędnego klikania swoim klientom to poniżej znajduje się instrukcja co należy zmienić w kodzie. Te zmiany sprawią, że kanał e-mail będzie zawsze zaznaczony i nie będzie się go dało odznaczyć.
Szafir

Plik init-ui2.js
Znajdź funkcję toggleChannels. W niej jest zdeklarowana zmienna var inputs = container.find('[name=channelKey]');. Zmień ją na var inputs = container.find('[name=channelKey]:not([type=hidden])');
Pliki home.html, sign-up-no-address.html, common/address-form-register-full.html, customer-profile/your-account/employee-update.html, order/cart.html, __loginconsents.liquid
Znajdź w tych plikach taki fragment kodu: {% if channelsSize > 0 -%} {{ translations.ChooseOption }} {% endif -%} {% for channel in tos.Channels -%} {{ channel.Name }} {% endfor -%} Usuń go, a w jego miejsce wklej ten fragment kodu: {% if channelsSize > 0 -%} {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%} {% if onlyEmail == false -%} {{ translations.ChooseOption }} {% endif -%} {% endif -%} {% for channel in tos.Channels -%} {% if onlyEmail == false -%} {% else -%} {% endif -%} {{ channel.Name }} {% endfor -%}
Agat

Pliki partials/cart/delivery-and-payment.html, partials/common/footer.html, partials/common/registration-consents.html, __loginconsents.liquid
Znajdź w tych plikach taki fragment kodu: {% if channelsSize > 0 -%} {{translations.ChannelWarning}} {% for chn in tos.Channels -%} {{chn.Name}} {% endfor -%} {% endif -%} Usuń go, a w jego miejsce wklej ten fragment kodu: {% if channelsSize > 0 -%} {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%} {% if onlyEmail == false -%} {{translations.ChannelWarning}} {% endif -%} {% for chn in tos.Channels -%} {{chn.Name}} {% if onlyEmail == false -%} {% else -%} {% endif -%} {% endfor -%} {% endif -%}
Bursztyn

Plik init.js
Wyszukaj frazę channels i zamień wszystkie jej wystąpienia w tym pliku na channels:not(.only-email)
Pliki homepage.html, customer/registration.html, order/stepsummary.html, __loginconsents.liquid
Znajdź w tych plikach taki fragment kodu: {% if channelsSize > 0 -%}

{% for chn in tos.Channels -%}

{{chn.Name}}

{% endfor -%} {% endif -%} Usuń go, a w jego miejsce wklej ten fragment kodu: {% if channelsSize > 0 -%} {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%}

{% for chn in tos.Channels -%}
{% if onlyEmail == false -%} {% else -%} {% endif -%}

{{chn.Name}}

{% endfor -%} {% endif -%}
Opal

Plik init.js
Wyszukaj frazę channels-list i zamień wszystkie jej wystąpienia w tym pliku na channels-list:not(.only-email)
Pliki homepage.html, customer/registration.html, order/stepsummary.html, __loginconsents.liquid
Znajdź w tych plikach taki fragment kodu: {% if channelsSize > 0 -%}

{% for chn in tos.Channels -%}

{{chn.Name}}

{% endfor -%} {% endif -%} Usuń go, a w jego miejsce wklej ten fragment kodu: {% if channelsSize > 0 -%} {% assign onlyEmail = false -%} {% if channelsSize == 1 and tos.Channels[0].Type == 1 -%} {% assign onlyEmail = true -%} {% endif -%}

{% for chn in tos.Channels -%}
{% if onlyEmail == false -%} {% else -%} {% endif -%}

{{chn.Name}}

{% endfor -%} {% endif -%}
Nowe Inpost API - aktualizacja paczkomatów i punktów odbioru osobistego w szablonach
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Spis treści

Szablon Szafir

Szablon Agat

Szablon Opal

Szablon Bursztyn

Szablon Szafir

Wskazówka
Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki

Wrzuć pliki „collection-points-scripts.html” i „collection-points-styles.html” do głównego folderu z szablonem (tam gdzie „__layout.html”).

Wrzuć plik „collection-points.js” do folderu „js”.

Wrzuć plik “collection-points.css” do folderu “css”.

Podmień plik “collection-points.html”, który znajduje się w folderze „order/delivery-partials”.

W pliku „__layout.html”, na końcu sekcji „<head>” dodaj poniższą linijkę: {% include 'collection-points-styles.html' %}

W pliku „__layout.html”, na końcu sekcji „<body>” dodaj poniższą linijkę: {% include 'collection-points-scripts.html' %}

Dodaj tłumaczenie: - SearchInpostInfo: "Szukaj po mieście, adresie i nazwie paczkomatu”

(punkt opcjonalny – poprawienie styli – bez niego paczkomaty i POO będą działać ale będzie brzydko wyglądać i każdy to zauważy) W pliku “order/delivery-partials/delivery-section.html”, pod formularzem „<form class="no-message-lq delivery-form-lq">” należy utworzyć nowy kontener “<div class="clear-after-ui"></div>”, a następnie wkleić do niego dwa ostatnie kontenery z klasą “f-left-ui” wraz z ich zawartością. <div class="clear-after-ui"> <div class="f-left-ui half-ui-with-space-ui cart-option-ui delivery-address-lq address-ui delivery-address-ui"> <p> {% if order.SelectedDelivery.CollectionPointTypeId == 0 -%} {{translations.ShippingAddress}} {% else -%} {{translations.MyData}} {% endif -%} </p> <div class="address-template-container-lq" data-address-type="0"> {% assign lackOfPhone = false -%} {% assign countryMismatch = false -%}{% if order.SelectedDelivery.PhoneRequired and deliveryAddress.PhoneNo == '' -%} {% assign lackOfPhone = true -%} {% endif -%} {% comment -%} {% if page.Cookies.deliveryAddressId == null or page.Cookies.deliveryAddressId == '' -%} {% for profileAddress in customer.DeliveryAddresses -%} {% if profileAddress.Default and profileAddress.Country != config.DefaultCountry -%} {% assign countryMismatch = true -%} {% break -%} {% endif -%} {% endfor -%} {% if countryMismatch == false and deliveryAddress.Country != config.DefaultCountry -%} {% assign countryMismatch = true -%} {% endif -%} {% elseif page.Cookies.deliveryAddressId == -1 -%} {% assign countryMismatch = true -%} {% else -%} {% for profileAddress in customer.DeliveryAddresses -%} {% if profileAddress.Id == page.Cookies.deliveryAddressId -%} {% if profileAddress.Country != deliveryAddress.Country %} {% assign countryMismatch = true -%} {% endif -%} {% break -%} {% endif -%} {% endfor -%} {% endif -%} {% endcomment -%} {% if page.Cookies.delivCountryChanged == 'true' -%} {% assign countryMismatch = true -%} {% endif -%} {% if deliveryAddress.Name == '' or lackOfPhone or countryMismatch -%} {% include 'order/delivery-partials/address-form.html' with 'orderDa' -%} {% else -%} {% include 'order/delivery-partials/address-presentation.html' with 'orderDa' -%} {% endif -%} </div> </div> <div class="f-left-ui half-ui-with-space-ui cart-option-ui invoice-address-lq address-ui invoice-address-ui"> <p>{{translations.InvoiceData}}</p> <div class="address-template-container-lq" data-address-type="1"> {% if invoiceAddress.Name == '' and order.Customer.CustomerDetailsEditable -%} {% include 'order/delivery-partials/address-form.html' with 'inv-add' -%} {% else -%} {% include 'order/delivery-partials/address-presentation.html' with 'inv-add'-%} {% endif -%} </div> </div> </div>

Szablon Agat

Wskazówka
Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki

Podmień plik ‘order.js’, który znajduje się w folderze ‘js’.

Wrzuć plik ‘collection-points.css’ do folderu ‘css’.

a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘delivery-adress.html’, który znajduje się w folderze ‘partials/cart’. b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami następującym: {% if cart.SelectedDelivery.CollectionPointTypeId == 2 or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div class="geowidget-container" id="map"> {% if settings.googleMapsKey == '' or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div id="collection-points-searcher" class="collection-points-search-box {% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} personal-collection-points {% endif -%}"> <input placeholder="{% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} {{translations.TypeAdress}} {% else -%}{{translations.AddCodeOrAdress}}{% endif -%}" type="search" id="machines-filter-input" class="collection-point-search-input"> <span class="fa fa-search"></span> <div class="collection-points-result hidden"><ul></ul></div> </div> {% elsif settings.googleMapsKey != '' and cart.SelectedDelivery.CollectionPointTypeId == 2 -%} <div id="easypack-map"></div> {% endif -%} </div> {% endif -%}

W pliku ‘_layout.html’, na końcu sekcji ‘<head>’ dodaj poniży kod: {% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="https://geowidget.easypack24.net/css/easypack.css"> <link rel="stylesheet" type="text/css" href="css/collection-points.css"> {% endif -%}

W pliku ‘_layout.html’, na końcu sekcji ‘<body>’ dodaj poniży kod: {% if page.PageId == config.DefinedPages.Order.Id -%} <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script> {% endif -%}

Dodaj tłumaczenia: - TypeAdress: "Wpisz adres" - AddCodeOrAdress: "Wpisz kod paczkomatu lub adres"

Aby paczkomaty działały poprawnie również przy przechodzeniu na poprzedni i następny krok koszyka: a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘init.js’, który znajduje się w folderze ‘js’. b) Jeśli kod szablonu był modyfikowany, wywołaj funkcje: orderCollectionPoints.easyPackAsyncInit(); orderCollectionPoints.getCollectionPoints(); w tych funkcjach, które są wywoływane przy zmianie sekcji na ‘CustomerData’ w koszyku: Zmienione fragmenty pliku ‘init.js’ to: orderPrevStep: function (e) { var container = $('.shopping-cart'); var data = { __template: 'partials/cart/cart-template.html', __csrf: __CSRF, __action: 'Order/StepPrev' }; $.post(null, data, function (result) { if (result.action.Result) { $('.shopping-cart').html(result.template); if ($('body').find('#invoice-address-data').index() >= 0) { application.uiSetSwitchNameWidthInInvoice(); } if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } if ($('.geowidget-container').length > 0) { $('#main-section .save-delivery-address-data').addClass('order-next-step').removeClass('choose-collection-point'); } application.loadImages(); application.uiScrollToTop(container); application.uiCheckLabels(); } else { if (result.action.Code != 100) { if (result.action.Validation != null) { errorMessage = '<div class="title">' + result.action.Message + '</div>' + '<p>' + result.action.Validation[0].Error + '</p>'; } else { errorMessage = '<div class="title">' + result.action.Message + '</div>'; } application.createMessage(errorMessage); } } }); }, orderNextStep: function (e) { if ($('#delivery-address-data').index() >= 0) { var allEdited = true; $('#delivery-address-data input[required]').each(function () { if (allEdited === false) { return; } else { if ($(this).val() == '') { allEdited = false; } } }); if (allEdited === false) { var errorMessage = $(e.currentTarget).next().next().val(); application.createMessage(errorMessage, 3000); return; } else if ($('input[name="invoice"]').hasClass('company') && $('input[name="tin"]').val() == '' && $('input[name="tin"]').prop('required')) { var message = $('input[name="company"]').attr('data-info'); application.createMessage(message, 2000); } else { var data = $('#delivery-address-data').serializeArray(); var validate = application.uiValidateForm($('#delivery-address-data'));if (validate) { $.post(null, data, function (result) { if (result.action.Result) { var container = $('body'); var data = { __template: 'partials/cart/cart-template.html', __csrf: __CSRF, __action: 'Order/StepNext' }; $.post(null, data, function (result) { if (result.action.Result) { $('.shopping-cart').replaceWith(result.template); if ($('body').find('#invoice-address-data').index() >= 0) { application.uiSetSwitchNameWidthInInvoice(); } application.loadImages(); application.uiSetSwitchNameWidthInSummaryCheckboxes(); application.uiScrollToTop(container); application.uiCheckLabels(); if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } } else { if (result.action.Code != 100) { if (result.action.Validation != null) { errorMessage = '<div class="title">' + result.action.Message + '</div>' + '<p>' + result.action.Validation[0].Error + '</p>'; } else { errorMessage = '<div class="title">' + result.action.Message + '</div>'; } application.createMessage(errorMessage, 3000); } } }); } else { if (result.action.Code != 100) { if (result.action.Validation != null) { errorMessage = '<div class="title">' + result.action.Message + '</div>' + '<p>' + result.action.Validation[0].Error + '</p>'; } else { errorMessage = '<div class="title">' + result.action.Message + '</div>'; } application.createMessage(errorMessage, 3000); return; } } }); } } } else { var container = $('body'); var data = { __template: 'partials/cart/cart-template.html', __csrf: __CSRF, __action: 'Order/StepNext' }; $.post(null, data, function (result) { if (result.action.Result) { if ((result.template).indexOf('name="sel-del-met" value="' + 1 + '"') !== -1 || (result.template).indexOf('name="sel-del-met" value="' + 2 + '"') !== -1) { application.orderPrevStep(); } else { $('.shopping-cart').replaceWith(result.template); if ($('body').find('#invoice-address-data').index() >= 0) { application.uiSetSwitchNameWidthInInvoice(); } if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } application.loadImages(); application.uiSetSwitchNameWidthInSummaryCheckboxes(); application.uiScrollToTop(container); application.uiCheckLabels(); } } else { if (result.action.Code != 100) { if (result.action.Validation != null) { errorMessage = '<div class="title">' + result.action.Message + '</div>' + '<p>' + result.action.Validation[0].Error + '</p>'; } else { errorMessage = '<div class="title">' + result.action.Message + '</div>'; } application.createMessage(errorMessage); } } }); } },

Szablon Opal

Wskazówka
Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki

Wrzuć plik ‘collection-points.js’ do folderu ‘js’.

Wrzuć plik ‘collection-points.css’ do folderu ‘css’.

Podmień plik ’delivery-points-partial.html’, który znajduje się w folderze ‘order’.

a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘data-form.html’, który znajduje się w folderze ‘order/cst-data’. b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami linijką: {% include 'order/delivery-points-partial.html' -%}

W pliku ‘_layout.html’, na końcu sekcji ‘<head>’ dodaj poniży kod: {% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="https://geowidget.easypack24.net/css/easypack.css"> <link rel="stylesheet" type="text/css" href="css/collection-points.css"> {% endif -%}

W pliku ‘order-cart.html’, do bloku ‘{% block PageBodyEnd -%}’ dodaj poniży kod: <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script> <script src="js/collection-points.js"></script>

Dodaj tłumaczenie: - TypeAdress: "Wpisz adres"

Aby paczkomaty działały poprawnie również przy przechodzeniu na poprzedni i następny krok koszyka: a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘order.js’, który znajduje się w folderze ‘js’. b) Jeśli kod szablonu był modyfikowany, wywołaj funkcje: orderCollectionPoints.easyPackAsyncInit(); orderCollectionPoints.getCollectionPoints(); w tych funkcjach, które są wywoływane przy zmianie sekcji na ‘customerData’ w koszyku: Zmienione fragmenty pliku ‘order.js’, to: orderForm.on('click', '#customer-data-form', function (e) { e.preventDefault(); $.get('', {__template: 'order/cst-data/data-form.html'}, function (res) { orderForm.find('.content').html(res.template); if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } window.sessionStorage.setItem('continueWithoutRegistration', true); }); }); var initStep = (function f(e, step) { if (!$('.order').hasClass('cart-empty')) { stepsLinks(); }if (step && step == 'ThankYou') { $("#order-form").find("script").each(function () { eval($(this).text()); }); if (window.sessionStorage.getItem('continueWithoutRegistration')) { window.sessionStorage.removeItem('continueWithoutRegistration'); } } if (step && step == 'CustomerData') { window.sessionStorage.setItem('toSkip', true); if (window.sessionStorage.getItem('continueWithoutRegistration')) { $.get('', {__template: 'order/cst-data/data-form.html'}, function (res) { orderForm.find('.content').html(res.template); if ($('#easypack-map').length > 0) { orderCollectionPoints.easyPackAsyncInit(); } if($('#collection-points-searcher').length > 0) { orderCollectionPoints.getCollectionPoints(); } }); } } return f; })(); orderForm.on('click', '.recalculate, #remove-points', function (e) { e.preventDefault(); $.post(null, { __collection: 'customer.Cart.Value', __template: 'order/cart.html', __csrf: __CSRF, __action: 'cart/Recalculate' }, function (d) { CreateTooltip(d.action); showTooltip(); $('.order-content').replaceWith(d.template); lazyCheck(); UpdateSmallCrt(d.collection); orderCollectionPoints.checkPointsAvailability(); }); });

Szablon Bursztyn

Wskazówka
Pliki potrzebne do aktualizacji paczkomatów i punktów odbioru osobistego: Pobierz pliki

Wrzuć plik „collectionpoints.js” do folderu „js”.

Wrzuć plik “collectionpoints.css” do folderu “css” .

W pliku html w sekcji <head> pod koniec znaczników <link> dodaj poniższy kod: {% if page.PageId == config.DefinedPages.Order.Id -%} <link rel="stylesheet" type="text/css" href="https://geowidget.easypack24.net/css/easypack.css"> <link rel="stylesheet" type="text/css" href="css/collectionpoints.css"> {% endif -%}

W pliku ‘order-cart.html’, do bloku ‘{% block PageBodyEnd -%}’ dodaj poniży kod: <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script> <script src="js/collection-points.js"></script>

Plik cart.html: a) Jeśli kod szablonu nie był modyfikowany, wystarczy podmienić plik, który znajduje się w katalogu ‘order’. b) Jeśli kod szablonu był modyfikowany, podmień obecny widok mapy z paczkomatami następującym kodem: {% if cart.SelectedDelivery.CollectionPointTypeId == 2 or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div class="col-sm-12 geowidget-container" id="map"> <h2> {% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} {{translations.Crt_ChooseCollectionPoint}} {% else -%} {{translations.Crt_ChooseInpostMachine}} {% endif -%} </h2>{% if settings.googleMapsKey == '' or cart.SelectedDelivery.CollectionPointTypeId == 1 -%} <div id="collection-points-searcher" class="collection-points-search-box {% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} personal-collection-points {% endif -%}"> <input placeholder="{% if cart.SelectedDelivery.CollectionPointTypeId == 1 -%} {{transla-tions.TypeAdress}} {% else -%}{{translations.Crt_MachineCodeOrAdress}}{% endif -%}" type="search" id="machines-filter-input" class="collection-point-search-input"> <span class="fa fa-search"></span> <div class="collection-points-result hidden"><ul></ul></div> </div> {% elsif settings.googleMapsKey != '' and cart.SelectedDelivery.CollectionPointTypeId == 2 -%} <div id="easypack-map"></div> {% endif -%} </div> {% endif -%}

Plik order-short-info.html : a) Jeśli kod szablonu nie był modyfikowany, podmień plik znajdujący się w folderze ‘order’ b) Jeśli kod szablonu był modyfikowany, podmień linijkę {% assign displayOptions = include %} (znajdującą się na początku dokumentu), poniższym kodem: {% if page.POST.__include %} {% assign displayOptions = page.POST.__include %} {% else %} {% assign displayOptions = include %} {% endif %}

Plik cart-products-partial.html: a) Jeśli kod szablonu nie był modyfikowany, podmień plik znajdujący się w folderze ‘order’ b) Jeśli kod szablonu był modyfikowany, proszę usunąć poniższy kod znajdujący się pod koniec znacznika <div class=”custom-collection”> : {% if settings.googleMapsKey != '' and deliveryData.CollectionPoints[deliveryData.CollectionPointId].Latitude <> "" and deliveryData.CollectionPoints[deliveryData.CollectionPointId].Longitude <> "" and step == 'summary' -%} <p class="collection-localization"> <span class="glyphicon glyphicon-map-marker"></span> {{translations.Crt_LocateOnMap}} </p> <div id="map-canvas" data-step="{{step}}" data-type="{{deliveryData.CollectionPointTypeId}}" data-lat="{{deliveryData.CollectionPoints[deliveryData.CollectionPointId].Latitude}}" data-lng="{{deliveryData.CollectionPoints[deliveryData.CollectionPointId].Longitude}}"></div> {% endif -%}

Aby paczkomaty działały poprawnie podczas przechodzenia na poprzedni oraz następny krok koszyka należy: a) Jeśli kod szablonu nie był modyfikowany, podmień plik ‘order.js’ znajdujący się w folderze ‘js’ b) Jeśli kod szablonu był modyfikowany, należy wywołać orderCollectionPoints.cpCheck() oraz orderCollectionPoints .checkPackage() na końcu funkcji, która przenosi użytkownika do poprzedniego kroku koszyka.Funkcja orderCollectionPoints.cpCheck() jest odpowiedzialna za inicjalizację mapy bądź listy paczkomatów na danej stronie. Z kolei orderCollectionPoints.checkPackage() sprawdza czy paczkomat do którego ma być zrealizowane zamówienie został już wybrany.Funkcja orderCollectionPoints.cpCheck() należałoby również dodać do zdarzenia obsługującego zmianę sposobu dostawy.Ostatnią rzeczą jaką trzeba zrobić na koniec zamówienia, kiedy klient zrealizuje już transakcję, to dodanie linijki sessionStorage.removeItem(‘paczka’). Ma ona na celu usunięcia informacji o wybranym paczkomacie.

Wskazówka
Przeczytaj więcej o nowym API serwisu InPost.
Integracja z edrone - dostosowanie szablonu
Wskazówka
Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce. Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.
Darmowe szablony Comarch od wersji 2018.1 posiadają wbudowaną integrację z zaawansowanym systemem do zarządzania relacjami z klientami edrone. Jeżeli korzystasz z innych szablonów, to ten artykuł może być dla Ciebie pomocny. Poniżej znajduje się lista kroków, które należy wykonać w celu integracji z edrone.

Ustawiamy swój App ID z edrone w panelu administracyjnym (Ustawienia/Ustawienia Sklepu/Ogólne/Integracja z edrone)

W głównym folderze szablonu tworzymy folder edrone, w którym umieszczamy pliki, których zawartość znajduje się w kolejnych punktach

W pliku html, na końcu sekcji head includujemy plik edrone/head.html (dodajemy {% include ‘edrone/head.html’ -%} ) {% if config.External.Edrone.AppId != '' -%} <script type="text/javascript"> (function (srcjs) { window._edrone = window._edrone || {}; _edrone.app_id = '{{ config.External.Edrone.AppId }}'; _edrone.version = '1.0.0'; _edrone.platform_version = '{{ config.Version }}'; _edrone.platform = 'comarch'; _edrone.shop_lang = '{{ page.Language }}';{% if page.PageId != config.DefinedPages.Order.Id -%} _edrone.action_type = 'other'; {% if usr.Authenticated -%} {% if customer.Address.Name != '' -%} {% assign FullName = customer.Address.Name -%} {% if FullName contains ' ' -%} {% assign HalfName = FullName | Split:' ' -%} {% endif %} _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}'; {% if HalfName[1] -%} _edrone.last_name = '{{ HalfName[1] }}'; {% endif %} {% endif -%} {% if customer.Address.Country != '' -%} _edrone.country = '{{ customer.Address.Country }}'; {% endif -%} {% if customer.Address.City != '' -%} _edrone.city = '{{ customer.Address.City }}'; {% endif -%} {% if customer.Address.Phone != '' -%} _edrone.phone = '{{ customer.Address.PhoneNo }}'; {% endif -%} _edrone.email = '{{ customer.Email }}'; {% endif -%} {% endif -%}var doc = document.createElement('script'); doc.type = 'text/javascript'; doc.async = true; doc.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + srcjs; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(doc, s); })("//d3bo67muzbfgtl.cloudfront.net/edrone_2_0.js"); </script> {% endif -%}

W pliku html, na końcu sekcji body includujemy pliki edrone/product-presentation.html oraz edrone/subscribe.html

product-presentation.html

{% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%} <script type="text/javascript"> {% if productdetails -%} {% assign product-presentation = productdetails -%} {% elseif product-details -%} {% assign product-presentation = product-details -%} {% endif -%} window._edrone = window._edrone || {}; _edrone.action_type = 'product_view'; _edrone.product_ids = '{{ product-presentation.Product.Id }}'; _edrone.product_titles = '{{ product-presentation.Product.Name }}'; {% if product-presentation.Product.ImageId > 0 -%} _edrone.product_images = 'http:{{ page.BaseHref }}img/large/{{ product-presentation.Product.ImageId }}/{% if product-presentation.Product.Images[0].Name != "" -%}{{ product-presentation.Product.Images[0].Name }}{% else %}.jpg{% endif %}'; {% endif -%} {% if product-presentation.Product.Code != '' -%} _edrone.product_skus = '{{ product-presentation.Product.Code }}'; {% endif -%} _edrone.product_urls = '{{ page.CanonicalLink }}'; _edrone.product_category_ids = '{{ page.GroupId }}'; _edrone.product_category_names = '{{ page.CurrentSiteNode.Name }}'; </script> {% endif %}
Wskazówka
Jeżeli w swoim szablonie obiekt ze szczegółami produktu ma inną nazwę, to należy zmodyfikować warunek.

subscribe.html

{% if config.External.Edrone.AppId != '' -%} {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.CustomerProfile.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Newsletter/Subscribe' || d.action.Action == 'newsletter/subscribe') && d.action.Result){ var queryString = c.data.split('&'); for(i=0; i<queryString.length; i++){ if(queryString[i].indexOf('email') != -1){ var email = queryString[i].split('=')[1].replace('%40','@'); } } _edrone.customer_tags = 'From Newsletter Subscribe'; _edrone.email = email; _edrone.subscriber_status = '1'; _edrone.action_type = 'subscribe'; _edrone.init(); } }); </script> {% endif %} {% if page.PageId == config.DefinedPages.CustomerProfile.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Newsletter/Unsubscribe' || d.action.Action == 'newsletter/unsubscribe') && d.action.Result){ var queryString = c.data.split('&'); for(i=0; i<queryString.length; i++){ if(queryString[i].indexOf('email') != -1){ var email = queryString[i].split('=')[1].replace('%40','@'); } } _edrone.customer_tags = 'From Newsletter Subscribe'; _edrone.email = email; _edrone.subscriber_status = '0'; _edrone.action_type = 'subscribe'; _edrone.init(); } }); </script> {% endif %} {% endif %}
Wskazówka
Jeżeli w swoim szablonie umożliwiasz zapis do newslettera z innych stron niż strona główna i profil klienta oraz pozwalasz na wypisanie poza profilem klienta, to należy zmodyfikować powyższy plik.

Uwaga
W wersji 2018.7 z domyślnych szablonów Comarch usunięto akcję dotyczącą zapisu i wypisu z newslettera, ponieważ dane przekazywane są przez Comarch e-Sklep w tle.

W szablonach Agat, Bursztyn i Opal, w tym samym miejscu includujemy również plik edrone/add-to-cart.html {% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){ _edrone.action_type = 'add_to_cart'; _edrone.init(); } }); </script> {% endif %}
Wskazówka
Plik należy dodać do wszystkich szablonów, które nie są oparte o najnowszą wersję szablonu Szafir (w tym szablonie dodawanie do koszyka w edrone obsłużone jest bezpośrednio w funkcjach szablonu – spowodowane jest to możliwością dodawania kilku towarów jednocześnie czego inne szablony nie posiadają).

W szablonie Bursztyn, w tym samym miejscu includujemy również plik edrone/add-to-cart-with-data.html {% if config.External.Edrone.AppId != '' -%} {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.ProductList.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){ window._edrone = window._edrone || {};var products = d.collection["customer.Cart"].Products; var size = products.length; var product = products[size-1];_edrone.product_ids = product.Id; _edrone.product_titles = product.NameNoHtml; if(product.ImageId > 0){ _edrone.product_images = 'http:{{ page.BaseHref }}img/large/'+product.ImageId+'/.jpg'; } if(product.Code != ''){ _edrone.product_skus = product.Code; } _edrone.product_urls = 'http:{{ page.BaseHref }}'+product.Url; _edrone.product_category_ids = product.DefaultGroup; _edrone.action_type = 'add_to_cart'; _edrone.init(); } }); </script> {% endif %} {% endif %}
Wskazówka
Kod działa dla dodawania do koszyka ze strony głównej i listy towarów. Jeżeli pozwalasz na dodawanie do koszyka z innych stron, należy go zmodyfikować.

W pliku z podziękowaniami za zakup (Agat – partials/cart/summary.html, Bursztyn i Opal – order/thank-you.html, Szafir – order/thx.html), na końcu pliku (tuż pod includem rich-snippetów), includujemy plik edrone/order.html {% if config.External.Edrone.AppId != '' -%} <script type="text/javascript"> _edrone.action_type = 'order';{% if cart -%} {% assign order = cart -%} {% endif -%}{% assign FullName = order.Customer.DeliveryAddress.Name -%} {% if FullName contains ' ' -%} {% assign HalfName = FullName | Split:' ' -%} {% endif %} _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}'; {% if HalfName[1] -%} _edrone.last_name = '{{ HalfName[1] }}'; {% endif %} _edrone.country = '{{ order.Customer.DeliveryAddress.Country }}'; {% if order.Customer.DeliveryAddress.City != '' -%} _edrone.city = '{{ order.Customer.DeliveryAddress.City }}'; {% endif %} {% if order.Customer.DeliveryAddress.PhoneNo != '' -%} _edrone.phone = '{{ order.Customer.DeliveryAddress.PhoneNo }}'; {% endif %} _edrone.email = '{{ order.Customer.Email }}'; {% assign size = order.PlacedOrder.Products | Size -%} var ids = ''; var titles = ''; var images = ''; var skus = ''; var urls = ''; var categoryIds = ''; var counts = ''; {% for product in order.PlacedOrder.Products -%} ids += '{{ product.Id }}{% if forloop.index != size -%}|{% endif -%}'; titles += '{{ product.NameNoHtml }}{% if forloop.index != size -%}|{% endif -%}'; images += '{% if product.ImageId > 0 -%}http:{{ page.BaseHref }}img/large/{{ product.ImageId }}/.jpg{% endif -%}{% if forloop.index != size -%}|{% endif -%}'; skus += '{{ product.Code }}{% if forloop.index != size -%}|{% endif -%}'; urls += 'http:{{ page.BaseHref }}{{ product.Url }}{% if forloop.index != size -%}|{% endif -%}'; categoryIds += '{{ product.DefaultGroup }}{% if forloop.index != size -%}|{% endif -%}'; counts += '{{ product.Quantity | Normalize }}{% if forloop.index != size -%}|{% endif -%}'; {% endfor -%} _edrone.product_ids = ids; _edrone.product_titles = titles; _edrone.product_images = images; _edrone.product_skus = skus; _edrone.product_urls = urls; _edrone.product_category_ids = categoryIds; _edrone.product_counts = counts; _edrone.order_id = '{{ order.PlacedOrder.Id }}'; _edrone.base_currency = '{{ order.Currency }}'; _edrone.order_currency = '{{ order.Currency }}'; _edrone.base_payment_value = '{{ order.OrderTotalValue | ToString | Replace:",","." }}'; _edrone.order_payment_value = '{{ order.OrderTotalValue | ToString | Replace:",","." }}'; _edrone.init(); </script> {% endif -%}
Wskazówka
Jeżeli w swoim szablonie używasz dla koszyka innej nazwy obiektu niż cart lub order, to powyższy kod należy zmodyfikować.

Edrone i dodawanie towarów w szablonie Szafir:

Plik js/init-ui1.js

Funkcja serialAddingToCart

Na samym początku funkcji znajduje się pętla “each”, a w niej instrukcja warunkowa „if (quantity > 0)”. Na końcu tej instrukcji warunkowej wklejamy poniższy kod: if(typeof _edrone !== 'undefined') { var product = form.parents('.product-item-lq'); var base = $('[data-base]').data('base'); if (first) { _edrone.product_ids = productId; _edrone.product_titles = product.find('.product-name-lq').text(); _edrone.product_images = base + product.find('img').data('src'); _edrone.product_skus = product.find('.product-code-lq').text(); _edrone.product_urls = base + product.find('a').attr('href'); _edrone.product_category_ids = $('[data-group-id]').data('group-id'); _edrone.product_category_names = $('[data-group-name]').data('group-name'); first = false; } else { _edrone.product_ids += '|' + productId; _edrone.product_titles += '|' + product.find('.product-name-lq').text(); _edrone.product_images += '|' + base + product.find('img').data('src'); _edrone.product_skus += '|' + product.find('.product-code-lq').text(); _edrone.product_urls += '|' + base + product.find('a').attr('href'); _edrone.product_category_ids += '|' + $('[data-group-id]').data('group-id'); _edrone.product_category_names += '|' + $('[data-group-name]').data('group-name'); } } Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod: if(typeof _edrone !== 'undefined') { _edrone.action_type = 'add_to_cart'; _edrone.init(); }

Funkcja addManyProducts

Na samym początku funkcji znajduje się pętla “for(var i=0; i<products.length; i++)” iterująca po produktach. Tuż przed nią należy dodać poniższą linijkę: var first = true; Następnie, w tej pętli znajduje się instrukcja warunkowa „if(products[i].askForPriceChild == false && products[i].quantity > 0)”. Na samym jej końcu należy dodać poniższy kod: if(parameters && !validationError && products[i].supply != undefined && typeof _edrone !== 'undefined'){ if(first){ _edrone.product_ids = products[i].supply; _edrone.product_images = products[i].img; _edrone.product_skus = products[i].code; var name = _edrone.product_titles; var url = _edrone.product_urls; var categoryId = _edrone.product_category_ids; var categoryName = _edrone.product_category_names; first = false; } else { _edrone.product_ids += '|' + products[i].supply; _edrone.product_images += '|' + products[i].img; _edrone.product_skus += '|' + products[i].code; _edrone.product_titles += '|' + name; _edrone.product_urls += '|' + url; _edrone.product_category_ids += '|' + categoryId; _edrone.product_category_names += '|' + categoryName; } } Kilkanaście linijek niżej (w tej samej funkcji) jest “$.post”. Na samym jego początku należy dodać poniższy kod: if(typeof _edrone !== 'undefined') { _edrone.action_type = 'add_to_cart'; _edrone.init(); }

Dodanie funkcji simpleAddToCartSuccess

Na końcu pliku js/init-ui1.js należy dodać poniższy kod: function simpleAddToCartSuccess(e){ updateClientArea(); if(typeof _edrone !== 'undefined') { if ($('.add-from-presentation-lq').index() == -1) { var product = $(e.currentTarget).parents('.product-item-lq'); var base = product.parents('[data-base]').data('base'); _edrone.product_ids = product.data('product-id'); _edrone.product_titles = product.find('.product-name-lq').text(); _edrone.product_images = base + product.find('img').attr('src'); _edrone.product_skus = product.find('.product-code-lq').text(); _edrone.product_urls = base + product.find('a').attr('href'); _edrone.product_category_ids = product.parents('[data-group-id]').data('group-id'); _edrone.product_category_names = product.parents('[data-group-name]').data('group-name'); } _edrone.action_type = 'add_to_cart'; _edrone.init(); } } Następnie należy zmodyfikować “event”, który jest wywoływany przy kliknięciu w element z klasą “add-to-cart-update-client-area-lq”. Zmieniamy zawartość tego eventa na: app.post(e, simpleAddToCartSuccess, e); Cały event powinien wyglądać następująco: $('body').on('click', '.add-to-cart-update-client-area-lq', function(e) { app.post(e, simpleAddToCartSuccess, e); });

Plik js/init-ui2.js

Funkcja serialAddingFromWishlist

Na samym początku funkcji znajduje się pętla “each”. Tuż przed nią należy dodać poniższą linijkę: var first = true; Następnie, w tej pętli znajduje się instrukcja warunkowa „if (quantity > 0)”. Na samym jej końcu należy dodać poniższy kod: if(typeof _edrone !== 'undefined') { if (first) { _edrone.product_ids = productId; _edrone.product_titles = productContainer.find('.product-name-lq').text(); _edrone.product_images = base + productContainer.find('img').attr('src'); _edrone.product_skus = productContainer.find('.product-code-lq').text(); _edrone.product_urls = base + productContainer.find('a').attr('href'); _edrone.product_category_ids = categoryId; first = false; } else { _edrone.product_ids += '|' + productId; _edrone.product_titles += '|' + productContainer.find('.product-name-lq').text(); _edrone.product_images += '|' + base + productContainer.find('img').attr('src'); _edrone.product_skus += '|' + productContainer.find('.product-code-lq').text(); _edrone.product_urls += '|' + base + productContainer.find('a').attr('href'); _edrone.product_category_ids += '|' + categoryId; } } Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod: if(typeof _edrone !== 'undefined') { _edrone.action_type = 'add_to_cart'; _edrone.init(); }

Motyw kolorystyczny szablonu Topaz:	Domyślny	Granatowy	Bordowy	Błękitny	Beżowy
Nazwa:
a	CB6724	151B72	BE2745	FF9181	BCAA9C
bgcolor1	ffffff	ffffff	ffffff	ffffff	ffffff
bgcolor2	F0A88D	9597AD	CD6B7F	BAD4F0	E6CAA6
shopName	CB6724	151B72	BE2745	FF9181	BCAA9C
footerTitle	191616	000000	000000	17191A	3B3B3B
footerText	191616	000000	000000	17191A	3B3B3B
title1	4eb6f1	4eb6f1	4eb6f1	4eb6f1	4eb6f1
title2	ff7670	ff7670	ff7670	ff7670	ff7670
title3	53ccbd	53ccbd	53ccbd	53ccbd	53ccbd
text	191616	000000	000000	17191A	3B3B3B
orderColumnName	a8a9a9	9597ad	a8a9a9	9597ad	909090
orderDetails	3b3a3a	000000	000000	17191A	3B3B3B
orderPaymentName	a8a9a9	9597ad	a8a9a9	9597ad	909090
orderPaymentValue	191616	3B3B3B	000000	17191A	3B3B3B
orderPaymentTotal	CB6724	151B72	BE2745	FF9181	BCAA9C
tableName	CB6724	151B72	BE2745	FF9181	BCAA9C
rowName	191616	000000	000000	17191A	3B3B3B
rowContent	a8a9a9	9597ad	a8a9a9	9597ad	909090
feedbackButton (background-color)	CB6724	C85555	CD6B7F	FF9181	3B3B3B
feedbackButton (color)	ffffff	ffffff	ffffff	ffffff	ffffff
feedbackButton (border)	CB6724	C85555	CD6B7F	FF9181	3B3B3B
feedbackButton-2 (background-color)	191616	151B72	000000	17191A	BCAA9C
feedbackButton-2 (color)	ffffff	ffffff	ffffff	ffffff	ffffff
feedbackButton-2 (border)	191616	151B72	000000	17191A	BCAA9C
finishPaymentButton (background-color)	CB6724	C85555	CD6B7F	FF9181	3B3B3B
finishPaymentButton (color)	ffffff	ffffff	ffffff	ffffff	ffffff
finishPaymentButton (border)	CB6724	C85555	CD6B7F	FF9181	3B3B3B

Id	Tekst
ConnectFb	Połącz konto z Facebookiem
ConnectGoogle	Połącz konto z Google

Id	Tekst
ExternalWebsites	Serwisy zewnętrzne
NeedToConnectToFb	Musisz być zalogowany do Facebooka, aby połączyć konto.
CantLoginWithFb	Błąd podczas logowania do Facebooka.
FailedDisconnectFromFb	Błąd podczas odłączania konta Facebook.
FailedConnectToFb	Błąd podczas łączenia z kontem Facebook.
LoginWithFb	Zaloguj się przez Facebook
Disconnect_Fb	Odłącz konto od Facebooka
ConnectFb	Połącz konto z Facebookiem
CantLoginWithGoogle	Nie udało się zalogować, spróbuj jeszcze raz!
FailedDisconnectFromGoogle	Błąd podczas odłączania konta Google.
FailedConnectToGoogle	Błąd podczas łączenia z kontem Google.
LoginWithGoogle	Zaloguj się przez Google
Disconnect_Google	Odłącz konto od Google
ConnectGoogle	Połącz konto z Google

Przykładowe modyfikacje

Wyszukiwarka zaawansowana w szablonie Topaz

Wyszukiwarka zaawansowana w szablonie Topaz

Ustawienia paska nawigacji w szablonie Szafir

Ustawienia paska nawigacji w szablonie Szafir

Aktualizacja filtrów i wyszukiwarki w szablonach

Aktualizacja filtrów i wyszukiwarki w szablonach

Szafir

Agat

Bursztyn lub Opal

Topaz

Dodanie nowego widoku filtrów

Dodanie nowego widoku filtrów

Szafir

{{translations.Filters}}

Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz

Wstęp

Dodanie tłumaczenia

Edycja kodu HTML

Zmiana nagłówka w pozostałych szablonach

Szablon i treści wiadomości e-mail

Wstęp

Gdzie zarządzać treściami powiadomień e-mail w Comarch e-Sklep?

Gdzie edytować szablon wiadomości e-mail?

Edycja kolorów w szablonie wiadomości

Motywy kolorystyczne dla szablonów wiadomości e-mail

Jak zmienić kształt przycisków w powiadomieniach e-mail?

Jak dodać logo w szablonie wiadomości e-mail?

Jak edytować stopkę wiadomości e-mail?

Obsługa wtyczki Czatu Facebooka w szablonach

Instrukcja ogólna

Opcjonalnie:

Zwróć uwagę na te ustawienia:

Obsługa w szablonie Topaz, One Page Shop i Szafir

Obsługa w szablonie Bursztyn

Obsługa w szablonie Opal

Obsługa w szablonie Agat

Przykładowy kod do modyfikacji wyglądu wtyczki - wersja na komputery

Trusted Shops – jak dodać logo do sklepu?

Wstęp

Wprowadzenie identyfikatora Trusted Shops

Dodawanie loga Trusted Shops do e-Sklepu

Parametry konfiguracyjne

Agat

Etap I - skrypt główny

Etap II - wstawienie dodatkowego skryptu w szablonie

Opal i Bursztyn

Etap I - skrypt główny

Etap II - wstawienie dodatkowego skryptu w szablonie

Implementacja Google Analytics 4 w szablonach

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Jak wykonać kopię bezpieczeństwa?

Jak wyeksportować bannery?

Jak zabezpieczyć hasłem swój szablon?

Przekreślenie na atrybutach towaru zgrupowanego - szablon Topaz

Wstęp

Zmiany w plikach szablonu

Migracja do nowszej biblioteki klienta Google

Wstęp

Szafir

Topaz

Pliki html

Pliki JavaScript

Pliki css

Przygotowanie tekstów

Bursztyn

Pliki html

Pliki JavaScript

Pliki scss

Agat

Pliki html

Pliki JavaScript

Pliki scss

Opal

Pliki html

Pliki JavaScript

Pliki scss

Graficzna prezentacja atrybutów - szablon Topaz

Wstęp