commercejs nextjs demo store
1.0.0
Ein hochwertiger vollwertiger E-Commerce-Demo-Laden, der mit dem Commerce.js SDK und Next.js mit Live-Bereitstellung für Netlify erstellt wurde.
Notiz
Diese Readme wird Sie beim Einrichten mit einer vollwertigen E-Commerce-Vorlage führen. Wir haben diese Vorlage für Sie konfiguriert, damit Sie einen Klick direkt für Netlify bereitstellen. Alternativ können Sie manuell für die Auswahl der Hosting -Plattform einsetzen.
Für ein vollständiges detailliertes Tutorial zum Aufbau dieser Jamstack -E -Commerce -Bewerbung finden Sie hier.
yarn global add @chec/cli Nachdem Sie nun die Überprüfung der CLI global installiert haben, können Sie auf die Liste der chec [COMMANDS] zugreifen, von denen eines für ein Scheckkonto registriert wird. Lassen Sie uns das aufstellen!
# Open the Chec registration page in your browser
chec registerFolgen Sie dem Rest des Walk-Through, um Ihre Händlerdetails einzurichten. Alternativ können Sie hierher gehen, um sich für ein Scheckkonto zu registrieren.
Mit dem One-Click-Bereitstellen können Sie Netlify mit Ihrem GitHub-Konto verbinden, um das commercejs-nextjs-demo-store Repository zu klonen und automatisch bereitzustellen. Gehen Sie unbedingt zu Netlify und melden Sie sich für ein Konto an, bevor Sie auf die Schaltfläche Bereitstellung klicken.
Wenn Sie auf die oben genannte Schaltfläche klicken, werden Sie auf die direkte Bereitstellung der Netlify -Bereitstellung navigiert, wobei das Repository des Projekts als Parameter in der URL übergeben wird. Klicken Sie auf die Schaltfläche "Verbindung zu GitHub" herstellen , benennen Sie Ihr Repository und geben Sie in den öffentlichen Taste in den öffentlichen Taste ein. Bitte beachten Sie, dass wir Ihnen den öffentlichen Schlüssel aus unserem Demo -Merchant -Konto zur Verfügung gestellt haben, um Sie mit einer Live -Bereitstellungsvorschau des Demo -Shops zu betreiben. Speichern und bereitstellen Sie jetzt Ihre Website.
Bitte beachten Sie, dass der erste Build fehlschlägt, wenn Sie Ihren öffentlichen Schlüssel anstelle des bereitgestellten Demo -Händlerschlüssels eingeben. Die Einsatzbereitstellung von One-Click-Bereitstellungen ist für Präsentationszwecke gedacht, um einen schnellen Bereitstellen zu verbessern. Wenn Sie Ihr Händlerkonto verwenden, müssen Sie die entsprechenden Daten wie mehrere Vermögenswerte und Kategorien mit Ihren Produkten benötigen. Wenn Sie Ihr Händlerkonto verwenden möchten, befolgen Sie bitte die folgenden manuellen Einrichtungsschritte.
Bei der manuellen Einrichtung wird das Repo in Ihre lokale Umgebung eingerichtet, die bereitgestellten Beispieldaten in Ihr Scheckkonto gesetzt und für Netlify bereitgestellt.
Schritt 1. Klonen Sie das Repo und installieren Sie Abhängigkeiten
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarnSchritt 2. Richten Sie Ihre Umgebungsvariablen ein
Ersetzen Sie das Beispiel .env.example dotenv -Datei zum Stamm des Projekts, um Ihren Check public_key sowie Ihren secret_key zu speichern.
# Copy from source file to destination file .env
cp .env.example .env Sie können auf Ihre API -Taste unter Ihrem Scheck -Dashboard -Setup zugreifen und dann zur Registerkarte "Entwickeln" navigieren, um Ihren öffentlichen Schlüssel und Ihren geheimen Schlüssel zu kopieren. Ersetzen Sie den bereitgestellten NEXT_PUBLIC_CHEC_PUBLIC_KEY durch Ihre eigene und füllen Sie Ihren CHEC_SECRET_KEY in der .env -Datei aus. Der geheime Schlüssel ist erforderlich, damit das Saatgutskript die richtige Erlaubnis hat, die Stichprobendaten in /seeds in Ihr Scheckkonto zu säen. Entfernen Sie den geheimen Schlüssel, sobald die Daten ausgesät wurden.
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =Diese Datei soll nicht für die Quellensteuerung verpflichtet sein und wird auch in Dateibrowsern versteckt.
Schritt 3. Saatgut Die Daten, die zum Stromversorgungsspeicher erforderlich sind, und starten Sie Ihre Entwicklungsumgebung (für die Ersteinrichtung erforderlich).
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn devGehen Sie nun zu http: // localhost: 3000 nach dem Start Ihrer Entwicklung sollte Ihre Website jetzt mit den Beispieldaten besiedelt werden!
Wenn Sie die Beispielprodukte oder -kategorien ersetzen, können Sie Ihre eigenen Kategorien Bilder unter `public/Images/Sammlung anpassen. Weitere Informationen zur Datenanpassung finden Sie unten.
Schritt 5. Nehmen Sie alle erforderlichen Änderungen vor, die Sie benötigen, und drücken Sie den Code in ein Repository auf GitHub oder Ihre Plattformauswahl.
Schritt 6. Bereitstellen Sie Ihre Website bereit
Melden Sie sich unbedingt für ein Netlify -Konto an und melden Sie sich daran an. Klicken Sie auf die neue Site von GIT -Schaltfläche und geben Sie Zugriff, um Ihr Repo auszuwählen. Ihre Build -Einstellungen werden automatisch für Sie von der netlify.toml in der Vorlage ausgefüllt. Um Ihre Umgebungsvariablen einzugeben, klicken Sie auf Erweitert anzeigen, dann neue Variable und füllen Sie die Schlüsseleingabe als NEXT_PUBLIC_CHEC_PUBLIC_KEY und die Werteingabe mit Ihrem öffentlichen Schlüssel ein. Sie können auf Ihre API -Taste in Ihrem Scheck -Dashboard unter Setup zugreifen und dann zur Registerkarte Entwickler navigieren, um Ihre öffentliche Taste zu kopieren
Klicken Sie nun auf die "Bereitstellung von Site", um Ihre Live -Site zu sehen!
In diesem Befehl wird dieses Beispielprojekt von GitHub heruntergeladen und auf Ihrem Computer initialisiert. Sie können den heruntergeladenen Code kostenlos bearbeiten und anschließend mit Commerce.js herumspielen.
Schritt 1. Installieren Sie die Scheck -CLI
npm install -g @chec/cli
# or
yarn add -g @chec/cliSchritt 2. Erstellen Sie einen Demo -Shop
chec demo-store
Wählen Sie "CommerceJS-NextJS-Demo-Store" aufgefordert, einen Demo-Shop aus der Liste auszuwählen. Dieser Befehl sägt auch einige Beispieldaten für Ihr Scheckkonto. Weitere Informationen finden Sie in der Dokumentation der Überprüfung.
Da es sich bei diesem Projekt um ein vollwertiges StoreFront handelt, das einen benutzerdefinierten Design und einen Benutzerfluss zeigt, gibt es bestimmte Vorbehalte, auf die Sie Ihre Daten im Scheck -Dashboard anpassen. Eine Gotcha ist mit den Kategoriendaten in der Benutzeroberfläche: Die Kategorien -Feature -Bilder werden in der Scheck -API als Meta -Daten hinzugefügt. Wenn Sie die Daten der gesetzten Beispielkategorien neu hinzufügen oder das Feature -Image des Kategoriens anpassen, indem Sie Ihre Bildgüter unter public/images/collection ersetzen. Die Dateinamen müssen gleich bleiben. Wenn Sie vorhaben, die Dateinamen zu ändern oder neue Kategorien hinzuzufügen, müssen Sie neue Meta -Daten hinzufügen. Die App erwartet das folgende Inventar -Setup, um die Komponenten zu erstellen und zu rendern. Wenn Sie also mit Ihrem Inventar im Backend anpassen möchten, stellen Sie sicher, dass Sie:
public/images/collection durch Ihre eigenen BilderIn diesem Demo -Laden wird eine Reihe von Funktionen verwendet, die von commerce.js bereitgestellt und vom Scheck -Dashboard betrieben werden.
Der Einkaufswagen verwendet die API von Commerce.js Cart. Karren sind bis zu 30 Tage lang angehalten, und Commerce.js erinnert sich automatisch Karren für Besucher.
Commerce.js bietet viele Tools, um die Checkout -Implementierungen zu optimieren. Die Kasse in diesem Demo Store verwendet:
Commerce.js bietet eingebaute Funktionen für die Unterstützung von Kundenanmeldungen ohne Server -Nebencode. Dieser Demo Store verfügt über eine vorhandene Kundenanmeldeseite und enthält Details zu früheren Bestellungen. Die Kundeninformationen werden auch verwendet, um die Kasse mit bekannten Kundendetails vorzubeugen.
Dieser Demo -Store ist mit dem Scheck "Test Gateway" aus dem Kästchen konfiguriert, was beim Testen Ihrer Ladenfront eine praktische Zahlungsoption bietet. Zusätzlich wird die Stripe -Elemente -Unterstützung enthalten, wenn Stripe auf dem Scheck -Dashboard konfiguriert ist.
Commerce.js <> Stripe Integration Dokumentation
Sie müssen Stripe im Scheck -Dashboard aktivieren, indem Sie den angegebenen Anweisungen folgen. Sie können Ihre Sandbox -Tasten für Stripe hinzufügen und mit einem öffentlichen API -Taste mit Sandbox -Schecks mit Stripe testen. Sowohl die public öffentliche API -Schlüssel als auch der Stripe "Publishable" -Taste sind in der .env -Datei konfiguriert. Siehe Schritt zwei der Bereitstellung "Manuelles Setup und Netlify"
Geben Sie dieses Projekt auf, um die Demo anzupassen und zu erweitern, wie Sie möchten. Hier sind einige Ideen, was Sie tun können, und die Anweisungen, die Sie mit dem E -Commerce einnehmen können.
