nextjs shopify
1.0.0
Demo live bei: Headless.builders
Erfahren Sie, wie Sie mit diesem Bauherrn + Next.js + Shopify -Beispiel mit diesem Schritt -für -Schritt -Videohandbuch hier beginnen:
Voraussetzungen
In dieser Anleitung wird davon ausgegangen, dass die folgende Software installiert ist:
Sie sollten bereits vor dem Start ein Shopify -Konto und ein Geschäft erstellen lassen.
Einführung
Nach diesem Leitfaden werden Sie haben
Bevor wir beginnen, besuchen Sie builder.io und erstellen Sie ein Konto.
Besuchen Sie Ihre Organisationseinstellungsseite und erstellen Sie einen privaten Schlüssel, kopieren Sie den Schlüssel für den nächsten Schritt.
Als nächstes erstellen wir eine Kopie des Starter -Projekts und einen neuen Raum für den Inhalt, in dem sie leben können.
Ersetzen Sie im folgenden Beispiel <private-key> durch den Schlüssel, den Sie im vorherigen Schritt kopiert haben, und ändern Sie <space-name> in etwas, das für Sie sinnvoll ist-Mach dir keine Sorgen, du kannst es später ändern!
git clone https://github.com/BuilderIO/nextjs-shopify.git
cd nextjs-shopify
unzip builder
npm install --global "@builder.io/cli"
builder create --key "<private-key>" --name "<space-name>" --debug
Hinweis: Wenn Sie nur daran interessiert sind, diesen Starter für eine Zielseite mit Shopify zu verwenden, verwenden Sie diesen Befehl stattdessen:
unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug
Wenn dies ein Erfolg war, sollten Sie mit einer Nachricht begrüßt werden, die einen öffentlichen API -Schlüssel für Ihren neu geprägten Builder.io -Bereich enthält.
Hinweis: Dieser Befehl veröffentlichen auch einige Starter Builder.io CMS -Inhalte aus dem Verzeichnis ./Builder, wenn er erstellt wurde.
____ _ _ _ _ _ _
| __ ) _ _ (_) | | __ | | ___ _ __ (_) ___ ___ | | (_)
| _ | | | | | | | | / _ ` | / _ | ' __| | | / _ / __| | | | |
| |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | |
|____/ __,_| |_| |_| __,_| ___| |_| (_) |_| ___/ ___| |_| |_|
|████████████████████████████████████████| shopify-product | 0/0
|████████████████████████████████████████| product-page: writing generic-template.json | 1/1
|████████████████████████████████████████| shopify-collection | 0/0
|████████████████████████████████████████| collection-page: writing generic-collection.json | 1/1
|████████████████████████████████████████| page: writing homepage.json | 2/2
Your new space "next.js shopify starter" public API Key: 012345abcdef0123456789abcdef0123Kopieren Sie den öffentlichen API -Schlüssel ("012345ABCDEF0123456789ABCDEF0123" im obigen Beispiel) für den nächsten Schritt.
Dieses Starterprojekt verwendet DOTENV -Dateien, um Umgebungsvariablen zu konfigurieren. Öffnen Sie die Dateien .Env.Development und .env.Production in Ihrem bevorzugten Texteditor, und setzen Sie den Wert von BUILDER_PUBLIC_KEY auf den gerade kopierten öffentlichen Schlüssel. Sie können die anderen Variablen vorerst ignorieren, wir werden sie später festlegen.
+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=Erstellen Sie eine benutzerdefinierte App für Ihr Shopify -Geschäft. Wenn Sie noch kein Shopify -Geschäft haben, können Sie ein Entwicklungsgeschäft erstellen.
Beim Erstellen der privaten App müssen Sie eine Reihe von Berechtigungen festlegen, damit Builder Ihr Shopify -Inventar abrufen kann. Für diese Drücke auf der Storefront API in der Registerkarte "Konfiguration" wählen Sie alle folgenden Berechtigungen aus:
Klicken Sie dann in der Registerkarte API Credentials auf install :
Und kopieren Sie das generierte Zugriffstoken.
Greifen Sie auf Ihren neu erstellten Raum zu, indem Sie ihn aus der Liste der Räume in Ihrer Organisation auswählen.
Sie sollten von einem Modal begrüßt werden, in dem Sie nach verschiedenen Storefront -Zugriffs -Toke (ab Vorschauderung) und Ihrer Store -Domain bitten, damit Builder.io mit Ihrer Store -API kommunizieren kann:
Füllen Sie die erforderlichen Schlüssel ein und drücken Sie "Verbinden Sie Ihre Shopify Custom App"!
Öffnen Sie .Env.Development und .Env.Production erneut, diesmal jedoch die anderen beiden Shopify -Schlüssel.
BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=Der schwierige Teil ist vorbei. Alles, was Sie tun müssen, ist das Projekt jetzt zu starten.
npm install
npm run dev Dadurch startet ein Server unter http://localhost:3000 .
Jetzt, da wir alles einrichten, Seiten auf builder.io aufbauen und veröffentlichen, für eine Demo zum Aufbau von etwas Ähnlichem wie der Demo -Homepage die Schritte in diesem kurzen Video befolgen
Sie können diesen Code überall dort bereitstellen, wo Sie möchten - finden Sie hier viele Bereitstellungsoptionen für Next.js. Die folgenden Optionen unterstützen eine Klick -Installation und sind super einfach zu beginnen mit:
