- Jeden produkt zamiast setek wariantów
- Pięć sposobów liczenia ceny
- Centymetry albo metry
- Cena zmienia się na żywo
- Wielowalutowość
- Podatki również są brane pod uwagę w cenie wyświetlanej klientowi
- „Dodaj do koszyka” jest blokowany, dopóki wymiary nie są poprawne
- Walidacja nie kończy się w JavaScript
- Minimalne i maksymalne wymiary
- Automatyczne poprawianie wartości poza zakresem
- Przecinek czy kropka?
- Wyliczona cena jest rzeczywistą ceną produktu w koszyku
- Wymiary są widoczne w koszyku
- Standardowe opcje OpenCart nadal mogą mieć dopłaty
- Special Price i rabaty ilościowe
- Konfiguracja globalna i konfiguracja produktu
- Instalacja DC Pricelist
- Zakładka „Ogólne”
- Zakładka „Selektory”
- Zakładka „Tłumaczenia”
- Zakładka DC Pricelist w edycji produktu
- Dane wymiarowe jako część pozycji koszyka
- Przykład: roleta na wymiar
- Przykład: przewód na metry
- Przykład: element wyceniany z obwodu
- Events i OCMOD – co robi które rozwiązanie?
- Własna tabela jest bardzo mała
- Co dzieje się przy odinstalowaniu?
- Do jakich sklepów może się przydać?
- DC Pricelist a pełny konfigurator produktu
- Podsumowanie
OpenCart bardzo dobrze radzi sobie ze sprzedażą produktów, których cena jest znana z góry. Produkt kosztuje 100 zł, klient wybiera opcję, ewentualnie dopłaca 20 zł i gotowe.
Problem zaczyna się wtedy, kiedy sam produkt nie ma jednej konkretnej ceny, ponieważ jego ostateczny koszt zależy od wymiarów podanych przez klienta.
Roleta może kosztować 120 zł za metr kwadratowy. Przewód 15 zł za metr długości. Profil aluminiowy może być wyceniany według długości, a element wykonywany na zamówienie według szerokości albo wysokości. Jeszcze inny produkt można wyceniać na podstawie obwodu.
W takich przypadkach standardowe pole ceny OpenCart przestaje wystarczać.
Można oczywiście przygotować setki wariantów produktu. 100 × 100 cm, 100 × 110 cm, 100 × 120 cm i tak dalej. Tylko że przy większym zakresie wymiarów bardzo szybko robi się z tego absurdalna liczba kombinacji.
Można również wykorzystać opcje OpenCart z dopłatami, ale opcje świetnie sprawdzają się przy gotowych wariantach, a nie wtedy, kiedy klient powinien sam wpisać np. 137,5 cm szerokości i 214 cm wysokości .
Właśnie z tego problemu powstał DC Pricelist dla OpenCart 3 .
Moduł pozwala przypisać do konkretnego produktu własny sposób obliczania ceny. Klient podaje wymagane wymiary, cena jest przeliczana na żywo na karcie produktu, a po dodaniu do koszyka wyliczona kwota staje się jego rzeczywistą ceną w OpenCart.
Nie jest to więc tylko kalkulator pokazujący gdzieś obok orientacyjny wynik.
Wyliczona cena faktycznie trafia do koszyka i dalej uczestniczy w normalnym procesie zamówienia.
Jeśli tego własnie szukasz ale nie jesteś biegły z platformą Opencart od razu zajrzyj do: tworzenie sklepów internetowych Opencart.
Jeden produkt zamiast setek wariantów
Wyobraźmy sobie roletę sprzedawaną w przedziale od 50 do 250 cm szerokości i od 50 do 300 cm wysokości.
Jeżeli chcielibyśmy przygotować osobne warianty nawet co 10 cm, otrzymalibyśmy dziesiątki albo setki kombinacji.
A co, jeżeli producent pozwala zamawiać rolety z dokładnością do jednego centymetra?
Tworzenie wariantów nie ma już większego sensu.
Znacznie logiczniejsze jest zapisanie jednej informacji:
cena za 1 m² = 120 zł
a następnie pozwolenie klientowi na wpisanie:
szerokość: 137 cm
wysokość: 214 cm
DC Pricelist przeliczy te wartości na metry:
1,37 × 2,14
a następnie wykona:
120 × 1,37 × 2,14 = 351,82 zł
Taka cena może zostać pokazana klientowi od razu na karcie produktu, a po kliknięciu „Dodaj do koszyka” OpenCart będzie traktował ją jako cenę tej konkretnej pozycji.
To było podstawowe założenie modułu.
Mechanizm ten jest niesamowicie przydatny podczas tworzenia sklepów internetowych funkcjonalnością zbliżonych do konfiguratorów produktowych.
Pięć sposobów liczenia ceny
Nie każdy produkt na wymiar jest sprzedawany za metr kwadratowy, dlatego DC Pricelist 1.0.2 obsługuje pięć różnych modeli kalkulacji.
| Typ ceny | Wzór |
|---|---|
| Szerokość | cena jednostkowa × szerokość w metrach |
| Wysokość | cena jednostkowa × wysokość w metrach |
| Długość | cena jednostkowa × długość w metrach |
| Metr kwadratowy | cena jednostkowa × szerokość × wysokość |
| Obwód | cena jednostkowa × 2 × (szerokość + wysokość) |
Dzięki temu ten sam moduł może obsługiwać produkty z zupełnie różnych branż.
Cena według szerokości
Pierwszy wariant wykorzystuje tylko szerokość.
Jeżeli cena jednostkowa wynosi:
80 zł / m
a klient wpisze:
150 cm
DC Pricelist przelicza wartość na:
1,5 m
i oblicza:
80 × 1,5 = 120 zł
.
Może to być przydatne przy produktach, w których głównym parametrem handlowym jest właśnie szerokość.
Cena według wysokości
Mechanizm działa analogicznie, ale kalkulacja wykorzystuje wysokość produktu.
Przykładowo dla:
50 zł / m
i wysokości:
240 cm
otrzymujemy:
50 × 2,4 = 120 zł
.
Cena według długości
To chyba najbardziej oczywisty przypadek.
Przewody, listwy, profile, materiały sprzedawane na metry czy wiele elementów technicznych można wyceniać na podstawie długości wpisanej przez klienta.
Przy cenie:
18 zł / m
i zamówieniu:
350 cm
otrzymujemy:
18 × 3,5 = 63 zł
.
Cena za metr kwadratowy
To wariant szczególnie przydatny przy roletach, materiałach płaskich, płytach, szkle, moskitierach, wykładzinach czy innych produktach wykonywanych na konkretną szerokość i wysokość.
Wzór wygląda następująco:
cena × szerokość w metrach × wysokość w metrach
Dla ceny 120 zł/m², szerokości 150 cm i wysokości 200 cm:
120 × 1,5 × 2 = 360 zł
.
Cena według obwodu
Piątym wariantem jest obwód.
DC Pricelist wykorzystuje wtedy wzór:
cena × 2 × (szerokość + wysokość)
Przy szerokości 1,5 m, wysokości 2 m i cenie 20 zł za metr obwodu:
20 × 2 × (1,5 + 2) = 140 zł
.
Taki sposób kalkulacji może mieć sens przy różnego rodzaju ramach, obrzeżach czy usługach wykonywanych wokół elementu.
Centymetry albo metry
Nie chciałem wymuszać na każdym sklepie jednej jednostki.
Dla produktu można wybrać:
cm
albo:
m .
Jeżeli klient podaje wartości w centymetrach, DC Pricelist automatycznie przelicza je na metry przed wykonaniem wzoru.
Czyli wpisanie:
150 cm
jest dla kalkulatora równoważne:
1,5 m
.
Cena jednostkowa zawsze odnosi się do wartości po przeliczeniu na metry. Jeżeli więc typem jest „metr kwadratowy”, ustawiamy cenę za 1 m². Jeżeli długość — cenę za 1 metr długości.
To pozwala zachować proste zasady w panelu administracyjnym, a jednocześnie klient może posługiwać się jednostką naturalną dla danej branży.
Cena zmienia się na żywo
Najbardziej widoczną częścią modułu jest kalkulator na karcie produktu.
Po wejściu na produkt z aktywnym DC Pricelist klient otrzymuje odpowiednie pola wymiarowe.
Dla m² będą to:
Szerokość
Wysokość
Dla długości tylko:
Długość
a dla obwodu ponownie szerokość i wysokość.
Po wpisaniu poprawnych wartości JavaScript wykonuje ten sam model kalkulacji i podmienia cenę widoczną na karcie produktu.
Klient nie musi więc klikać dodatkowego przycisku „Oblicz”.
Zmienia wymiar i od razu widzi aktualną cenę.
Wielowalutowość
W wersji 1.0.2 zadbałem również o poprawną obsługę zmiany waluty.
Cena jednostkowa produktu jest zapisana w walucie bazowej sklepu, ponieważ właśnie na takich wartościach powinien pracować koszyk OpenCart.
Jednocześnie cena wyświetlana przez kalkulator na froncie jest najpierw konwertowana do waluty aktualnie wybranej przez klienta.
Jeżeli sklep posiada cenę bazową w PLN, ale klient przełączy się na EUR, kalkulator nie robi czegoś w rodzaju:
120 PLN × powierzchnia
i nie dokleja do wyniku symbolu euro.
Do JavaScript przekazywana jest cena jednostkowa już przeliczona na aktualną walutę sesji.
Dzięki temu dynamiczna cena na karcie produktu odpowiada temu, co klient powinien zobaczyć w aktualnej walucie sklepu.
Sam koszyk nadal otrzymuje wyliczoną wartość w walucie bazowej. OpenCart wykonuje później swój standardowy proces przeliczania, więc nie powstaje podwójna konwersja.
Podatki również są brane pod uwagę w cenie wyświetlanej klientowi
Jeżeli sklep jest skonfigurowany tak, aby pokazywać ceny z podatkiem, DC Pricelist wykorzystuje klasę podatkową produktu podczas przygotowywania ceny jednostkowej dla kalkulatora frontendowego.
Dzięki temu podmieniona cena nie jest oderwana od normalnego sposobu prezentacji cen w OpenCart.
Na poziomie koszyka zapisywana jest natomiast bazowa cena kalkulacyjna produktu, a dalsze naliczanie podatku pozostaje po stronie standardowego mechanizmu OpenCart.
„Dodaj do koszyka” jest blokowany, dopóki wymiary nie są poprawne
Sam dynamiczny podgląd ceny nie wystarcza.
Jeżeli do obliczenia ceny potrzebujemy szerokości i wysokości, nie można pozwolić klientowi wrzucić produktu do koszyka bez tych danych.
Dlatego DC Pricelist blokuje przycisk Dodaj do koszyka , dopóki wymagane pola nie przejdą walidacji.
Jeżeli produkt wymaga szerokości i wysokości, obie wartości muszą być poprawne.
Jeżeli kalkulacja opiera się wyłącznie na długości, wymagane jest tylko to jedno pole.
Po wpisaniu prawidłowych danych przycisk zostaje ponownie aktywowany.
Walidacja nie kończy się w JavaScript
To bardzo ważne.
Nigdy nie chciałem opierać rzeczywistej ceny produktu wyłącznie na wartości policzonej w przeglądarce.
JavaScript służy do wygodnego interfejsu i natychmiastowego pokazania ceny, ale podczas dodawania produktu do koszyka PHP ponownie pobiera regułę produktu i ponownie sprawdza wszystkie wymiary .
Walidowane są między innymi:
-
wymagane pola,
-
poprawność liczby,
-
wartości większe od zera,
-
minimalne wymiary,
-
maksymalne wymiary.
Jeżeli dane są niepoprawne, standardowa akcja dodawania produktu do koszyka zostaje zatrzymana i OpenCart otrzymuje komunikaty błędów.
Dopiero po poprawnej walidacji backend samodzielnie wylicza cenę.
To oznacza, że wartość wyświetlona przez JavaScript nie jest po prostu ślepo przesyłana jako cena produktu.
Minimalne i maksymalne wymiary
W praktyce bardzo wiele produktów na wymiar ma ograniczenia technologiczne.
Roleta nie może mieć 5 cm szerokości.
Szyba może posiadać maksymalny dopuszczalny wymiar.
Profil może być dostępny maksymalnie do określonej długości.
Dlatego dla każdego produktu można ustawić osobno:
| Wymiar | Minimum | Maksimum |
|---|---|---|
| Szerokość | opcjonalnie | opcjonalnie |
| Wysokość | opcjonalnie | opcjonalnie |
| Długość | opcjonalnie | opcjonalnie |
Panel pokazuje tylko pola potrzebne dla aktualnego sposobu kalkulacji.
Jeżeli wybiorę Długość , nie potrzebuję przecież limitu wysokości.
Jeżeli wybiorę m² , pojawiają się szerokość i wysokość.
Jeżeli wybiorę Obwód , również pracujemy na szerokości i wysokości.
Pozostałe ograniczenia są ukrywane, dzięki czemu konfiguracja produktu pozostaje czytelna.
Automatyczne poprawianie wartości poza zakresem
Dodałem również mały element UX, który szczególnie podoba mi się w tym module.
Załóżmy, że minimalna szerokość produktu wynosi:
50 cm
a klient wpisze:
30
.
Można oczywiście wyświetlić czerwony komunikat i kazać mu samemu poprawić wartość.
DC Pricelist potrafi jednak zrobić trochę więcej.
Po wykryciu wartości poza zakresem pole otrzymuje sygnał błędu, a następnie wartość jest animacyjnie przesuwana do najbliższej poprawnej granicy.
W tym przykładzie:
30 → 50
Po korekcie pole otrzymuje zielony sygnał i cena zostaje ponownie przeliczona.
Analogicznie działa maksimum.
Jeżeli maksymalna szerokość wynosi 250 cm, a klient wpisze 300, wartość może zostać sprowadzona do 250.
Nie jest to oczywiście najważniejsza funkcja modułu, ale dzięki niej formularz zachowuje się trochę przyjaźniej niż zwykłe „błąd, popraw dane”.
Przecinek czy kropka?
Klient nie musi zastanawiać się, czy wpisać:
1.5
czy:
1,5
.
Podczas przygotowania danych DC Pricelist zamienia przecinek dziesiętny na kropkę i dopiero później interpretuje wartość liczbową.
To drobiazg, ale w polskim sklepie jest dość istotny.
Wyliczona cena jest rzeczywistą ceną produktu w koszyku
To najważniejsza technicznie część modułu.
DC Pricelist nie jest kalkulatorem typu:
„orientacyjna cena wynosi 360 zł, ale produkt w koszyku nadal kosztuje 1 zł”.
Podczas dodawania produktu do koszyka backend tworzy własny pakiet danych zawierający między innymi:
-
typ kalkulacji,
-
jednostkę,
-
cenę jednostkową,
-
wyliczoną cenę,
-
podane wymiary,
-
czytelną etykietę wymiarów.
Dane trafiają do
option
pozycji koszyka pod własnym kluczem DC Pricelist.
Następnie modyfikacja koszyka OpenCart sprawdza obecność tych informacji i dla takiego produktu zastępuje standardową cenę z bazy wartością:
calc_price
.
Jeżeli kalkulator wyliczył 351,82 zł, właśnie ta cena staje się bazową ceną tego egzemplarza produktu w koszyku.
Wymiary są widoczne w koszyku
Sama cena nie wystarcza.
Jeżeli klient zamawia produkt na wymiar, zarówno on, jak i później obsługa sklepu muszą wiedzieć, jakiego wymiaru dotyczy konkretna pozycja .
Dlatego DC Pricelist dodaje czytelną informację do danych opcji produktu.
Przykładowo w koszyku może pojawić się:
Wymiary: Szerokość: 137 cm, Wysokość: 214 cm
Dla produktu wycenianego według długości:
Wymiary: Długość: 350 cm
Informacja zachowuje się podobnie do normalnej informacji o wybranej opcji produktu.
Jest to również ważne w sytuacji, kiedy klient zamawia dwa egzemplarze tego samego produktu w różnych wymiarach.
Standardowe opcje OpenCart nadal mogą mieć dopłaty
Produkt na wymiar nie musi być produktem prostym.
Roleta może mieć cenę wynikającą z powierzchni, ale jednocześnie klient może wybierać:
-
rodzaj materiału,
-
kolor prowadnic,
-
napęd,
-
dodatkowe akcesoria.
DC Pricelist zastępuje bazową cenę produktu , ale standardowy mechanizm opcji OpenCart nadal może do niej doliczać swoje dopłaty.
Przykładowo:
cena rolety z wymiarów: 360 zł
oraz:
napęd premium: +100 zł
dają w koszyku:
460 zł .
To pozwala użyć DC Pricelist jako fundamentu ceny i nadal budować bardziej rozbudowane produkty za pomocą natywnych opcji OpenCart.
Special Price i rabaty ilościowe
Tutaj podjąłem świadomą decyzję projektową.
Dla pozycji korzystającej z DC Pricelist standardowe Special Price oraz rabaty ilościowe OpenCart są pomijane .
Powód jest prosty: standardowe promocje dotyczą ceny produktu zapisanej w OpenCart, podczas gdy w naszym przypadku właściwa cena została właśnie obliczona z wymiarów.
Próba nakładania jednego mechanizmu na drugi bez jasnej zasady mogłaby prowadzić do trudnych do przewidzenia rezultatów.
Dlatego w panelu produktu znajduje się wprost informacja:
wyliczona cena zastępuje cenę produktu z bazy, dopłaty z opcji OpenCart są doliczane, natomiast Special i rabaty ilościowe są pomijane.
Jeżeli kiedyś potrzebny będzie osobny system rabatowania cen wymiarowych, powinien być zbudowany świadomie właśnie dla tego modelu, a nie przypadkowo odziedziczony ze standardowej ceny produktu.
Konfiguracja globalna i konfiguracja produktu
DC Pricelist ma dwa poziomy ustawień.
Pierwszy to główny panel modułu dostępny w:
Extensions → Extensions → Modules → Design Cart Pricelist
Tutaj konfigurujemy zachowanie całego rozszerzenia.
Drugi poziom znajduje się bezpośrednio w edycji produktu.
DC Pricelist dodaje własną zakładkę:
DC Pricelist
do standardowego formularza produktu OpenCart.
Dzięki temu ustawienia globalne dotyczą sposobu działania modułu i integracji z motywem, natomiast właściwa reguła ceny jest definiowana niezależnie dla każdego produktu.
Instalacja DC Pricelist
Moduł jest przygotowany jako standardowa paczka OpenCart:
dc-pricelist.ocmod.zip
Instalacja wygląda klasycznie:
-
W panelu OpenCart przechodzimy do Extensions → Installer .
-
Przesyłamy plik
dc-pricelist.ocmod.zip. -
Następnie otwieramy Extensions → Extensions .
-
Wybieramy typ Modules .
-
Instalujemy Design Cart Pricelist .
-
Otwieramy konfigurację modułu.
-
Ustawiamy opcje globalne i zapisujemy.
-
Następnie otwieramy produkt, dla którego chcemy uruchomić cenę wymiarową.
-
Przechodzimy do nowej zakładki DC Pricelist .
-
Włączamy regułę i konfigurujemy sposób liczenia.
Podczas instalacji moduł tworzy własną tabelę:
{prefix}dc_pricelist_product
Przechowywane są w niej reguły cenowe przypisane do produktów.
Rejestrowane są również Events potrzebne do integracji z formularzem produktu, kartą produktu oraz dodawaniem do koszyka.
Zakładka „Ogólne”
Główny panel modułu został podzielony na trzy zakładki:
Ogólne , Selektory oraz Tłumaczenia .
Pierwsza jest bardzo prosta.
| Opcja | Działanie |
|---|---|
| Status modułu | Włącza lub wyłącza DC Pricelist na froncie. |
| Domyślna jednostka | Określa początkową jednostkę dla nowych konfiguracji produktów: cm albo m. |
Jeżeli status modułu jest wyłączony, pola wymiarów nie są wyświetlane klientowi.
Domyślna jednostka nie nadpisuje istniejących produktów. Jest po prostu wartością startową podczas tworzenia nowej reguły.
Zakładka „Selektory”
To jedna z tych rzeczy, które dodałem po doświadczeniach z niestandardowymi motywami OpenCart.
Można przygotować rozszerzenie idealnie współpracujące z domyślnym motywem, a później trafić na template, w którym cena, formularz i przycisk koszyka mają całkowicie inną strukturę HTML.
Zamiast za każdym razem modyfikować JavaScript, DC Pricelist pozwala skonfigurować selektory CSS bezpośrednio z panelu.
Kontener pól wymiarów
Domyślna wartość:
#product
Określa element, względem którego mają zostać umieszczone pola szerokości, wysokości albo długości.
Pozycja wstrzyknięcia
Do wyboru są cztery sposoby:
| Pozycja | Znaczenie |
|---|---|
| before | przed wskazanym elementem |
| after | za wskazanym elementem |
| prepend | na początku elementu |
| append | na końcu elementu |
Domyślnie wykorzystywany jest:
prepend
.
Daje to sporą swobodę bez modyfikowania Twig.
Element ceny
Domyślnie:
#product .price, .price
To element, którego zawartość DC Pricelist podmienia podczas dynamicznego przeliczania ceny.
Jeżeli custom theme wykorzystuje np.:
.product-price-current
wystarczy podać odpowiedni selektor.
Przycisk „Dodaj do koszyka”
Domyślnie:
#button-cart
Ten element jest blokowany do momentu podania poprawnych wymiarów.
Przy niestandardowym motywie ponownie możemy wskazać własny selector.
Wbudowane fallbacki dla motywów
Nie trzeba od razu konfigurować wszystkich selektorów ręcznie.
DC Pricelist posiada również listę wartości awaryjnych.
Dla kontenera pól szuka między innymi:
#product
form[action*="checkout/cart/add"]
.product-info
#content
Dla ceny:
#product .price
h2 .price
.product-price
.price
[itemprop="price"]
a dla przycisku koszyka między innymi:
#button-cart
oraz typowych wariantów wykorzystywanych przez motywy OpenCart.
Jeżeli główny selector nie zostanie znaleziony, JavaScript próbuje kolejnych fallbacków.
To nie daje oczywiście gwarancji współpracy z każdym motywem napisanym kiedykolwiek dla OpenCart, ale znacząco ułatwia integrację.
Dodatkowy fallback dla własnych motywów
Standardowy OCMOD próbuje umieścić markup DC Pricelist w szablonie produktu po:
<div id="product">
ale przy całkowicie zmodyfikowanym Twig taki punkt może nie istnieć.
Dlatego moduł posiada drugi mechanizm.
Jeżeli gotowego
#dc-pricelist
nie ma w wygenerowanym HTML, kontroler dokłada ukryte źródło markupu przy końcu strony, a JavaScript sam przenosi je do miejsca wskazanego przez skonfigurowany selector.
Jeżeli nawet wskazany selector nie zostanie znaleziony, ostatnim fallbackiem pozostaje
#content
, a później
body
.
Wolałem, żeby pola pojawiły się w mniej idealnym miejscu niż żeby moduł całkowicie zniknął bez żadnej informacji.
Zakładka „Tłumaczenia”
Wszystkie najważniejsze teksty wyświetlane klientowi można ustawić osobno dla każdego języka zainstalowanego w OpenCart.
W panelu znajdują się:
| Pole | Przykładowa wartość |
|---|---|
| Etykieta szerokości | Szerokość |
| Etykieta wysokości | Wysokość |
| Etykieta długości | Długość |
| Jednostka cm | cm |
| Jednostka m | m |
| Tytuł sekcji | Wymiary |
| Brak wymiarów | Uzupełnij wymagane wymiary. |
| Poniżej minimum | Wartość jest zbyt mała (min. %s). |
| Powyżej maksimum | Wartość jest zbyt duża (max. %s). |
| Nieprawidłowa liczba | Podaj poprawną liczbę. |
W komunikatach minimum i maksimum można wykorzystać:
%s
Moduł podstawi tam konkretną wartość graniczną.
Czyli tekst:
Wartość jest zbyt mała (min. %s).
może zostać pokazany jako:
Wartość jest zbyt mała (min. 50).
Zakładka DC Pricelist w edycji produktu
Najważniejsza konfiguracja odbywa się już nie w głównym panelu modułu, ale bezpośrednio w karcie produktu.
DC Pricelist przez Events dodaje własną zakładkę do formularza edycji produktu.
Znajdują się tam następujące ustawienia.
Włącz cenę wymiarową dla tego produktu
To główny przełącznik.
Jeżeli jest wyłączony, produkt zachowuje się jak zwykły produkt OpenCart.
Dzięki temu moduł może być zainstalowany w sklepie zawierającym tysiące produktów, ale aktywny tylko dla tych, które rzeczywiście są sprzedawane na wymiar.
„Cena dotyczy”
Tutaj wybieramy jeden z pięciu modeli:
-
Szerokość,
-
Wysokość,
-
Długość,
-
Metr kwadratowy,
-
Obwód.
Zmiana typu powoduje również automatyczną zmianę sekcji limitów.
Panel nie pokazuje pól, które dla danego wzoru nie są potrzebne.
Jednostka wpisywana przez klienta
Dla każdego produktu można niezależnie wybrać:
cm
albo:
m
.
Domyślna jednostka z konfiguracji globalnej służy tylko jako ustawienie początkowe.
Możemy więc posiadać w jednym sklepie roletę konfigurowaną w centymetrach i przewód sprzedawany w metrach.
Cena za jednostkę miary
To najważniejsza wartość konfiguracji produktu.
Jeżeli wybieramy:
m²
wpisujemy cenę za 1 metr kwadratowy.
Jeżeli:
Długość
wpisujemy cenę za 1 metr długości.
Jeżeli:
Obwód
jest to cena za 1 metr obwodu.
Pole obsługuje dokładność do czterech miejsc po przecinku, co może mieć znaczenie przy produktach posiadających bardzo małą cenę jednostkową.
Limity produktu
Ostatnią częścią zakładki są opcjonalne minima i maksima.
Nie trzeba ich ustawiać.
Jeżeli jednak produkt ma ograniczenia technologiczne, możemy np. skonfigurować:
minimalna szerokość: 50 cm
maksymalna szerokość: 250 cm
minimalna wysokość: 50 cm
maksymalna wysokość: 300 cm
Frontend automatycznie wykorzysta te wartości do walidacji.
Backend sprawdzi je ponownie przed dodaniem do koszyka.
Dane wymiarowe jako część pozycji koszyka
To rozwiązanie jest ważne również od strony architektury OpenCart.
DC Pricelist zapisuje dane w specjalnym kluczu:
dc_pricelist
wewnątrz danych opcji koszyka.
Dzięki temu cena i parametry dotyczą konkretnej pozycji.
Nie zapisuję więc gdzieś globalnie informacji:
aktualna szerokość klienta wynosi 150 cm.
Dane podróżują razem z pozycją koszyka.
Pozwala to zachować sensowną strukturę także wtedy, kiedy klient dodaje ten sam produkt kilka razy z innymi wymiarami.
Przykład: roleta na wymiar
Załóżmy następującą konfigurację:
Cena dotyczy: metr kwadratowy
Jednostka: cm
Cena za jednostkę: 120 zł
Min. szerokość: 50 cm
Max. szerokość: 250 cm
Min. wysokość: 50 cm
Max. wysokość: 300 cm
Klient wpisuje:
Szerokość: 150 cm
Wysokość: 220 cm
DC Pricelist przelicza:
150 cm = 1,5 m
220 cm = 2,2 m
a następnie:
1,5 × 2,2 × 120 = 396 zł
Cena na stronie zmienia się na 396 zł.
Po dodaniu produktu do koszyka 396 zł zostaje zapisane jako rzeczywista cena pozycji, a obok produktu pojawia się informacja o wymiarach.
Przykład: przewód na metry
Drugi produkt może posiadać:
Cena dotyczy: długość
Jednostka: m
Cena za jednostkę: 12,50 zł
Klient wpisuje:
7,5 m
Wynik:
7,5 × 12,50 = 93,75 zł
Nie potrzebuję wariantów:
1 m, 2 m, 3 m, 4 m...
Klient sam określa potrzebną długość.
Przykład: element wyceniany z obwodu
Przy elemencie o szerokości:
120 cm
i wysokości:
80 cm
otrzymujemy po przeliczeniu:
1,2 m
oraz:
0,8 m
.
Obwód:
2 × (1,2 + 0,8) = 4 m
.
Jeżeli cena wynosi:
25 zł / m
wynik końcowy to:
100 zł
.
Cała logika pozostaje taka sama — zmienia się wyłącznie wzór przypisany do produktu.
Events i OCMOD – co robi które rozwiązanie?
W tym module wykorzystuję oba mechanizmy.
OpenCart Events obsługują między innymi:
-
dodanie zakładki DC Pricelist do formularza produktu,
-
zapis konfiguracji produktu,
-
przygotowanie kalkulatora na karcie produktu,
-
walidację przed dodaniem do koszyka.
Natomiast niewielki OCMOD odpowiada za dwa miejsca, których nie chciałem obchodzić bardziej skomplikowaną konstrukcją.
Pierwsze to próba osadzenia markupu pól w typowym
product.twig
.
Drugie, znacznie ważniejsze, to warstwa koszyka, w której trzeba zastąpić standardową cenę produktu wartością obliczoną przez DC Pricelist oraz dołączyć czytelną informację o wymiarach do
option_data
.
Dzięki temu nie buduję własnego systemu koszyka. Nadal korzystam z natywnego OpenCart, zmieniając wyłącznie tę część, która musi wiedzieć o indywidualnej cenie produktu.
Własna tabela jest bardzo mała
DC Pricelist tworzy tylko jedną tabelę:
dc_pricelist_product
z prefiksem aktualnej instalacji OpenCart.
Przechowywane są tam:
-
ID produktu,
-
status,
-
typ kalkulacji,
-
jednostka,
-
cena jednostkowa,
-
minimalna szerokość,
-
maksymalna szerokość,
-
minimalna wysokość,
-
maksymalna wysokość,
-
minimalna długość,
-
maksymalna długość.
Nie zapisuję tam zamówień ani osobnych kopii produktów.
Tabela przechowuje jedynie reguły potrzebne do obliczenia ceny.
Co dzieje się przy odinstalowaniu?
Tutaj warto zwrócić uwagę na jedną rzecz.
Odinstalowanie DC Pricelist usuwa również tabelę:
dc_pricelist_product
.
Oznacza to, że zapisane konfiguracje cen wymiarowych produktów zostaną usunięte.
Dlatego przed odinstalowaniem modułu z działającego sklepu, w którym przygotowano już wiele produktów, zdecydowanie warto wykonać backup bazy danych.
Samo wyłączenie statusu modułu nie usuwa konfiguracji.
Do jakich sklepów może się przydać?
Lista zastosowań jest dość szeroka.
Przede wszystkim widzę tutaj:
-
rolety i żaluzje,
-
moskitiery,
-
szkło i lustra,
-
płyty i blaty,
-
wykładziny,
-
tkaniny,
-
przewody i kable,
-
profile i listwy,
-
elementy aluminiowe,
-
produkty cięte na długość,
-
ramy,
-
materiały sprzedawane za m²,
-
elementy wykonywane według szerokości lub wysokości.
Nie twierdzę oczywiście, że pięć prostych wzorów obsłuży każdy możliwy konfigurator produkcyjny.
Jeżeli cena zależy od kilkunastu parametrów, tabel technologicznych, kolorów, okuć, systemów profili i skomplikowanych zależności, wtedy potrzebny jest pełnoprawny konfigurator.
DC Pricelist celowo jest prostszy.
Ma rozwiązać przypadek:
„mam produkt na wymiar i jego cenę można policzyć prostym wzorem”.
DC Pricelist a pełny konfigurator produktu
To ważne rozróżnienie.
Przy bardziej skomplikowanych wdrożeniach tworzę konfiguratory, w których wybór jednego elementu wpływa na kolejne opcje, cena powstaje z wielu tabel, a produkt ma dziesiątki zależności.
DC Pricelist nie próbuje tego zastępować.
Tutaj idea jest inna.
Jeżeli do obliczenia ceny wystarczy:
cena × długość
albo:
cena × szerokość × wysokość
to budowanie ogromnego konfiguratora byłoby po prostu przesadą.
Czasem potrzebujemy młotka, a nie całego warsztatu.
I właśnie w tej przestrzeni ma działać DC Pricelist.
Podsumowanie
DC Pricelist powstał z bardzo konkretnego problemu: jak sprzedać w OpenCart 3 produkt, którego ceny nie znamy, dopóki klient nie poda jego wymiarów?
Zamiast tworzyć setki wariantów albo ręcznie przygotowywać ogromne tabele cenowe, możemy przypisać do produktu cenę jednostkową i jeden z pięciu wzorów kalkulacyjnych.
Klient podaje szerokość, wysokość albo długość. Moduł przelicza jednostki, sprawdza minima i maksima, pokazuje cenę na żywo i blokuje koszyk, dopóki dane nie są poprawne.
Co ważniejsze, backend ponownie wykonuje walidację i obliczenie, a wynik staje się rzeczywistą ceną pozycji w koszyku OpenCart .
Wymiary podróżują razem z produktem, standardowe dopłaty z opcji nadal mogą działać, obsługiwane są aktualne waluty klienta, podatki w prezentacji ceny oraz sklepy wielojęzyczne.
Do tego dochodzą konfigurowalne selektory CSS i kilka warstw fallbacków, dzięki czemu moduł można dostosować również do wielu niestandardowych motywów bez przebudowywania jego kodu.
Nie jest to pełny konfigurator produkcyjny i celowo nim nie jest.
DC Pricelist ma zrobić jedną rzecz: pozwolić OpenCart sprzedać produkt, którego cenę trzeba policzyć z wymiarów podanych przez klienta.
I właśnie to robi. 📐🛒
Sklepy internetowe Woocommerce
Sklepy internetowe Opencart
Sklepy internetowe Prestashop
Sklepy internetowe Magento
Strony internetowe Joomla!
Strony Internetowe Wordpress




