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 -%}
<div class="min-price">
    <span>{{product.MinPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}</span>
    <svg class="min-price__showTooltip">
        <use xlink:href="css/img/icons-sprite.svg#circle-info-regular"></use>
    </svg>
</div>
{% endif -%}

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

<span>{{product.MinPrice | Round: config.DecimalPlacesPrice | ToPrice }} {{ currency }}</span>

</svg>

</div>

{% 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:


<!-- HTML - do wstawienia w głównym pliku -->

{% if customer.HidePrices != true -%}
    <div class="min-price__tooltip minPriceTooltip-js">
        <span>Najniższa cena towaru, jaka obowiązywała w okresie 30 dni
              przed wprowadzeniem obniżki</span>
    </div>
{% 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();
        });

{% if customer.HidePrices != true -%}

<span>Najniższa cena towaru, jaka obowiązywała w okresie 30 dni

przed wprowadzeniem obniżki</span>

</div>

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

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

Wstęp

Kiedy widoczna jest cena minimalna?

Wprowadzanie zmian w kodzie szablonu

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt