demo store
1.0.0
Cette boutique de démonstration est une solution de commerce électronique complètement statique (avec capacité SSR) optimisée par Commerce Layer. Le magasin est complet et entièrement opérationnel, aucun service tiers n'est requis. Vous pouvez facilement personnaliser le vôtre avec différents niveaux de personnalisation. Continuez à lire pour en savoir plus.
Le projet Demo Store se compose de deux référentiels, celui-ci est le modèle GitHub.
Commerce Layer est une API de commerce multi-marchés et un système de gestion des commandes qui vous permet d'ajouter facilement des fonctionnalités d'achat mondiales à n'importe quel site Web, application mobile, chatbot, appareil portable, vocal ou IoT. Composez votre pile avec les meilleurs outils que vous maîtrisez et aimez déjà. Rendez n'importe quelle expérience accessible, n'importe où, grâce à une API ultra-rapide, sécurisée et de niveau entreprise.
Nous avons décidé de créer la boutique de démonstration en supprimant tous les services tiers habituellement utilisés pour créer une expérience complète de site de commerce électronique (CMS, recherche, PIM, etc.).
Tout ce qui concerne le contenu est stocké sous forme de fichiers JSON. Pour créer votre propre boutique de démonstration, vous devrez créer ces fichiers manuellement ou via des scripts.
La boutique de démonstration comprend :
L'intégration avec Commerce Layer est réalisée en tirant parti de certains de nos outils de développement open source, notamment :
Le projet Demo Store se compose de deux référentiels que vous pouvez exploiter pour créer votre propre boutique, en fonction du niveau de personnalisation que vous devez ajouter :
demo-store
Il s'agit d'un modèle GitHub qui utilise le demo-store-core mentionné ci-dessous comme sous-module git. Si vous êtes satisfait des fonctionnalités, de l'apparence et de la convivialité de la boutique de démonstration de Commerce Layer, nous vous suggérons de suivre cette voie. Vous n'aurez pas à vous soucier de l'intégralité du code source et vous serez libre de vous concentrer uniquement sur vos données et votre contenu. En plus de cela, vous obtiendrez des mises à jour gratuites presque sans risque en exécutant simplement :
git submodule update --remote
npm install demo-store-core
Ce référentiel contient le code source. Si vous avez besoin de personnaliser entièrement votre boutique (comportement, UI, UX, etc.), il vous suffit de créer ce dépôt et de créer le vôtre. C'est aussi une façon de contribuer.
️ Veuillez noter que si vous suivez cette voie et commencez à trop vous éloigner du code source d'origine, le risque est de perdre toutes les futures mises à jour ou de ne pas pouvoir les répliquer.
Si vous n'avez aucune expérience avec Commerce Layer, vous pouvez commencer par créer un compte (c'est gratuit !) et suivre le didacticiel d'intégration.
Important
Veuillez noter que pour créer un Demo Store, vous avez besoin d'une organisation correctement configurée avec au moins quelques produits et un marché.
Si vous préférez repartir de zéro, vous pouvez créer une nouvelle organisation et utiliser les commandes suivantes pour configurer un projet de type magasin de démonstration de Commerce Layer.
Une fois l'organisation créée, vous devez créer deux clients API : un canal de vente et un intégration .
Si vous ne l'avez pas encore fait, installez la CLI Commerce Layer et deux de ses plugins : le plugin seeder et le plugin importations :
npm install -g @commercelayer/cli
commercelayer plugins:install seeder
commercelayer plugins:install importsVous pouvez maintenant vous connecter à votre client API d'intégration à partir de la CLI :
commercelayer applications:login
--clientId Oy5F2TbPYhOZsxy1tQd9ZVZ...
--clientSecret 1ZHNJUgn_1lh1mel06gGDqa...
--organization my-awesome-organization
--alias cli-adminUne fois votre organisation configurée, pour créer votre boutique, vous devez suivre quelques étapes simples... commençons !
Quel que soit le chemin que vous choisissez, vous devez tout d’abord créer un nouveau référentiel pour votre boutique :
Si vous décidez de conserver le modèle demo-store il vous suffit de cliquer sur « Utiliser ce modèle » sur la page d'accueil du référentiel sur GitHub, puis d'exécuter :
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 Si vous décidez de créer un fork pour le dépôt demo-store-core vous pouvez exécuter ceci à la place :
git clone < your-repository-url > my-new-project
cd my-new-project
npm install
cp ./packages/website/.env.sample ./packages/website/.env.local Modifiez .env.local et remplissez toutes les informations manquantes :
# this is the 'sales channel' client id
NEXT_PUBLIC_CL_CLIENT_ID =er34TWFcd24RFI8KJ52Ws6q...Cette étape est facultative. Si vous disposez déjà d’une organisation correctement configurée sur votre compte Commerce Layer, vous pouvez l’ignorer.
Le script suivant fournira à votre organisation toutes les ressources dont vous avez besoin pour créer un commerce électronique multi-marchés avec Commerce Layer (ceux que nous utilisons pour notre boutique de démonstration).
npm run seeder:seed -ws --if-presentSi la commande ci-dessus s'exécute sans erreur, passez à l'étape 4. Sinon, vous pouvez toujours amorcer votre organisation avec des exemples de données à l'aide de la CLI en exécutant ce qui suit :
commercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/ Le fichier json/countries.json contient une liste des pays disponibles pour votre commerce électronique. Vous pouvez le modifier avec votre éditeur préféré. Assurez-vous simplement de remplacer tous les résultats de "market": xxx par les marchés associés de votre organisation. Vous pouvez obtenir la liste de vos marchés depuis le tableau de bord d'administration de Commerce Layer ou en exécutant cette commande :
npm run markets -ws --if-presentnpm run dev
# http://localhost:3000/ Vous pouvez toujours trouver le dernier code du demo-store-core dans sa branche main .
Pour mettre à jour votre boutique de démonstration avec les dernières modifications, vous pouvez simplement exécuter :
git submodule update --remote
npm installIl peut parfois arriver qu'une nouvelle version majeure contienne des modifications importantes. Dans ce cas, en mettant à jour vers la dernière version, votre boutique de démonstration pourrait cesser de fonctionner et vous devrez résoudre manuellement tous les problèmes en suivant les notes de version.
Si vous le souhaitez, vous pouvez recevoir une notification GitHub dès qu'une nouvelle version est publiée.
Lorsque vous utilisez notre modèle Demo Store, vous pouvez personnaliser trois éléments principaux : les données de contenu, les paramètres régionaux et les fichiers de configuration.
️ Nous allons continuellement améliorer notre Demo Store pour ajouter de nouvelles fonctionnalités et optimiser celles existantes. Lorsque vous effectuez une mise à jour vers la dernière version, la build peut échouer. Jetez un œil aux notes de version pour comprendre comment résoudre ce problème en mettant à jour vos fichiers personnalisés.
Comme mentionné précédemment, notre Demo Store est construit autour d'un ensemble de données stockées sous forme de fichiers JSON, afin de les dissocier de tout service tiers. Pour créer votre boutique, vous devrez créer et gérer ces fichiers.
Les fichiers JSON se trouvent dans data/json/ , mais vous pouvez choisir une position différente en modifiant la variable d'environnement NEXT_PUBLIC_JSON_DATA_FOLDER .
Les fichiers de définition de type se trouvent dans packages/types/src/json/ . Nous utilisons zod pour la validation du schéma. Jetez un œil à ces fichiers pour comprendre quelle structure vous devez suivre.
Lorsque vous avez terminé toutes les modifications, vous pouvez vérifier si tout est correct en exécutant :
npm run test:data
Notre Demo Store est un site Web multilingue. Lorsque vous avez créé vos données à l'étape précédente, vous avez probablement remarqué que certains champs étaient localisés. Vous pouvez ajouter de nouvelles langues ou modifier les traductions existantes.
Les fichiers JSON de paramètres régionaux se trouvent dans data/locales/ , mais vous pouvez choisir une position différente en modifiant la variable d'environnement NEXT_PUBLIC_LOCALES_DATA_FOLDER .
Procédez comme suit pour commencer à personnaliser les paramètres régionaux :
cp -r ./demo-store-core/packages/website/data/locales ./data/locales # .env.local
NEXT_PUBLIC_LOCALES_DATA_FOLDER =../../../data/locales/ Les fichiers de configuration se trouvent dans config/ , mais vous pouvez choisir une position différente en modifiant la variable d'environnement NEXT_PUBLIC_CONFIG_FOLDER .
Il existe trois fichiers de configuration que vous pouvez gérer :
general.config.js
Ce fichier contient la configuration générale.
facets.config.js
Il s'agit du fichier de configuration des facettes. Vous pouvez choisir l'ordre dans lequel ils sont affichés dans le panneau de filtres, leur apparence et les règles de tri de leurs valeurs. 
variants.config.js
Il s'agit du fichier de configuration des variantes. Vous pouvez choisir l'ordre dans lequel ils sont affichés sur la page détail du produit ainsi que leur apparence. 
Procédez comme suit pour commencer à personnaliser la configuration :
cp -r ./demo-store-core/packages/website/config ./config # .env.local
NEXT_PUBLIC_CONFIG_FOLDER =../../../config/Certaines variables d'environnement que vous pouvez utiliser pour personnaliser votre boutique. Pour une liste et une description exhaustives, vous pouvez consulter le fichier supplémentaire-env.d.ts.
Vous pouvez déployer le Demo Store où vous préférez. Il vous suffit de :
Le Demo Store est conçu pour être SSG avant tout, mais vous pouvez passer à SSR en un clin d'œil. Nous avons testé quelques façons de le déployer (par exemple en utilisant GitHub Workflow, Netlify, Vercel, etc.) et vous pouvez trouver plus d'informations à ce sujet ici. Si vous avez procédé différemment ou utilisé d'autres services et que vous souhaitez partager les étapes avec la communauté, rejoignez la discussion, et merci d'avance !
Pour créer et déployer le Demo Store :
Définissez la variable d'environnement suivante en conséquence :
NEXT_PUBLIC_DATA_FETCHING =ssg Exécutez npm run build pour créer une version de production optimisée statiquement de votre application.
Copiez le dossier demo-store-core/packages/website/out sur votre hébergement statique préféré.
Le Demo Store peut être déployé sur n’importe quel fournisseur d’hébergement prenant en charge Node.js. Pour ce faire :
Définissez la variable d'environnement suivante en conséquence :
NEXT_PUBLIC_DATA_FETCHING =ssr Exécutez npm run build pour créer une version de production optimisée de votre application.
Exécutez npm start pour démarrer le serveur Node.js en mode production.
Q. Même si j'ai modifié NEXT_PUBLIC_JSON_DATA_FOLDER , NEXT_PUBLIC_LOCALE_DATA_FOLDER ou NEXT_PUBLIC_CONFIG_FOLDER , le site Web fait toujours référence aux fichiers précédents.
A. Ces variables d'environnement sont utilisées comme alias dans Webpack. À partir de Webpack 5, la mise en cache pour des builds plus rapides a été introduite. La modification de ces variables d'environnement n'invalidera pas le cache Webpack. Vous devez supprimer le dossier .next manuellement ou en exécutant :
# update the path if needed
rm -rf demo-store-core/packages/website/.next/Ce référentiel est publié sous licence MIT.
