jamstack ecommerce

Jamstack eCommerce berikutnya

Jamstack eCommerce Next menyediakan cara untuk segera bangun dan berjalan dengan situs eCommerce yang sepenuhnya dapat dikonfigurasi menggunakan Next.js.

Di luar kotak, situs ini menggunakan data statis yang sepenuhnya berasal dari penyedia di providers/inventoryProvider.js . Anda dapat memperbarui penyedia ini untuk mengambil data dari API nyata mana pun dengan mengubah panggilan dalam fungsi getInventory .

Pratinjau Langsung

Klik di sini untuk melihat pratinjau langsung.

Halaman eCommerce Jamstack lainnya

Tampilan Kategori

Tampilan Item

Tampilan gerobak

Panel Admin

Memulai

1. Klon proyek

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

2. Instal dependensi:

$ yarn

# or

$ npm install

3. Jalankan proyek

$ npm run dev

# or to build

$ npm run build

Diseret ke Vercel

Gunakan Vercel Cli

vercel

Digunakan ke AWS

npx serverless

Tentang proyek

Tailwind

Proyek ini ditata menggunakan Tailwind. Untuk mempelajari lebih lanjut cara kerjanya, lihat dokumentasi Tailwind di sini.

Komponen

File utama, komponen, dan gambar yang mungkin ingin Anda ubah / modifikasi adalah:

Logo - Public/Logo.png
Tombol, ListItem, dll. - Komponen
Bentuk Komponen - Komponen/Formsomponen
Konteks (state) - context/maincontext.js
Halaman (admin, keranjang, checkout, indeks) - halaman
Templat (Tampilan Kategori, Tampilan Item Tunggal, Tampilan Inventaris) - Templat

Cara kerjanya

Seperti yang diatur, inventaris diambil dari serangkaian item inventaris yang berkode keras. Ini dapat dengan mudah dikonfigurasi untuk diambil dari sumber jarak jauh seperti Shopify atau CMS atau sumber data lain dengan mengubah penyedia inventaris.

Mengkonfigurasi Penyedia Inventaris

Perbarui utils/inventoryprovider.js dengan penyedia inventaris Anda sendiri.

Unduh gambar pada waktu build

Jika Anda mengubah penyedia untuk mengambil gambar dari sumber jarak jauh, Anda dapat memilih untuk juga mengunduh gambar secara lokal pada waktu membangun untuk meningkatkan kinerja. Berikut adalah contoh dari beberapa kode yang harus berfungsi untuk kasus penggunaan ini:

 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

Anda dapat menggunakan fungsi ini untuk memetakan melalui data inventaris setelah mengambil dan mengganti jalur gambar dengan referensi ke lokasi gambar yang diunduh, mungkin akan terlihat seperti ini:

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

Memperbarui dengan panel auth / admin

1. Perbarui halaman/admin.js dengan pendaftaran, masuk, masuk, keluar, dan konfirmasi metode masuk.

2. Perbarui komponen/viewInventory.js dengan metode untuk berinteraksi dengan API inventaris yang sebenarnya.

3. Perbarui Komponen/Formcomponents/AddInventory.js dengan metode untuk menambahkan item ke API inventaris aktual.

Peta jalan

• Pencarian Produk dan Kategori Lengkap
• Navigasi dropdown otomatis untuk sejumlah besar kategori
• Kemampuan untuk menambahkan lebih banyak / lebih banyak metadata yang dapat dikonfigurasi ke detail item
• Tema + Mode Gelap
• Akun / profil pengguna opsional di luar kotak
• Membuat panel admin responsif
• Punya ide atau permintaan? Kirimkan masalah atau permintaan tarik!

Pertimbangan lainnya

Pemrosesan pembayaran sisi server

Untuk melihat contoh cara memproses pembayaran sisi server dengan stripe, lihat fungsi lambda di folder cuplikan.

Juga, pertimbangkan untuk memverifikasi total dengan menyerahkan array ID ke dalam fungsi, menghitung total pada server, kemudian membandingkan total untuk memeriksa dan memastikan mereka cocok.