jamstack ecommerce

jamstack อีคอมเมิร์ซถัดไป

Jamstack Ecommerce Next ให้วิธีการเริ่มต้นและทำงานกับเว็บไซต์อีคอมเมิร์ซที่กำหนดค่าได้อย่างเต็มที่โดยใช้ Next.js.

เว็บไซต์ใช้ข้อมูลคงที่อย่างสมบูรณ์ที่มาจากผู้ให้บริการที่ providers/inventoryProvider.js คุณสามารถอัปเดตผู้ให้บริการนี้เพื่อดึงข้อมูลจาก API จริงใด ๆ โดยเปลี่ยนการโทรในฟังก์ชัน getInventory

ดูตัวอย่างสด

คลิกที่นี่เพื่อดูตัวอย่างสด

หน้าอีคอมเมิร์ซ Jamstack อื่น ๆ

มุมมองหมวดหมู่

มุมมองรายการ

มุมมองเกวียน

แผงผู้ดูแลระบบ

เริ่มต้น

1. โคลนโครงการ

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

2. ติดตั้งการอ้างอิง:

$ yarn

# or

$ npm install

3. เรียกใช้โครงการ

$ npm run dev

# or to build

$ npm run build

ปรับใช้กับ vercel

ใช้ vercel cli

vercel

ปรับใช้กับ AWS

npx serverless

เกี่ยวกับโครงการ

ลมลม

โครงการนี้มีสไตล์โดยใช้ Tailwind หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานให้ตรวจสอบเอกสาร Tailwind ที่นี่

ส่วนประกอบ

ไฟล์ส่วนประกอบและรูปภาพหลักที่คุณอาจต้องการเปลี่ยน / แก้ไขคือ:

โลโก้ - สาธารณะ/โลโก้
ปุ่ม, listItem, ฯลฯ - ส่วนประกอบ
ส่วนประกอบแบบฟอร์ม - ส่วนประกอบ/รูปแบบ
บริบท (สถานะ) - บริบท/maincontext.js
หน้า (ผู้ดูแลระบบ, รถเข็น, เช็คเอาต์, ดัชนี) - หน้า
เทมเพลต (มุมมองหมวดหมู่, มุมมองรายการเดียว, มุมมองสินค้าคงคลัง) - เทมเพลต

มันทำงานอย่างไร

เมื่อมีการตั้งค่าสินค้าคงคลังจะถูกดึงมาจากรายการสินค้าคงคลังที่มีรหัสฮาร์ด สิ่งนี้สามารถกำหนดค่าได้อย่างง่ายดายแทนจากแหล่งไกลเช่น Shopify หรือ CMS หรือแหล่งข้อมูลอื่นโดยการเปลี่ยนผู้ให้บริการสินค้าคงคลัง

การกำหนดค่าผู้ให้บริการสินค้าคงคลัง

อัปเดต utils/InventoryProvider.js พร้อมผู้ให้บริการสินค้าคงคลังของคุณเอง

ดาวน์โหลดภาพในเวลาสร้าง

หากคุณเปลี่ยนผู้ให้บริการเพื่อดึงภาพจากแหล่งไกลคุณอาจเลือกที่จะดาวน์โหลดภาพในเครื่องในเวลาที่สร้างเพื่อปรับปรุงประสิทธิภาพ นี่คือตัวอย่างของรหัสบางอย่างที่ควรใช้สำหรับกรณีการใช้งานนี้:

 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

คุณสามารถใช้ฟังก์ชั่นนี้เพื่อทำแผนที่ผ่านข้อมูลสินค้าคงคลังหลังจากดึงข้อมูลและแทนที่เส้นทางรูปภาพด้วยการอ้างอิงถึงตำแหน่งของภาพที่ดาวน์โหลด

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

อัปเดตด้วยแผงตรวจสอบความถูกต้อง / ผู้ดูแลระบบ

1. อัปเดต หน้า/admin.js ด้วยการลงทะเบียนลงชื่อเข้าใช้ลงชื่อเข้าใช้และยืนยันวิธีการลงชื่อเข้าใช้

2. อัปเดต ส่วนประกอบ/viewInventory.js ด้วยวิธีการโต้ตอบกับ API สินค้าคงคลังจริง

3. อัปเดต ส่วนประกอบ/formComponents/addInventory.js ด้วยวิธีการเพิ่มรายการลงใน API สินค้าคงคลังจริง

แผนงาน

• การค้นหาผลิตภัณฑ์และหมวดหมู่ทั้งหมด
• การนำทางแบบเลื่อนลงอัตโนมัติสำหรับหมวดหมู่จำนวนมาก
• ความสามารถในการเพิ่มข้อมูลเมตาที่กำหนดค่าได้มากขึ้น / มากขึ้นในรายละเอียดรายการ
• ธีม + โหมดมืด
• บัญชีผู้ใช้ / โปรไฟล์ผู้ใช้เสริมนอกช่อง
• ทำให้แผงผู้ดูแลระบบตอบสนอง
• มีความคิดหรือคำขอ? ส่งปัญหาหรือคำขอดึง!

ข้อพิจารณาอื่น ๆ

การประมวลผลการชำระเงินฝั่งเซิร์ฟเวอร์

หากต้องการดูตัวอย่างของวิธีการประมวลผลการชำระเงินฝั่งเซิร์ฟเวอร์ด้วยแถบให้ตรวจสอบฟังก์ชั่นแลมบ์ดาในโฟลเดอร์ตัวอย่าง

นอกจากนี้ให้พิจารณาการตรวจสอบผลรวมโดยผ่านอาร์เรย์ของ ID ลงในฟังก์ชันโดยคำนวณผลรวมบนเซิร์ฟเวอร์จากนั้นเปรียบเทียบผลรวมเพื่อตรวจสอบและตรวจสอบให้แน่ใจ