yournextstore

ร้านถัดไปของคุณ

demo.yournextstore.com?

การสาธิต

demo-yns.mp4

ข้อกำหนดเบื้องต้น

node.js 20+

เราสนับสนุนเวอร์ชัน LTS ปัจจุบันอย่างเป็นทางการ - 20 ในขณะที่เขียน YNS ควรทำงานกับเวอร์ชัน 18, 20 และ 22 หากคุณใช้หนึ่งในเวอร์ชันเหล่านั้นและพบปัญหาโปรดรายงาน!

การติดตั้ง node.js

ทำตามคำแนะนำสำหรับระบบปฏิบัติการของคุณที่นี่: nodejs.org/en/download

PNPM 9+

เราสนับสนุน PNPM เวอร์ชัน 9 อย่างเป็นทางการ แต่เราจะพยายามอย่างเต็มที่เพื่อให้มันเข้ากันได้กับ NPM และเส้นด้าย

การติดตั้ง PNPM

วิธีที่ง่ายที่สุดในการติดตั้ง PNPM คือผ่าน Node.js Corepack ภายในโฟลเดอร์ที่มี YNS เรียกใช้คำสั่งเหล่านี้:

corepack enable
corepack install

หรือทำตามคำแนะนำสำหรับระบบปฏิบัติการของคุณที่นี่: pnpm.io/installation

สร้างบัญชี Stripe

YNS ถูกรวมเข้ากับแถบอย่างแน่นหนาดังนั้นคุณต้องใช้บัญชี Stripe เพื่อใช้ร้านค้าถัดไปของคุณ ทำตามคำแนะนำจาก Stripe เพื่อสร้างบัญชี

สิ่งสำคัญคือต้องจำไว้ว่าแถบทำงานในสองโหมดที่แตกต่างกัน: โหมดทดสอบ และ โหมดการผลิต เพื่อวัตถุประสงค์ในการพัฒนาและทดสอบในท้องถิ่นคุณควรใช้ โหมดทดสอบ ด้วยวิธีนี้ Stripe จะไม่เรียกเก็บเงินจริงและคุณสามารถใช้ข้อมูลรับรองการทดสอบพิเศษเช่นหมายเลขบัตรเครดิตและหมายเลข BLIK เพื่อชำระเงินให้เสร็จสมบูรณ์ สำหรับข้อมูลรายละเอียดเพิ่มเติมโปรดดูเอกสารแถบที่ docs.stripe.com/testing

เมื่อคุณพร้อมที่จะขายผลิตภัณฑ์ของคุณให้กับลูกค้าจริงคุณต้องเปลี่ยน โหมดทดสอบ เป็น โหมดการผลิต ใน Stripe และสร้างข้อมูลรับรองใหม่

เคล็ดลับ

ขั้นตอนนี้จะต้องมีการตรวจสอบเพิ่มเติมจาก Stripe ดังนั้นเราขอแนะนำให้คุณเริ่มกระบวนการทันที

เพิ่มตัวแปรสภาพแวดล้อม

เพื่อให้ YNS ทำงานได้คุณจะต้องกำหนดตัวแปรสิ่งแวดล้อมสองสามตัว สำหรับการพัฒนาและการทดสอบในท้องถิ่นคุณอาจสร้างไฟล์. .env ที่ว่างเปล่าและคัดลอกเนื้อหาของ .env.example ลงไป

ในการตั้งค่าตัวแปร Env ในการผลิตคุณจะต้องปรึกษาเอกสารของผู้ให้บริการโฮสติ้งที่คุณเลือก

ตัวแปรสภาพแวดล้อมที่จำเป็น

• ENABLE_EXPERIMENTAL_COREPACK - vercel เท่านั้น: ตั้งค่าเป็น 1 เพื่อเปิดใช้งาน corepack
• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - คีย์ที่เผยแพร่ได้จาก Stripe
• STRIPE_SECRET_KEY - คีย์ลับจาก Stripe
• STRIPE_CURRENCY - ใช้เพื่อกำหนดสกุลเงินของร้านค้าของคุณ ปัจจุบันอนุญาตให้ใช้สกุลเงินเดียวเท่านั้นและควรเป็นรหัส ISO สามตัวอักษร (เช่น usd )
• NEXT_PUBLIC_URL - เป็นทางเลือกบน vercel ที่อยู่ของร้านค้าของคุณโดยไม่ต้องสแลชต่อท้ายเช่น https://demo.yournextstore.com เมื่อสร้างเป็นครั้งแรกคุณควรตั้งค่าเป็น URL ที่ถูกต้องเช่น http://localhost:3000

yns-setup-env-variables.mp4

ตัวแปรสภาพแวดล้อมเสริม

• NEXT_PUBLIC_UMAMI_WEBSITE_ID - รหัสเว็บไซต์อูมามิสำหรับการวิเคราะห์
• NEXT_PUBLIC_NEWSLETTER_ENDPOINT - ดูตัวอย่าง : จุดสิ้นสุดสำหรับแบบฟอร์มจดหมายข่าวในอนาคต ควรยอมรับคำขอโพสต์ด้วย JSON { email: string } และส่งคืน JSON { status: number }
• STRIPE_WEBHOOK_SECRET - ตัวอย่าง : Stripe Webhook Secret สำหรับการจัดการกิจกรรมจาก Stripe อ่านเพิ่มเติมด้านล่าง
• ENABLE_STRIPE_TAX - ตัวอย่าง : ตั้งค่าเป็นค่าใด ๆ (เช่น 1 ) เพื่อเปิดใช้งานภาษีแถบใน YNS อ่านเพิ่มเติมด้านล่าง
• NEXT_PUBLIC_LANGUAGE - สถานที่ของร้านค้า (เช่น en-US )

เรียกใช้ร้านค้า

หลังจากทำตามขั้นตอนข้างต้นให้เรียกใช้ pnpm install เพื่อติดตั้งการอ้างอิงที่ต้องการจากนั้นเรียกใช้ pnpm dev เพื่อเริ่มต้นเซิร์ฟเวอร์การพัฒนาบนเครื่องของคุณ ร้านต่อไปของคุณจะวางจำหน่ายที่ LocalHost: 3000

เพิ่มผลิตภัณฑ์

ร้านต่อไปของคุณได้รับผลิตภัณฑ์ราคาคำอธิบายและหมวดหมู่ทั้งหมดจาก Stripe ดังนั้นถ้าคุณรู้จักแถบแล้วคุณจะรู้สึกเหมือนอยู่บ้าน!

คุณต้องเพิ่มผลิตภัณฑ์ลงในแผงควบคุม Stripe เพื่อแสดงใน YNS หลังจากเข้าสู่ระบบแล้วคลิก เพิ่มเติม ในแถบด้านข้างซ้ายและเลือก แคตตาล็อกผลิตภัณฑ์ คุณสามารถใช้ลิงก์โดยตรง:

• ใน โหมดทดสอบ : dashboard.stripe.com/test/products
• ใน โหมดการผลิต : dashboard.stripe.com/products

จากนั้นคลิกที่ เพิ่มผลิตภัณฑ์ และกรอกข้อมูลที่จำเป็นทั้งหมด:

• ชื่อ,
• คำอธิบาย,
• ราคา-ปัจจุบันได้รับการสนับสนุนการชำระ เงินครั้งเดียว เท่านั้น
• ภาพผลิตภัณฑ์

ข้อมูลเมตา

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

สนาม	ที่จำเป็น	คำอธิบาย
slug	ใช่	ตัวทากผลิตภัณฑ์ใช้สำหรับ URL จำเป็นต้องมีเอกลักษณ์ยกเว้นตัวแปร
category	เลขที่	หมวดหมู่ผลิตภัณฑ์ที่ใช้สำหรับการจัดกลุ่มผลิตภัณฑ์
order	เลขที่	ลำดับผลิตภัณฑ์ที่ใช้สำหรับการเรียงลำดับผลิตภัณฑ์ ตัวเลขที่ต่ำกว่าจะแสดงก่อน
variant	เลขที่	ตัวแปรตัวแปรผลิตภัณฑ์ อ่านรายละเอียดด้านล่าง

ตอนนี้คุณควรเห็นผลิตภัณฑ์เพิ่มเติมทั้งหมดในร้านถัดไปของคุณ

สายพันธุ์

ร้านค้าถัดไปของคุณรองรับตัวแปรผลิตภัณฑ์อย่างง่าย ในการสร้างผลิตภัณฑ์ที่มีตัวแปรคุณต้องเพิ่มผลิตภัณฑ์หลายอย่างในการแถบด้วยฟิลด์เมตา slug แบบเดียวกัน YNS ใช้ฟิลด์เมตาดาต้า variant เพื่อแยกความแตกต่างระหว่างตัวแปรต่าง ๆ ของผลิตภัณฑ์เดียวกัน ตัวอย่างเช่นหากคุณมีเสื้อยืดหลายขนาดคุณสามารถสร้างผลิตภัณฑ์สามอย่างด้วย t-shirt slug และค่า variant ของ small medium และ large

ตัวแปรจะแสดงบนหน้าผลิตภัณฑ์ ตัวแปรสามารถมีราคาคำอธิบายและรูปภาพที่แตกต่างกัน เป็นสิ่งสำคัญที่จะต้องทราบว่า category ควรจะเหมือนกันสำหรับทุกรุ่นของผลิตภัณฑ์เดียวกันสำหรับประสบการณ์การท่องเว็บที่ดีที่สุด

บันทึก

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

ลายเว็บแถบ

ร้านต่อไปของคุณใช้ Webhooks Stripe เพื่อจัดการกิจกรรมจาก Stripe ขณะนี้จุดสิ้นสุดจะใช้ในการทบทวนหน้ารถเข็นโดยอัตโนมัติและสร้างธุรกรรมภาษี (หากเปิดใช้งาน) หากต้องการตั้งค่า webhooks ให้ทำตามเอกสาร Stripe ขั้นตอนที่แน่นอนขึ้นอยู่กับว่าคุณเปิดใช้งานแถบแถบในบัญชี Stripe ของคุณหรือไม่: docs.stripe.com/webhooks#add-a-webhook-endpoint

จุดสิ้นสุดสำหรับ webhook คือ https://{YOUR_DOMAIN}/api/stripe-webhook เหตุการณ์ที่จำเป็นเท่านั้นคือ payment_intent.succeeded เมื่อ webhook ถูกกำหนดค่าใน Stripe ให้ตั้งค่าตัวแปรสภาพแวดล้อม STRIPE_WEBHOOK_SECRET เป็นคีย์ลับที่สร้างโดย Stripe

บันทึก

ในอนาคตเราวางแผนที่จะเพิ่มกิจกรรมเพิ่มเติมลงใน webhook เพื่อปรับปรุงประสบการณ์ผู้ใช้

ภาษีแถบ

ร้านต่อไปของคุณมาพร้อมกับตัวอย่างของการสนับสนุนภาษี Stripe หากต้องการเปิดใช้งานให้ตั้งค่าตัวแปรสภาพแวดล้อม ENABLE_STRIPE_TAX เป็นค่าใด ๆ (เช่น 1 )

สำหรับคุณสมบัตินี้ในการทำงานคุณต้องตั้งค่าการตั้งค่าภาษีของคุณในแผงควบคุม Stripe: Dashboard.stripe.com/register/tax เมื่อเปิดใช้งานและกำหนดค่าภาษีจะถูกคำนวณและเพิ่มโดยอัตโนมัติในราคารวมของผลิตภัณฑ์ตาม:

• การกำหนดราคาสินค้า - ภาษีสามารถรวมหรือพิเศษ
• รหัสภาษีผลิตภัณฑ์
• ที่อยู่ของลูกค้า
• รหัสภาษีของลูกค้า

คำเตือน

คุณลักษณะนี้ยังอยู่ในช่วงเริ่มต้นและอาจมีกรณีขอบที่ไม่รองรับ เรากำลังดำเนินการอย่างแข็งขันดังนั้นหากคุณพบปัญหาใด ๆ หรือมีคำแนะนำใด ๆ โปรดแจ้งให้เราทราบ!

การปรับใช้การผลิต

vercel

ในการปรับใช้บน Vercel คลิกปุ่มต่อไปนี้ตั้งค่าตัวแปรที่เก็บ GitHub และตัวแปรสภาพแวดล้อมของคุณและคลิก ปรับใช้ ตรวจสอบให้แน่ใจว่าได้ตั้งค่าตัวแปร ENABLE_EXPERIMENTAL_COREPACK เป็น 1

VPS ของคุณเอง

คำอธิบายเร็ว ๆ นี้

นักเทียบท่า

หากต้องการปรับใช้กับ Docker ให้ทำตามขั้นตอนเหล่านี้:

1. โคลนที่เก็บนี้ลงในโฟลเดอร์ว่างเปล่าและสร้างไฟล์. ENV ในที่เก็บตามที่อธิบายไว้ที่นี่
2. ตั้งค่าตัวแปร Docker = 1 ใน. env
3. ดำเนินการ pnpm run docker:build
4. หลังจากนั้นคุณสามารถเริ่มคอนเทนเนอร์ด้วย pnpm run docker:run

นั่นคือทั้งหมด

YNS วิวัฒนาการในแต่ละวันและเราแสวงหาข้อเสนอแนะเกี่ยวกับสิ่งที่ต้องปรับปรุง หากคุณมีคำถามหรือปัญหาใด ๆ อย่าลังเลที่จะติดต่อเราบนเซิร์ฟเวอร์ Discord ของเรา

คำถามที่พบบ่อย

บางครั้งคุณใช้ structuredClone เพื่อส่งข้อมูลจากเซิร์ฟเวอร์ไปยังส่วนประกอบไคลเอนต์ ทำไม

ข้อมูลบางประเภทเท่านั้นที่สามารถส่งผ่านจากเซิร์ฟเวอร์ไปยังไคลเอนต์โดยตรง ข้อมูลจาก Stripe SDK มักจะมีอินสแตนซ์คลาส ในการแก้ไขปัญหานี้เราใช้ structuredClone เพื่อกำจัดพวกมันและส่งผ่านวัตถุเก่า ๆ ธรรมดาไปยังลูกค้า