قائمة متاجر Shopify Hydrogen Demo [تحديث]

نظرًا لأن Shopify عبارة عن منصة SaaS للتجارة الإلكترونية ، فإن مستخدميها يواجهون العديد من القيود لتخصيص متاجرهم عبر الإنترنت ، ولكن مع Hydrogen ، قد لا يكون هذا هو الحال بعد الآن.

الهيدروجين هو أول إطار عمل يستند إلى تفاعل Shopify للمطورين لبناء واجهات متاجر مخصصة. باستخدام مكونات React Server والتقديم من جانب الخادم والتخزين المؤقت API ، يتيح إطار العمل للمطورين إنشاء واجهات متاجر سريعة ومرنة للغاية في فترة زمنية قصيرة.

يساعدك المتجر التجريبي في التعرف على إطار العمل وهيكله ومكوناته. بالإضافة إلى ذلك ، فإنه يعطي فكرة واضحة عن كيفية ظهور متجر Shopify Hydrogen وأدائه في الواقع.

Shopify عروض تجريبية لواجهة محل الهيدروجين

1. عرض Shopify الرسمي

يتم تحميل العرض التوضيحي الرسمي إلى StackBlitz - بيئة عبر الإنترنت للمطورين. سيتم جلب المعاينة المباشرة في ثوانٍ في اللوحة اليمنى. يرجى ملاحظة أنه لا يمكنك مشاهدة هذا المتجر التجريبي عبر الهاتف المحمول.

2. Shopify العرض

هذا في الواقع ليس متجرًا تجريبيًا ، ولكنه متجر رسمي تم إنشاؤه باستخدام Hydrogen بواسطة Shopify أنفسهم.

3. عرض الهيدروجين بواسطة Tapita

تم إنشاء العرض التوضيحي للواجهة الأمامية Shopify Hydrogen بواسطة SimiCart باستخدام منشئ صفحة Tapita Hydrogen لسحب وإسقاط جميع الصفحات.

4. عرض الهيدروجين بواسطة rafaelcg.com

تم إنشاء هذا العرض التوضيحي للواجهة الأمامية للأغراض التعليمية ، والذي يوضح كيف يمكن للمطورين إنشاء واجهة متجر أساسية مخصصة باستخدام الهيدروجين.

5. عرض الهيدروجين من Sanity

يوضح العرض التوضيحي كيف يمكن لمتجر Shopify Hydrogen أن يعمل مع Sanity.io - وهي أداة تجمع بين المنتجات وبيانات التسويق.

Shopify عروض مشروع الهيدروجين

إليك مجموعة من المشاريع التجريبية على Github لمساعدتك في التعرف عليها Shopify مكونات وهياكل الهيدروجين.

• عرض توضيحي من Shopify
• مشروع Shopify العرض
• عرض توضيحي بواسطة Shobhit Sirohi
• عرض توضيحي بواسطة henryclong
• عرض توضيحي من andacg1
• عرض تجريبي من bschnell-google
• عرض kwaaaaaa

Shopify مقابل الهيدروجين Shopify المتجر العادي: ما الفرق؟

في حين أنه قد يكون من السهل على المطورين ، قد يجد التجار Shopify صعوبة في فهمه Shopify Hydrogen والمصطلحات ذات الصلة وكيف يعمل.

وبالتالي ، نجري مقارنة موجزة للإشارة إلى الاختلافات الرئيسية بين Shopify Hydrogen ومتجر Shopify العادي ، بحيث يمكن للتجار غير البارعين في التكنولوجيا Shopify الحصول على صورة أفضل.

تعريف

• Shopify الهيدروجين : إطار عمل لواجهات المحلات المخصصة مع مكونات واجهة المستخدم
• Shopify : منصة التجارة الإلكترونية

الإطار والنظام الأساسي هما مصطلحان محيران في مجال تكنولوجيا المعلومات يجب على الغرباء فهمهما.

تحتوي المنصة على كل من البرامج والأجهزة ، مما يوفر بيئة للأشخاص لإنشاء تطبيقاتها واستخدامها. وفي الوقت نفسه ، يحتوي الإطار على برامج فقط ، ويشبه القالب بمكونات جاهزة للمطورين لإنشاء التطبيقات.

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

الآن ، دعنا نعود إلى Shopify حالة

Shopify ، منصة التجارة الإلكترونية ، لديها سمات وميزات التجارة الإلكترونية وتطبيقات لأصحاب المتاجر لإنشاء مواقع على الإنترنت.

وفي الوقت نفسه ، Shopify Hydrogen - الإطار - يوفر الهيكل والأدوات والمكونات اللازمة للمطورين لبناء واجهات متاجر مخصصة لتعمل على Shopify مواقع الويب.

لغة الترميز

• Shopify الهيدروجين : جافا سكريبت مع إطار عمل Reacts
• Shopify المتجر العادي : Shopify Liquid

Liquid هي لغة الترميز الوحيدة والوحيدة لـ Shopify ، وهي حصرية لـ Shopify. من ناحية أخرى ، فإن Javascript هي لغة ترميز عالمية جدًا تستخدم لملايين التطبيقات. على سبيل المثال ، Netflix و Facebook و Candy Crush و Linkedin وغيرها هي بعض التطبيقات البارزة التي تستخدم Javascript.

بينما Shopify Liquids هي لغة ترميز قوية ، إلا أنها تظهر بعض القيود ، خاصة فيما يتعلق بالأداء. يتيح استخدام Javascript لـ Shopify واجهات المتاجر صفحات ويب أسرع مع فتح إمكانيات لا حصر لها لبناء واجهة مستخدم فريدة لموقع الويب وتجربة المستخدم.

سهولة الاستخدام

• Shopify الهيدروجين : موجه نحو المطور
• Shopify المتجر العادي : غير موجه للتكنولوجيا

تم تقديم الشروط على موقع Hydrogen ، العرض التوضيحي ، البرامج التعليمية الخاصة به للمطورين. بينما يمكن للجميع إنشاء متجر Shopify ، ستحتاج إلى تجربة تشفير لإنشاء واجهات متاجر مخصصة عبر Shopify Hydrogen.

فوائد

يمنح الهيدروجين المطورين والتجار طريقة جديدة لإنشاء تجارب تجارة إلكترونية ديناميكية على Shopify. إنه يحل العديد من المشكلات الحالية مع واجهات متاجر Shopify الحالية مثل نقص المرونة وسرعة الأداء.

دعنا نتعمق أكثر في مزايا Shopify الهيدروجين:

سريع التطور

مع ما يقرب من 30 مكونًا متضمنًا ، يتميز القالب التجريبي الرسمي بالفعل برحلة شراء العميل الكاملة خارج الصندوق. بهذه الطريقة ، يمكن للمطورين تخطي الإعداد والبدء في الترميز على الفور.

أيضًا ، Shopify Hydrogen يأتي مع خطافات ومكونات وأدوات مساعدة جاهزة للاستخدام تتصل مباشرة بواجهة برمجة تطبيقات Storefront. وبالتالي ، أصبح جلب البيانات أمرًا بسيطًا وفعالًا ، دون الحاجة إلى صياغة استعلامات GraphQL.

أداء أفضل

Shopify يستفيد الهيدروجين من تقنيات الويب المتقدمة لتحسين السرعة والاستفادة من الأداء:

• تدفق العرض من جانب الخادم
• مكونات خادم رد الفعل
• ذاكرة تخزين مؤقت ذكية مدمجة وجلب بيانات فعال
• الجمع الديناميكي بين العرض من جانب الخادم والجلب من جانب العميل والتسليم عبر الحافة

يؤدي التحسن في الأداء حتمًا إلى تحسين نقاط Google Core Vitals ، وبالتالي ، نتائج تحسين محركات البحث (SEO).

براعة أكبر

الهيدروجين هو الطريقة التي يستجيب بها Shopify للتجارة بدون رأس - أحد أبرز اتجاهات التجارة الإلكترونية في عام 2022.

تعني التجارة بدون رأس فصل الواجهة الأمامية عن الواجهة الخلفية لتحقيق إمكانية تخصيص وتكامل لا مثيل لهما.

من خلال القيام بذلك باستخدام الهيدروجين ، يمكنك إجراء تغييرات بحرية على الواجهة الأمامية دون التأثير على أي وظائف خلفية. يتضمن ذلك استخدام واجهات متعددة لتحسين التخصيص وإصلاح هياكل URL الخاصة بـ Shopify.

بالإضافة إلى ذلك ، مع التصميم بدون رأس ، يمكن إجراء جميع التخصيصات والصيانة في الواجهة الخلفية والواجهة الأمامية في وقت واحد. مع العلم أن عملية الواجهة الأمامية لن تؤثر على الواجهة الخلفية والعكس صحيح ، سيكون للمطورين والمصممين المزيد من الحرية لأداء وظائفهم.

شاهد المزيد: مقطوعة الرأس Shopify أمثلة المتجر

تخصيص أفضل

يكمن مستقبل التجارة الإلكترونية في منح العملاء التجربة الأكثر صلة.

يبدأ التخصيص البسيط بالترجمة - تتم ترجمة الصفحة إلى لغات مختلفة للمشترين في مختلف البلدان.

ومع ذلك ، في الوقت الحاضر ، أصبح تخصيص التجارة الإلكترونية أكثر تعقيدًا. لقد رأينا الأسعار تتغير ديناميكيًا وفقًا للسياقات المختلفة ، وتوصيات المنتج تُعرض بشكل مختلف تجاه العملاء المتنوعين ، وما إلى ذلك.

تحاول متاجر التجارة الإلكترونية الآن تخصيص كل التفاصيل الصغيرة لمواقعها الإلكترونية.

شرح إيليا جريجوريك ، المهندس الرئيسي في Shopify ، شرحًا لإضفاء الطابع الشخصي على التجارة الإلكترونية ، وقد تصور كل صفحة على أنها لوحة Tetris مفتوحة ، ويمكن تخصيص كل "فتحة" على السبورة لجذب الزوار ديناميكيًا.

إذن كيف Shopify Hydrogen يساعد في التخصيص؟

بدلاً من الهيكل الصلب ، تتكون واجهة متجر Shopify Hydrogen من مكونات واجهة مستخدم مختلفة. يمكن للمطورين والتجار تخصيص كل مكون من مكونات المحتوى لتقديم أفضل محتوى ديناميكي وتجربة عملاء مخصصة.

يمكنك ، على سبيل المثال ، إنشاء كتلة لتوصيات المنتج بناءً على بيانات العملاء مثل عمليات الشراء السابقة أو المعلومات الديموغرافية.

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

تخصيص واجهات تخزين الهيدروجين مع SimiCart

الهيدروجين هو نقطة انطلاق Shopify نحو مستقبل التجارة الإلكترونية: الديناميكيات والتخصيص. باستخدام Hydrogen ، يمكن لـ Shopify إعطاء قيمة أكبر لعملائها ، وخاصة تجارهم المتوسعون ، وبالتالي الحفاظ على ميزتها التنافسية على المنصات المرنة الأخرى.

بالنسبة للتجار ، فإن التخلي عن الواجهة الأمامية الحالية لـ Shopify وبناء واجهة محل هيدروجين يساعد في حل الكثير من نقاط الألم الحالية مثل الأداء والتخصيص. ينتج عن هذا متوسط ​​أعلى لقيمة الأمر ، ومعدل احتفاظ أفضل ، وزيادة في الإيرادات.

ومع ذلك ، لا يزال الهيدروجين ، في الوقت الحالي ، يُصنع للمطورين بدلاً من أصحاب Shopify غير البارعين في التكنولوجيا. هناك حاجة إلى خبرة في البرمجة ، ولا توجد أداة لإنشاء الصفحات لتبدأ بها ، ولا توجد أدلة سهلة للمبتدئين أيضًا.

تقدم SimiCart حلاً تطويرًا كاملاً لبناء واجهات متاجر بدون رأس باستخدام Shopify Hydrogen بسعر مناسب. تأتي الحزمة مع أداة إنشاء صفحات السحب والإفلات بحيث يمكن للتجار Shopify إنشاء واجهة محل هيدروجين مخصصة تمامًا مثل كيفية القيام بذلك مع متجر Shopify العادي.