jamstack ecommerce

Jamstack Ecommerce Suivant

Jamstack Ecommerce fournit un moyen de se mettre rapidement en service avec un site de commerce électronique entièrement configurable en utilisant next.js.

Hors de la boîte, le site utilise des données complètement statiques provenant d'un fournisseur chez providers/inventoryProvider.js . Vous pouvez mettre à jour ce fournisseur pour récupérer les données de n'importe quelle véritable API en modifiant l'appel dans la fonction getInventory .

Aperçu en direct

Cliquez ici pour voir un aperçu en direct.

Autres pages de commerce électronique Jamstack

Vue de catégorie

Affichage de l'article

Vue de chariot

Panneau d'administration

Commencer

1. Cloner le projet

$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git

2. Installez les dépendances:

$ yarn

# or

$ npm install

3. Exécuter le projet

$ npm run dev

# or to build

$ npm run build

Déployer à Vercel

Utilisez le Vercel CLI

vercel

Déployer sur AWS

npx serverless

À propos du projet

Vent arrière

Ce projet est conçu en utilisant le vent arrière. Pour en savoir plus comment cela fonctionne, consultez la documentation de vent arrière ici.

Composants

Les fichiers, composants et images principaux que vous souhaitez modifier / modifier sont:

Logo - public / logo.png
Bouton, listItem, etc. - Composants
Composants de formulaires - Composants / composants de formulaires
Context (état) - Context / MainContext.js
Pages (admin, panier, caisse, index) - pages
Modèles (vue de catégorie, vue unique, vues d'inventaire) - Modèles

Comment ça marche

Au fur et à mesure qu'il est configuré, l'inventaire est récupéré à partir d'un tableau local codé en dur d'éléments d'inventaire. Cela peut facilement être configuré pour être récupéré à partir d'une source distante comme Shopify ou une autre CMS ou une source de données en modifiant le fournisseur d'inventaire.

Configuration du fournisseur d'inventaire

Mettez à jour les utils / inventoryprovider.js avec votre propre fournisseur d'inventaire.

Télécharger des images au moment de la construction

Si vous modifiez le fournisseur pour récupérer des images à partir d'une source distante, vous pouvez choisir de télécharger les images localement au moment de la construction pour améliorer les performances. Voici un exemple d'un code qui devrait fonctionner pour ce cas d'utilisation:

 import fs from 'fs'
import axios from 'axios'
import path from 'path'

function getImageKey ( url ) {
  const split = url . split ( '/' )
  const key = split [ split . length - 1 ]
  const keyItems = key . split ( '?' )
  const imageKey = keyItems [ 0 ]
  return imageKey
}

function getPathName ( url , pathName = 'downloads' ) {
  let reqPath = path . join ( __dirname , '..' )
  let key = getImageKey ( url )
  key = key . replace ( / % / g , "" )
  const rawPath = ` ${ reqPath } /public/ ${ pathName } / ${ key } `
  return rawPath
}

async function downloadImage ( url ) {
  return new Promise ( async ( resolve , reject ) => {
    const path = getPathName ( url )
    const writer = fs . createWriteStream ( path )
    const response = await axios ( {
      url ,
      method : 'GET' ,
      responseType : 'stream'
    } )
    response . data . pipe ( writer )
    writer . on ( 'finish' , resolve )
    writer . on ( 'error' , reject )
  } )
}

export default downloadImage

Vous pouvez utiliser cette fonction pour cartographier les données d'inventaire après avoir récupéré et remplacer les chemins d'image par une référence à l'emplacement des images téléchargées, ressemblerait probablement à ceci:

 await Promise . all (
  inventory . map ( async ( item , index ) => {
    try {
      const relativeUrl = `../downloads/ ${ item . image } `
      if ( ! fs . existsSync ( ` ${ __dirname } /public/downloads/ ${ item . image } ` ) ) {
        await downloadImage ( image )
      }
      inventory [ index ] . image = relativeUrl
    } catch ( err ) {
      console . log ( 'error downloading image: ' , err )
    }
  } )
)

Mise à jour avec le panneau Auth / Admin

1. Mettez à jour les pages / admin.js avec l'inscription, le signe, la connexion, la déconnexion et confirmer les méthodes de connexion.

2. Mettez à jour les composants / ViewInventory.js avec des méthodes pour interagir avec l'API d'inventaire réel.

3. Mettez à jour les composants / formcomponents / addinventory.js avec des méthodes pour ajouter un élément à l'API d'inventaire réel.

Feuille de route

• Recherche complète de produits et de catégorie
• Navigation automatique des catégories pour un grand nombre de catégories
• Possibilité d'ajouter des métadonnées de plus / plus configurables aux détails de l'élément
• Themeing + Mode sombre
• Compte d'utilisateur / profils facultatifs hors de la boîte
• Rendre le panneau d'administration réactif
• Vous avez une idée ou une demande? Soumettez un problème ou une demande de traction!

Autres considérations

Traitement côté serveur des paiements

Pour voir un exemple de la façon de traiter les paiements côté serveur avec Stripe, consultez la fonction lambda dans le dossier des extraits.

Envisagez également de vérifier les totaux en transmettant un tableau d'ID dans la fonction, en calculant le total sur le serveur, puis en comparant les totaux pour vérifier et assurez-vous qu'ils correspondent.