nextjs shopify
1.0.0
Demo Live at: headless.builders
تعرف على كيفية البدء مع هذا المنشئ + Next.js + Shopify مثال مع دليل الفيديو خطوة بخطوة هنا:
المتطلبات المسبقة
سوف يفترض هذا الدليل أن لديك البرنامج التالي المثبت:
يجب أن يكون لديك بالفعل حساب ومتجر تم إنشاؤه قبل البدء أيضًا.
مقدمة
بعد اتباع هذا الدليل سيكون لديك
قبل أن نبدأ ، توجه إلى Builder.io وإنشاء حساب.
توجه إلى صفحة إعدادات مؤسستك وإنشاء مفتاح خاص ، ونسخ المفتاح للخطوة التالية.
بعد ذلك ، سنقوم بإنشاء نسخة من مشروع Starter ، وننشئ مساحة جديدة لمحتوىه للعيش فيه.
في المثال أدناه ، قم باستبدال <private-key> بالمفتاح الذي قمت بنسخه في الخطوة السابقة ، وتغيير <space-name> إلى شيء ذي معنى بالنسبة لك-لا تقلق ، يمكنك تغييره لاحقًا!
git clone https://github.com/BuilderIO/nextjs-shopify.git
cd nextjs-shopify
unzip builder
npm install --global "@builder.io/cli"
builder create --key "<private-key>" --name "<space-name>" --debug
ملاحظة: إذا كنت مهتمًا فقط باستخدام هذا المبتدئ لصفحة مقصودة مع Shopify ، فاستخدم هذا الأمر بدلاً من ذلك:
unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug
إذا كان هذا ناجحًا ، فيجب أن يتم الترحيب برسالة تتضمن مفتاح API العام لمساحة Builder.io التي تم سكانها حديثًا.
ملاحظة: سينشر هذا الأمر أيضًا بعض محتوى Builder.io CMS من دليل ./builder إلى مساحتك الجديدة عند إنشائها.
____ _ _ _ _ _ _
| __ ) _ _ (_) | | __ | | ___ _ __ (_) ___ ___ | | (_)
| _ | | | | | | | | / _ ` | / _ | ' __| | | / _ / __| | | | |
| |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | |
|____/ __,_| |_| |_| __,_| ___| |_| (_) |_| ___/ ___| |_| |_|
|████████████████████████████████████████| shopify-product | 0/0
|████████████████████████████████████████| product-page: writing generic-template.json | 1/1
|████████████████████████████████████████| shopify-collection | 0/0
|████████████████████████████████████████| collection-page: writing generic-collection.json | 1/1
|████████████████████████████████████████| page: writing homepage.json | 2/2
Your new space "next.js shopify starter" public API Key: 012345abcdef0123456789abcdef0123انسخ مفتاح API العام ("012345ABCDEF0123456789ABCDEF0123" في المثال أعلاه) للخطوة التالية.
يستخدم هذا المشروع المبدئي ملفات dotenv لتكوين متغيرات البيئة. افتح الملفات .env.development و .env.production في محرر النصوص المفضل لديك ، وقم بتعيين قيمة BUILDER_PUBLIC_KEY على المفتاح العام الذي نسخته للتو. يمكنك تجاهل المتغيرات الأخرى في الوقت الحالي ، سنقوم بتعيينها لاحقًا.
+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=قم بإنشاء تطبيق مخصص لمتجر Shopify الخاص بك. إذا لم يكن لديك متجر Shopify بالفعل ، فيمكنك إنشاء متجر تطوير.
عند إنشاء التطبيق الخاص ، سيتعين عليك تعيين عدد من الأذونات حتى يتمكن المنشئ من استرداد مخزون Shopify الخاص بك. لهذا الضغط على Storefront API في علامة التبويب التكوين واختر جميع الأذونات التالية:
ثم في علامة تبويب API Credentials ، انقر فوق install :
ونسخ رمز الوصول الذي تم إنشاؤه.
الوصول إلى المساحة التي تم إنشاؤها حديثًا عن طريق تحديدها من قائمة المساحات في مؤسستك.
يجب أن يتم الترحيب بك من قبل وسيط يطلب العديد من واجهك وصول متاجر Toke (من خطوة المعاينة) ومجال متجرك ، سيسمح ذلك ببناء.
املأ المفاتيح المطلوبة واضغط على "توصيل تطبيق Shopify المخصص"!
افتح. env.development و .env.production مرة أخرى ، ولكن هذه المرة حدد مفتاحي Shopify الأخريين.
BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=انتهى الجزء الصعب ، كل ما عليك فعله هو بدء المشروع الآن.
npm install
npm run dev سيبدأ هذا خادمًا على http://localhost:3000 .
الآن بعد أن أصبح لدينا كل شيء ، ابدأ في بناء ونشر صفحات على Builder.io ، للحصول على عرض تجريبي على بناء شيء مشابه للصفحة الرئيسية التجريبية ، اتبع الخطوات في هذا الفيديو القصير
يمكنك نشر هذا الرمز في أي مكان تريده - يمكنك العثور على العديد من خيارات النشر لـ Next.js هنا. تدعم الخيارات التالية تثبيت نقرة واحدة ويسهل البدء بـ:
