bring Wallet 01: egytermékes prémium webshop nulláról élesig

Egy termék, egy márka, egy mozdulat. A bringwalet.com a bring első termékének, a Wallet 01 kártyatartó pénztárcának a webshopja – előrendeléssel, két nyelven, két pénznemben, és olyan gyorsan, hogy mobilon 1,1 másodperc alatt kész.

Kiindulás: egy kész design tervezet

A megrendelő részletes design tervezetet adott át – tokenek, tipográfia, komponensek, mozgás, teljesítménycélok –, mellé 11 asztali és mobil moodboard-táblát, 26 saját termékfotót és a logócsomagot. A fejlesztés mobil-első szemlélettel indult: minden szekciót 390 px-es iPhone-kijelzőre terveztünk, az asztali nézet ebből bővül.

Amit a boltnak tudnia kellett

• Előrendelés azonnali kártyás fizetéssel, maximálható darabszámmal.
• Kétnyelvű bolt (magyar, angol), forintos és eurós árakkal.
• Szállítás Magyarországra és az EU-ba: GLS és MPL futár, csomagpont, ingyenes szállítás összeghatártól.
• Számlázás online számlázóval, kuponok, vásárlói fiók, hírlevél, hirdetési mérés.
• Minden tartalom és beállítás az adminból szerkeszthető.

A design szabályai

Minden szín, térköz és mozgásérték egyetlen tokenfájlból jön. A tiltólista szigorú: nincs lekerekítés, árnyék, színátmenet, karusszel, parallax, emoji és kitalált szám. Egyetlen „aláíró mozgás” van: a görgetésre kinyíló tárca. A teljesítménycélok: LCP 2,5 másodperc alatt, CLS 0,1 alatt, első betöltés legfeljebb 800 KB, JavaScript legfeljebb 100 KB.

Felépítés: egy alkalmazás, build-lépés nélkül

A bolt, az admin felület és az összes integráció egyetlen Laravel 12-alkalmazásban fut, Filament 3 adminnal és MariaDB adatbázissal. A CSS és a JavaScript kézzel írt, közvetlenül kiszolgált fájl – nincs build-lépés, és ez a teljesítménycélokat is segítette. A kód nagyjából 6 700 sor PHP, 1 670 sor sablon, 790 sor CSS és 480 sor JavaScript; az alkalmazás 98 saját útvonalat szolgál ki, a két nyelv külön, lefordított URL-ekkel.

A felület

A design tervezet tokenjei egy az egyben a tokens.css fájlba kerültek: hat szín (fekete, négy betonárnyalat, fehér), 375 és 1440 px között folyékonyan skálázódó térközök, tipográfiai skála és mozgásgörbék. A komponensekben nincs beégetett szín, betűméret vagy lekerekítés.

Főoldal: hét szekció, mind más szerkezetű

• Nyitány: teljes képernyős makrófotó, üvegfejléc, lépcsőzetes belépő animáció, mobilon külön kivágás.
• A jelenet: ragadós görgetési szakasz, ahol a görgetés vezérli a három lépést – Zárva, Nyomás, Nyitva. Csökkentett mozgásnál és JavaScript nélkül három állókép jelenik meg.
• Működés: képrács és számozott funkciólista, mobilon vízszintesen lapozható képsor.
• Részletfotó, adatlap, márka, előrendelés: teljes szélességű kép, kétoszlopos műszaki táblázat 1 px-es vonalakkal, keskeny szöveghasáb, és fekete előrendelési szekció a hátralévő kerettel.

Képek, amik nem ugranak

Minden feltöltött kép automatikusan öt szélességben (480–2400 px) és három formátumban (AVIF, WebP, JPEG) készül el, méretmegadással, így betöltéskor nem ugrik az elrendezés. A termékfotók háttere eredetileg szürkés volt, ezért egy képenként állítható fehérpont-korrekció tiszta fehérre hozza őket, hogy a fotó határ nélkül olvadjon az oldalba. Egy 720 px-es termékfotó AVIF-ben néhány KB.

Akadálymentesen, mobilra

Látható fókuszkeret, fókuszcsapda a mobilmenüben, magyar és angol alt szöveg minden képen, 44 × 44 px-es érintési célok, 16 px-es űrlapmezők (az iOS nem nagyít), biztonságos területek a Dynamic Island és a home-jelző körül, valamint csökkentett mozgás és csökkentett átlátszóság támogatása.

Rendelés: kosártól a számláig

A rendelés a pénztárban jön létre, és a darabszám ekkor azonnal lefoglalódik, adatbázis-zárolással – így egy szűkös előrendelési keretet egyidejű vásárlók sem tudnak túllépni. A fizetés a Stripe saját oldalán történik, a kártyaadatok nem érintik a rendszert.

A fizetetlen rendelések két óra után lejárnak, és a lefoglalt darab visszakerül a keretbe – előtte a rendszer még a Stripe-nál is ellenőrzi, nem fizettek-e mégis.

Integrációk

• Stripe: Checkout, öt visszaigazolási esemény (sikeres, aszinkron sikeres és sikertelen fizetés, lejárat, visszatérítés), visszatérítés az adminból.
• OTP eBIZ: számla kiállítása, PDF, sztornó, számlatömb- és bankszámlaválasztó az adminban; eurós számla MNB-árfolyammal, a kedvezmény külön sorban. Az első integráció egy régi felületre épült, a kapott OpenAPI-leírás alapján átírtuk a jelenlegi REST API-ra.
• MNB: hivatalos napi középárfolyam az eurós számlákhoz.
• Meta: böngészős Pixel és szerveroldali Conversions API, közös eseményazonosítóval, így a Meta a két eseményt egynek számolja.
• Google: GA4 és Google Ads vásárlás-konverzió, egy rendelés csak egyszer számít.
• Termékkatalógus: négy feed (Google és Meta, HU/HUF és EN/EUR) árral, elérhetőséggel, előrendelési dátummal, képekkel és országonkénti szállítási díjjal.
• Szállítás és e-mail: a GLS csomagpont-térkép csak megnyitáskor töltődik be; márkázott, adminból szerkeszthető levelek.

A számlázó és a hírlevél egy-egy cserélhető modulra épül: új szolgáltató egy új osztállyal beköthető, a meglévő kód változtatása nélkül.

Admin: minden állítható

A Filament-alapú admin 8 adatkezelőt (rendelések, termékek, kuponok, szállítási zónák, médiatár, oldalak, hírlevél-feliratkozók, fiókok), 7 beállítási oldalt és 3 vezérlőpult-widgetet tartalmaz. A fordítható mezőket mindenhol egymás melletti HU/EN mezőpár szerkeszti. A főoldal minden szövege és képe, a jelenet lépései, a menü, a keresőcímek sablonjai és az integrációk kulcsai is innen állíthatók; a titkos kulcsok titkosítva tárolódnak.

Keresőoptimalizálás

• Strukturált adatok: termék és ajánlat (ár, elérhetőség, szállítás zónánként, visszaküldés), morzsamenü, GYIK, szervezet és webhely – a schema.org validátora szerint 0 hiba.
• Lefordított URL-ek, hreflang minden oldalon; sitemap képekkel és módosítási dátummal.
• Átnevezett termék vagy oldal régi címe automatikus 301-es átirányítással viszi tovább a látogatót.
• A W3C validátor szerint 0 HTML-hiba minden indexelhető oldalon; automatikus megosztási kép minden oldalhoz.

Mért teljesítmény

A mérések a szerverről készültek; valós mobilhálózaton a betöltés lassabb, de a célokhoz képest nagy a tartalék. A terheléses teszt alapján a jelenlegi beállítás nagyjából 1 000–1 500 egyszerre aktív látogatót szolgál ki kényelmesen.

Minőségbiztosítás

9 automata teszt 62 ellenőrzéssel – oldalak, kosár és pénztár, admin, jogosultságok, szimulált Stripe-visszaigazolások, kupon, lejárat és túlrendelés elleni védelem. A számlázási és Meta-kérések hamisított válaszokkal, visszagörgetett tranzakcióban is tesztelve; vizuális ellenőrzés mobil és asztali szélességben, a moodboard tábláival összevetve.

Hogyan tovább

• Háttérfeldolgozás a fizetés utáni lépésekhez, így a fizetési visszajelzés pár tized másodperc alatt lefut.
• Oldal-gyorsítótár a főoldalhoz és a termékoldalhoz, ami a böngészési kapacitást nagyságrenddel emeli.
• A jelenet 72 kockás képsorozata állványról forgatott videóból – az admin feltöltője és a lejátszás már kész.
• További integrációk és a következő termékek: a rendszer nem kötődik a pénztárcához.

Nézd meg élőben: bringwalet.com