saleor storefront

พื้นที่เก็บข้อมูลของผู้ขาย-ร้านค้า DEPRECATED

เราได้ตัดสินใจที่จะสร้างหน้าร้านใหม่เริ่มต้นจากศูนย์โดยไม่มีการออกแบบแฟนซีมุ่งเน้นไปที่แนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างหน้าร้านค้าพาณิชย์ โครงการใหม่ที่เรียกว่า React-Storefront ใช้ next.js เป็นรากฐานและลมทลมสำหรับรูปลักษณ์ คุณสามารถค้นหาได้ที่นี่: https://github.com/saleor/react-storefront

หน้าร้านขาย

หมายเหตุ: โครงการนี้เป็นการสาธิตวิธีการใช้เครื่องขาย ยังไม่พร้อมที่จะเป็นผู้เริ่มต้น แต่แสดงให้เห็นว่ากรณีที่แตกต่างกันสามารถจัดการได้อย่างไรและสามารถใช้เป็นหนังสือสูตรได้ จะ มีการเปลี่ยนแปลงการเปลี่ยนแปลงและรหัสมีการพัฒนาอยู่ตลอดเวลาดังนั้นให้ใช้ความเสี่ยงของคุณเอง

หน้าร้านแอปพลิเคชันหน้าเดียวที่ขับเคลื่อนด้วย graphQL, หน้าเดียวสำหรับผู้ขาย

คุณสมบัติ

• หน้าร้านอีคอมเมิร์ซแบบไม่มีหัวที่สร้างขึ้นด้วย GraphQl, Apollo Client, React, Next.js และ typeScript
• โหมดออฟไลน์ (เบต้า)
• การรวม GraphQL API ของ Saleor
• ประสบการณ์แอปพลิเคชันหน้าเดียว
• การรวมเกตเวย์การชำระเงินของ Braintree

การสาธิต

ดูการสาธิตสาธารณะของร้านขายหน้าร้าน!

หรือเปิดตัวอย่างตัวอย่าง Heroku ฟรี

เริ่มต้น

คำแนะนำเหล่านี้จะช่วยให้คุณได้รับสำเนาของโครงการและทำงานบนเครื่องในพื้นที่ของคุณเพื่อการพัฒนาและการทดสอบ

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

• node.js 14.16
• อินสแตนซ์ของผู้ขาย

ในการเรียกใช้หน้าร้านคุณต้องตั้งค่าตัวแปรสภาพแวดล้อม NEXT_PUBLIC_API_URI เพื่อชี้ไปที่ saleor graphql API หากคุณใช้งานเครื่องขายในเครื่องด้วยการตั้งค่าเริ่มต้น NEXT_PUBLIC_API_URI ถูกตั้งค่าเป็น: http://localhost:8000/graphql/ หากต้องการเปลี่ยนให้สร้างไฟล์ .env.local และเพิ่มที่นั่นหรือตั้งค่าตัวแปร Env โดยใช้คำสั่ง export

การติดตั้ง

โคลนที่เก็บ:

 git clone https://github.com/mirumee/saleor-storefront.git

ป้อนไดเรกทอรีโครงการ:

 cd saleor-storefront

ใช้การปล่อยเสถียร

หากต้องการใช้การเปิดตัวที่มั่นคงอย่างเป็นทางการให้ชำระเงินไปยังแท็กปล่อย:

 $ git checkout 2.11.0

ดูรายการของการเผยแพร่ทั้งหมดที่นี่: https://github.com/mirumee/saleor-storefront/releases/

ใช้เวอร์ชันการพัฒนา

หากคุณต้องการใช้เวอร์ชันการพัฒนาล่าสุดให้ชำระเงินไปที่ master Branch:

 $ git checkout master

ติดตั้งการพึ่งพา NPM:

 npm i

เรียกใช้เซิร์ฟเวอร์การพัฒนา:

 npm start

ไปที่ http://localhost:3000 เพื่อเข้าถึงหน้าร้าน

สร้าง

เพื่อรวบรวมแอป Run:

 $ npm run build

เพื่อรวบรวมแอพและหน้าร้านส่งออกไปยัง HTML แบบคงที่:

 $ npm run build:export

เพื่อรวบรวมแอพและเรียกใช้ในโหมดการผลิตด้วยเซิร์ฟเวอร์ถัดไปรัน:

 $ npm run build:start

เพื่อเปิดใช้งาน Apollo Devtools ในเวอร์ชันการผลิตให้ตั้งค่าตัวแปรด้านสิ่งแวดล้อม

 NEXT_PUBLIC_ENABLE_APOLLO_DEVTOOLS=true

การทดสอบไซเปรส

หากคุณต้องการเรียกใช้การทดสอบ Cypress ตรวจสอบให้แน่ใจว่ามีการติดตั้งการพึ่งพาทั้งหมด (รวมถึง Cypress ) โดยเรียกใช้คำสั่งการติดตั้ง

 npm i

ต้องตั้งค่าตัวแปรสภาพแวดล้อมต่อไปนี้เพื่อให้สามารถทำการทดสอบได้อย่างถูกต้อง:

• API_URI - ที่อยู่ GRAPHQL API
• STATIC_URL - URL ปลายทางไฟล์คงที่เช่น ถัง S3
• CYPRESS_USER_NAME - ชื่อผู้ใช้ (อีเมล) สำหรับผู้ใช้ Storefront
• CYPRESS_USER_PASSWORD - สำหรับผู้ใช้ที่กล่าวถึงข้างต้น

หากคุณใช้งานหน้าร้านจากมุมมองของคอนเทนเนอร์ Docker คุณสามารถเรียกใช้การทดสอบโดยใช้คำสั่งต่อไปนี้:

โหมดหัวขาด:

 cy:run

โหมด Cypress UI:

 cy:open

หากคุณต้องการเรียกใช้การทดสอบกับสภาพแวดล้อมการพัฒนาในพื้นที่ของคุณให้ใช้คำสั่งต่อไปนี้:

โหมดหัวขาด:

 test:e2e:run

โหมด Cypress UI:

 test:e2e:dev

การสร้างส่วนประกอบใหม่

ส่วนประกอบใหม่ทั้งหมดควรปฏิบัติตามแนวทางการออกแบบอะตอมและวางไว้ในไดเรกทอรี src/@next/components

สามารถสร้างโครงสร้างไฟล์ได้โดยใช้ plop :

 npm run generate

การปรับเปลี่ยนหน้าร้าน

จากโพสต์สเปกตรัม

ไฟล์สำคัญ

• Saleor -Storefront/config/next/config.base.js - ไฟล์ config base next.js ซึ่งมีการปรับแต่ง webpack ที่กำหนดเอง
  • สามารถเปลี่ยนชื่อของแอพ (แสดงเมื่อติดตั้งบนมือถือ)
• Selor -Storefront/Src/Pages/ App .TSX - ไฟล์จุดเข้าหลัก Render's The Component, Apollo-client และอื่น ๆ ไปยังรูท div ในไฟล์ index.html ด้านบน ยังมีส่วนหัว - คุณสามารถเปลี่ยนชื่อเรื่องของหน้าร้านได้ที่นี่
• Selor -Storefront/Src/Core/Config.TS - ควบคุมจำนวนผลิตภัณฑ์ที่แสดงต่อหน้า, อีเมลสนับสนุน, ผู้ให้บริการเกตเวย์, โซเชียลมีเดียและเมตาบางส่วน
  • สามารถเปลี่ยนอีเมลสนับสนุนได้
  • สามารถเปลี่ยนผลิตภัณฑ์ที่แสดงต่อหน้าได้
  • สามารถเปลี่ยนผู้ให้บริการเกตเวย์ได้
  • สามารถเปลี่ยนลิงก์โซเชียลมีเดียที่แสดงในส่วนท้าย
  • สามารถเปลี่ยนตัวเลือกเมตาบางตัว
• Saleor -Storefront/Src/Images/ - เก็บรูปภาพทั้งหมดสำหรับโลโก้, รถเข็น, Favicon ฯลฯ
  • สามารถเปลี่ยนโลโก้หน้าร้าน Favicon หรือเพิ่มภาพใหม่ได้ที่นี่
• Selor -Storefront/Src/GlobalStyles/SCSS/Variables.SCSS - มีสไตล์พื้นฐานเช่นสีขนาดตัวอักษรความกว้างของภาชนะบรรจุจุดพักสื่อและอื่น ๆ
• Selor -Storefront/Src/@next/globalstyles/ - มีสไตล์พื้นฐานเพิ่มเติมธีมสื่อและค่าคงที่
• Selor -Storefront/Src/Views/ - โฟลเดอร์นี้ควบคุมมุมมองหรือสิ่งที่แสดงสำหรับแต่ละหน้า มุมมองส่วนใหญ่มีไฟล์ชื่อ "page.tsx" ที่ควบคุมเค้าโครงของหน้าและไฟล์ชื่อ "view.tsx" ที่เรียกสืบค้นและแสดงผลส่วนประกอบด้วยข้อมูล
  • สามารถเพิ่มมุมมองอื่นในหน้าร้านได้ที่นี่ ต้องเพิ่มเส้นทาง (ดูเส้นทางด้านล่าง)
• Saleor -Storefront/src/@next/pages/ - จุดที่สองสำหรับการแก้ไข/เพิ่มหน้าต่างๆ นี่คือไดเรกทอรีที่แนะนำเพื่อเพิ่มหน้าใหม่
• Selor -Storefront/Src/Paths.TS - โฟลเดอร์นี้มีเส้นทางทั้งหมด ที่นี่คือที่ที่คุณเพิ่มใหม่
• Selor -Storefront/Src/Pages/ - โฟลเดอร์นี้มีไฟล์ที่แปลเป็น Next.js Routing นี่คือที่ที่คุณเพิ่มเส้นทางใหม่
  1. ส่งออกเส้นทางใหม่ใน Paths.ts
  2. ภายในหน้าสร้างไฟล์ใหม่ที่มีชื่อ correnspond ไปยังเส้นทางที่คุณต้องการ (อ่านเพิ่มเติมที่นี่เกี่ยวกับเส้นทางที่ซ้อนกัน) นำเข้ามุมมองของคุณในไฟล์เส้นทางที่สร้างขึ้นจะส่งออกเป็นการส่งออกเริ่มต้น
  3. ในการเชื่อมโยงไปยัง import Link from "next/link" และใช้เส้นทางใหม่ที่คุณสร้างใน paths.ts (ตรวจสอบให้แน่ใจว่าได้นำเข้า)
• Selor -Storefront/Src/App/App.TSX - นี่คือองค์ประกอบหลักที่แสดงผล (อธิบายด้านล่าง) และส่วนประกอบอื่น ๆ

การเพิ่มเกตเวย์การชำระเงิน

• Selor -Storefront/Src/Core/config.ts - เพิ่มชื่อผู้ให้บริการเกตเวย์ใหม่ที่นี่
• Selor -Storefront/SRC/@NEXT/ส่วนประกอบ/สิ่งมีชีวิต/ - สร้างโฟลเดอร์ใหม่สำหรับส่วนประกอบเกตเวย์การชำระเงินใหม่ที่นี่
• saleor-storefront/src/@next/components/organisms/paymentgatewayslist/paymentgatewayslist.tsx - นำเข้าส่วนประกอบเกตเวย์ใหม่สร้างกรณีสวิตช์ใหม่เพื่อจัดการส่วนประกอบเกตเวย์ของคุณ

รับอีเมลยืนยัน

• ตั้งค่าตัวแปรสภาพแวดล้อม email_url สำหรับแกนผู้ขาย
  • การใช้ Docker - เพิ่ม email_url เป็นตัวแปรสภาพแวดล้อมใหม่ให้กับทั้งบริการ API และผู้ปฏิบัติงานตามรูปแบบที่นี่
• ปัญหาในการรับอีเมลทำงาน?
  • เครื่องตัดหญ้า
    • ตรวจสอบเพื่อดูว่า "การเข้าถึงแอพที่ปลอดภัยน้อยลง" เปิดอยู่ ภายใต้ "จัดการบัญชี Google ของคุณ"> ไปที่แท็บความปลอดภัย โดยค่าเริ่มต้นการตั้งค่าจะปิดด้วยเหตุผลด้านความปลอดภัย
    • หากใช้ 2FA ตรวจสอบให้แน่ใจว่าได้ตั้งรหัสผ่านแอพและใช้รหัสผ่านเข้าสู่ระบบปกติของคุณ

หลายช่อง

• ตั้งค่า [saleor_channel_slug] ตัวแปรสภาพแวดล้อม - ค่าเริ่มต้น: ค่า default-channel

ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต BSD-3-clause-ดูไฟล์ใบอนุญาตสำหรับรายละเอียด

สร้างขึ้นด้วย❤โดย Saleor Commerce

[email protected]