next shopify starter

next.js + tailwind css + starter Shopify

การสาธิตสด•ดู starters เพิ่มเติม•ติดตามฉันบน Twitter

นี่คือร้านค้าอีคอมเมิร์ซที่ใช้งานได้อย่างสมบูรณ์ที่ใช้ next.js + tailwind CSS ในส่วนหน้าและใช้ประโยชน์จากหน้าร้านค้า API ของ Shopify เพื่อโต้ตอบกับแบ็กเอนด์ Shopify ของคุณ คุณสามารถดูตัวอย่างสดได้ที่นี่

เราใช้ GraphQL เพื่อค้นหาข้อมูล Shopify ของเราและจัดเก็บข้อมูลรถเข็นใน LocalStorage เพื่อคงอยู่เซสชันผู้ใช้ ในที่สุด - เราใช้ Shopify Checkout เพื่อให้ผู้ใช้ซื้อรายการ คุณสามารถดูการเล่นนี้ได้ในร้านตัวอย่าง ใช่ - ร้านค้าใช้งานได้และคุณสามารถซื้อสติกเกอร์ได้ -

ประสิทธิภาพสูง

เดสก์ท็อป	มือถือ

การตอบสนองต่อมือถือ

รายชื่อ	เกวียน

เทคโนโลยี

• next.js + tailwind css
• graphql
• LocalStorage เพื่อคงอยู่เซสชันผู้ใช้
• มีร้านขายสินค้า
• vercel
• ตัวอักษรไอคอนที่ยอดเยี่ยม
• Josefin Sans Google Font

วิธีใช้

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

หมายเหตุเกี่ยวกับการแบ่งแยกในการสืบค้น GraphQL

การสืบค้น GraphQL ล้วนเป็น hardcoded ทั้งหมดเพื่อดึงจำนวนสูงสุดของผลิตภัณฑ์/ตัวแปร/รูปภาพซึ่งตั้งค่าเป็น 250 โดย Shopify ฉันทำสิ่งนี้เพื่อให้สิ่งต่าง ๆ ง่าย การปนเปื้อนจะทำให้การสืบค้นซับซ้อนและ 250 รายการก็เพียงพอสำหรับกรณีการใช้งานส่วนใหญ่

หากคุณต้องการการปนเปื้อนคุณจะต้องติดตามฟิลด์เคอร์เซอร์และตรวจสอบข้อมูลจนกว่าคุณจะดึงรายการทั้งหมด

ตัวแปรสภาพแวดล้อมการตั้งค่า

สร้างไฟล์. env.local ในไดเรกทอรีรูท คุณต้องเพิ่ม 4 ตัวแปรเหล่านี้:

 NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=

next_public_shopify_store_front_access_token และ next_public_shopify_store_domain (มันจะเป็นสิ่งที่ต้องการ domain_name.myshopify.com) เป็นสิ่งจำเป็นในการเข้าถึงร้านค้า storefront API (ตรวจสอบให้แน่ใจ

next_public_shopify_collection เป็นชื่อของคอลเลกชันที่คุณต้องการดึงและ next_public_local_storage_name เป็นชื่อของคีย์ผู้ใช้ของคุณจะเก็บข้อมูลรถเข็นของพวกเขาไว้ ชื่อที่แน่นอนไม่สำคัญแม้ว่าฉันจะแนะนำให้คุณทำให้มันไม่เหมือนใครดังนั้นจึงมีโอกาสน้อยที่จะปะทะกับวัตถุที่เก็บไว้อื่น ๆ บางอย่างเช่น YourStorenameshopifystore ที่ชื่อของคุณชื่อร้านค้าของคุณจะพอเพียง

การติดตั้ง

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

 yarn && yarn dev

อัปเดตข้อมูลเมตาของไซต์

คุณสามารถอัปเดตข้อมูลเมตาไซต์ของคุณในไฟล์ถัดไป config.js

 env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://doggystickers.xyz',
  siteImagePreviewUrl: '/images/main.jpg',
  twitterHandle: '@your_handle'
} 

อัปเดตสี

คุณสามารถอัปเดตจานสีในไฟล์ tailwind.config.js

 colors: {
  palette: {
    lighter: '',
    light: '',
    primary: '',
    dark: '',
  },
},

อัปเดตข้อมูล Progressive Web App (PWA)

อัปเดตไฟล์ manifest.json และไอคอนภายใต้โฟลเดอร์สาธารณะ/รูปภาพ/ไอคอน

คุณสามารถใช้เครื่องมือฟรีออนไลน์เช่น https://realfavicongenerator.net/ เพื่อสร้างขนาดไอคอนที่แตกต่างกันทั้งหมดและไฟล์ favicon.ico

การปรับใช้

คุณสามารถปรับใช้สิ่งนี้โดยใช้บริการจำนวนใดก็ได้ Vercel และ Netlify เป็นสิ่งที่ฉันชอบและง่ายต่อการตั้งค่าและซิงค์กับ repo gitHub ของคุณ

เครดิต

ร้านค้าได้รับแรงบันดาลใจจากร้าน Gatsby Swag ที่ยอดเยี่ยมรวมถึง devs อื่น ๆ อีกมากมายที่มีความสามารถมากกว่าฉันที่หางานที่ยอดเยี่ยมของพวกเขาฟรี

ใบอนุญาต

ฉันได้เปิดรหัสนี้ภายใต้ใบอนุญาต MIT ด้วยความหวังว่าหากสิ่งนี้ช่วยให้ผู้คนนำทางไปรอบ ๆ ร้านค้าอีคอมเมิร์ซ Jamstack ในขณะที่ร้าน Gatsby Swag ทำเพื่อฉันเมื่อฉันเริ่มต้นครั้งแรก

ซื้อกาแฟให้ฉัน!

หากคุณพบว่ามีประโยชน์และต้องการแสดงความขอบคุณคุณสามารถซื้อกาแฟให้ฉันได้หรือไม่?

คุณยังสามารถซื้อสติกเกอร์สุนัขจากร้านได้! -