Webáruház építése: termékek, kosár, fizetés és készlet

Egy webáruházhoz szükséged van termékkatalógusra, kosárra, olyan fizetésre, amely egy szolgáltatón keresztül történik (például Stripe), módszerre a rendelések rögzítésére és a készlet csökkentésére, valamint egy adminfelületre a rendelések teljesítéséhez. Egy AI-alapú appépítő ezt mind össze tudja állítani egy világos leírás alapján. A legtöbb gondolkodást nem a bolti felület igényli, hanem a pénzzel kapcsolatos részek: mikor számít egy rendelés kifizetettnek, hogyan foglalódik le a készlet, és hogyan kezeled az adót, a szállítást és a visszatérítéseket.

Egyedi bolt vagy Shopify? Ezt döntsd el először

Legyél őszinte magaddal, mielőtt bármit építenél.

Egy hosztolt kereskedelmi platform (Shopify, Squarespace Commerce, WooCommerce és hasonlók) általában jobb, ha:

• fizikai termékeket adsz el szállítási díjakkal, címkékkel és visszaküldéssel
• sok régióra kell kiszámolnod az adót
• egy nem technikai csapat napi szinten vesz fel termékeket és dolgoz fel rendeléseket
• kiegészítő alkalmazások széles választékát szeretnéd (értékelések, e-mail marketing, hűségprogram)
• több csatornán árulsz, és egyetlen készletszámra van szükséged

A Shopify előfizetése havi díjas, éves fizetés esetén kedvezménnyel, a kártyás fizetések pedig feldolgozási díjat vonnak maguk után. Az árakat az adott ország árazási oldalán ellenőrizd, mert régiónként eltérhetnek.

Egyedi webáruház általában akkor jobb, ha:

• a termék szokatlan: egyedi rendelésre készülő konfigurátorok, foglalás plusz termékek, licencelt digitális letöltések, ügyfelenkénti B2B árlisták
• a bolt egy nagyobb app része (tanfolyamplatform, tagsági oldal, piactér)
• kis katalógust árulsz, és teljes kontrollt szeretnél a dizájn és a fizetési folyamat felett
• a kódot a sajátodnak akarod tudni, és el akarsz kerülni a platformhoz való kötöttséget

Sok kisebb eladónak egy platform a legjobb. Ha az igényeid hétköznapiak, az jó hír, válaszd a rövidebb utat.

Mire van szükség egy webáruházban

Adatok

A vásárláskor érvényes árat tárold minden rendeléstételnél. Ha jövő hónapban megváltoztatod az árat, a régi rendeléseken továbbra is azt kell látnia a vásárlónak, amit valójában fizetett.

Oldalak

• Bolt: főoldal, kategória- vagy kollekcióoldalak, termékoldalak, kosár, átirányítás a fizetéshez, rendelés-visszaigazoló oldal.
• Admin: termékek és készlet, rendelések állapottal (kifizetett, becsomagolt, feladott, visszatérített), vásárlók, egyszerű értékesítési számok.
• Jogi és szabályzati oldalak: szállítás, visszaküldés, adatvédelem és általános szerződési feltételek. A vásárlók vásárlás előtt ezeket keresik, és sok régióban törvény írja elő őket.

Jogosultságok

Hagyd, hogy a vásárlók fiók nélkül is vásárolhassanak: a vendégpénztár kiveszi a felesleges lépést, a fiókok később is jöhetnek. Csak az adminok láthassák a rendeléseket és szerkeszthessék a termékeket: az adminfelületet valódi bejelentkezéssel és szerveroldali ellenőrzéssel védd.

Hogyan működjön a fizetés

Egy egyedi webáruházhoz a legbiztonságosabb minta egy hosztolt fizetési oldal. Stripe-pal így néz ki:

1. A vásárló rákattint a fizetésre. A szervered az adatbázisból újra ellenőrzi az árakat és a készletet — soha nem bízik abban, amit a böngésző küld — és létrehoz egy Stripe Checkout munkamenetet.
2. A vásárló a Stripe oldalán fizet. A bankkártyaadatok nem jutnak el a szerveredhez.
3. A Stripe meghívja az appod webhook végpontját, és jelzi, hogy a fizetés sikeres volt. Csak ekkor jelölöd a rendelést kifizetettnek és csökkented a készletet.
4. A vásárló a visszaigazoló oldalra érkezik, te pedig visszaigazoló e-mailt küldesz.

Két hibát érdemes elkerülni: a „kifizetett” rendelés létrehozását a sikeres fizetés utáni átirányításból (az emberek bezárják a lapot, az átirányítás pedig hamisítható), és a végösszeg böngészőben történő kiszámítását. Mindkettőt könnyű rosszul csinálni egy AI-nak, ha ezt nem mondod meg neki.

A Stripe díjazása sikeres kártyás fizetésenként egy százalékos díjból és egy fix összegből áll, indítási vagy havi díj nélkül (2026 szeptemberi állapot szerint); a pontos mérték az országtól és a kártyától függ. Először mindent a Stripe teszt módjában építs, a teszt kártyaszámokkal. Az alkalmazás fizetéssel való bővítéséről szóló útmutatónk a kulcsokat, a teszt módot és a webhookokat tárgyalja.

Adó-, szállítási és készletdöntések

Ezeket az üzleti döntéseket az AI nem tudja meghozni helyetted:

• Adó. Hogy kell-e felszámítanod az áfát vagy az értékesítési adót, és milyen kulccsal, attól függ, hol vagy te és a vásárlóid. A Stripe erre kínál terméket (Stripe Tax), vagy egyszerű helyzetben fix kulcsokat is beállíthatsz. Ha bizonytalan vagy, kérdezd meg a könyvelődet.
• Szállítás. Kezdj néhány fix díjjal (belföld, nemzetközi, ingyenes egy küszöb felett). A valós idejű futárdíjak és a címkenyomtatás az a terület, ahol a Shopify-hoz hasonló platformok sok munkát megspórolnak.
• Készlet. Döntsd el, hogy a készlet a fizetés indulásakor vagy csak a sikeres fizetéskor foglalódik-e le. Kisebb boltoknál egyszerűbb a fizetéskor csökkenteni a készletet, és közvetlenül a fizetés előtt újra ellenőrizni; ilyenkor előfordulhat, hogy az utolsó darabot kétszer adod el, ezért gondold át, hogyan kezeled ezt. Az üzleten kívüli készletkövetéshez lásd hogyan építs készletkezelő appot.

Egy első prompt, ami működik

Építs webáruházat a Loam & Clay számára, egy kis kerámiastúdió részére, amely bögréket, tálakat és vázákat árul. Bolt: főoldal kiemelt termékekkel, bolt oldal kategória-szűrőkkel, termékoldalak képgalériával, színváltozatokkal és készletállapottal, valamint csúszó kosár. Termékeket, változatokat, rendeléseket és rendeléstételeket adatbázisban tárolj, és vess be 10 valósághű terméket. Adminfelület (bejelentkezés kötelező) termékek szerkesztéséhez, képfeltöltéshez, készlet módosításához, valamint a rendelések megtekintéséhez kifizetett / becsomagolt / feladott állapotokkal. A fizetés gomb egyelőre lehet helyőrző — a Stripe Checkoutot a következő lépésben adjuk hozzá. Meleg, minimalista dizájn, mobilra optimalizálva. Ne írj ki kitalált értékeléseket és „világszerte ingyenes szállítást”.

Az, hogy a fizetés helyőrző marad, szándékos: előbb a katalógus és az adminfelület legyen rendben, a fizetést pedig külön lépésben, megfelelően tesztelhető módon kösd be.

Építési lépések

1. Katalógus és termékoldalak, valós terméknevekkel, árakkal és fotókkal.
2. Kosár, amely oldalfrissítés után is megmarad.
3. Admin: termékek, változatok, készlet, képfeltöltés. Védd be bejelentkezéssel.
4. Stripe Checkout teszt módban, a szerverrel, amely újra ellenőrzi az árakat és a készletet.
5. Webhook, amely kifizetettnek jelöli a rendeléseket és csökkenti a készletet. Teszteld végig egy teszt kártyával.
6. Rendelési e-mailek a vásárlónak és neked.
7. Szabályzatok és SEO: szállítási és visszaküldési oldalak, termékcímek és -leírások, megosztási képek. Lásd SEO az AI-val épített weboldalakhoz.
8. Élesítés: váltás éles Stripe-kulcsokra, egy valódi, kis értékű rendelés leadása saját magadnak, majd a visszatérítés.

Gyakori hibák

• A böngészőből érkező árakban bízni. Mindig a szerveren számold újra.
• A rendelést a sikeres fizetés oldalon kifizetettnek jelölni, a webhook helyett.
• A készletszámok felülírása a mozgások rögzítése helyett — elveszik az információ, hogy miért változott a készlet.
• Szállítási és visszaküldési oldalak nélküli indítás.
• Túl nagy termékképek. Tömörítsd őket, és fájltárhelyről szolgáld ki, ne a kódba ágyazva.
• Kívánságlisták, értékelések és hűségpontok építése az első eladás előtt.

Futási költségek

Számolj ezekkel: tárhely és adatbázis, fizetési feldolgozási díjak minden eladás után, domain, e-mail-szolgáltató a rendelési visszaigazolásokhoz, és esetleg egy adózási szolgáltatás. Az egyedi bolt megspórolja a platform-előfizetést és az alkalmazásdíjakat, de a karbantartás a tiéd: ha a fizetésnél valami elromlik, neked kell megjavítanod.

Ha több eladót szeretnél — több szállítót, akiknek kifizeted a részüket —, az piactér, eltérő fizetési szabályokkal. Lásd hogyan építs piacteret.

Építés Mythexben

A Mythexen leírod a boltot, és az ügynök egy élő előnézetben felépíti a katalógust, a kosarat és az adminfelületet, a termékekhez és rendelésekhez Postgres adatbázissal, a termékképekhez pedig fájltárhellyel. A dokumentáció webáruház használati esete pontosan a fenti sorrendet javasolja: előbb a katalógus, a fizetés később.

A fizetés a saját Stripe-fiókodat használja: a Stripe-kulcsokat projekt-titkosként adod hozzá, és megkéred az ügynököt, hogy adja hozzá a Checkoutot, majd az előnézetben a Stripe teszt kártyáival tesztelsz (Stripe-recept). A webhookokhoz nyilvános URL kell, ezért publikáld az appot, mielőtt a Stripe-ban beállítanád őket (webhook-recept). Az adózás, a szállítás és a készletszinkron nem beépített Mythex-funkciók, és nincs natív Shopify-integráció — ha ezekre kész terméket szeretnél, a Shopify a jobb választás. Kiindulópontnak nézd meg a bolti sablonokat, például az e-kereskedelmi boltot.

Kérdések