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.).