nextjs woocommerce

ประวัติดาว

next.js ไซต์อีคอมเมิร์ซพร้อมแบ็กเอนด์ WooCommerce

URL สด: https://next-woocommerce.dfweb.no

สารบัญ (TOC)

• การติดตั้ง
• คุณสมบัติ
• ปัญหา
• การแก้ไขปัญหา
• สิ่งที่ต้องทำ

การติดตั้ง

1. ติดตั้งและเปิดใช้งานปลั๊กอินที่จำเป็นต่อไปนี้ในไดเรกทอรีปลั๊กอิน WordPress ของคุณ:

• WooCommerce Ecommerce สำหรับ WordPress
• WP-GRAPHQL เปิดเผย GraphQL สำหรับ WordPress
• WP-GRAPHQL-WOOCOMMERCE เพิ่มฟังก์ชั่น WOOCOMMERCE ลงในสคีมา WPGRAPHQL
• ปลั๊กอิน WordPress WP-Algolia-Woo-Indexer รหัสโดยฉัน ส่งผลิตภัณฑ์ WooCommerce ไปยัง Algolia จำเป็นสำหรับการค้นหาการทำงาน

ปลั๊กอินเสริม:

• Headless-Wordpress ปิดการใช้งานส่วนหน้าเพื่อให้สามารถเข้าถึงแบ็คเอนด์ได้เท่านั้น (ไม่จำเป็น)

การทดสอบปัจจุบันได้รับการทดสอบและได้รับการยืนยันว่าทำงานกับเวอร์ชันต่อไปนี้:

• WordPress เวอร์ชัน 6.6.2
• WooCommerce เวอร์ชัน 7.4.0
• WP GraphQl เวอร์ชัน 1.13.8
• woographql เวอร์ชัน 0.12.0
• WPGRAPHQL CORS เวอร์ชัน 2.1

2. สำหรับการดีบักและการทดสอบให้ติดตั้ง:

   https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (Firefox)

   https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbbbapilgoeccciglkfbmbnfm (Chrome)

3. ตรวจสอบให้แน่ใจว่า WooCommerce มีผลิตภัณฑ์บางอย่างอยู่แล้ว

4. โคลนหรือส้อม repo และแก้ไข .env.example และเปลี่ยนชื่อเป็น .env

   จากนั้นตั้งค่าตัวแปรสภาพแวดล้อมตามที่คุณต้องการหรือโซลูชันโฮสติ้งที่คุณต้องการ

   ดู https://vercel.com/docs/environment-variables

5. แก้ไขค่าตามการตั้งค่าของคุณ

6. เริ่มต้นเซิร์ฟเวอร์ด้วย npm run dev

7. เปิดใช้วิธีการชำระเงิน COD (เงินสดตามความต้องการ) ใน WooCommerce

8. เพิ่มผลิตภัณฑ์ลงในรถเข็น

9. ดำเนินการเพื่อชำระเงิน (gå til kasse)

10. กรอกรายละเอียดของคุณและสั่งซื้อ

คุณสมบัติ

• next.js เวอร์ชัน 14.3.11
• ตอบสนองเวอร์ชัน 18.3.1
• ตัวพิมพ์ใหญ่
• ทดสอบกับนักเขียนบทละคร
• เชื่อมต่อกับ WooCommerce GraphQL API และชื่อรายการราคาและภาพที่แสดงภาพสำหรับผลิตภัณฑ์
• รองรับผลิตภัณฑ์ง่ายๆและผลิตภัณฑ์ผันแปร
• การจัดการรถเข็นและการชำระเงินด้วย WooCommerce (เงินสดในการจัดส่งเฉพาะตอนนี้)
• การค้นหา Algolia (ต้องใช้ Algolia-woo-Indexer)
• เป็นไปตามมาตรฐานการเข้าถึง WCAG หากเป็นไปได้
• ตัวยึดสำหรับผลิตภัณฑ์ที่ไม่มีภาพ
• ไคลเอนต์ Apollo ด้วย graphql
• ฟอร์มเบ็ดตอบสนอง
• การตรวจสอบแบบฟอร์ม HTML5 ดั้งเดิม
• แอนิเมชั่นที่มีการเคลื่อนไหวของเฟรม
• กำลังโหลดสปินเนอร์ที่สร้างขึ้นด้วยส่วนประกอบสไตล์
• แสดงความคืบหน้าโหลดหน้าด้วย nprogress ระหว่างการนำทาง
• การออกแบบที่ตอบสนองอย่างเต็มที่
• หมวดหมู่และรายชื่อผลิตภัณฑ์
• แสดงสถานะหุ้น
• URL สวยด้วยฟังก์ชั่น builtin nextjs
• Tailwind 3 สำหรับการจัดแต่งทรงผม
• ความคิดเห็น jsdoc

การแก้ไขปัญหา

ฉันได้รับข้อผิดพลาดที่ไม่ได้กำหนดรถเข็นหรือข้อผิดพลาดอื่น ๆ GraphQl

ตรวจสอบว่าคุณใช้ปลั๊กอิน WP-GRAPHQL-WOOCommerce รุ่น 0.12.0

หน้าผลิตภัณฑ์ไม่ได้โหลด

ตรวจสอบคุณลักษณะของผลิตภัณฑ์ ตอนนี้แอปพลิเคชันต้องการขนาดและสี

ปัญหา

โดยรวมแล้วแอปพลิเคชันทำงานตามที่ตั้งใจไว้ แต่ยังไม่ได้ทดสอบอย่างกว้างขวางในสภาพแวดล้อมการผลิต จำเป็นต้องมีการทดสอบและการดีบักเพิ่มเติมก่อนที่จะปรับใช้ในสภาพแวดล้อมการผลิต

ด้วยที่กล่าวไว้โปรดจำไว้ในใจ:

• ปัจจุบันผลิตภัณฑ์ง่าย ๆ และผลิตภัณฑ์ตัวแปรทำงานได้โดยไม่มีปัญหาใด ๆ ประเภทผลิตภัณฑ์อื่น ๆ ไม่เป็นที่รู้จักในการทำงาน
• รองรับเงินสดในการจัดส่ง (COD) เท่านั้น อาจมีการเพิ่มวิธีการชำระเงินเพิ่มเติมในภายหลัง

โครงการนี้ได้รับการทดสอบด้วย BrowserStack

สิ่งที่ต้องทำ

• เพิ่มทั้งหมดลงในหน้ารถเข็น/เช็คเอาต์
• คัดลอกที่อยู่การเรียกเก็บเงินไปยังที่อยู่จัดส่ง
• เพิ่มแดชบอร์ดคำสั่งซื้อและต้องเข้าสู่ระบบ
• ซ่อนผลิตภัณฑ์ที่ไม่อยู่ในสต็อก
• เพิ่ม SEO ที่ดีกว่า
• เพิ่มใหม่ใหม่/รูปภาพเมื่อทำงานได้ดีขึ้น