jamstack ecommerce

Jamstack E -Commerce als nächstes

JamStack E -Commerce als nächstes bietet eine Möglichkeit, mit einer vollständig konfigurierbaren E -Commerce -Site mit Next.js.

Aus der Box verwendet die Website vollständig statische Daten, die von einem Anbieter von providers/inventoryProvider.js stammen. Sie können diesen Anbieter aktualisieren, um Daten von jeder realen API abzurufen, indem Sie den Aufruf in der getInventory -Funktion ändern.

Live -Vorschau

Klicken Sie hier, um eine Live -Vorschau anzuzeigen.

Andere Jamstack -E -Commerce -Seiten

Kategorieansicht

Artikelansicht

Wagenansicht

Admin -Panel

Erste Schritte

1. Klonen Sie das Projekt

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

2. Installieren Sie die Abhängigkeiten:

$ yarn

# or

$ npm install

3. Führen Sie das Projekt aus

$ npm run dev

# or to build

$ npm run build

Bereitstellung in Vercel

Verwenden Sie die Vercel CLI

vercel

In AWS bereitstellen

npx serverless

Über das Projekt

Rückenwind

Dieses Projekt wird mit Rückenwind gestaltet. Um mehr zu erfahren, wie dies funktioniert, lesen Sie die Dokumentation von Rückenwind hier.

Komponenten

Die Hauptdateien, Komponenten und Bilder, die Sie möglicherweise ändern / ändern möchten, sind:

Logo - public/logo.png
Schaltfläche, ListItem usw. - Komponenten
Formularkomponenten - Komponenten/Formkomponenten
Kontext (Zustand) - Kontext/Maincontext.js
Seiten (Administrator, Karren, Kasse, Index) - Seiten
Vorlagen (Kategorieansicht, Einzelelementansicht, Bestandsansichten) - Vorlagen

Wie es funktioniert

Bei der Einrichtung wird das Inventar aus einer lokalen, hart codierten Array von Inventarelementen abgerufen. Dies kann einfach so konfiguriert werden, dass sie stattdessen von einer Remote -Quelle wie Shopify oder einer anderen CMS oder einer anderen Datenquelle abgerufen werden, indem der Inventaranbieter geändert wird.

Konfigurieren des Inventaranbieters

Aktualisieren Sie Utils/InventoryProvider.js mit Ihrem eigenen Inventaranbieter.

Laden Sie Bilder zur Build -Zeit herunter

Wenn Sie den Anbieter so ändern, dass Bilder von einer Remote -Quelle abgerufen werden, können Sie die Bilder auch lokal zum Erstellen von Zeit herunterladen, um die Leistung zu verbessern. Hier ist ein Beispiel für einen Code, der für diesen Anwendungsfall funktionieren sollte:

 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

Sie können diese Funktion verwenden, um die Bestandsdaten nach dem Abholen zu kartieren und die Bildpfade unter Bezugnahme auf den Ort der heruntergeladenen Bilder zu ersetzen, und würde wahrscheinlich ungefähr so aussehen:

 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 )
    }
  } )
)

Aktualisieren mit dem Auth / Administratorfeld

1. Aktualisieren Sie die Seiten/admin.js mit Anmeldung, Anmelden, Anmeldung und Bestätigen Sie das Zeichen in Methoden.

2. Aktualisieren Sie Komponenten/ViewInventory.js mit Methoden, um mit der tatsächlichen Inventar -API zu interagieren.

3. Aktualisieren Sie Komponenten/FormComponents/AddInventory.js mit Methoden zum Hinzufügen von Elementen zur tatsächlichen Inventar -API.

Roadmap

• Vollständige Produkt- und Kategorie -Suche
• Auto Dropdown -Navigation für eine große Anzahl von Kategorien
• Möglichkeit, Elementdetails mehr / konfigurierbare Metadaten hinzuzufügen
• Themen- + Dunkelmodus
• Optionales Benutzerkonto / Profile außerhalb der Box
• Verwalten Sie das Administratorfeld reaktionsschnell
• Eine Idee oder eine Anfrage haben? Senden Sie ein Problem oder eine Pull -Anfrage!

Andere Überlegungen

Serverseitige Verarbeitung von Zahlungen

Um ein Beispiel für die Verarbeitung von Zahlungen mit Stripe zu sehen, lesen Sie die Lambda-Funktion im Snippets-Ordner.

Erwägen Sie außerdem, die Summen zu überprüfen, indem Sie ein Array von IDs in die Funktion eingeben, die Gesamtsumme auf dem Server berechnen und dann die Summen zum Überprüfen und sicherstellen, dass sie übereinstimmen.