الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

؟ Next Shopify Storefront

عربة التسوق التي تم تصميمها باستخدام TypeScript و Tailwind CSS و Headless UI و Next.js و React.js و Shopify Hydrogen React و ... ومتجر STOREFRONT GRATEQL API.

دروس

  • كيف أقوم بتنظيم مشروع مستدام لـ Next.js؟
  • كيف يمكنني التعامل مع البيانات المعيارية لجلب البيانات المعيارية في Next.js؟
  • كيف يمكنني التفاعل بأمان مع API GraphQL في Next.js؟
  • كيف يمكنني تنفيذ محدد متغير ديناميكي لـ Shopify في Next.js؟

خبرة

هذه هي تجاربي عندما كنت أعمل في هذا المشروع:

  • تصميم وبناء واجهة المتجر من الصفر.
  • إنشاء الأدوات المساعدة التالية لجلب البيانات المعيارية الآمنة من النوع.
  • إنشاء مرافق Shopify لتبسيط الاختيار المتغير.
  • باستخدام GraphQl Zeus للتفاعل مع API وواجه المتجر.
  • باستخدام Shopify Hydrogen لتنفيذ ميزات واجهة المتجر.
  • باستخدام Tailwind CSS و Headless واجهة المستخدم لإنشاء واجهة المستخدم واجهة المتجر.
  • باستخدام next.js لتجديد ثابت ثابت.
  • باستخدام SEO التالي لتنفيذ تحسين محرك البحث.
  • باستخدام TypeScript لإنشاء خطافات رد الفعل بأمان ، والمكونات.
  • استخدام رد الفعل استخدام السنانير لتسريع تطوير المكون.
  • باستخدام Swiper لإنشاء منزلقات جميلة ومتسقة.
  • باستخدام ESLINT ، أجمل لمتابعة أفضل الممارسات.

إذا أعجبك هذا المشروع ، اضغط على زر النجم لوضع إشارة مرجعية عليه ️

توضيح

يمكنك زيارة هنا لمشاهدة العرض التوضيحي: https://next-shopify-storefront.vercel.app/

تثبيت

استنساخ رمز المصدر في جهاز الكمبيوتر الخاص بك. 

git clone https://github.com/maxvien/next-shopify-storefront.git

تثبيت تبعيات المشروع. 

npm install

الاستخدام

أولاً ، تحتاج إلى تعيين متغيرات البيئة أدناه في ملف .env أو منصات النشر الخاصة بك.

  • NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
  • NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
  • NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

يمكنك متابعة وثائق API GraphQL shopify على واجهة واجهة برمجة التطبيقات للحصول على معلومات واجهة برمجة تطبيقات المتجر.

يطور

تطوير المشروع في وضع التطوير. 

npm run dev

يبني

بناء المشروع في وضع الإنتاج. 

npm run build

يبدأ

ابدأ المشروع في وضع الإنتاج. 

npm run start

الوبر

تحليل الكود للعثور على مشاكل مع eslint و prettier . 

npm run lint

إصلاح المشاكل تلقائيا. 

npm run fix

امتدادات رمز الاستوديو البصرية

لتسريع إنتاجيتك ، يمكنك تثبيت هذه الإضافات:

  • eslint
  • أجمل
  • Visual Studio Intellicode
  • Tailwind CSS Intellisense
  • دعم اللغة postcss

المشاريع ذات الصلة

  • Shopify Data Faker • أداة تطوير Shopify لتوليد بيانات المتجر الوهمية.
  • Bootstrap shopify موضوع • موضوع مجاني Shopify تم تصميمه باستخدام bootstrap و BEM و Siled و Sass و Esnext و Masse Masse و ... و WebPack.
  • Next Shopify Storefront (V2) • عربة تسوق تم تصميمها مع TypeScript ، العاطفة ، Next.js ، React.js ، React Query ، Shopify STOREFRONT GRATEQL API ، ... و Material UI.
  • Next Shopify Storefront (V1) • عربة تسوق تم تصميمها مع TypeScript و NextJs و React و Redux و Apollo Client و Shopify على واجهة API ، و ... و Material UI.

تاريخ النجوم

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل