next shopify starter Download - next shopify starter Source Code Download

next shopify starter

Code Source AI

1.0.0

Télécharger

Next.js + Tailwind CSS + Shopify Starter

Démo en direct • Voir plus de démarreurs • Suivez-moi sur Twitter

Il s'agit d'un magasin de commerce électronique entièrement fonctionnel qui utilise Next.js + Tailwind CSS dans l'avant et exploite l'API Shopify Storefront pour interagir avec votre backend Shopify. Vous pouvez voir une démo en direct ici.

Nous utilisons GraphQL pour interroger nos données Shopify et stocker les informations de panier dans LocalStorage pour persister la session d'utilisateur. Enfin - nous utilisons la caisse de Shopify pour permettre à l'utilisateur d'acheter les articles. Vous pouvez voir cela se jouer dans l'exemple de magasin. Oui - le magasin est fonctionnel et vous pouvez acheter les autocollants. ?

Haute performance

Bureau	Mobile

Mobile réactif

Listes	Chariot

La technologie

NEXT.JS + Tailwind CSS
Graphique
Localstorage pour persister la session d'utilisateur
Faire du shoprif
Vercel
Icônes impressionnantes de police
Font Josefin sans Google

Comment utiliser

Par défaut, le magasin est défini pour interroger et afficher tous les produits dans une seule collection. Vous pouvez prolonger cela pour interroger plusieurs collections ou tout votre magasin.

Une note sur la pagination dans les requêtes GraphQL

Les requêtes GraphQL sont toutes codées en dur pour extraire le nombre maximal de produits / variantes / images qui est défini sur 250 par Shopify. J'ai fait cela pour garder les choses simples. La pagination aurait rendu les requêtes compliquées et 250 articles sont suffisants pour la plupart des cas d'utilisation.

Si vous avez besoin d'une pagination, vous devrez garder une trace du champ du curseur et continuer à interroger les données jusqu'à ce que vous récupériez tous les éléments.

Variables d'environnement de configuration

Créez un fichier .env.local dans le répertoire racine. Vous devez ajouter ces 4 variables:

 NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=

Le next_public_shopify_store_front_access_token et next_public_shopify_store_domain (ce sera quelque chose comme domain_name.myshopify.com) est nécessaire pour accéder à l'API Shopify Storefront (assurez-vous que vous l'avez configuré dans votre magasin Shopify. Voir les documents pour plus d'informations.

Next_public_shopify_collection est le nom de la collection que vous souhaitez tirer et next_public_local_storage_name est le nom de la clé dont vos utilisateurs stockeront leurs informations de panier. Le nom exact n'est pas si important, même si je vous suggère de le rendre unique, il est donc moins susceptible de s'affronter avec d'autres objets stockés. Quelque chose comme yourstorenameShopifyStore où youstorename est votre nom de magasin Shopify suffira.

Installation

Changez dans le répertoire du projet et exécutez la commande suivante:

 yarn && yarn dev

Mettre à jour les métadonnées du site

Vous pouvez mettre à jour les métadonnées de votre site dans le fichier suivant.config.js.

 env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://doggystickers.xyz',
  siteImagePreviewUrl: '/images/main.jpg',
  twitterHandle: '@your_handle'
}

Mettre à jour les couleurs

Vous pouvez mettre à jour la palette de couleurs dans le fichier tailwind.config.js.

 colors: {
  palette: {
    lighter: '',
    light: '',
    primary: '',
    dark: '',
  },
},

Mettre à jour les données de l'application Web progressive (PWA)

Mettez à jour le fichier manifeste.json et les icônes dans le dossier public / images / icônes.

Vous pouvez utiliser des outils gratuits en ligne tels que https://realfavicongenerator.net/ pour générer rapidement toutes les différentes tailles d'icônes et le fichier favicon.ico.

Déploiement

Vous pouvez le déployer en utilisant n'importe quel nombre de services. Vercel et Netlify sont ceux que je préfère et très faciles à configurer et à synchroniser avec votre référentiel GitHub.

Crédit

Le magasin a été inspiré par le superbe magasin Gatsby Swag ainsi que d'innombrables autres développeurs beaucoup plus capables que moi qui ont publié leur travail génial gratuitement.

Licence

J'ai ouvert ce code sous la licence MIT dans l'espoir que si cela aide les gens à naviguer dans les magasins de commerce électronique de Jamstack comme le magasin Gatsby Swag l'a fait pour moi lorsque j'ai commencé.