nextjs shopify
1.0.0
Demo Live at: headless.builders
เรียนรู้วิธีเริ่มต้นกับผู้สร้างนี้ + next.js + ตัวอย่าง Shopify ด้วยคู่มือวิดีโอทีละขั้นตอนที่นี่:
สิ่งที่ต้องมีก่อน
คู่มือนี้จะสมมติว่าคุณติดตั้งซอฟต์แวร์ต่อไปนี้:
คุณควรมีบัญชี Shopify และร้านค้าที่สร้างขึ้นก่อนที่จะเริ่มต้นเช่นกัน
การแนะนำ
หลังจากทำตามคำแนะนำนี้คุณจะมี
ก่อนที่เราจะเริ่มต้นไปที่ builder.io และสร้างบัญชี
ตรงไปที่หน้าการตั้งค่าองค์กรของคุณและสร้างคีย์ส่วนตัวคัดลอกคีย์สำหรับขั้นตอนต่อไป
ต่อไปเราจะสร้างสำเนาของโครงการเริ่มต้นและสร้างพื้นที่ใหม่สำหรับเนื้อหาที่จะอยู่
ในตัวอย่างด้านล่างให้แทนที่ <private-key> ด้วยคีย์ที่คุณคัดลอกในขั้นตอนก่อนหน้าและเปลี่ยน <space-name> เป็นสิ่งที่มีความหมายกับคุณ-ไม่ต้องกังวลคุณสามารถเปลี่ยนได้ในภายหลัง!
git clone https://github.com/BuilderIO/nextjs-shopify.git
cd nextjs-shopify
unzip builder
npm install --global "@builder.io/cli"
builder create --key "<private-key>" --name "<space-name>" --debug
หมายเหตุ: หากคุณสนใจที่จะใช้ผู้เริ่มต้นนี้สำหรับหน้า Landing Page ด้วย Shopify ใช้คำสั่งนี้แทน:
unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug
หากนี่เป็นความสำเร็จคุณควรได้รับการต้อนรับด้วยข้อความที่มีคีย์ API สาธารณะสำหรับพื้นที่สร้างใหม่ของคุณ
หมายเหตุ: คำสั่งนี้จะเผยแพร่เนื้อหา Starter Builder.io CMS จากไดเรกทอรี./builder ไปยังพื้นที่ใหม่ของคุณเมื่อสร้างขึ้น
____ _ _ _ _ _ _
| __ ) _ _ (_) | | __ | | ___ _ __ (_) ___ ___ | | (_)
| _ | | | | | | | | / _ ` | / _ | ' __| | | / _ / __| | | | |
| |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | |
|____/ __,_| |_| |_| __,_| ___| |_| (_) |_| ___/ ___| |_| |_|
|████████████████████████████████████████| shopify-product | 0/0
|████████████████████████████████████████| product-page: writing generic-template.json | 1/1
|████████████████████████████████████████| shopify-collection | 0/0
|████████████████████████████████████████| collection-page: writing generic-collection.json | 1/1
|████████████████████████████████████████| page: writing homepage.json | 2/2
Your new space "next.js shopify starter" public API Key: 012345abcdef0123456789abcdef0123คัดลอกคีย์ API สาธารณะ ("012345ABCDEF0123456789ABCDEF0123" ในตัวอย่างด้านบน) สำหรับขั้นตอนต่อไป
โครงการเริ่มต้นนี้ใช้ไฟล์ dotenv เพื่อกำหนดค่าตัวแปรสภาพแวดล้อม เปิดไฟล์. env.development และ. env.production ในตัวแก้ไขข้อความที่คุณชื่นชอบและตั้งค่าของ BUILDER_PUBLIC_KEY เป็นคีย์สาธารณะที่คุณเพิ่งคัดลอก คุณสามารถเพิกเฉยต่อตัวแปรอื่น ๆ ได้ในตอนนี้เราจะตั้งค่าในภายหลัง
+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=สร้างแอพที่กำหนดเองสำหรับร้านค้า Shopify ของคุณ หากคุณไม่มีร้านค้า Shopify คุณสามารถสร้างร้านพัฒนาได้
เมื่อสร้างแอพส่วนตัวคุณจะต้องตั้งค่าสิทธิ์จำนวนหนึ่งเพื่อให้ผู้สร้างสามารถเรียกคืนสินค้าคงคลัง Shopify ของคุณได้ สำหรับการกดนี้บน Storefront API ในแท็บการกำหนดค่าและเลือกสิทธิ์ต่อไปนี้ทั้งหมด:
จากนั้นในแท็บ API Credentials คลิก install :
และคัดลอกโทเค็นการเข้าถึงที่สร้างขึ้น
เข้าถึงพื้นที่ที่สร้างขึ้นใหม่ของคุณโดยเลือกจากรายการช่องว่างในองค์กรของคุณ
คุณควรได้รับการต้อนรับด้วยโมดอลเพื่อขอการเข้าถึงหน้าร้านของคุณ Toke (จากขั้นตอนตัวอย่าง) และโดเมนร้านค้าของคุณซึ่งจะช่วยให้ builder.io สื่อสารกับ API ร้านค้าของคุณ:
กรอกคีย์ที่ต้องการและกด "เชื่อมต่อแอป Shopify Custom ของคุณ"!
เปิด. env.development และ. env.production อีกครั้ง แต่คราวนี้ตั้งค่าอีกสองปุ่ม Shopify
BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=ส่วนที่ยากสิ้นสุดลงสิ่งที่คุณต้องทำคือเริ่มโครงการตอนนี้
npm install
npm run dev สิ่งนี้จะเริ่มต้นเซิร์ฟเวอร์ที่ http://localhost:3000
ตอนนี้เรามีการตั้งค่าทุกอย่างแล้วเริ่มสร้างและเผยแพร่หน้าเว็บบน builder.io สำหรับการสาธิตในการสร้างสิ่งที่คล้ายกับหน้าแรกการสาธิตให้ทำตามขั้นตอนในวิดีโอสั้น ๆ นี้
คุณสามารถปรับใช้รหัสนี้ได้ทุกที่ที่คุณต้องการ - คุณสามารถค้นหาตัวเลือกการปรับใช้จำนวนมากสำหรับ next.js ได้ที่นี่ ตัวเลือกต่อไปนี้รองรับการติดตั้งคลิกเดียวและเริ่มต้นได้ง่ายมาก:
