commercejs nextjs demo store
1.0.0
Un magasin de démonstration de commerce électronique à pleine fidélité construit à l'aide du SDK Commerce.js et Next.js avec déploiement en direct sur Netlify.
Note
Cette lecture vous guidera dans la mise en service avec un modèle de commerce électronique à part entière. Nous avons configuré ce modèle pour vous à un déploiement en un clic directement sur Netlify. Alternativement, vous pouvez déployer manuellement sur votre choix de plateforme d'hébergement.
Pour un tutoriel détaillé complet sur la construction de cette application de commerce électronique Jamstack, veuillez vous rendre ici.
yarn global add @chec/cli Maintenant que vous avez installé Check CLI à l'échelle mondiale, vous pourrez accéder à la liste des chec [COMMANDS] , dont l'une s'inscrit pour un compte de vérification. Allons-y et mettons cette configuration!
# Open the Chec registration page in your browser
chec registerSuivez le reste de la promenade pour configurer les détails de vos marchands. Alternativement, vous pouvez aller ici pour vous inscrire à un compte de vérification.
Le déploiement en un clic vous permet de connecter Netlify à votre compte GitHub pour cloner le référentiel commercejs-nextjs-demo-store et le déployer automatiquement. Assurez-vous d'aller sur Netlify et de vous inscrire à un compte avant de cliquer sur le bouton Déploier.
En cliquant sur le bouton ci-dessus, vous serez accédé à la page de déploiement direct de Netlify avec le référentiel du projet passé sous forme de paramètres dans l'URL. Cliquez sur le bouton Connecter à GitHub , nommez votre référentiel et entrez dans cette clé publique dans la saisie de la clé publique . Veuillez noter que dans le but de vous faire fonctionner avec un aperçu de déploiement en direct du magasin de démonstration, nous vous avons fourni la clé publique de notre compte marchand de démonstration. Maintenant, enregistrez et déployez votre site.
Veuillez noter que la version initiale échouera si vous entrez dans votre clé publique au lieu de la clé de démonstration de démonstration fournie. Le déploiement en un clic est destiné à des fins de présentation pour tourner un déploiement rapide. L'utilisation de votre compte marchand signifierait que vous auriez besoin des données appropriées telles que plusieurs actifs et catégories associés à vos produits. Si vous souhaitez utiliser votre compte marchand, veuillez suivre les étapes de configuration manuelles ci-dessous.
La configuration manuelle implique le clonage du repo dans votre environnement local, l'ensemencement des exemples de données fournies dans votre compte de vérification et le déploiement de Netlify.
Étape 1. Clone le repo et installez les dépendances
# 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 && yarnÉtape 2. Configurez vos variables d'environnement
Remplacez l'exemple de fichier .env.example Dotenv à la racine du projet pour stocker votre véritable public_key ainsi que votre secret_key .
# Copy from source file to destination file .env
cp .env.example .env Vous pouvez accéder à votre touche API dans votre configuration de tableau de bord Check, puis accéder à l'onglet Développer pour copier votre clé publique et votre clé secrète. Remplacez le NEXT_PUBLIC_CHEC_PUBLIC_KEY fourni par le vôtre et remplissez votre CHEC_SECRET_KEY dans le fichier .env . La clé secrète est nécessaire pour que le script de graines ait la permission appropriée de semer les données d'échantillonnage en /seeds dans votre compte de chèque. Retirez la clé secrète une fois les données ensemencées.
# .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 =Ce fichier est destiné à ne pas être engagé dans le contrôle source et sera également masqué dans les navigateurs de fichiers.
Étape 3. Générez les données nécessaires pour alimenter votre vérification et démarrer votre environnement de développement (nécessaire pour la configuration initiale).
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn devMaintenant, rendez-vous sur http: // localhost: 3000 Après avoir commencé votre développement, votre site devrait maintenant être rempli avec les exemples de données!
Si vous remplacez les exemples de produits ou de catégories, vous pouvez personnaliser vos propres images de catégories sous `public / images / collection. Voir plus d'informations sur la personnalisation des données ci-dessous.
Étape 5. Apportez les modifications nécessaires dont vous avez besoin et poussez le code vers un référentiel sur GitHub ou votre choix de plate-forme.
Étape 6. Déployez votre site
Assurez-vous de vous inscrire à un compte Netlify et de vous connecter. Cliquez sur le nouveau site à partir du bouton GIT et donnez l'accès pour sélectionner votre dépôt. Vos paramètres de build sont automatiquement remplis pour votre sur netlify.toml dans le modèle. Pour saisir vos variables d'environnement, cliquez sur Afficher Advanced puis nouvelle variable et remplissez l'entrée de la clé en tant que NEXT_PUBLIC_CHEC_PUBLIC_KEY et l'entrée de valeur avec votre clé publique. Vous pouvez accéder à votre touche API dans votre tableau de bord de vérification sous la configuration, puis accéder à l'onglet Développeur pour copier votre clé publique
Maintenant, allez-y et cliquez sur "Déployer le site" pour voir votre site en direct!
Cette commande téléchargera cet exemple de projet à partir de GitHub et l'initialisera sur votre machine. Vous serez libre de modifier le code téléchargé et de jouer avec Commerce.js par la suite.
Étape 1. Installez la vérification CLI
npm install -g @chec/cli
# or
yarn add -g @chec/cliÉtape 2. Créez un magasin de démonstration
chec demo-store
Lorsque vous êtes invité à choisir un magasin de démonstration dans la liste, choisissez "Commercejs-nextjs-Demo-Store". Cette commande semera également quelques exemples de données sur votre compte de vérification. Pour plus d'informations, consultez la documentation CHE CLI.
Étant donné que ce projet est une vitrine à part entière présentant une conception personnalisée et un flux d'utilisateurs, il y a certaines mises en garde que vous rencontrerez si vous personnalisez vos données dans le tableau de bord Check. Un gotcha est avec les données des catégories dans l'interface utilisateur: les images de fonctionnalités des catégories sont ajoutées dans l'API VÉR sous forme de méta-données. Si vous ajoutez des données de catégories d'échantillons de semences ou modifiez les catégories, vous pouvez personnaliser l'image des catégories en remplaçant vos actifs d'image sous public/images/collection . Les noms de fichiers devront rester les mêmes. Si vous prévoyez de modifier les noms des fichiers ou d'ajouter de nouvelles catégories, vous devrez ajouter de nouvelles méta-données. L'application s'attendra à la configuration des stocks ci-dessous afin de créer et de rendre les composants, donc si vous souhaitez personnaliser avec votre inventaire dans le backend, assurez-vous de vous:
public/images/collection par vos propres imagesCe magasin de démonstration utilise une gamme de fonctionnalités fournies par Commerce.js et alimentée par le tableau de bord Check.
Le panier utilise l'API Commerce.js CART. Les chariots sont persistés jusqu'à 30 jours, et Commerce.js se souvient automatiquement des chariots pour les visiteurs.
Commerce.js fournit de nombreux outils pour rationaliser les implémentations de paiement. La caisse dans ce magasin de démonstration utilise:
Commerce.js fournit des fonctionnalités intégrées pour prendre en charge les connexions des clients sans code côté serveur. Ce magasin de démonstration dispose d'une page de connexion client existante et fournit des détails sur les commandes précédentes. Les informations du client sont également utilisées pour pré-populer le paiement avec les détails connus du client.
Ce magasin de démonstration est configuré avec la "passerelle de test" de la boîte, qui fournit une option de paiement pratique lors du test de votre vitrine. De plus, la prise en charge des éléments de rayures est incluse si la bande est configurée sur le tableau de bord Check.
Commerce commercial.js <> Stripe Intégration Documentation
Vous devez activer la bande dans le tableau de bord de vérification en suivant les instructions fournies. Vous pouvez ajouter vos clés de bac à sable pour les rayures et utiliser une clé API publique vérifiée pour tester avec Stripe. La touche API Public Check et la clé Stripe "Publisable" sont configurées dans le fichier .env . Voir l'étape deux de la "configuration manuelle et déploiement de Netlify"
Fourk ce projet pour personnaliser et étendre la démo comme vous le souhaitez. Voici quelques idées de ce que vous pouvez faire et des instructions que vous pouvez prendre.
