تاريخ النجوم
Next.js موقع التجارة الإلكترونية مع الواجهة الخلفية WooCommerce
عنوان URL المباشر: https://next-woocommerce.dfweb.no
جدول المحتويات (TOC)
- تثبيت
- سمات
- مشاكل
- استكشاف الأخطاء وإصلاحها
- تودو
تثبيت
- تثبيت وتنشيط الإضافات المطلوبة التالية ، في دليل WordPress Plugin:
- التجارة الإلكترونية WooCommerce لـ WordPress.
- WP-GRAPHQL يعرض GRAPHQL لـ WordPress.
- يضيف WP-Graphql-WooCommerce وظيفة WooCommerce إلى مخطط WPGraphQL.
- WPPRESS WP-ALGOLIA-WOO-INDEXER WordPress Plugin من قبلي. يرسل منتجات WooCommerce إلى Algolia. مطلوب للبحث للعمل.
البرنامج المساعد الاختياري:
- يعطل العناصر المطلقة للواجهة الأمامية ، لذا يمكن الوصول إلى الواجهة الخلفية فقط. (خياري)
تم اختبار الإصدار الحالي وتم تأكيده من العمل مع الإصدارات التالية:
- إصدار WordPress 6.6.2
- WooCommerce الإصدار 7.4.0
- WP GraphQL الإصدار 1.13.8
- الإصدار Woogroghql 0.12.0
- Wpgraphql Cors الإصدار 2.1
لتصحيح الأخطاء والاختبار ، قم بتثبيت:
https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (Firefox)
https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebabilgoeccciglkfbmbnfm (Chrome)
تأكد من أن WooCommerce لديه بعض المنتجات بالفعل
استنساخ أو شوكة الريبو وتعديل .env.example وأعد تسميته إلى .env
ثم قم بتعيين متغيرات البيئة وفقًا لذلك في Vercel أو حل الاستضافة المفضل لديك.
انظر https://vercel.com/docs/environment-variables
قم بتعديل القيم وفقًا لإعدادك
ابدأ الخادم باستخدام npm run dev
تمكين طريقة الدفع COD (Cash on Demand) في WooCommerce
أضف منتجًا إلى العربة
انتقل إلى الخروج (gå til kasse)
املأ التفاصيل الخاصة بك ووضع الطلب
سمات
- NEXT.JS الإصدار 14.3.11
- رد فعل الإصدار 18.3.1
- TypeScript
- اختبارات مع الكاتب المسرحي
- اتصل بـ WooCommerce GraphQL API واسم القائمة والسعر وصورة العرض للمنتجات
- دعم المنتجات البسيطة والمنتجات المتغيرة
- معالجة العربة والخروج مع WooCommerce (نقدًا عند التسليم فقط في الوقت الحالي)
- بحث الغوليا (يتطلب مجموعة algolia-woo-indexer)
- يلتقي معايير إمكانية الوصول إلى WCAG حيثما أمكن ذلك
- العنصر النائب للمنتجات بدون صور
- عميل أبولو مع GraphQL
- رد فعل هوك رد الفعل
- التحقق من شكل HTML5 الأصلي
- الرسوم المتحركة بحركة Framer ، والمكونات المصممة
- تحميل الدوار الذي تم إنشاؤه بمكونات مصممة
- يعرض تقدم الصفحة التقدم مع nprogress أثناء التنقل
- تصميم مستجيب تماما
- قوائم الفئة والمنتجات
- عرض حالة الأسهم
- عناوين URL جميلة مع وظائف NEXTJS بنيت
- Tailwind 3 للتصميم
- تعليقات JSDOC
استكشاف الأخطاء وإصلاحها
أحصل على خطأ غير محدد أو أخطاء GraphQL الأخرى
تأكد من أنك تستخدم إصدار 0.12.0 من المكون الإضافي WP-Graphql-Wooocommerce
صفحة المنتجات لا يتم تحميلها
تحقق من سمات المنتجات. الآن يتطلب التطبيق الحجم واللون.
مشاكل
بشكل عام ، يعمل التطبيق على النحو المقصود ، ولكن لم يتم اختباره على نطاق واسع في بيئة الإنتاج. مطلوب المزيد من الاختبارات والتصحيح قبل نشرها في بيئة الإنتاج.
مع ذلك ، ضع ما يلي في الاعتبار:
- حاليا فقط المنتجات البسيطة والمنتجات المتغيرة تعمل دون أي مشاكل. أنواع المنتجات الأخرى غير معروفة بالعمل.
- يتم دعم النقد فقط عند التسليم (COD) حاليًا. يمكن إضافة المزيد من طرق الدفع لاحقًا.
يتم اختبار هذا المشروع مع Browserstack.
تودو
- إضافة المجموع إلى صفحة العربة/الخروج
- نسخ عنوان الفواتير إلى عنوان الشحن
- أضف لوحة معلومات الطلب وتتطلب تسجيل الدخول
- إخفاء المنتجات ليس في المخزون
- أضف كبار المسئولين الاقتصاديين بشكل أفضل
- إعادة إضافة الصورة/الصورة عندما تعمل بشكل أفضل
