Demoda

Egy divatáruház több, mint termékfotók gyűjteménye

A demodashop.hu esetében a vásárló nemcsak egy ruhadarabot választ ki: méretet, színt, fazont és gyakran konkrét centiméteradatokat is összehasonlít. Közben fontos, hogy az akciós ár, az elérhető készlet és a kiválasztott termékváltozat összhangban maradjon. A fejlesztés ezért nem állhatott meg a kezdőoldal megjelenésénél.

A projektben saját, önálló Demoda Custom WooCommerce-sablon működik. Az egyedi frontend megtartja a WordPress tartalomszerkesztését és a WooCommerce kereskedelmi folyamatait, miközben a közös fejléc, a termékkártyák és az egyes oldaltípusok célzott stílusokat és működést kapnak. Ez nem statikus katalógusra cseréli a webáruházat, hanem a meglévő értékesítési rendszert öltözteti a márkához illő felületbe.

Kollekcióbemutatás és saját felületi rendszer

A főoldalon a kollekciók bemutatása, a kategóriák, az újdonságok és a termékajánlók összefüggő vizuális rendszert alkotnak. A szalonos hangulatú nyitóképekhez lapozható megjelenés, navigáció és reszponzív képkiszolgálás készült. A további képek késleltetett betöltése a fölösleges induló képforgalom mérséklését szolgálja.

Az egyedi sablon felépítésénél külön kezeltük a közös oldalkeretezést és a terméklista, a termékadatlap, a kosár és a pénztár felületeit. A normál tartalmi oldalakon szerkeszthető WordPress-tartalom marad; a valóban dinamikus webshoprészeket a WooCommerce működése szolgálja ki.

A tipográfiánál nem azonos méretű szöveget erőltettünk minden eszközre. A mobilos terméknevek és az ajánlóblokkok címei külön finomítást kaptak. A teljes elnevezések megtartása fontos volt: a rövidebb kártyákat nem a terméknevek értelmetlen levágásával alakítottuk ki.

Méretválasztás és centiméteradatok egyedi kezelése

A ruházati kínálatnál az általános S, M vagy L jelölés önmagában nem mindig elég. A projektben a kombinált méretek és az egyedi méretmegnevezések kezelése is szerepet kapott. Javítottuk azokat a mentési helyzeteket, amelyekben egyes méretek centiméteradatai nem maradtak meg megbízhatóan.

A méretadat-szerkesztőt később karbőség, külön első hossz és külön hátsó hossz mezőkkel bővítettük. Az eredeti teljes hossz megmaradt, az új mezők pedig opcionálisak. Ez lehetővé teszi, hogy az eltérő szabású felsők, kabátok, szoknyák és nadrágok leírása pontosabb legyen anélkül, hogy minden termékhez fölösleges, üres oszlopokat kellene mutatni.

Az ellenőrzés nem pusztán abból állt, hogy az új mező látható az adminban. Mentés és újranyitás után visszaolvastuk az adatokat, vizsgáltuk a tizedesvesszőt, az üres mezőket és az eltérő hosszértékeket, majd megnéztük a vásárlói megjelenést és a mobilos belső görgetést is. A tesztértékek nem kerültek valódi ruhamérésként a vásárlók elé.

Termékmentés, színkészlet és vásárolhatóság

Külön fejlesztési feladatot jelentett az egyszerű, egyszínű termékek ár- és készletmentésének javítása. A feltárt helyzetben a korábbi egyedi mentési logika nem a megfelelő natív WooCommerce-adatokat őrizte meg. A célzott javítás az egyszerű és a variálható termékek működését a megfelelő ágon kezeli.

A színenkénti készletkezelésnél egyetlen szín megadását is lehetővé tettük: az egyszínű termékhez nem kell mesterségesen egy második színt létrehozni. A mentésnél a nulla készlet és az utánrendelés állapotának megőrzése is fontos volt. A készlethiány nem technikai hiba, hanem szabályos kereskedelmi állapot, amelyet a rendszernek helyesen kell megjelenítenie.

Az érintett termékek adatai a megadott ügyféladatok alapján helyreálltak, majd admin-, frontend- és valódi kosárpróbát kaptak. Ezt célzott regressziós vizsgálatok és egy teljes katalógusra kiterjedő, csak olvasási ár-, készlet- és vásárolhatósági ellenőrzés egészítette ki. A vizsgálat időponthoz és meghatározott feltételekhez kötött eredmény, nem minden későbbi termékmentésre adott korlátlan garancia.

Valós kedvezményjelzés és rendezés az akciók között

Az általános Akció felirat helyére a tényleges kedvezményt mutató százalékos jelzés került. Variálható termékeknél lényeges, hogy az eredeti és az akciós ár ugyanahhoz a változathoz tartozzon. A közös számítás ezt veszi figyelembe, így nem különböző méretváltozatok áraiból áll össze egy félrevezető százalék.

Az Akciók felületen két új rendezési irány készült: legnagyobb vagy legkisebb kedvezmény elöl. A sorrend a lapozás előtt alakul ki, nem csak az aktuálisan megjelenített néhány kártyát rendezi át a böngésző. Ez azért fontos, mert egy többoldalas terméklistában csak így marad következetes a teljes kínálat sorrendje.

A méret- és színszűrők megtartása, a laphatárok, a stabil sorrend és a korábbi ár szerinti rendezés is az ellenőrzés része volt. A fejlesztés közben nem változtattuk meg a termékek árát vagy a kedvezmény mértékét: a megjelenítés és a kereshetőség módja lett pontosabb.

Mobil navigáció, galéria és rendezett termékkártyák

A mobilos felületen a keresés, az akciók, a kedvencek, a kosár és a pénztár közvetlen elérése kapott hangsúlyt. A telefonos kapcsolat és az akciós kínálat kiemelése a nagyobb képernyős fejlécben is megjelent. A mozgó kiemelések a csökkentett mozgást kérő beállítást is figyelembe veszik.

A termékkártyák belső elrendezését úgy alakítottuk át, hogy a hosszabb és rövidebb nevek mellett az árak és kosárgombok soron belül rendezettek maradjanak. Ehhez nem volt szükség a nevek levágására. A fekvő és álló fotók megfelelő, torzításmentes megjelenítése a lapozott képeknél is külön javítást kapott.

A termékgalériánál az ügyfél kérésére megszüntettük a nagyítást és a külön képfájlra navigálást, miközben a normál galérialapozás és a színhez tartozó képváltás megmaradt. Mobilon egy felső képszámláló is készült, amely az alsóval együtt követi az aktív képet. A képernyőolvasó számára nem dupláztuk a változás bejelentését.

Az oldallapozó olvasható, nem összenyomódó vezérlőket kapott. Szükség esetén több sorba rendeződik, az aktuális oldal pedig egyértelműen kiemelt. Ezek olyan használati részletek, amelyek hosszabb böngészésnél sokkal fontosabbak lehetnek egy újabb dekorációs elemnél.

Stabil fejléc és a látogatói hozzájárulás átadása

A görgetéskor összecsukódó fejlécnél javítottuk a villódzást és a tartalom visszaugrását okozó helyfoglalást. A nagy és a kompakt fejléc közötti különbséget a rendszer következetesen kezeli, az össze- és visszanyitás eltérő küszöbe pedig megszünteti a határ körüli oda-vissza kapcsolgatást. A módosítás különböző nézetméreteken és valódi görgetési próbákkal kapott ellenőrzést.

A mérési integrációban a Complianz látogatói döntéseinek és a WooCommerce GA4-kapcsolatának együttműködésével is dolgoztunk. A WP Consent API és az egyedi hozzájárulás-átadó kiegészítő a tényleges statisztikai és marketingválasztást szinkronizálja. Nem ad automatikus engedélyt a látogató helyett, nem cserél mérési azonosítót, és nem gyárt saját vásárlási eseményeket.

A weboldali próbák során külön vizsgáltuk az elfogadást, a csak statisztikai hozzájárulást és az elutasítást. A weboldalról induló kérések ellenőrzése ugyanakkor nem azonos a teljes Analytics- vagy hirdetési fiók minden diagnosztikai jelzésének lezárásával.

Mitől összetett ez a WooCommerce-referencia?

A Demoda munkái a vásárlói felület és az adminisztráció közötti kapcsolatot mutatják meg. A szép termékkép akkor hasznos, ha megfelelően jelenik meg a listában, a méretadat akkor értékes, ha mentés után is megmarad, a kedvezményjelzés pedig akkor meggyőző, ha ugyanabból az árból számol, amit a vásárló lát.

Az egyes fejlesztéseket célzott tesztek, újranyitás utáni adatellenőrzés és több nézetméreten végzett frontend-próbák követték. A projekt esettanulmánya ezért nem egyetlen új főoldalról szól, hanem egy önálló, egyedileg fejlesztett ruházati webáruház folyamatos finomításáról. A külön mérési blokk a megjelölt nap teljesítményadatait mutatja; nem állít kitalált forgalom- vagy konverziónövekedést.

Gyakori kérdések a megoldásról

Kapcsolódó szolgáltatások

Hasonló rendszer kialakításához vagy meglévő weboldalad továbbfejlesztéséhez az alábbi területeken tudok segíteni.