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

Czy ten artykuł był pomocny?