demo store
1.0.0
ร้านค้าสาธิตนี้เป็นโซลูชันอีคอมเมิร์ซแบบคงที่โดยสมบูรณ์ (พร้อมความสามารถ SSR) ที่ขับเคลื่อนโดย Commerce Layer ร้านค้ามีฟีเจอร์ครบถ้วนและใช้งานได้เต็มรูปแบบ โดยไม่จำเป็นต้องมีบริการจากบุคคลที่สาม คุณสามารถปรับแต่งของคุณเองได้อย่างง่ายดายด้วยระดับการปรับแต่งที่แตกต่างกัน อ่านต่อเพื่อเรียนรู้เพิ่มเติม
โปรเจ็กต์ Demo Store ประกอบด้วยที่เก็บสองแห่ง โดยอันนี้เป็นเทมเพลต GitHub
Commerce Layer คือ API การค้าแบบหลายตลาดและระบบการจัดการคำสั่งซื้อที่ช่วยให้คุณสามารถเพิ่มความสามารถในการช็อปปิ้งทั่วโลกให้กับเว็บไซต์ แอปมือถือ แชทบอท อุปกรณ์สวมใส่ เสียง หรือ IoT ได้อย่างง่ายดาย เขียนสแต็กของคุณด้วยเครื่องมือที่ดีที่สุดที่คุณเชี่ยวชาญและชื่นชอบอยู่แล้ว ทำให้ประสบการณ์ใดๆ สามารถซื้อได้ทุกที่ทุกเวลาผ่าน API ที่รวดเร็วระดับองค์กรและปลอดภัย
เราตัดสินใจสร้างร้านค้าสาธิตโดยลบบริการของบุคคลที่สามทั้งหมดที่โดยปกติจะใช้เพื่อสร้างประสบการณ์เว็บไซต์อีคอมเมิร์ซที่ครอบคลุม (CMS, การค้นหา, PIM ฯลฯ)
ทุกอย่างที่เกี่ยวข้องกับเนื้อหาจะถูกจัดเก็บเป็นไฟล์ JSON หากต้องการสร้างร้านค้าสาธิตของคุณเอง คุณจะต้องสร้างไฟล์เหล่านี้ด้วยตนเองหรือผ่านสคริปต์
ร้านค้าสาธิตมาพร้อมกับ:
การบูรณาการกับ Commerce Layer ทำได้โดยการใช้ประโยชน์จากเครื่องมือนักพัฒนาโอเพ่นซอร์สของเรา โดยเฉพาะ:
โปรเจ็กต์ร้านค้าสาธิตประกอบด้วยที่เก็บสองแห่งที่คุณสามารถใช้ประโยชน์เพื่อสร้างร้านค้าของคุณเอง โดยขึ้นอยู่กับจำนวนการปรับแต่งที่คุณต้องการเพิ่ม:
demo-store
นี่คือ เทมเพลต GitHub ที่ใช้ demo-store-core ที่กล่าวถึงด้านล่างเป็นโมดูลย่อย git หากคุณพอใจกับคุณสมบัติและรูปลักษณ์ของ Commerce Layer Demo Store เราขอแนะนำให้คุณปฏิบัติตามเส้นทางนี้ คุณจะไม่ต้องกังวลกับซอร์สโค้ดทั้งหมด และคุณมีอิสระที่จะมุ่งเน้นไปที่ข้อมูลและเนื้อหาของคุณเท่านั้น ยิ่งไปกว่านั้น คุณยังจะได้รับการอัปเดตฟรีโดยแทบไม่มีความเสี่ยงเพียงแค่ใช้งาน:
git submodule update --remote
npm install demo-store-core
พื้นที่เก็บข้อมูลนี้มีซอร์สโค้ด หากคุณต้องการปรับแต่งร้านค้าของคุณอย่างสมบูรณ์ (พฤติกรรม, UI, UX ฯลฯ ) คุณเพียงแค่ต้องแยก repo นี้และสร้างของคุณเอง นี่เป็นวิธีการมีส่วนร่วมเช่นกัน
โปรดทราบว่าหากคุณปฏิบัติตามเส้นทางนี้และเริ่มแยกจากซอร์สโค้ดดั้งเดิมมากเกินไป ความเสี่ยงที่จะสูญเสียการอัปเดตทั้งหมดในอนาคตหรือไม่สามารถทำซ้ำได้
หากคุณไม่มีประสบการณ์กับ Commerce Layer คุณสามารถเริ่มต้นด้วยการสร้างบัญชี (ฟรี!) และปฏิบัติตามบทช่วยสอนการเริ่มต้นใช้งาน
สำคัญ
โปรดทราบว่าในการตั้งค่าร้านค้าสาธิต คุณต้องมีองค์กรที่ได้รับการกำหนดค่าอย่างเหมาะสม โดยมีผลิตภัณฑ์อย่างน้อยสองสามรายการและตลาดเดียว
หากคุณต้องการเริ่มต้นใหม่ คุณสามารถสร้างองค์กรใหม่และใช้คำสั่งต่อไปนี้เพื่อกำหนดค่าโปรเจ็กต์ที่คล้ายกับ Demo Store ของ Commerce Layer
เมื่อสร้างองค์กรแล้ว คุณจะต้องสร้างไคลเอ็นต์ API สองรายการ: ช่องทางการขาย และ การผสานรวม
หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้ง Commerce Layer CLI และปลั๊กอินสองตัว ได้แก่ ปลั๊กอิน Seeder และปลั๊กอินนำเข้า:
npm install -g @commercelayer/cli
commercelayer plugins:install seeder
commercelayer plugins:install importsตอนนี้คุณสามารถล็อกอินเข้าสู่ไคลเอ็นต์ API การรวมของคุณจาก CLI:
commercelayer applications:login
--clientId Oy5F2TbPYhOZsxy1tQd9ZVZ...
--clientSecret 1ZHNJUgn_1lh1mel06gGDqa...
--organization my-awesome-organization
--alias cli-adminเมื่อองค์กรของคุณได้รับการตั้งค่าแล้ว เพื่อสร้างร้านค้าของคุณ คุณต้องทำตามขั้นตอนง่ายๆ... มาเริ่มกันเลย!
ไม่ว่าคุณจะเลือกเส้นทางใด คุณต้องสร้างพื้นที่เก็บข้อมูลใหม่สำหรับร้านค้าของคุณก่อน:
หากคุณตัดสินใจที่จะเก็บเทมเพลต demo-store คุณเพียงแค่คลิกที่ "ใช้เทมเพลตนี้" จากหน้าแรกของพื้นที่เก็บข้อมูลบน GitHub จากนั้นเรียกใช้:
git clone < your-repository-url > my-new-project
cd my-new-project
git submodule update --init
npm install
cp ./demo-store-core/packages/website/.env.sample.submodule .env.local
cp -r ./demo-store-core/packages/website/data/json ./data/json หากคุณตัดสินใจที่จะแยกพื้นที่เก็บข้อมูล demo-store-core คุณสามารถเรียกใช้สิ่งนี้แทน:
git clone < your-repository-url > my-new-project
cd my-new-project
npm install
cp ./packages/website/.env.sample ./packages/website/.env.local แก้ไข .env.local และกรอกข้อมูลที่ขาดหายไปทั้งหมด:
# this is the 'sales channel' client id
NEXT_PUBLIC_CL_CLIENT_ID =er34TWFcd24RFI8KJ52Ws6q...ขั้นตอนนี้เป็นทางเลือก หากคุณมีองค์กรที่กำหนดค่าอย่างถูกต้องในบัญชี Commerce Layer ของคุณแล้ว คุณสามารถข้ามไปได้
สคริปต์ต่อไปนี้จะเติมทรัพยากรทั้งหมดให้กับองค์กรของคุณที่คุณต้องการเพื่อสร้างอีคอมเมิร์ซแบบหลายตลาดด้วย Commerce Layer (อันที่เราใช้สำหรับร้านค้าสาธิตของเรา)
npm run seeder:seed -ws --if-presentหากคำสั่งด้านบนดำเนินการโดยไม่มีข้อผิดพลาด โปรดข้ามไปยังขั้นตอนที่ 4 มิฉะนั้น คุณยังคงสามารถกำหนดข้อมูลตัวอย่างให้กับองค์กรของคุณโดยใช้ CLI ได้โดยการรันสิ่งต่อไปนี้:
commercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/ ไฟล์ json/countries.json มีรายชื่อประเทศที่พร้อมใช้งานสำหรับอีคอมเมิร์ซของคุณ คุณสามารถเปลี่ยนได้ด้วยโปรแกรมแก้ไขที่คุณต้องการ เพียงตรวจสอบให้แน่ใจว่าได้แทนที่ผลลัพธ์ทั้งหมดของ "market": xxx ด้วยตลาดที่เกี่ยวข้องขององค์กรของคุณ คุณสามารถรับรายชื่อตลาดของคุณได้จากแดชบอร์ดผู้ดูแลระบบ Commerce Layer หรือโดยการรันคำสั่งนี้:
npm run markets -ws --if-presentnpm run dev
# http://localhost:3000/ คุณสามารถค้นหาโค้ดล่าสุดของ demo-store-core ได้ในสาขา main เสมอ
หากต้องการอัปเดตร้านค้าสาธิตของคุณเป็นการเปลี่ยนแปลงล่าสุด คุณสามารถเรียกใช้:
git submodule update --remote
npm installบางครั้งอาจเกิดขึ้นได้ว่าเวอร์ชันหลักใหม่มีการเปลี่ยนแปลงที่สำคัญ ในกรณีนี้ การอัปเดตเป็นเวอร์ชันล่าสุด ร้านค้าสาธิตของคุณอาจหยุดทำงาน และคุณจะต้องแก้ไขปัญหาทั้งหมดด้วยตนเองโดยปฏิบัติตามบันทึกประจำรุ่น
หากต้องการ คุณสามารถรับการแจ้งเตือน GitHub ทันทีที่มีการเปิดตัวเวอร์ชันใหม่
เมื่อคุณใช้เทมเพลตร้านค้าสาธิต คุณสามารถปรับแต่งองค์ประกอบหลักสามประการได้: ข้อมูลเนื้อหา สถานที่ และไฟล์การกำหนดค่า
เราจะปรับปรุงร้านค้าสาธิตของเราอย่างต่อเนื่องเพื่อเพิ่มคุณสมบัติใหม่และเพิ่มประสิทธิภาพคุณสมบัติที่มีอยู่ เมื่อคุณอัปเดตเป็นรุ่นล่าสุด บิลด์อาจล้มเหลว ดูบันทึกประจำรุ่นเพื่อทำความเข้าใจวิธีการแก้ไขโดยการอัปเดตไฟล์ที่คุณกำหนดเอง
ตามที่กล่าวไว้ข้างต้น Demo Store ของเราสร้างขึ้นจากชุดข้อมูลที่จัดเก็บเป็นไฟล์ JSON เพื่อแยกข้อมูลจากบริการของบุคคลที่สาม หากต้องการสร้างร้านค้าของคุณ คุณจะต้องสร้างและจัดการไฟล์เหล่านี้
ไฟล์ JSON อยู่ที่ data/json/ แต่คุณสามารถเลือกตำแหน่งอื่นได้โดยการเปลี่ยนตัวแปรสภาพแวดล้อม NEXT_PUBLIC_JSON_DATA_FOLDER
ไฟล์คำจำกัดความประเภทจะอยู่ที่ packages/types/src/json/ เรากำลังใช้ zod สำหรับการตรวจสอบสคีมา ดูไฟล์เหล่านี้เพื่อทำความเข้าใจว่าคุณต้องปฏิบัติตามโครงสร้างใด
เมื่อคุณทำการเปลี่ยนแปลงทั้งหมดเสร็จแล้ว คุณสามารถตรวจสอบว่าทุกอย่างถูกต้องหรือไม่โดยเรียกใช้:
npm run test:data
ร้านค้าสาธิตของเราเป็นเว็บไซต์หลายภาษา เมื่อคุณสร้างข้อมูลในขั้นตอนก่อนหน้า คุณอาจสังเกตเห็นว่าบางช่องได้รับการแปลเป็นภาษาท้องถิ่น คุณสามารถเพิ่มภาษาใหม่หรือเปลี่ยนแปลงการแปลที่มีอยู่ได้
ไฟล์ Locale JSON อยู่ที่ data/locales/ แต่คุณสามารถเลือกตำแหน่งอื่นได้โดยการเปลี่ยนตัวแปรสภาพแวดล้อม NEXT_PUBLIC_LOCALES_DATA_FOLDER
ทำดังต่อไปนี้เพื่อเริ่มกำหนดสถานที่เอง:
cp -r ./demo-store-core/packages/website/data/locales ./data/locales # .env.local
NEXT_PUBLIC_LOCALES_DATA_FOLDER =../../../data/locales/ ไฟล์การกำหนดค่าอยู่ที่ config/ แต่คุณสามารถเลือกตำแหน่งอื่นได้โดยการเปลี่ยนตัวแปรสภาพแวดล้อม NEXT_PUBLIC_CONFIG_FOLDER
มีไฟล์การกำหนดค่าสามไฟล์ที่คุณสามารถจัดการได้:
general.config.js
ไฟล์นี้มีการกำหนดค่าทั่วไป
facets.config.js
นี่คือไฟล์การกำหนดค่า facets คุณสามารถเลือกลำดับที่จะแสดงในแผงตัวกรอง ลักษณะที่ปรากฏ และกฎการเรียงลำดับค่า 
variants.config.js
นี่คือไฟล์การกำหนดค่าตัวแปร คุณสามารถเลือกลำดับที่จะแสดงในหน้ารายละเอียดผลิตภัณฑ์และลักษณะที่ปรากฏได้ 
ดำเนินการดังต่อไปนี้เพื่อเริ่มปรับแต่งการกำหนดค่า:
cp -r ./demo-store-core/packages/website/config ./config # .env.local
NEXT_PUBLIC_CONFIG_FOLDER =../../../config/มีตัวแปรสภาพแวดล้อมบางอย่างที่คุณสามารถใช้เพื่อปรับแต่งร้านค้าของคุณได้ สำหรับรายการและคำอธิบายโดยละเอียด คุณสามารถดูไฟล์ env.d.ts เพิ่มเติมได้
คุณสามารถปรับใช้ Demo Store ได้ทุกที่ที่คุณต้องการ คุณเพียงแค่ต้อง:
ร้านค้าสาธิตได้รับการออกแบบมาให้เป็น SSG อันดับแรกและสำคัญที่สุด แต่คุณสามารถเปลี่ยนไปใช้ SSR ได้ในพริบตา เราได้ทดสอบวิธีการปรับใช้แล้ว (เช่น การใช้ GitHub Workflow, Netlify, Vercel ฯลฯ) และคุณสามารถค้นหาข้อมูลเพิ่มเติมได้ที่นี่ หากคุณทำแตกต่างออกไปหรือใช้บริการอื่น และต้องการแบ่งปันขั้นตอนกับชุมชน โปรดเข้าร่วมการสนทนา และขอขอบคุณล่วงหน้า!
วิธีสร้างและปรับใช้ร้านค้าสาธิต:
ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้ให้สอดคล้อง:
NEXT_PUBLIC_DATA_FETCHING =ssg รัน npm run build เพื่อสร้างบิลด์การผลิตที่ได้รับการปรับให้เหมาะสมแบบคงที่สำหรับแอปพลิเคชันของคุณ
คัดลอกโฟลเดอร์ demo-store-core/packages/website/out ไปยังโฮสติ้งแบบคงที่ที่คุณต้องการ
Demo Store สามารถนำไปใช้กับผู้ให้บริการโฮสติ้งที่รองรับ Node.js โดยทำดังนี้:
ตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้ให้สอดคล้อง:
NEXT_PUBLIC_DATA_FETCHING =ssr รัน npm run build เพื่อสร้างบิลด์การผลิตที่ได้รับการปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณ
เรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์ Node.js ในโหมดการใช้งานจริง
ถาม แม้ว่าฉันจะเปลี่ยน NEXT_PUBLIC_JSON_DATA_FOLDER , NEXT_PUBLIC_LOCALE_DATA_FOLDER หรือ NEXT_PUBLIC_CONFIG_FOLDER แล้ว แต่เว็บไซต์ยังคงอ้างอิงถึงไฟล์ก่อนหน้า
A. ตัวแปรสภาพแวดล้อมเหล่านี้ถูกใช้เป็น alias ใน Webpack เริ่มต้นจาก Webpack 5 มีการแนะนำการแคชสำหรับบิลด์ที่เร็วขึ้น การเปลี่ยนแปลงตัวแปรสภาพแวดล้อมเหล่านี้จะไม่ทำให้แคช Webpack ไม่ถูกต้อง คุณต้องลบโฟลเดอร์ .next ด้วยตนเองหรือโดยการเรียกใช้:
# update the path if needed
rm -rf demo-store-core/packages/website/.next/พื้นที่เก็บข้อมูลนี้เผยแพร่ภายใต้ใบอนุญาต MIT
