yournextstore
1.0.0
Demo.yourxtstore.com?
Nous soutenons officiellement la version LTS actuelle - 20 au moment de la rédaction. YNS devrait travailler sur les versions 18, 20 et 22. Si vous utilisez l'une de ces versions et rencontrez un problème, veuillez le signaler!
Suivez les instructions de votre système d'exploitation trouvés ici: Nodejs.org/en/download
Nous soutenons officiellement PNPM version 9, mais nous ferons de notre mieux pour le garder compatible avec le NPM et le fil.
La façon la plus simple d'installer PNPM est via Node.js CorePack. À l'intérieur du dossier avec YNS, exécutez ces commandes:
corepack enable
corepack installAlternativement, suivez les instructions de votre système d'exploitation trouvées ici: pnpm.io/installation
YNS est étroitement intégré à Stripe, vous avez donc besoin d'un compte Stripe pour utiliser votre prochain magasin. Suivez les instructions de Stripe pour créer un compte.
Il est important de se rappeler que Stripe fonctionne dans deux modes différents: le mode de test et le mode de production . À des fins de développement et de test locaux, vous devez utiliser le mode de test . De cette façon, Stripe ne facturera jamais de l'argent réel, et vous pouvez utiliser des informations d'identification de test spéciales telles que les numéros de carte de crédit et les numéros BLIK pour effectuer les paiements. Pour des informations plus détaillées, veuillez vous référer à la documentation Stripe sur docs.stripe.com/testing.
Une fois que vous êtes prêt à vendre vos produits à de vrais clients, vous devez basculer le mode test en mode de production en bande et générer de nouvelles informations d'identification.
Conseil
Cette étape nécessitera une vérification supplémentaire de la bande, nous vous suggérons donc de démarrer le processus immédiatement.
Pour que YNS fonctionne, vous devrez définir quelques variables environnementales. Pour le développement et les tests locaux, vous pouvez créer un fichier .env vide et copier le contenu de .env.example .
Pour définir des variables Env en production, vous devrez consulter la documentation de votre fournisseur d'hébergement choisi.
ENABLE_EXPERIMENTAL_COREPACK - Vercel uniquement: réglé sur 1 pour activer CorePackNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - Clé publiable de Stripe.STRIPE_SECRET_KEY - clé secrète de Stripe.STRIPE_CURRENCY - Ceci est utilisé pour déterminer la monnaie de votre magasin. Actuellement, une seule devise est autorisée et il devrait s'agir d'un code ISO à trois lettres (par exemple, usd ).NEXT_PUBLIC_URL - Facultatif sur Vercel L'adresse de votre magasin sans la barre de fuite, c'est-à-dire https://demo.yournextstore.com . Lors de la construction pour la première fois, vous devez le régler sur n'importe quelle URL valide, c'est-à-dire http://localhost:3000 .NEXT_PUBLIC_UMAMI_WEBSITE_ID - ID du site Web umami pour l'analyseNEXT_PUBLIC_NEWSLETTER_ENDPOINT - Aperçu : le point de terminaison du formulaire de newsletter à l'avenir. Il doit accepter les demandes de publication avec un JSON { email: string } et renvoyer JSON { status: number } .STRIPE_WEBHOOK_SECRET - Aperçu : Stripe webhook secret pour la gestion des événements de Stripe. Lire la suite ci-dessous.ENABLE_STRIPE_TAX - Aperçu : défini sur n'importe quelle valeur (c'est-à-dire 1 ) pour activer la taxe de rayures en YNS. Lire la suite ci-dessous.NEXT_PUBLIC_LANGUAGE - Le lieu du magasin (c'est- en-US ) Après avoir suivi les étapes ci-dessus, exécutez pnpm install pour installer les dépendances requises, puis exécutez pnpm dev pour démarrer le serveur de développement sur votre machine. Votre prochain magasin sera disponible sur LocalHost: 3000
Votre prochain magasin obtient tous les produits, prix, descriptions et catégories de Stripe. Donc, si vous connaissez déjà Stripe, vous vous sentirez chez vous!
Vous devez ajouter des produits au tableau de bord Stripe pour afficher en YNS. Après vous être connecté, cliquez plus dans la barre latérale gauche et sélectionnez Catalogue produit . Vous pouvez également utiliser le lien direct:
Ensuite, cliquez sur Ajouter un produit et remplissez toutes les informations requises:
De plus, votre prochain magasin utilise des métadonnées de produits pour fournir plus d'informations contextuelles sur les produits. Vous pouvez spécifier les champs de métadonnées suivants:
| Champ | Requis | Description |
|---|---|---|
slug | Oui | La limace du produit est utilisée pour les URL. Doit être unique à l'exception des variantes. |
category | Non | La catégorie de produits utilisé pour le regroupement des produits. |
order | Non | L'ordre de produit utilisé pour le tri des produits. Les nombres inférieurs sont affichés en premier. |
variant | Non | La variante de produit Slug. Lisez ci-dessous pour plus de détails. |
Vous devriez maintenant voir tous les produits ajoutés dans votre prochain magasin.
Votre prochain magasin prend en charge les variantes de produits simples. Pour créer un produit avec des variantes, vous devez ajouter plusieurs produits à Stripe avec le même champ de métadonnées slug . YNS utilise le champ de métadonnées variant pour distinguer les différentes variantes du même produit. Par exemple, si vous avez un t-shirt en plusieurs tailles, vous pouvez créer trois produits avec la slug de t-shirt et des valeurs variant de small , medium et large .
Les variantes sont affichées sur la page du produit. Les variantes peuvent avoir des prix, des descriptions et des images différents. Il est important de noter que la category devrait être la même pour toutes les variantes du même produit pour la meilleure expérience de navigation.
Note
À l'avenir, nous prévoyons d'ajouter la possibilité d'éditer des produits et des variantes dans un tableau de bord administratif intégré. Si vous avez des idées ou des suggestions, veuillez nous le faire savoir!
Votre prochain magasin utilise Stripe Webhooks pour gérer les événements de Stripe. Actuellement, le point de terminaison est utilisé pour revalider automatiquement la page CART et créer une transaction fiscale (si activée). Pour configurer les webhooks, suivez les documents Stripe. Les étapes exactes dépendent de savoir si vous avez activé Stripe Workbench dans votre compte Stripe: docs.stripe.com/webhooks#add-a-webhook-endpoint.
Le point de terminaison du webhook est https://{YOUR_DOMAIN}/api/stripe-webhook . Le seul événement requis est payment_intent.succeeded . Lorsque le webhook est configuré dans Stripe, définissez la variable d'environnement STRIPE_WEBHOOK_SECRET sur la clé secrète créée par Stripe.
Note
À l'avenir, nous prévoyons d'ajouter plus d'événements au webhook pour améliorer l'expérience utilisateur.
Votre prochain magasin est livré avec un aperçu du support fiscal Stripe. Pour l'activer, définissez la variable d'environnement ENABLE_STRIPE_TAX sur n'importe quelle valeur (c'est-à-dire 1 ).
Pour que cette fonctionnalité fonctionne, vous devez définir vos paramètres fiscaux dans Stripe Dashboard: Dashboard.stripe.com/register/tax. Lorsqu'ils sont activés et configurés, les taxes seront automatiquement calculées et ajoutées au prix total du produit en fonction de:
Avertissement
Cette fonctionnalité est encore à un stade précoce et il pourrait y avoir des cas de bord qui ne sont pas pris en charge. Nous y travaillons activement, donc si vous rencontrez des problèmes ou si vous avez des suggestions, veuillez nous le faire savoir!
Pour déployer sur Vercel, cliquez sur le bouton suivant, configurez vos variables GitHub Repository et Environment et cliquez sur Déployer . Assurez-vous de définir la variable ENABLE_EXPERIMENTAL_COREPACK sur 1 .
Description à venir bientôt.
Pour déployer sur Docker, suivez ces étapes:
pnpm run docker:build .pnpm run docker:run . YNS évolue chaque jour et nous recherchons activement des commentaires sur ce qu'il faut améliorer. Si vous avez des questions ou des problèmes, n'hésitez pas à nous contacter sur notre serveur Discord.
structuredClone pour transmettre des données du serveur aux composants clients. Pourquoi? Seuls certains types de données peuvent être transmis directement du serveur vers le client. Les données du SDK Stripe contient souvent des instances de classe. Pour contourner cela, nous utilisons structuredClone pour les éliminer et passer des objets tout simplement anciens au client.
