KÄYTÄ AINA tätä taitoa työskennellessäsi verkkokaupan myymälöissä, verkkokaupoissa ja ostossivustoissa. Käytä MIHIN TAHANSA myymäläkomponenttiin, mukaan lukien kassasivut, ostoskori, …
npx clawhub@latest install storefront-best-practicesStorefront Best Practices on kattava ohjaamistyökalu modernien, hyvin konvertoivien verkkokaupan myymälöiden rakentamiseen. Se tarjoaa malleja, päätöskehyksiä ja taustaintegraation työnkulkuja, jotka kattavat jokaisen ostokokemuksen osan — etusivusta ja navigoinnista ostoskoriin, kassalle ja tilausvahvistukseen. Asenna se varmistaaksesi, että myymäläsi noudattaa todistettuja UI/UX-malleja, välttää kriittiset toteutusvirheet ja pysyy yhtenäisenä kaikissa komponenteissa ja sivuilla.
npx clawhub@latest install storefront-best-practicesNapsauta Asenna-painiketta sivun yläosassa yhdellä napsauksella tapahtuvaa asennusta varten
Ennen kuin kirjoitat mitään koodia, joka kutsuu backend-API:a tai SDK:ta, taito pakottaa noudattamaan 5-vaiheista työnkulkua: pysähdy, tee kysely dokumentaatioon tai MCP-palvelimeen, vahvista metodi käyttäjän kanssa, kirjoita koodi ja tarkista sitten TypeScript-virheet. Tämä estää arvailtujen metodinimien käytön, vanhentuneet esimerkit ja äänettömät ajonaikaiset virheet.
Taito yhdistää jokaisen kauppatehtävän — kassaprosessin, tuotelistauksen, navigoinnin, SEO:n, mobiilioptimoinnin, Medusa-integraation ja muuta — tiettyyn viitetiedostoon (esim. reference/layouts/checkout.md, reference/medusa.md). Se määrittää täsmälleen, mitkä tiedostot tulee ladata ennen kunkin ominaisuuden toteuttamista, varmistaen että käytännöt soveltuvat johdonmukaisesti.
Kattaa verkkokauppojen kannalta merkittävät, myymälänäkymille yksilölliset säännöt: aria-live="polite" ostoskorin laskureille ruudunlukijoita varten, env(safe-area-inset-bottom) iOS:n kiinteitä painikkeita varten, vähintään 44 pikselin kosketuskohteet, pakollinen loading="lazy" tuotekuville sivun alaosassa sekä emojien käytön kielto myymälän käyttöliittymässä.
Tarjoaa oikeat dynaamiset reititysmallit Next.js:lle (App ja Pages Router), SvelteKit:lle, TanStack Start:lle ja Remix:lle tuote- ja kategorisivuja varten. Varoittaa selkeästi staattisista kohdekohtaisista reiteistä, jotka eivät skaalaudu.
Kattaa Medusa SDK:n alustamisen (julkaistavissa oleva API-avain vaaditaan), oikean hintojen näyttämisen (älä jaa sadalla), region_id-vaatimuksen tuotteita haettaessa, CORS-porttikäytännöt (8000), Vite SSR -konfiguraation, @medusajs/types-pakettien käytön mukautettujen tyyppien sijaan sekä ostoskorin tilan tyhjentämisen tilauksen tekemisen jälkeen.
Luokiteltu lista yli 30 nimetystä anti-patternista, jotka kattavat ostoskorin/navigoinnin, tuoteselaimen, kassan, mobiilikäytön, hakukoneoptimoinnin, suorituskyvyn, suunnittelun johdonmukaisuuden ja taustaintegraation — jokainen muotoiltu konkreettisena ❌-sääntönä tarkistettavaksi ennen toteutusta ja sen aikana.
Taito tarjoaa 10-vaiheisen peräkkäisen työnkulun löytämisvaiheesta (design.md:n lataaminen) perustuksen, ydinkomenttien, ostosvirran ja optimoinnin kautta. Jokainen vaihe viittaa tarkasti ladattavaan tiedostoon ennen toteutusta, mikä varmistaa, ettei mitään jää huomaamatta ja tyylit pysyvät yhtenäisinä.
Ohjaa kassaarkkitehtuurin päätöksiä (yksisivuinen vs. monivaiheinen), varmistaa, että maksutavat haetaan taustajärjestelmästä sen sijaan, että ne kovakoodataan, merkitsee vieraskassan vaatimuksen ja tarjoaa Medusa-kohtaiset maksuintegraation vaiheet tiedostojen reference/layouts/checkout.md ja reference/medusa.md kautta.
Kattaa SDK:n käyttöönoton, alue- ja hinnoittelumallit, tuotteiden haun region_id-parametrilla, ostoskorin alueeseen rajatut maaluettelot, Vite SSR -konfiguraation sekä Medusa MCP -palvelimen käytön metodien varmentamiseen — estäen yleisimmät Medusa-storefrontin integrointivirheet.
Ohjaa kehittäjät tiedostoon reference/mobile-responsiveness.md kosketuskohteiden kokojen, turvavyöhykkeiden reunusten ja kuvaoptimoinnin osalta, sekä tiedostoon reference/seo.md Product JSON-LD -skeeman, metatagien, Open Graphin ja Core Web Vitals -mittauksen (PageSpeed Insightsin avulla) osalta.
Taito itse ei vaadi ulkoisia API-avaimia tai maksullisia palveluja.
reference/-tiedostoja (esim. reference/design.md, reference/medusa.md, reference/layouts/checkout.md). Taito ohjaa agentin lataamaan nämä tiedostot; niiden täytyy olla olemassa työtilassa.npx clawhub@latest install storefront-best-practicesKirjaudu sisään kirjoittaaksesi arvostelun
Ei arvosteluja vielä. Ole ensimmäinen jakamaan kokemuksesi!