demo.yournextstore.com؟
نحن ندعم رسميًا إصدار LTS الحالي - 20 وقت كتابة هذا التقرير. يجب أن تعمل YNS على الإصدارات 18 و 20 و 22. إذا كنت تستخدم أحد هذه الإصدارات وتواجه مشكلة ، فيرجى الإبلاغ عنها!
اتبع الإرشادات الخاصة بنظام التشغيل الخاص بك الموجود هنا: nodejs.org/en/download
نحن ندعم PNPM الإصدار 9 رسميًا ، لكننا سنبذل قصارى جهدنا للحفاظ عليه متوافقًا مع NPM والغزل.
أسهل طريقة لتثبيت PNPM هي عبر node.js corepack. داخل المجلد مع YNS ، قم بتشغيل هذه الأوامر:
corepack enable
corepack installبدلاً من ذلك ، اتبع الإرشادات الخاصة بنظام التشغيل الخاص بك الموجود هنا: pnpm.io/installation
تم دمج YNS بإحكام مع Stripe ، لذلك تحتاج إلى حساب شريط لاستخدام متجرك التالي. اتبع التعليمات من Stripe لإنشاء حساب.
من المهم أن تتذكر أن Stripe يعمل في وضعين مختلفين: وضع الاختبار ووضع الإنتاج . لأغراض التطوير والاختبار المحليين ، يجب عليك استخدام وضع الاختبار . وبهذه الطريقة ، لن يتقاضى Stripe أبدًا أموالًا حقيقية ، ويمكنك استخدام بيانات اعتماد اختبار خاصة مثل أرقام بطاقات الائتمان وأرقام Blik لإكمال المدفوعات. لمزيد من المعلومات التفصيلية ، يرجى الرجوع إلى وثائق الشريط على docs.stripe.com/testing.
بمجرد أن تكون مستعدًا لبيع منتجاتك للعملاء الحقيقيين ، يجب عليك تبديل وضع الاختبار إلى وضع الإنتاج في شريط وإنشاء بيانات اعتماد جديدة.
نصيحة
ستتطلب هذه الخطوة التحقق الإضافي من الشريط ، لذلك نقترح عليك بدء العملية على الفور.
لكي تعمل YNS ، ستحتاج إلى تحديد بعض المتغيرات البيئية. للتطوير والاختبار المحليين ، يمكنك إنشاء ملف .env فارغ ونسخ محتويات .env.example في ذلك.
لتعيين متغيرات ENV في الإنتاج ، ستحتاج إلى استشارة وثائق مزود الاستضافة الذي اخترته.
ENABLE_EXPERIMENTAL_COREPACK - Vercel فقط: ضبط على 1 لتمكين CorePackNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - مفتاح نشر من Stripe.STRIPE_SECRET_KEY - مفتاح سري من الشريط.STRIPE_CURRENCY - يتم استخدام هذا لتحديد عملة متجرك. في الوقت الحالي ، لا يُسمح إلا بعملة واحدة ، ويجب أن تكون رمز ISO المكون من ثلاثة أحرف (على سبيل المثال ، usd ).NEXT_PUBLIC_URL - اختياري على عنوان متجرك دون القطع المدمجة ، أي ، https://demo.yournextstore.com . عند البناء لأول مرة ، يجب عليك تعيينه على أي عنوان URL صالح ، أي http://localhost:3000 .NEXT_PUBLIC_UMAMI_WEBSITE_ID - معرف موقع Umami للتحليلاتNEXT_PUBLIC_NEWSLETTER_ENDPOINT - معاينة : نقطة النهاية لنموذج النشرة الإخبارية في المستقبل. يجب أن تقبل طلبات النشر باستخدام JSON { email: string } وإرجاع JSON { status: number } .STRIPE_WEBHOOK_SECRET - معاينة : Stripe Webhook Secret للتعامل مع الأحداث من Stripe. اقرأ المزيد أدناه.ENABLE_STRIPE_TAX - معاينة : ضبط على أي قيمة (أي ، 1 ) لتمكين ضريبة الشريط في YNS. اقرأ المزيد أدناه.NEXT_PUBLIC_LANGUAGE - لغة المتجر (أي ، en-US ) بعد اتباع الخطوات المذكورة أعلاه ، قم pnpm install لتثبيت التبعيات المطلوبة ، ثم قم بتشغيل pnpm dev لبدء خادم التطوير على جهازك. سيكون متجرك التالي متاحًا في LocalHost: 3000
يحصل متجرك التالي على جميع المنتجات والأسعار والأوصاف والفئات من الشريط. لذا ، إذا كنت تعرف الشريط بالفعل ، فسوف تشعر في المنزل!
تحتاج إلى إضافة منتجات إلى لوحة معلومات الشريط لإظهارها في YNS. بعد تسجيل الدخول ، انقر فوق المزيد في الشريط الجانبي الأيسر وحدد كتالوج المنتج . يمكنك أيضًا استخدام الرابط المباشر:
ثم ، انقر فوق إضافة منتج وملء جميع المعلومات المطلوبة:
بالإضافة إلى ذلك ، يستخدم متجرك التالي بيانات تعريف المنتج لتوفير المزيد من معلومات السياق حول المنتجات. يمكنك تحديد حقول البيانات الوصفية التالية:
| مجال | مطلوب | وصف |
|---|---|---|
slug | نعم | يتم استخدام سبيكة المنتج لعناوين URL. يجب أن تكون فريدة من نوعها باستثناء المتغيرات. |
category | لا | فئة المنتج المستخدمة لتجميع المنتجات. |
order | لا | ترتيب المنتج المستخدم لفرز المنتجات. يتم عرض الأرقام الأدنى أولاً. |
variant | لا | سبيكة متغير المنتج. اقرأ أدناه للحصول على التفاصيل. |
الآن يجب أن ترى جميع المنتجات المضافة في متجرك التالي.
يدعم متجرك التالي المتغيرات البسيطة للمنتج. لإنشاء منتج يحتوي على متغيرات ، يجب عليك إضافة العديد من المنتجات إلى حقل البيانات الوصفية slug . يستخدم YNS حقل البيانات الوصفية variant للتمييز بين المتغيرات المختلفة لنفس المنتج. على سبيل المثال ، إذا كان لديك قميص بأحجام متعددة ، فيمكنك إنشاء ثلاثة منتجات مع slug من t-shirt والقيم variant من small medium large .
يتم عرض المتغيرات على صفحة المنتج. يمكن أن يكون للمتغيرات أسعار وأوصاف مختلفة. من المهم أن نلاحظ أن category يجب أن تكون هي نفسها لجميع المتغيرات لنفس المنتج لأفضل تجربة تصفح.
ملحوظة
في المستقبل ، نخطط لإضافة إمكانية تحرير المنتجات والمتغيرات داخل لوحة معلومات المسؤول المدمجة. إذا كان لديك أي أفكار أو اقتراحات ، فيرجى إخبارنا!
يستخدم متجرك التالي مخططات الويب الشريطية للتعامل مع الأحداث من Stripe. حاليًا ، يتم استخدام نقطة النهاية لإعادة تقييم صفحة العربة وإنشاء معاملة ضريبية (إذا تم تمكينها). لإعداد Webhooks ، اتبع مستندات الشريط. تعتمد الخطوات الدقيقة على ما إذا كنت قد قمت بتنشيط طاولة عمل Stripe في حساب الشريط الخاص بك: docs.stripe.com/webhooks#add-a-webhook-endpoint.
نقطة النهاية لـ webhook هي https://{YOUR_DOMAIN}/api/stripe-webhook . الحدث المطلوب الوحيد هو payment_intent.succeeded . عند تكوين WebHook في Stripe ، قم بتعيين متغير بيئة STRIPE_WEBHOOK_SECRET على المفتاح السري الذي تم إنشاؤه بواسطة Stripe.
ملحوظة
في المستقبل ، نخطط لإضافة المزيد من الأحداث إلى webhook لتحسين تجربة المستخدم.
يأتي متجرك التالي مع معاينة لدعم ضريبة الشريط. لتمكينه ، قم بتعيين متغير بيئة ENABLE_STRIPE_TAX إلى أي قيمة (أي ، 1 ).
لكي تعمل هذه الميزة ، يجب عليك تعيين الإعدادات الضريبية في لوحة معلومات Stripe: Dashboard.stripe.com/register/tax. عند تمكين وتكوين ، سيتم حساب الضرائب تلقائيًا وإضافتها إلى إجمالي سعر المنتج بناءً على:
تحذير
لا تزال هذه الميزة في المرحلة المبكرة ، وقد تكون هناك حالات غير مدعومة. نحن نعمل بنشاط على ذلك ، لذلك إذا واجهت أي مشاكل أو لديك أي اقتراحات ، فيرجى إخبارنا!
للنشر على Vercel ، انقر فوق الزر التالي ، وقم بإعداد متغيرات مستودع GitHub وبيئة ، وانقر فوق Deploy . تأكد من تعيين متغير ENABLE_EXPERIMENTAL_COREPACK إلى 1 .
الوصف قريبا.
للنشر على Docker ، اتبع هذه الخطوات:
pnpm run docker:build .pnpm run docker:run . يتطور YNS كل يوم ، ونبحث بنشاط عن ملاحظات حول ما يجب تحسينه. إذا كانت لديك أي أسئلة أو مشاكل ، فلا تتردد في الاتصال بنا على خادم Discord الخاص بنا.
structuredClone لتمرير البيانات من الخادم إلى مكونات العميل. لماذا؟ يمكن تمرير أنواع معينة من البيانات فقط من الخادم إلى العميل مباشرة. تحتوي البيانات من Stripe SDK غالبًا على مثيلات الفصل. للتغلب على هذا ، نستخدم structuredClone للقضاء عليها وتمرير كائنات قديمة عادية إلى العميل.