nextjs shopify
1.0.0
Demo Live à: Builders sans tête
Apprenez à démarrer avec ce constructeur + Next.js + Shopify Exemple avec ce guide vidéo étape par étape ici:
Pré-requis
Ce guide supposera que le logiciel suivant est installé:
Vous devriez déjà avoir un compte et un magasin Shopify créés avant de commencer.
Introduction
Après avoir suivi ce guide, vous aurez
Avant de commencer, rendez-vous sur builder.io et créez un compte.
Rendez-vous sur la page des paramètres de votre organisation et créez une clé privée, copiez la clé pour l'étape suivante.
Ensuite, nous allons créer une copie du projet Starter et créer un nouvel espace pour que son contenu puisse vivre.
Dans l'exemple ci-dessous, remplacez <private-key> par la clé que vous avez copiée à l'étape précédente et changez <space-name> en quelque chose de significatif pour vous - ne vous inquiétez pas, vous pouvez le changer plus tard!
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
Remarque: si vous êtes seulement intéressé à utiliser ce démarreur pour une page de destination avec Shopify, utilisez cette commande à la place:
unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug
S'il s'agissait d'un succès, vous devriez être accueilli avec un message qui comprend une clé API publique pour votre espace de création.
Remarque: Cette commande publiera également du contenu CMS starter builder.io du répertoire ./Builder à votre nouvel espace lors de sa création.
____ _ _ _ _ _ _
| __ ) _ _ (_) | | __ | | ___ _ __ (_) ___ ___ | | (_)
| _ | | | | | | | | / _ ` | / _ | ' __| | | / _ / __| | | | |
| |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | |
|____/ __,_| |_| |_| __,_| ___| |_| (_) |_| ___/ ___| |_| |_|
|████████████████████████████████████████| 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: 012345abcdef0123456789abcdef0123Copiez la touche API publique ("012345ABCDEF0123456789ABCDEF0123" dans l'exemple ci-dessus) pour l'étape suivante.
Ce projet de démarrage utilise des fichiers Dotenv pour configurer les variables d'environnement. Ouvrez les fichiers .env.development et .env.production dans votre éditeur de texte préféré, et définissez la valeur de BUILDER_PUBLIC_KEY sur la clé publique que vous venez de copier. Vous pouvez ignorer les autres variables pour l'instant, nous les définirons plus tard.
+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=Créez une application personnalisée pour votre boutique Shopify. Si vous n'avez pas déjà de magasin Shopify, vous pouvez créer un magasin de développement.
Lors de la création de l'application privée, vous devrez définir un certain nombre d'autorisations afin que Builder puisse récupérer votre inventaire Shopify. Pour cela, appuyez sur Storefront API dans l'onglet Configuration et choisissez toutes les autorisations suivantes:
Ensuite, dans l'onglet API Credentials , cliquez sur install :
Et copier le jeton d'accès généré.
Accédez à votre espace nouvellement créé en le sélectionnant dans la liste des espaces de votre organisation.
Vous devez être accueilli par un modal demandant diverses étape d'accès de la devanture (à partir de l'étape de prévisualisation) et de votre domaine de magasin, cela permettra à Builder.io de communiquer avec votre API de magasin:
Remplissez les clés requises et appuyez sur "Connectez votre application personnalisée Shopify"!
Ouvrez .env.development et .env.production à nouveau, mais cette fois a mis les deux autres clés Shopify.
BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=La partie difficile est terminée, tout ce que vous avez à faire est de démarrer le projet maintenant.
npm install
npm run dev Cela démarrera un serveur sur http://localhost:3000 .
Maintenant que nous avons tout la configuration, commencez à construire et à publier des pages sur builder.io, pour une démo sur la construction de quelque chose de similaire à la page d'accueil de la démo, suivez les étapes de cette courte vidéo
Vous pouvez déployer ce code où vous voulez - vous pouvez trouver de nombreuses options de déploiement pour next.js ici. Les options suivantes prennent en charge une clic des installations et sont super faciles à démarrer:
