بدء استخدام Vue Storefront [دليل المبتدئين]

هل تبحث عن تطبيق التجارة الإلكترونية المجاني الذي يمكن أن يحسن بشكل كبير تجربة مستخدم متجرك عبر الإنترنت وترتيب تحسين محركات البحث أيضًا؟ إذا كنت بحاجة إلى نظام ثوري مرن للغاية بحيث يمكن تشغيله بشكل مريح على أي واجهة خلفية للتجارة الإلكترونية ، فإن Vue Storefront هو الحل الأمثل لك.

إذا التزمت بالنهاية ، فسوف أكشف عن سبب حب الشركات بشكل متزايد لتطبيقات الويب التقدمية (PWA).

ما هي Vue Storefront؟

Vue Storefront هي واحدة من أكبر وأشمل PWA حتى الآن. في هذا الاستعراض ، سأكشف عن كل ما تحتاج لمعرفته حول تطبيق الويب التقدمي. علاوة على ذلك ، سأشارك كيف ترتبط Vue Storefront بكل ذلك ، بالإضافة إلى ميزات وقدرات التجارة الإلكترونية المصاحبة لها بالطبع.

ما هو تطبيق الويب التقدمي؟ (PWA)

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

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

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

بالإضافة إلى ذلك ، من المهم ملاحظة أن Google كانت في طليعة تطبيقات الويب التقدمية. تعمل Microsoft و Mozilla أيضًا على إنشاء تطبيقات ويب تقدمية. بعد اختبار هذا الإطار على العديد من المشاريع بشكل متكرر ، تم التوصل إلى ما يلي:

• هم موثوقون
• فهي سريعة
• إنهم يشاركون

استفادت Uber من قوة PWAs ، وتمكنت من ابتكار تطبيق يتمتع بسرعات تحميل ممتازة ، حتى على 2G. علاوة على ذلك ، فإن 50 كيلو بايت PWA يدير باستمرار التحميل في أقل من 3 ثوان.

مراجعة Vue Storefront

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

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

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

بالإضافة إلى ذلك ، يمكن الوصول إلى Vue Storefront على GitHub. وقد اجتذبت حتى الآن أكثر من 7000 نجم على المنصة.

الميزات الرئيسية Vue Storefront

فيما يلي بعض الميزات التي يجب أن يقدمها:

1. تجربة المستخدم

التركيز الأساسي لـ Vue Storefront هو محاولة كسر حاجز الجهاز لأنه تطبيق ويب. هذا يعني أنه يمكن تشغيله وتشغيله على أي جهاز. إنه يقضي على التحدي المتمثل في تطوير تطبيقات أصلية متعددة لكل نظام تشغيل للجهاز.

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

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

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

2. المكونات

يحتوي Vue Storefront على نوعين مختلفين من المكونات.

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

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

3. مظاهر واجهة المتجر

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

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

توجد السمات في مجلد src / theme.

4. ميزات التجارة الإلكترونية

• إدارة الطلبات
• الترقيات التسويقية
• التحليلات والتقارير
• محرك البحث الامثل
• الخروج والدفع والشحن
• دعم إدارة الكتالوج
• حسابات العملاء
• خدمة الزبائن
• تصفح الكتالوج
• تصفح المنتج

5. التسعير Vue Storefront

Vue Storefront مجاني ، مما يعني أنه لن يكلفك حتى عشرة سنتات. ومع ذلك ، تبدأ التكاليف في التراكم عندما يتعلق الأمر بمراحل التخصيص اللاحقة.

ومع ذلك ، إذا لم تكن خبيرًا في البرمجة ، فستضطر إلى تعيين فريق من المطورين لدمج Vue Storefront مع موقع التجارة الإلكترونية الخاص بك. علاوة على ذلك ، يمكنهم تعديل مكوناته وموضوعاته الأساسية.

تغليف

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

ومع ذلك ، فإن المشكلة في مرحلة التنفيذ. يعد تضمين Vue Storefront في متجرك عبر الإنترنت عملية معقدة تقنيًا تتطلب ترميزًا كثيفًا. لا يمكنك إدارتها إذا لم تكن لديك مهارات الترميز.

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

مقالات مماثلة

1. كيفية تغيير حجم الصورة المميز لواجهة متجر WooCommerce
2. كيفية إزالة موضوع واجهة المتجر التذييل WooCommerce
3. كيفية إخفاء سمة واجهة متجر WooCommerce من الفئة
4. كيفية إزالة سمة واجهة متجر WooCommerce ذات الصلة
5. WooCommerce Storefront دليل تخصيص CSS
6. كيفية إضافة قائمة خيارات تسجيل الخروج WooCommerce Storefront Theme [مثال]
7. كيفية تغيير سطر الموضوع Tagline لواجهة المتجر WooCommerce
8. WooCommerce Storefront عرض جميع الفئات على الصفحة الرئيسية
9. كيفية إعداد الصفحة الرئيسية في WooCommerce Storefront
10. دليل التخصيص الكامل لـ WooCommerce Storefront CSS