saleor storefront

DEPRECATED مستودع Saleor-Storefront

لقد قررنا بناء واجهة متجر جديدة تبدأ من نقطة الصفر ، دون تصميم خيالي ، مع التركيز فقط على أفضل الممارسات لبناء واجهات التجارة. يستخدم المشروع الجديد ، الذي يطلق عليه React-Storefront ، next.js كأساس وذوق للنظر. يمكنك العثور عليه هنا: https://github.com/saleor/react-storefront.

Saleor Storefront

ملاحظة: هذا المشروع هو مظاهرة حول كيفية استخدام سالور. إنه ليس جاهزًا ليكون بداية ، بل أظهر كيف يمكن معالجة الحالات المختلفة ويمكن استخدامها ككتاب وصفات. سيكون هناك تغييرات كسر والرمز يتطور باستمرار ، لذلك استخدم على مسؤوليتك الخاصة.

A GraphQL التي تعمل بزلية ، PWA ، واجهة متجر تطبيقات واحدة لصالح Saleor.

سمات

• واجهة التجارة الإلكترونية مقطوعة الرأس مصممة مع GraphQL و Apollo Client و React و Next.js و TypeScript
• الوضع غير المتصل (بيتا)
• تكامل Saleor GraphQL API
• تجربة تطبيق صفحة واحدة
• تكامل بوابة الدفع Braintree

العرض التوضيحي

شاهد العرض التجريبي العام لـ Saleor Storefront!

أو إطلاق العرض التوضيحي على مثيل هيروكو مجاني.

ابدء

ستجلب لك هذه التعليمات نسخة من المشروع وتشغيلها على جهازك المحلي لأغراض التطوير والاختبار.

المتطلبات الأساسية

• Node.js 14.16
• مثيل تشغيل لصالح سالور.

لتشغيل واجهة المتجر ، يجب عليك تعيين متغير بيئة NEXT_PUBLIC_API_URI للإشارة إلى API Saloror GraphQL. إذا كنت تقوم بتشغيل Saleor محليًا ، مع الإعدادات الافتراضية ، يتم تعيين NEXT_PUBLIC_API_URI على: http://localhost:8000/graphql/ . لتغييره ، إما إنشاء ملف .env.local وإضافته هناك أو تعيين متغير ENV باستخدام أمر export .

التثبيت

استنساخ المستودع:

 git clone https://github.com/mirumee/saleor-storefront.git

أدخل دليل المشروع:

 cd saleor-storefront

باستخدام إصدار مستقر

لاستخدام الإصدار المستقر الرسمي ، الخروج إلى علامة الإصدار:

 $ git checkout 2.11.0

راجع قائمة جميع الإصدارات هنا: https://github.com/mirumee/saleor-storefront/release/

باستخدام إصدار التطوير

إذا كنت ترغب في استخدام أحدث إصدار للتطوير ، يمكنك الخروج إلى الفرع master :

 $ git checkout master

تثبيت تبعيات NPM:

 npm i

قم بتشغيل خادم التطوير:

 npm start

انتقل إلى http://localhost:3000 للوصول إلى واجهة المتجر.

يبني

لتجميع تشغيل التطبيق:

 $ npm run build

لتجميع التطبيق وتصدير المتجر إلى تشغيل HTML الثابت:

 $ npm run build:export

لتجميع التطبيق وتشغيله في وضع الإنتاج مع تشغيل الخادم التالي:

 $ npm run build:start

من أجل تمكين Apollo DevTools في إصدار الإنتاج ، قم بتعيين المتغير البيئي

 NEXT_PUBLIC_ENABLE_APOLLO_DEVTOOLS=true

اختبارات السرو

إذا كنت ترغب في تشغيل اختبارات Cypress ، فتأكد من تثبيت جميع التبعيات (بما في ذلك Cypress ) عن طريق تشغيل الأمر التثبيت.

 npm i

يجب تعيين متغيرات البيئة التالية لتكون قادرة على إجراء الاختبارات بشكل صحيح:

• API_URI - عنوان API GraphQL.
• STATIC_URL - عنوان URL للملفات الثابتة ، على سبيل المثال. دلو S3
• CYPRESS_USER_NAME - اسم المستخدم (البريد الإلكتروني) لمستخدم Storefront .
• CYPRESS_USER_PASSWORD - للمستخدم المذكور أعلاه.

إذا كنت تقوم بتشغيل واجهة المتجر من منظور حاوية Docker ، فيمكنك إجراء اختبارات باستخدام الأوامر التالية:

الوضع بدون رأس:

 cy:run

وضع واجهة المستخدم Cypress:

 cy:open

إذا كنت ترغب في إجراء اختبارات مقابل بيئة التطوير المحلية ، فاستخدم الأوامر التالية:

الوضع بدون رأس:

 test:e2e:run

وضع واجهة المستخدم Cypress:

 test:e2e:dev

إنشاء مكونات جديدة

يجب أن تتبع جميع المكونات الجديدة إرشادات التصميم الذري ووضعها في دليل src/@next/components .

يمكن إنشاء بنية الملفات باستخدام plop :

 npm run generate

تعديل واجهة المتجر

من الطيف بعد

ملفات مهمة

• Saleor -Storefront/config/next/config.base.js - ملف config base next.js الذي يحتوي على تعديلات مخصصة لـ WebPack.
  • يمكن تغيير اسم التطبيق (المعروض عند تثبيته على الهاتف المحمول)
• Saleor -Storefront/SRC/Pages/ App .tsx - ملف نقطة الدخول الرئيسي. عرض المكون ، apollo-client ، وغيرها إلى الجذر div في ملف index.html أعلاه. يحتوي أيضًا على قسم الرأس - يمكنك تغيير عنوان واجهة المتجر هنا.
• Saleor -Storefront/SRC/Core/Config.ts - عدد الضوابط عدد المنتجات المعروضة لكل صفحة ، ودعم البريد الإلكتروني ، ومقدمي البوابة ، والوسائط الاجتماعية ، وبعض meta.
  • يمكن تغيير البريد الإلكتروني الدعم
  • يمكن تغيير المنتجات المعروضة لكل صفحة
  • يمكن أن يغير مقدمي خدمات البوابة
  • يمكن تغيير روابط وسائل التواصل الاجتماعي التي يتم عرضها في تذييل
  • يمكن تغيير بعض خيارات التعريف
• Saleor -Storefront/SRC/Images/ - يحمل جميع الصور للشعار ، العربة ، Favicon ، إلخ.
  • يمكن تغيير شعار واجهة المتجر أو Favicon أو إضافة صور جديدة هنا.
• Saleor -Storefront/SRC/GlobalStyles/SCSS/Variables.SCSS - يحتوي على أنماط أساسية مثل الألوان وحجم الخط وعرض الحاوية ونقاط الوسائط والمزيد.
• Saleor -Storefront/SRC/@Next/GlobalStyles/ - يحتوي على المزيد من الأنماط الأساسية والموضوعات والوسائط والثوابت.
• Saleor -Storefront/SRC/Views/ - يتحكم هذا المجلد في طرق العرض ، أو ما يتم عرضه لكل صفحة. تحتوي معظم المشاهدات على ملف يسمى "page.tsx" يتحكم في تخطيط الصفحة وملف يسمى "view.tsx" يدعو الاستعلام ويجعل المكون مع البيانات.
  • يمكن إضافة عرض آخر إلى واجهة المتجر هنا. يتطلب إضافة مسار (انظر الطرق أدناه).
• Saleor -Storefront/SRC/@NEXT/PAGES/ - المركز الثاني لتعديل/إضافة صفحات مختلفة. هذا هو الدليل الموصى به لإضافة صفحات جديدة.
• Saleor -Storefront/SRC/Paths.Ts - يحتوي هذا المجلد على جميع المسارات. هنا حيث تضيف واحدة جديدة.
• Saleor -Storefront/SRC/Pages/ - يحتوي هذا المجلد على ملفات تترجم إلى REXT.JS Routing. هنا هو المكان الذي تضيف فيه طريقًا جديدًا.
  1. تصدير مسار جديد في المسارات
  2. داخل الصفحات ، قم بإنشاء ملف جديد يحمل اسم Correnspond إلى مسارك المطلوب (اقرأ المزيد هنا حول الطرق المتداخلة). استيراد عرضك في نهاية ملف الطريق الذي تم إنشاؤه تصديره كتصدير افتراضي.
  3. لربط import Link from "next/link" واستخدام مسار جديد قمت بإنشائه في المسارات. (تأكد من استيراده)
• Saleor -Storefront/SRC/App/App.tsx - هذا هو المكون الرئيسي الذي يجعل ، (الموضحة أدناه) ، وبعض المكونات الأخرى.

إضافة بوابة دفع

• Saleor -Storefront/SRC/Core/Config.ts - إضافة اسم موفر بوابة جديد هنا.
• Saleor -Storefront/SRC/@NEXT/Components/Commands/ - إنشاء مجلد جديد لمكون بوابة الدفع الجديد هنا.
• SALEOR-STOREFRONT/SRC/@next/components/organisms/paymentgatewayslist/paymentgatewayslist.tsx - استيراد مكون بوابة جديد ، قم بإنشاء حالة تبديل جديدة للتعامل مع مكون البوابة الخاص بك.

تلقي رسائل البريد الإلكتروني للتأكيد

• تعيين متغير بيئة البريد الإلكتروني eMail_url لـ Saleor Core.
  • باستخدام Docker - أضف Email_url كمتغير بيئة جديد لكل من API وخدمة العمال بعد التنسيق هنا.
• المشكلات في عمل رسائل البريد الإلكتروني؟
  • Gmail
    • تحقق لمعرفة أنه يتم تشغيل "وصول التطبيق الأقل أمانًا". ضمن "إدارة حساب Google الخاص بك"> انتقل إلى علامة تبويب الأمان. افتراضيًا ، يتم إيقاف الإعداد لأسباب أمنية.
    • إذا كنت تستخدم 2FA ، فتأكد من تعيين كلمة مرور التطبيق واستخدامها بدلاً من كلمة مرور تسجيل الدخول العادية.

متعددة القنوات

• SET [SALEOR_CHANNEL_SLUG] متغير البيئة. - القيمة الافتراضية: default-channel .

رخصة

تم ترخيص هذا المشروع بموجب ترخيص BSD-3-Cause-راجع ملف الترخيص للحصول على التفاصيل

مصنوع من ❤ من قبل سالور التجارة

[email protected]