next shopify storefront

- หน้าร้าน Shopify ถัดไป

ตะกร้าสินค้า ที่สร้างขึ้นด้วย typenscript, tailwind CSS, ui แบบไม่มีหัว, next.js, react.js, shopify ไฮโดรเจนปฏิกิริยา, ... และ shopify storefront graphql api

บทเรียน

• ฉันจะจัดระเบียบโครงการต่อไปอย่างยั่งยืน JS ได้อย่างไร
• ฉันจะจัดการข้อมูลแบบโมดูลาร์แบบแยกส่วนได้อย่างไรใน next.js ได้อย่างไร?
• ฉันจะโต้ตอบกับ GraphQL API ได้อย่างไรใน next.js?
• ฉันจะใช้ตัวเลือกตัวแปรแบบไดนามิกสำหรับ Shopify ใน next.js ได้อย่างไร

ประสบการณ์

นี่คือประสบการณ์ของฉันเมื่อฉันทำงานในโครงการนี้:

• การออกแบบและสร้างหน้าร้านตั้งแต่เริ่มต้น
• การสร้างยูทิลิตี้ต่อไปสำหรับการดึงข้อมูลแบบโมดูลาร์แบบง่าย ๆ
• การสร้าง Utilities Shopify เพื่อให้การเลือกตัวแปรง่ายขึ้น
• การใช้ graphql zeus เพื่อโต้ตอบกับ storefront API
• การใช้ Shopify Hydrogen เพื่อใช้คุณสมบัติหน้าร้าน
• การใช้ Tailwind CSS & Headless UI เพื่อสร้าง UI หน้าร้าน
• ใช้ next.js สำหรับการฟื้นฟูแบบคงที่แบบเพิ่มขึ้น
• ใช้ SEO ถัดไปเพื่อใช้การเพิ่มประสิทธิภาพของเครื่องมือค้นหา
• การใช้ typeScript เพื่อสร้าง hooks ปฏิกิริยาและส่วนประกอบอย่างปลอดภัย
• การใช้ตะขอใช้ปฏิกิริยาเพื่อเพิ่มความเร็วในการพัฒนาส่วนประกอบ
• การใช้ Swiper เพื่อสร้างแถบเลื่อนที่สวยงามสัมผัสได้และตอบสนองได้
• การใช้ ESLINT, prettier เพื่อปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด js

หากคุณชอบโครงการนี้ให้กดปุ่ม Star เพื่อบุ๊กมาร์ก️

สาธิต

คุณสามารถเยี่ยมชมที่นี่เพื่อดูการสาธิต: https://next-shopify-storefront.vercel.app/

การติดตั้ง

โคลนซอร์สโค้ดลงในคอมพิวเตอร์ของคุณ

git clone https://github.com/maxvien/next-shopify-storefront.git

ติดตั้งการพึ่งพาของโครงการ

npm install

การใช้งาน

ก่อนอื่นคุณต้องตั้งค่าตัวแปรสภาพแวดล้อมด้านล่างในไฟล์ .env หรือแพลตฟอร์มการปรับใช้ของคุณ

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

คุณสามารถติดตามเอกสารประกอบของ Shopify storefront GraphQL API เพื่อรับข้อมูล storefront API

พัฒนา

พัฒนาโครงการในโหมดการพัฒนา

npm run dev

สร้าง

สร้างโครงการในโหมดการผลิต

npm run build

เริ่ม

เริ่มโครงการในโหมดการผลิต

npm run start

ผ้าสำลี

วิเคราะห์รหัสเพื่อค้นหาปัญหาเกี่ยวกับ eslint และ prettier

npm run lint

แก้ไขปัญหาโดยอัตโนมัติ

npm run fix

ส่วนขยายรหัส Visual Studio

เพื่อเพิ่มความเร็วในการเพิ่มประสิทธิภาพของคุณคุณสามารถติดตั้งส่วนขยายเหล่านี้:

• eslint
• สวยกว่า
• Visual Studio IntelliCode
• Tailwind CSS Intellisense
• การสนับสนุนภาษา PostCSS

โครงการที่เกี่ยวข้อง

• Shopify Data Faker •เครื่องมือพัฒนา Shopify สำหรับการสร้างข้อมูลหุ่นจำลอง
• ชุดรูปแบบ bootstrap shopify •ชุดรูปแบบ Shopify ฟรีที่สร้างขึ้นด้วย bootstrap, bem, liquid, sass, esnext, เครื่องมือธีม, ... และ webpack
• หน้าร้าน Next Shopify (v2) •ตะกร้าสินค้าที่สร้างขึ้นด้วย typeycript, Emotion, Next.js, React.js, Query React, Shopify storefront GraphQl API, ... และวัสดุ UI
• Next Shopify Storefront (v1) •ตะกร้าสินค้าที่สร้างขึ้นด้วย typeScript, nextjs, React, Redux, Apollo Client, Shopify storefront GraphQl API, ... และวัสดุ UI

ประวัติดาว