next shopify starter
1.0.0
عرض مباشر • شاهد المزيد من المبتدئين • اتبعني على Twitter
هذا متجر للتجارة الإلكترونية يعمل بالكامل يستخدم CSS + JS + Tailwind في الواجهة الأمامية ويستفيد من واجهة برمجة تطبيقات متجر Shopify للتفاعل مع الواجهة الخلفية الخاصة بك. يمكنك رؤية عرض حي هنا.
نستخدم GraphQL للاستعلام عن بيانات Shopify وتخزين معلومات العربة في LocalStorage لاستمرار جلسة المستخدم. أخيرًا - نستخدم shopify checkout للسماح للمستخدم بشراء العناصر. يمكنك رؤية هذه المسرحية في متجر مثال. نعم - المتجر وظيفي ويمكنك شراء الملصقات. ؟
| سطح المكتب | متحرك |
 |  |
| القوائم | عربة |
 |  |
بشكل افتراضي ، تم تعيين المتجر للاستعلام وإظهار جميع المنتجات في مجموعة واحدة. يمكنك تمديد هذا للاستعلام عن مجموعات متعددة أو متجرك بأكمله.
يتم ترميز استعلامات GraphQL جميعها لسحب الحد الأقصى لعدد المنتجات/المتغيرات/الصور التي يتم تعيينها على 250 بواسطة Shopify. فعلت هذا للحفاظ على الأمور بسيطة. كان من شأن ترقيم الصفحات جعل الاستعلامات معقدة و 250 عنصرًا كافية لمعظم حالات الاستخدام.
إذا كنت بحاجة إلى ترقيم الصفحات ، فسيتعين عليك تتبع حقل المؤشر والاستمرار في الاستعلام عن البيانات حتى تجلب جميع العناصر.
إنشاء ملف .env.local في دليل الجذر. تحتاج إلى إضافة هذه المتغيرات الأربعة:
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) للوصول إلى واجهة برمجة تطبيقات متجر Shopify (تأكد من إعداده في متجر المتجر الخاص بك. انظر مستندات لمزيد من المعلومات.
next_public_shopify_collection هو اسم المجموعة التي تريد سحبها و next_public_local_storage_name هو اسم المفتاح الذي سيقوم المستخدمون بتخزين معلومات العربة الخاصة بهم. الاسم الدقيق ليس بهذه الأهمية على الرغم من أنني أقترح أن تجعله فريدًا ، لذا فمن غير المرجح أن يصطدم بكائنات أخرى مخزنة. شيء مثل yourstorenameshopifystore حيث يكون اسم متجر yourstorename الخاص بك shopify الخاص بك يكفي.
تغيير إلى دليل المشروع وقم بتشغيل الأمر التالي:
yarn && yarn dev
يمكنك تحديث بيانات تعريف موقعك في ملف next.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: '',
},
},
قم بتحديث ملف MAYESTEST.JSON والرموز تحت مجلد الجمهور/الصور/الرموز.
يمكنك استخدام أدوات مجانية عبر الإنترنت مثل https://realfavicongenerator.net/ لإنشاء جميع أحجام الأيقونات المختلفة وملف favicon.ico بسرعة.
يمكنك نشر هذا باستخدام أي عدد من الخدمات. Vercel و NetLify هما من أنا أفضل وسهلة الإعداد والمزامنة مع repo github.
كان المتجر مستوحى من متجر Gatsby Swag Awesome ، بالإضافة إلى عدد لا يحصى من Devs أكثر بكثير مني والذين وضعوا عملهم الرائع مجانًا.
لقد فتحت هذا الرمز بموجب ترخيص معهد ماساتشوستس للتكنولوجيا على أمل أن يساعد هذا الأشخاص في التنقل حول متاجر التجارة الإلكترونية Jamstack كما فعل متجر Gatsby Swag بالنسبة لي عندما بدأت لأول مرة.
إذا وجدت هذا مفيدًا وترغب في إظهار تقديرك ، يمكنك شراء قهوة لي؟
يمكنك أيضًا شراء بعض الملصقات الكلب من المتجر! ؟
