shopfront

Ladenfront

• Einführung und Inspiration
• Statischer Hugo-Client, nur MVP

Abhängigkeiten

• Hugo
• npm

Installation und lokale Entwicklung

 npm i
npm audit fix

Hier finden Sie Ihren geheimen Stripe-Schlüssel. (Erwägen Sie die Verwendung von /test/apikeys während des Tests).

 echo STRIPE_SECRET=sk... > .env
edit config.toml
hugo server

Produkterstellung

Erstellen Sie Produkte im content/2020/

Produktinhaltsdatei

Struktur des Produktinhalts:

 content/YYYY/SKU/index.md

In content/2020/wrt1/index.md ist Front Matter die einzige Quelle der Wahrheit für das Produkt . Von public/*/index.json aus wird die Produktliste in JSON über make mit dem Backend von Stripe synchronisiert.

Die einzelnen Produktseiten verweisen dann über Hugo Data-Vorlagen auf die erforderliche Nur-Kunden-Checkout- Preis-ID aus dem data/price .

Mit Stripe synchronisieren

Sie müssen Ihr Produkt nicht auf Streifen erstellen; stripe-sync.sh erledigt dies für Sie.

 make

Veröffentlichen Sie es auf Ihrer Website

Verschieben Sie den Inhalt von public auf Ihren Webserver.

Nur Stripe-Client-Modus

• https://useshoppingcart.com/usage/cartprovider#client-only-checkout-mode

Datenstruktur

Folgt dem von https://useshoppingcart.com/usage/cartprovider/ in layouts/_default/single.html .

Liefermöglichkeiten

Wie kann man Lieferbeschränkungen so schnell wie möglich bekannt geben, um niemanden Zeit zu verschwenden?

Beispielsweise fragt https://online.vicsmeat.com.au/ sofort nach einer Postleitzahl.

Lösung: Bieten Sie eine Schaltfläche an, um GPS zu aktivieren, um ihren Standort automatisch auszufüllen, ihnen aber auch die Eingabe zu ermöglichen.

Stripe verfügt über eine „shipping_address_collection.allowed_countries“ , wie in der „validateCartItems“-Sitzung dokumentiert