commercejs nextjs demo store
1.0.0
تم تصميم متجر تجريبي للتجارة الإلكترونية العالي بشكل كامل باستخدام Commerce.js SDK و Next.js مع النشر المباشر على NetLify.
ملحوظة
سوف يرشدك README في الاستيقاظ والتشغيل باستخدام قالب التجارة الإلكترونية بالكامل. لقد قمنا بتكوين هذا القالب من أجل نشر نقرة واحدة مباشرة على NetLify. بدلاً من ذلك ، يمكنك النشر يدويًا في اختيارك لمنصة الاستضافة.
للحصول على برنامج تعليمي مفصل كامل حول بناء تطبيق التجارة الإلكترونية Jamstack ، يرجى التوجه إلى هنا.
yarn global add @chec/cli الآن بعد أن قمت بتثبيت CHE CLI على مستوى العالم ، ستتمكن من الوصول إلى قائمة chec [COMMANDS] ، أحدها يسجل لحساب الشيكات. دعنا نمضي قدمًا ونحصل على هذا الإعداد!
# Open the Chec registration page in your browser
chec registerاتبع بقية المشي لإعداد تفاصيل التاجر الخاصة بك. بدلاً من ذلك ، يمكنك الذهاب إلى هنا للتسجيل للحصول على حساب CHE.
يتيح لك النقر بنقرة واحدة توصيل NetLify بحساب GitHub الخاص بك باستنساخ مستودع commercejs-nextjs-demo-store ونشره تلقائيًا. تأكد من الانتقال إلى NetLify والتسجيل للحصول على حساب قبل النقر فوق زر النشر.
من خلال النقر فوق الزر أعلاه ، سيتم تنقلك إلى صفحة النشر المباشر لـ NetLify مع تمرير مستودع المشروع كمعلمات في عنوان URL. انقر فوق الزر Connect to Github ، وقم بتسمية المستودع الخاص بك وأدخل في هذا المفتاح العام في إدخال المفتاح العمومي لـ CHEC . يرجى ملاحظة أنه لغرض الحصول على تشغيلك مع معاينة النشر المباشر لمتجر التجريبي ، قمنا بتزويدك بالمفتاح العام من حساب التاجر التجريبي الخاص بنا. الآن ، حفظ ونشر موقعك.
يرجى ملاحظة أن البناء الأولي سيفشل إذا أدخلت في مفتاحك العام بدلاً من مفتاح التاجر التجريبي المقدم. يهدف النقر بنقرة واحدة لأغراض العرض التقديمي إلى زيادة نشر سريع. قد يعني استخدام حساب التاجر الخاص بك أنك ستحتاج إلى الحصول على البيانات المناسبة مثل الأصول والفئات المتعددة المرتبطة بمنتجاتك. إذا كنت ترغب في استخدام حساب التاجر الخاص بك ، فيرجى اتباع خطوات الإعداد اليدوي أدناه.
يتضمن الإعداد اليدوي استنساخ الريبو في بيئتك المحلية ، وبزاعة بيانات العينة المقدمة في حسابك الشيكهات الفعل ونشره إلى NetLify.
الخطوة 1. استنساخ الريبو وتثبيت التبعيات
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarnالخطوة 2. قم بإعداد متغيرات البيئة الخاصة بك
استبدل العينة .env.example dotenv ملف في جذر المشروع لتخزينك public_key وكذلك secret_key .
# Copy from source file to destination file .env
cp .env.example .env يمكنك الوصول إلى مفتاح API الخاص بك في إعداد لوحة معلومات CHEC ، ثم انتقل إلى علامة التبويب تطوير لنسخ المفتاح العام والمفتاح السري. استبدل NEXT_PUBLIC_CHEC_PUBLIC_KEY بملء CHEC_SECRET_KEY في ملف .env . المفتاح السري ضروري لكي يحصل البرنامج النصي البذور على إذن مناسب لبذار بيانات العينة في /seeds في حساب CHEC الخاص بك. قم بإزالة المفتاح السري بمجرد أن يتم زرع البيانات.
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =يهدف هذا الملف إلى عدم الالتزام بتحكم المصدر وسيتم إخفاؤه أيضًا في متصفحات الملفات.
الخطوة 3. بذرة البيانات اللازمة لتشغيل متجر CHEC وبدء بيئة التطوير الخاصة بك (ضروري للإعداد الأولي).
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn devتوجه الآن إلى http: // localhost: 3000 بعد بدء التطوير الخاص بك ، يجب الآن ملء موقعك مع بيانات العينة!
إذا كنت تحل محل نماذج المنتجات أو الفئات ، فيمكنك تخصيص صور الفئات الخاصة بك ضمن `Public/Images/Collection. رؤية مزيد من المعلومات حول تخصيص البيانات أدناه.
الخطوة 5. قم بإجراء أي تغييرات ضرورية تحتاجها ودفع الكود إلى مستودع على Github أو اختيارك للنظام الأساسي.
الخطوة 6. نشر موقعك
تأكد من الاشتراك في حساب NetLify وتسجيل الدخول إليه. انقر على الموقع الجديد من زر GIT واترك الوصول إلى تحديد الريبو الخاص بك. يتم ملء إعدادات الإنشاء الخاصة بك تلقائيًا من أجل من netlify.toml في القالب. لدخول متغيرات البيئة الخاصة بك ، انقر فوق "إظهار" متقدم ثم متغير جديد وقم بملء إدخال المفتاح كـ NEXT_PUBLIC_CHEC_PUBLIC_KEY ومدخلات القيمة مع المفتاح العام الخاص بك. يمكنك الوصول إلى مفتاح API الخاص بك في لوحة معلومات CHEC الخاصة بك ضمن الإعداد ، ثم انتقل إلى علامة التبويب المطور لنسخ مفتاحك العام
انقر الآن وانقر فوق "موقع النشر" لمشاهدة موقعك المباشر!
سيقوم هذا الأمر بتنزيل مشروع المثال من Github وتهيئته على جهازك. ستكون مجانيًا في تحرير الكود الذي تم تنزيله واللعب مع Commerce.js بعد ذلك.
الخطوة 1. تثبيت CHE CLI
npm install -g @chec/cli
# or
yarn add -g @chec/cliالخطوة 2. إنشاء متجر تجريبي
chec demo-store
عند المطالبة باختيار متجر تجريبي من القائمة ، اختر "CommerceJS-NextJS-Demo Store". سيؤدي هذا الأمر أيضًا إلى إرفاق بعض بيانات العينة إلى حساب CHEC. لمزيد من المعلومات ، راجع وثائق CHE CLI.
نظرًا لأن هذا المشروع عبارة عن واجهة متخلف بالكامل تعرض تصميمًا مخصصًا وتدفق المستخدم ، فهناك بعض التحذيرات التي ستعمل عليها إذا قمت بتخصيص بياناتك في لوحة معلومات CHEC. واحد gotcha هو مع بيانات الفئات في واجهة المستخدم: تتم إضافة صور ميزات الفئات في API CHEC كبيانات التعريف. إذا قمت بإضافة بيانات فئات العينات المصنفة الجديدة أو تحريرها ، فيمكنك تخصيص صورة ميزة الفئات عن طريق استبدال أصول الصور الخاصة بك ضمن public/images/collection . سوف تحتاج أسماء الملفات إلى البقاء كما هو. إذا كنت تخطط لتغيير أسماء الملفات أو إضافة فئات جديدة ، فستحتاج إلى إضافة بيانات ميتا جديدة. سيتوقع التطبيق إعداد المخزون أدناه من أجل إنشاء المكونات وتقديمها ، لذلك إذا كنت ترغب في التخصيص مع مخزونك في الواجهة الخلفية ، فتأكد:
public/images/collection بصورك الخاصةيستخدم هذا المتجر التجريبي مجموعة من الميزات التي توفرها Commerce.js ويتم تشغيلها بواسطة لوحة معلومات CHEC.
تستخدم عربة التسوق API Commerce.js. تستمر العربات لمدة تصل إلى 30 يومًا ، وتتذكر Commerce.js عربات الزوار تلقائيًا.
يوفر Commerce.js العديد من الأدوات لتبسيط تطبيقات الخروج. يستخدم الخروج في هذا المتجر التجريبي:
يوفر Commerce.js وظائف في ثناياه عوامل لدعم تسجيلات تسجيلات العملاء دون أي رمز جانبي لخادم. يتميز هذا المتجر التجريبي بصفحة تسجيل الدخول إلى العملاء الحالية ، ويقدم تفاصيل حول الطلبات السابقة. يتم استخدام معلومات العميل أيضًا لتكييف الخروج مسبقًا مع تفاصيل العميل المعروفة.
تم تكوين هذا المتجر التجريبي باستخدام "Gateway Test" Check Out Out of the Box ، والذي يوفر خيار دفع مفيد أثناء اختبار واجهة المتجر الخاصة بك. بالإضافة إلى ذلك ، يتم تضمين دعم عناصر الشريط إذا تم تكوين Stripe على لوحة معلومات CHEC.
commerce.js <> وثائق تكامل الشريط
يجب تمكين الشريط في لوحة معلومات CHEC باتباع التعليمات المقدمة. يمكنك إضافة مفاتيح صندوق الرمل الخاص بك للشريط ، واستخدام مفتاح API Public Sandbox للاختبار باستخدام Stripe. يتم تكوين كل من مفتاح API Public CHEC ، ومفتاح "publishable" الشريط في ملف .env . انظر الخطوة الثانية من "الإعداد اليدوي ونشر NetLify"
شوك هذا المشروع لتخصيص وتوسيع العرض التوضيحي كما تريد. فيما يلي بعض الأفكار حول ما يمكنك القيام به والاتجاهات التي يمكنك أخذها للتجارة الإلكترونية.
