Olvasási idő: 6 perc

837 000 variáció két termékből: egyedi WooCommerce termékkonfigurátor az Artdeának

Endrik Róbert2026. augusztus 25.
EsettanulmányFejlesztés
837 000 variáció két termékből: egyedi WooCommerce termékkonfigurátor az Artdeának

Egy webshopban nem feltétlenül az a nehéz, ha sok termék van. Néha éppen az okozza a problémát, ha egyetlen termékből kell nagyon sok lehetséges változatot kezelni.

Az Artdea fonott rácsvédőket árul kiságyakhoz. Az alapötlet egyszerű volt: a vásárlók ne csak egyszínű fonatot választhassanak, hanem minden szál színéről külön dönthessenek.

Harminc szín és többféle fonat esetén azonban ebből gyorsan kezelhetetlen mennyiségű kombináció lesz.

Erre készítettem egy egyedi WooCommerce termékkonfigurátort.

Az igény: minden szál lehessen más színű

A fonott rácsvédőknél több szálból áll össze a kész termék. A vásárlói igény az volt, hogy ezeket ne csak az előre meghatározott összeállításokban lehessen megrendelni.

A vevő dönthesse el például, hogy az első szál bézs, a második karamell, a harmadik pedig mélyzöld legyen.

Ezt hagyományos termékvariációkkal nem lett volna ésszerű kezelni.

A hármas fonatnál 30 × 30 × 30, vagyis 27 000 lehetséges színösszeállítás van.

A négyes fonatnál ugyanez már 30 × 30 × 30 × 30, vagyis 810 000 lehetőség.

A kettő együtt 837 000 rendelhető színösszeállítást jelent.

Nyilván nem az volt a megoldás, hogy létrehozunk 837 000 termékvariációt.

A termék helyett a konfigurációt kellett kezelni

Ilyen helyzetben szerintem érdemes egy kicsit máshogy nézni a problémára.

Nem 837 000 különböző termékünk van. Van két konfigurálható termékünk, amelyek bizonyos szabályok alapján nagyon sokféleképpen állíthatók össze.

Ez fontos különbség.

Ha minden kombinációt önálló termékként vagy variációként próbálnánk kezelni, abból nemcsak technikai probléma lenne. Az adminisztráció, a módosítás és a későbbi bővítés is nehézkessé válna.

Ezért az Artdea webshopjához egyedi WooCommerce-bővítményt készítettem, amely magát a konfigurációt kezeli.

A vásárló szálanként választ a 30 elérhető színből, a rendszer pedig ezekből állítja össze a rendelhető terméket.

A vásárló rögtön látja az összeállítást

A színnevek önmagukban nem feltétlenül segítenek elképzelni a végeredményt.

Három vagy négy különböző árnyalatnál még nehezebb fejben összerakni, hogyan fognak együtt kinézni egy fonatban.

Ezért a konfigurátor egyik fontos része az élő látványterv.

Amikor a vásárló megváltoztatja valamelyik szál színét, a fonat előnézete azonnal frissül. Így nem három különálló színmintát kell összehasonlítania, hanem egyben látja az összeállítást.

Az előnézet természetesen nem az elkészült termék fényképe, hanem látványterv. A monitorok eltérő színmegjelenítése miatt teljes színazonosságot sem lehet ígérni. Arra viszont alkalmas, hogy a vásárló sokkal könnyebben össze tudja hasonlítani a különböző kombinációkat.

A működő konfigurátor az Artdea egyedi színösszeállítású hármas fonatán is kipróbálható.

A látványterv le is tölthető

Egy ilyen terméknél a döntés nem feltétlenül egyetlen webshop-látogatás alatt születik meg.

Lehet, hogy a vásárló szeretné megmutatni az összeállítást a párjának, összehasonlítani a babaszoba más színeivel, vagy egyszerűen később visszatérni hozzá.

Ezért a konfigurátorban az elkészített látványterv letölthető.

Így nem kell megjegyezni, hogy melyik három vagy négy árnyalat volt kiválasztva. A konkrét összeállítás elmenthető képként.

A konfiguráció nem veszhet el a „Kosárba teszem” gomb után

A látványterv elkészítése csak a feladat egyik fele volt.

A másik fontos kérdés az volt, hogy mi történik a konfigurációval azután, hogy a vásárló kosárba teszi a terméket.

Egy hagyományos webshopnál általában elég egy termékazonosító és néhány variáció. Itt viszont azt is egyértelműen tovább kellett vinni, hogy a vásárló melyik szálhoz melyik színt választotta.

A konfigurátor ezért a konkrét összeállítás képét és a hozzá tartozó színinformációkat is végigviszi a rendelési folyamaton.

Az összeállítás megjelenik:

  • a kosárban;
  • a rendelési adatok között;
  • a visszaigazoló e-mailben;
  • a WooCommerce admin felületén.

Ennek nemcsak kényelmi szerepe van.

A vásárló vissza tudja ellenőrizni, mit rendelt, a webshop üzemeltetője pedig ugyanazt az összeállítást látja, amelyet a vevő elkészített.

A gyártásnak más információra van szüksége, mint a vásárlónak

Volt még egy kevésbé látványos, de a működés szempontjából fontos részlet.

A webshopban használt színnevek és a gyártó által használt színnevek nem feltétlenül ugyanazok.

A vásárlónak olyan megnevezés kell, amely alapján érthetően tud választani. A gyártásban viszont annak a névnek kell megjelennie, amelyet a varró a saját rendszerében használ.

A bővítmény ezért külön kezeli ezt a két megnevezést.

A vásárló a webshop színneveit látja, miközben a rendelés gyártáshoz szükséges részén már a gyártó saját elnevezése jelenik meg.

Ez apróságnak tűnhet, de egy ilyen rendszer értelme éppen az, hogy ne kelljen minden egyedi rendelés után kézzel lefordítani, pontosítani vagy egyeztetni a vásárló választását.

Ugyanaz az adat jut el a vásárlótól a gyártásig

Számomra ennek a fejlesztésnek ez az egyik érdekesebb része.

A konfigurátor nem egyszerűen egy látványos elem a termékoldalon.

A vásárló összeállít valamit, és ez az információ strukturáltan végigmegy a teljes rendelési folyamaton:

színválasztás → látványterv → kosár → rendelés → visszaigazolás → admin → gyártás

Nem kell a rendelés után külön üzenetben megkérdezni, melyik szál milyen legyen. Nem kell egy szabad szöveges megjegyzésből kitalálni a pontos összeállítást. És nem kell manuálisan átírni a vásárló által megadott színeket a gyártás számára.

A vevő azt az összeállítást rendeli meg, amelyet a konfigurátorban látott, a gyártás pedig megkapja az elkészítéséhez szükséges információt.

Nem csak a jelenlegi két fonattípusra készült

A konfigurátor jelenleg hármas és négyes fonatot kezel.

A fejlesztésnél viszont nem akartam két olyan külön megoldást készíteni, amely kizárólag erre a két termékre működik.

A bővítmény úgy készült, hogy később új fonattípus is felvehető legyen.

Ez azért fontos, mert egy egyedi fejlesztésnél nemcsak azt érdemes megoldani, ami ma szükséges. Azt is érdemes végiggondolni, hogy mi az a változás, amely reálisan várható később.

Nem kell minden lehetséges jövőbeli igényre előre rendszert építeni. Az viszont sok későbbi munkát megspórolhat, ha egy nyilvánvaló bővítési irány miatt nem kell majd az egészet újrakezdeni.

Mikor van értelme egyedi WooCommerce-bővítményt készíteni?

Nem minden speciális termékhez kell saját bővítmény.

Ha egy igény egy meglévő WooCommerce-funkcióval vagy egy jól karbantartott bővítménnyel normálisan megoldható, általában nincs sok értelme ugyanazt nulláról újra megírni.

Az egyedi fejlesztés akkor válik érdekesebbé, amikor a termék vagy az üzleti folyamat olyan szabályokat tartalmaz, amelyeket a kész megoldások már csak komoly kompromisszumokkal tudnak kezelni.

Az Artdea esetében nem egyszerűen három vagy négy legördülő mezőre volt szükség.

Egy rendszerben kellett kezelni:

  • a szálankénti színválasztást;
  • az azonnal frissülő látványtervet;
  • a látványterv letöltését;
  • a konfiguráció rendeléshez rögzítését;
  • a vásárlói és gyártói színnevek külön kezelését;
  • valamint a későbbi fonattípusok bővíthetőségét.

Ilyenkor az egyedi fejlesztés előnye nem önmagában az, hogy „egyedi”. Hanem az, hogy pontosan ahhoz a folyamathoz lehet igazítani, amelyet a webshopnak ténylegesen kezelnie kell.

837 000 lehetőségből két kezelhető termék

A végeredmény számszerűen látványos: két terméklapról összesen 837 000 különböző színösszeállítás rendelhető.

De szerintem nem ez a fejlesztés legfontosabb része.

A lényeg inkább az, hogy ezt a 837 000 lehetőséget nem kell 837 000 különálló elemként kezelni.

A vásárlónak van egy egyszerű felülete, ahol összeállíthatja a saját fonatát. A webshop eltárolja, hogy mit választott. A rendeléshez bekerül a látványterv és a szükséges színinformáció. A gyártás pedig olyan formában kapja meg az adatokat, ahogyan arra ténylegesen szüksége van.

Egy jó webshopos egyedi fejlesztésnek szerintem valahol ez a feladata: nem attól lesz hasznos, hogy technikailag bonyolult, hanem attól, hogy egy korábban nehezen kezelhető folyamatot egyszerűbbé tesz.

Ha a webshopodban van olyan termék vagy rendelési folyamat, amelyet a WooCommerce alapból nem tud jól kezelni, egyedi fejlesztéssel abban is tudok segíteni.