commercejs nextjs demo store
1.0.0
ร้านค้าสาธิตอีคอมเมิร์ซที่มีความสมบูรณ์สูงซึ่งสร้างขึ้นโดยใช้ Commerce.js SDK และ Next.js พร้อมการปรับใช้สดเพื่อ netlify
บันทึก
readme นี้จะแนะนำคุณในการทำงานและทำงานด้วยเทมเพลตอีคอมเมิร์ซที่เต็มเปี่ยม เราได้กำหนดค่าเทมเพลตนี้ให้คุณใช้การปรับใช้เพียงครั้งเดียวเพื่อให้ NetLify หรือคุณสามารถปรับใช้กับแพลตฟอร์มโฮสติ้งที่คุณเลือกด้วยตนเอง
สำหรับการสอนอย่างละเอียดเกี่ยวกับการสร้างแอปพลิเคชัน Ecommerce Jamstack นี้โปรดไปที่นี่
yarn global add @chec/cli ตอนนี้คุณได้ติดตั้ง CHI CLI ทั่วโลกแล้วคุณจะสามารถเข้าถึงรายการ chec [COMMANDS] ซึ่งหนึ่งในนั้นคือการลงทะเบียนบัญชี CHEC ไปข้างหน้าและตั้งค่าไว้!
# Open the Chec registration page in your browser
chec registerทำตามส่วนที่เหลือของการเดินผ่านเพื่อตั้งค่ารายละเอียดการค้าของคุณ หรือคุณสามารถไปที่นี่เพื่อลงทะเบียนบัญชีตรวจสอบ
การปรับใช้แบบคลิกเดียวช่วยให้คุณสามารถเชื่อมต่อ NetLify กับบัญชี GitHub ของคุณเพื่อโคลนที่เก็บของ commercejs-nextjs-demo-store และปรับใช้โดยอัตโนมัติ อย่าลืมไปที่ NetLify และสมัครใช้งานบัญชีก่อนคลิกปุ่มปรับใช้
โดยการคลิกที่ปุ่มด้านบนคุณจะถูกนำทางไปยังหน้าการปรับใช้โดยตรงของ NetLify โดยมีที่เก็บของโครงการผ่านเป็นพารามิเตอร์ใน URL คลิกปุ่ม Connect to GitHub ตั้งชื่อที่เก็บของคุณและป้อนในคีย์สาธารณะนี้ในการป้อนข้อมูล คีย์สาธารณะ CHE โปรดทราบว่าเพื่อจุดประสงค์ในการพาคุณขึ้นมาพร้อมกับการปรับใช้ตัวอย่างสดของร้านค้าสาธิตเราได้จัดเตรียมคีย์สาธารณะจากบัญชีผู้ค้าสาธิตของเรา ตอนนี้บันทึกและปรับใช้เว็บไซต์ของคุณ
โปรดทราบว่าบิลด์เริ่มต้นจะล้มเหลวหากคุณป้อนคีย์สาธารณะของคุณแทนคีย์ผู้ขายตัวอย่างที่ให้ไว้ การปรับใช้แบบคลิกเดียวนั้นมีไว้เพื่อวัตถุประสงค์ในการนำเสนอเพื่อหมุนการปรับใช้อย่างรวดเร็ว การใช้บัญชีผู้ค้าของคุณหมายความว่าคุณจะต้องมีข้อมูลที่เหมาะสมเช่นสินทรัพย์และหมวดหมู่หลายประเภทที่เกี่ยวข้องกับผลิตภัณฑ์ของคุณ หากคุณต้องการใช้บัญชีผู้ค้าของคุณโปรดทำตามขั้นตอนการตั้งค่าด้วยตนเองด้านล่าง
การตั้งค่าด้วยตนเองเกี่ยวข้องกับการโคลนนิ่ง repo ในสภาพแวดล้อมในท้องถิ่นของคุณการเพาะข้อมูลตัวอย่างที่ให้ไว้ในบัญชี CHE ของคุณและปรับใช้เพื่อ netlify
ขั้นตอนที่ 1. โคลน repo และติดตั้งการพึ่งพา
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarnขั้นตอนที่ 2. ตั้งค่าตัวแปรสภาพแวดล้อมของคุณ
แทนที่ไฟล์ตัวอย่าง .env.example dotenv ที่รูทของโครงการเพื่อจัดเก็บ chec public_key ของคุณรวมถึง secret_key ของคุณ
# Copy from source file to destination file .env
cp .env.example .env คุณสามารถเข้าถึงคีย์ API ของคุณได้ภายใต้การตั้งค่า CHEAD Dashboard ของคุณจากนั้นนำทางไปยังแท็บพัฒนาเพื่อคัดลอกคีย์สาธารณะและคีย์ลับของคุณ แทนที่ NEXT_PUBLIC_CHEC_PUBLIC_KEY ที่ให้ไว้ด้วยตัวคุณเองและกรอกข้อมูลใน CHEC_SECRET_KEY ของคุณในไฟล์. .env คีย์ลับเป็นสิ่งจำเป็นสำหรับสคริปต์เมล็ดที่จะได้รับอนุญาตให้ใช้ข้อมูลตัวอย่างที่เหมาะสมในบัญชี /seeds ลงในบัญชี CHEC ของคุณ ลบคีย์ลับเมื่อข้อมูลถูกเพาะ
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =ไฟล์นี้มีความหมายที่จะไม่มุ่งมั่นที่จะควบคุมแหล่งที่มาและจะถูกซ่อนอยู่ในเบราว์เซอร์ไฟล์
ขั้นตอนที่ 3 เมล็ดข้อมูลที่จำเป็นในการเพิ่มพลังงานให้กับร้านค้าของคุณและเริ่มสภาพแวดล้อมการพัฒนาของคุณ (จำเป็นสำหรับการตั้งค่าเริ่มต้น)
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn devตอนนี้ตรงไปที่ http: // localhost: 3000 หลังจากเริ่มการพัฒนาของคุณตอนนี้ไซต์ของคุณควรมีข้อมูลตัวอย่าง!
หากคุณกำลังแทนที่ผลิตภัณฑ์ตัวอย่างหรือหมวดหมู่คุณสามารถปรับแต่งภาพหมวดหมู่ของคุณเองภายใต้ `สาธารณะ/รูปภาพ/คอลเลกชัน ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่งข้อมูลด้านล่าง
ขั้นตอนที่ 5. ทำการเปลี่ยนแปลงที่จำเป็นใด ๆ ที่คุณต้องการและส่งรหัสไปยังที่เก็บข้อมูลบน GitHub หรือแพลตฟอร์มที่คุณเลือก
ขั้นตอนที่ 6. ปรับใช้เว็บไซต์ของคุณ
ให้แน่ใจว่าได้ลงทะเบียนสำหรับบัญชี netlify และเข้าสู่ระบบ คลิก เว็บไซต์ใหม่จากปุ่ม Git และให้การเข้าถึงเพื่อเลือก repo ของคุณ การตั้งค่าบิลด์ของคุณจะถูกกรอกโดยอัตโนมัติสำหรับคุณจาก netlify.toml ในเทมเพลต ในการป้อนตัวแปรสภาพแวดล้อมของคุณคลิก แสดงขั้นสูง จากนั้น ตัวแปรใหม่ และเติมอินพุตคีย์เป็น NEXT_PUBLIC_CHEC_PUBLIC_KEY และอินพุตค่าด้วยคีย์สาธารณะของคุณ คุณสามารถเข้าถึงคีย์ API ของคุณได้ในการตรวจสอบของคุณภายใต้การตั้งค่าจากนั้นนำทางไปยังแท็บนักพัฒนาเพื่อคัดลอกคีย์สาธารณะของคุณ
ตอนนี้ไปข้างหน้าและคลิก "ปรับใช้เว็บไซต์" เพื่อดูไซต์สดของคุณ!
คำสั่งนี้จะดาวน์โหลดตัวอย่างโครงการนี้จาก GitHub และเริ่มต้นบนเครื่องของคุณ คุณจะมีอิสระในการแก้ไขรหัสที่ดาวน์โหลดและเล่นกับ Commerce.js หลังจากนั้น
ขั้นตอนที่ 1. ติดตั้ง CHI CLI
npm install -g @chec/cli
# or
yarn add -g @chec/cliขั้นตอนที่ 2. สร้างร้านขายตัวอย่าง
chec demo-store
เมื่อได้รับแจ้งให้เลือกร้านค้าสาธิตจากรายการให้เลือก "Commercejs-Nextjs-Demo-Store" คำสั่งนี้จะนำข้อมูลตัวอย่างบางอย่างไปยังบัญชี CHEC ของคุณ สำหรับข้อมูลเพิ่มเติมดูเอกสาร CHI CLI
เนื่องจากโครงการนี้เป็นหน้าร้านที่เต็มเปี่ยมซึ่งแสดงการออกแบบที่กำหนดเองและการไหลของผู้ใช้จึงมีข้อแม้บางอย่างที่คุณจะพบหากคุณปรับแต่งข้อมูลของคุณในแผงควบคุมตรวจสอบ หนึ่ง gotcha อยู่กับข้อมูลหมวดหมู่ใน UI: รูปภาพคุณลักษณะหมวดหมู่จะถูกเพิ่มใน CHEC API เป็นข้อมูลเมตา หากคุณเพิ่มข้อมูลหมวดหมู่ตัวอย่างใหม่หรือแก้ไขคุณสามารถปรับแต่งภาพคุณสมบัติหมวดหมู่โดยการแทนที่สินทรัพย์ภาพของคุณภายใต้ public/images/collection ชื่อไฟล์จะต้องยังคงเหมือนเดิม หากคุณวางแผนที่จะเปลี่ยนชื่อไฟล์หรือเพิ่มหมวดหมู่ใหม่คุณจะต้องเพิ่มข้อมูลเมตาใหม่ แอพจะคาดหวังการตั้งค่าสินค้าคงคลังด้านล่างเพื่อสร้างและแสดงผลส่วนประกอบดังนั้นหากคุณต้องการปรับแต่งกับสินค้าคงคลังของคุณในแบ็กเอนด์ให้แน่ใจว่าคุณ:
public/images/collection ด้วยรูปภาพของคุณเองร้านค้าสาธิตนี้ใช้คุณสมบัติที่หลากหลายโดย Commerce.js และขับเคลื่อนโดย Dhead Dashboard
ตะกร้าสินค้าใช้ Commerce.js Cart API รถเข็นยังคงอยู่นานถึง 30 วันและ Commerce.js จะจดจำรถเข็นสำหรับผู้เข้าชมโดยอัตโนมัติ
Commerce.js มีเครื่องมือมากมายในการปรับปรุงการใช้งานการชำระเงิน การชำระเงินในร้านขายตัวอย่างนี้ใช้ประโยชน์จาก:
Commerce.js จัดเตรียมฟังก์ชั่น inbuilt สำหรับการสนับสนุนการเข้าสู่ระบบของลูกค้าโดยไม่มีรหัสด้านเซิร์ฟเวอร์ใด ๆ ร้านค้าสาธิตนี้มีหน้าเข้าสู่ระบบลูกค้าที่มีอยู่และให้รายละเอียดเกี่ยวกับคำสั่งซื้อก่อนหน้านี้ ข้อมูลลูกค้ายังใช้ในการเติมเงินล่วงหน้าด้วยรายละเอียดของลูกค้าที่รู้จัก
ร้านขายตัวอย่างนี้ได้รับการกำหนดค่าด้วยเช็ค "เกตเวย์ทดสอบ" ออกจากกล่องซึ่งมีตัวเลือกการชำระเงินที่มีประโยชน์ในขณะที่ทดสอบหน้าร้านของคุณ นอกจากนี้การรองรับองค์ประกอบของแถบจะรวมอยู่หากมีการกำหนดค่าแถบบนแผงควบคุม
Commerce.js <> เอกสารการรวมลาย
คุณต้องเปิดใช้งานแถบในแผงควบคุมโดยทำตามคำแนะนำที่ให้ไว้ คุณสามารถเพิ่มปุ่ม Sandbox ของคุณสำหรับ Stripe และใช้คีย์ API Public Sandbox เพื่อทดสอบด้วย Stripe ทั้งปุ่มตรวจสอบ API Public และปุ่ม "เผยแพร่" Stripe ได้รับการกำหนดค่าในไฟล์. .env ดูขั้นตอนที่สองของ "การตั้งค่าด้วยตนเองและการปรับใช้ netlify"
แยกโครงการนี้เพื่อปรับแต่งและขยายการสาธิตตามที่คุณต้องการ นี่คือแนวคิดบางอย่างเกี่ยวกับสิ่งที่คุณสามารถทำได้และทิศทางที่คุณสามารถใช้อีคอมเมิร์ซได้
