demo store
1.0.0
Dieser Demo-Shop ist eine vollständig statische E-Commerce-Lösung (mit SSR-Fähigkeit), die von Commerce Layer unterstützt wird. Der Shop verfügt über alle Funktionen und ist voll funktionsfähig, sodass keine Dienste Dritter erforderlich sind. Sie können ganz einfach Ihr eigenes Design mit verschiedenen Anpassungsstufen erstellen. Lesen Sie weiter, um mehr zu erfahren.
Das Demo Store-Projekt besteht aus zwei Repositories, dieses ist die GitHub-Vorlage.
Commerce Layer ist eine Multi-Market-Commerce-API und ein Bestellverwaltungssystem, mit dem Sie ganz einfach globale Einkaufsfunktionen zu jeder Website, mobilen App, Chatbot, Wearable, Sprach- oder IoT-Gerät hinzufügen können. Stellen Sie Ihren Stack mit den besten Tools zusammen, die Sie bereits beherrschen und lieben. Machen Sie jedes Erlebnis überall käuflich – über eine blitzschnelle, unternehmenstaugliche und sichere API.
Wir haben uns entschieden, den Demo-Shop zu erstellen und alle Dienste von Drittanbietern zu entfernen, die normalerweise zur Erstellung eines umfassenden E-Commerce-Website-Erlebnisses verwendet werden (CMS, Suche, PIM usw.).
Alles, was mit Inhalten zu tun hat, wird als JSON-Dateien gespeichert. Um Ihren eigenen Demo-Store zu erstellen, müssen Sie diese Dateien manuell oder über Skripte erstellen.
Der Demo-Store umfasst:
Die Integration mit Commerce Layer wird durch die Nutzung einiger unserer Open-Source-Entwicklertools erreicht, insbesondere:
Das Demo-Store-Projekt besteht aus zwei Repositorys, die Sie nutzen können, um Ihren eigenen Shop zu erstellen, basierend auf dem Umfang der Anpassungen, die Sie hinzufügen müssen:
demo-store
Dies ist eine GitHub-Vorlage , die den unten genannten demo-store-core als Git-Submodul verwendet. Wenn Sie mit den Funktionen und dem Erscheinungsbild des Commerce Layer Demo Store zufrieden sind, empfehlen wir Ihnen, diesem Weg zu folgen. Sie müssen sich nicht um den gesamten Quellcode kümmern und können sich ganz auf Ihre Daten und Inhalte konzentrieren. Darüber hinaus erhalten Sie kostenlose Updates nahezu ohne Risiko, indem Sie einfach Folgendes ausführen:
git submodule update --remote
npm install demo-store-core
Dieses Repository enthält den Quellcode. Wenn Sie Ihren Shop vollständig anpassen müssen (Verhalten, UI, UX usw.), müssen Sie nur dieses Repo forken und Ihr eigenes erstellen. Dies ist auch die Möglichkeit, einen Beitrag zu leisten.
️ Bitte beachten Sie, dass das Risiko besteht, dass alle zukünftigen Updates verloren gehen oder nicht in der Lage sind, sie zu replizieren, wenn Sie diesem Weg folgen und zu stark vom ursprünglichen Quellcode abweichen.
Wenn Sie noch keine Erfahrung mit Commerce Layer haben, können Sie zunächst ein Konto erstellen (kostenlos!) und dem Onboarding-Tutorial folgen.
Wichtig
Bitte beachten Sie, dass Sie zum Einrichten eines Demo-Shops eine ordnungsgemäß konfigurierte Organisation mit mindestens einigen Produkten und einem Markt benötigen.
Wenn Sie lieber ganz von vorne beginnen möchten, können Sie eine neue Organisation erstellen und die folgenden Befehle verwenden, um ein Demo-Store-ähnliches Projekt eines Commerce Layers zu konfigurieren.
Sobald die Organisation erstellt ist, müssen Sie zwei API-Clients erstellen: einen Vertriebskanal und eine Integration .
Falls noch nicht geschehen, installieren Sie die Commerce Layer-CLI und zwei ihrer Plugins: das Seeder-Plugin und das Import-Plugin:
npm install -g @commercelayer/cli
commercelayer plugins:install seeder
commercelayer plugins:install importsJetzt können Sie sich über die CLI bei Ihrem Integrations-API-Client anmelden:
commercelayer applications:login
--clientId Oy5F2TbPYhOZsxy1tQd9ZVZ...
--clientSecret 1ZHNJUgn_1lh1mel06gGDqa...
--organization my-awesome-organization
--alias cli-adminSobald Ihre Organisation eingerichtet ist, müssen Sie zum Aufbau Ihres Shops einige einfache Schritte befolgen ... fangen wir an!
Welchen Weg Sie auch wählen, zunächst müssen Sie ein neues Repository für Ihren Shop erstellen:
Wenn Sie sich entschieden haben, die demo-store Vorlage beizubehalten, müssen Sie nur auf der Repository-Homepage auf GitHub auf „Diese Vorlage verwenden“ klicken und dann Folgendes ausführen:
git clone < your-repository-url > my-new-project
cd my-new-project
git submodule update --init
npm install
cp ./demo-store-core/packages/website/.env.sample.submodule .env.local
cp -r ./demo-store-core/packages/website/data/json ./data/json Wenn Sie sich für einen Fork des demo-store-core -Repositorys entschieden haben, können Sie stattdessen Folgendes ausführen:
git clone < your-repository-url > my-new-project
cd my-new-project
npm install
cp ./packages/website/.env.sample ./packages/website/.env.local Bearbeiten Sie .env.local und geben Sie alle fehlenden Informationen ein:
# this is the 'sales channel' client id
NEXT_PUBLIC_CL_CLIENT_ID =er34TWFcd24RFI8KJ52Ws6q...Dieser Schritt ist optional. Wenn Sie in Ihrem Commerce Layer-Konto bereits eine ordnungsgemäß konfigurierte Organisation haben, können Sie diese überspringen.
Das folgende Skript füllt Ihre Organisation mit allen Ressourcen, die Sie zum Aufbau eines E-Commerce für mehrere Märkte mit Commerce Layer benötigen (die wir für unseren Demo-Shop verwenden).
npm run seeder:seed -ws --if-presentWenn der obige Befehl ohne Fehler ausgeführt wird, fahren Sie bitte mit Schritt 4 fort. Andernfalls können Sie Ihre Organisation mithilfe der CLI weiterhin mit Beispieldaten versorgen, indem Sie Folgendes ausführen:
commercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/ Die Datei json/countries.json enthält eine Liste der verfügbaren Länder für Ihren E-Commerce. Sie können es mit Ihrem bevorzugten Editor ändern. Stellen Sie einfach sicher, dass Sie alle Ergebnisse von "market": xxx durch die zugehörigen Märkte Ihrer Organisation ersetzen. Sie können die Liste Ihrer Märkte über das Admin-Dashboard von Commerce Layer abrufen oder diesen Befehl ausführen:
npm run markets -ws --if-presentnpm run dev
# http://localhost:3000/ Den aktuellsten Code des demo-store-core finden Sie immer in dessen main .
Um Ihren Demo-Store auf die neuesten Änderungen zu aktualisieren, können Sie einfach Folgendes ausführen:
git submodule update --remote
npm installManchmal kann es vorkommen, dass eine neue Hauptversion Breaking Changes enthält. In diesem Fall funktioniert Ihr Demo-Store möglicherweise nicht mehr, wenn Sie auf die neueste Version aktualisieren, und Sie müssen alle Probleme manuell lösen, indem Sie die Versionshinweise befolgen.
Wenn Sie möchten, können Sie eine GitHub-Benachrichtigung erhalten, sobald eine neue Version veröffentlicht wird.
Wenn Sie unsere Demo-Store-Vorlage verwenden, können Sie drei Hauptelemente anpassen: Inhaltsdaten, Gebietsschemas und Konfigurationsdateien.
️ Wir werden unseren Demo-Store kontinuierlich verbessern, um neue Funktionen hinzuzufügen und die bestehenden zu optimieren. Wenn Sie auf die neueste Version aktualisieren, kann der Build fehlschlagen. Sehen Sie sich die Versionshinweise an, um zu erfahren, wie Sie das Problem durch die Aktualisierung Ihrer benutzerdefinierten Dateien beheben können.
Wie bereits erwähnt, basiert unser Demo-Store auf einer Reihe von Daten, die als JSON-Dateien gespeichert werden, um sie von allen Diensten Dritter zu entkoppeln. Um Ihren Shop aufzubauen, müssen Sie diese Dateien erstellen und verwalten.
JSON-Dateien befinden sich unter data/json/ , Sie können jedoch eine andere Position auswählen, indem Sie die Umgebungsvariable NEXT_PUBLIC_JSON_DATA_FOLDER ändern.
Typdefinitionsdateien befinden sich unter packages/types/src/json/ . Wir verwenden zod zur Schemavalidierung. Schauen Sie sich diese Dateien an, um zu verstehen, welcher Struktur Sie folgen müssen.
Wenn Sie mit allen Änderungen fertig sind, können Sie überprüfen, ob alles korrekt ist, indem Sie Folgendes ausführen:
npm run test:data
Unser Demo-Shop ist eine mehrsprachige Website. Als Sie Ihre Daten im vorherigen Schritt erstellt haben, ist Ihnen wahrscheinlich aufgefallen, dass einige Felder lokalisiert wurden. Sie können neue Sprachen hinzufügen oder bestehende Übersetzungen ändern.
Gebietsschema-JSON-Dateien befinden sich unter data/locales/ , Sie können jedoch eine andere Position auswählen, indem Sie die Umgebungsvariable NEXT_PUBLIC_LOCALES_DATA_FOLDER ändern.
Gehen Sie wie folgt vor, um mit der Anpassung der Gebietsschemas zu beginnen:
cp -r ./demo-store-core/packages/website/data/locales ./data/locales # .env.local
NEXT_PUBLIC_LOCALES_DATA_FOLDER =../../../data/locales/ Konfigurationsdateien befinden sich unter config/ , Sie können jedoch eine andere Position auswählen, indem Sie die Umgebungsvariable NEXT_PUBLIC_CONFIG_FOLDER ändern.
Es gibt drei Konfigurationsdateien, die Sie verwalten können:
general.config.js
Diese Datei enthält die allgemeine Konfiguration.
facets.config.js
Dies ist die Facettenkonfigurationsdatei. Sie können die Reihenfolge, in der sie im Filterbereich angezeigt werden, ihr Erscheinungsbild und die Sortierregeln ihrer Werte auswählen. 
variants.config.js
Dies ist die Variantenkonfigurationsdatei. Sie können die Reihenfolge, in der sie auf der Produktdetailseite angezeigt werden, und ihr Aussehen auswählen. 
Gehen Sie wie folgt vor, um mit der Anpassung der Konfiguration zu beginnen:
cp -r ./demo-store-core/packages/website/config ./config # .env.local
NEXT_PUBLIC_CONFIG_FOLDER =../../../config/Es gibt einige Umgebungsvariablen, die Sie zum Anpassen Ihres Shops verwenden können. Eine ausführliche Liste und Beschreibung finden Sie in der Datei „additional-env.d.ts“.
Sie können den Demo-Store überall dort bereitstellen, wo Sie möchten. Sie müssen nur:
Der Demo-Store ist in erster Linie auf SSG ausgelegt, Sie können jedoch im Handumdrehen auf SSR umsteigen. Wir haben einige Möglichkeiten zur Bereitstellung getestet (z. B. mit GitHub Workflow, Netlify, Vercel usw.). Weitere Informationen dazu finden Sie hier. Wenn Sie es anders gemacht oder andere Dienste genutzt haben und die Schritte mit der Community teilen möchten, beteiligen Sie sich bitte an der Diskussion und bedanken Sie sich im Voraus!
So erstellen und implementieren Sie den Demo-Store:
Legen Sie die folgende Umgebungsvariable entsprechend fest:
NEXT_PUBLIC_DATA_FETCHING =ssg Führen Sie npm run build aus, um einen statisch optimierten Produktions-Build Ihrer Anwendung zu erstellen.
Kopieren Sie den Ordner demo-store-core/packages/website/out auf Ihr bevorzugtes statisches Hosting.
Der Demo Store kann bei jedem Hosting-Anbieter bereitgestellt werden, der Node.js unterstützt. Um das zu tun:
Legen Sie die folgende Umgebungsvariable entsprechend fest:
NEXT_PUBLIC_DATA_FETCHING =ssr Führen Sie npm run build aus, um einen optimierten Produktions-Build Ihrer Anwendung zu erstellen.
Führen Sie npm start aus, um den Node.js-Server im Produktionsmodus zu starten.
F. Auch wenn ich NEXT_PUBLIC_JSON_DATA_FOLDER , NEXT_PUBLIC_LOCALE_DATA_FOLDER oder NEXT_PUBLIC_CONFIG_FOLDER geändert habe, verweist die Website immer noch auf frühere Dateien.
A. Diese Umgebungsvariablen werden als alias in Webpack verwendet. Ab Webpack 5 wurde Caching für schnellere Builds eingeführt. Durch das Ändern dieser Umgebungsvariablen wird der Webpack-Cache nicht ungültig. Sie müssen .next Ordner manuell entfernen oder Folgendes ausführen:
# update the path if needed
rm -rf demo-store-core/packages/website/.next/Dieses Repository wird unter der MIT-Lizenz veröffentlicht.
