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.

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

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ą:

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

Cena minimalna na liście towarów – przykład w szablonie SzafirPrzykładowy kod związany z tooltipem informacyjnym do minimalnej ceny:

{% 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(); });

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