تكامل ShopEngine مع Gutenberg لمتجر WooCommerce

أخيرًا ، انتهى الانتظار! ShopEngine متوافق الآن مع محرر كتلة Gutenberg . في وقت سابق ، كان بإمكانك الوصول إلى أدوات ShopEngine فقط من خلال نافذة Elementor ، أليس كذلك؟

ولكن الآن ShopEngine متاح بعد ذلك. بصرف النظر عن الوصول إلى أدوات ShopEngine من خلال Elementor ، يمكنك الاستفادة من ShopEngine في Gutenberg لمتجر WooCommerce . ومع ذلك ، في Gutenberg ، ستظهر هذه الأدوات على شكل كتل.

في واقع الأمر ، فإن وظائف عناصر واجهة مستخدم Elementor وكتل Gutenberg متطابقة. ثم أين الاختلاف؟ الاختلاف يكمن في التطبيق. بالنسبة لعناصر واجهة المستخدم Elementor ، كان عليك سحب وإسقاط عناصر واجهة المستخدم في المناطق المخصصة لعرض المخرجات. ولكن بالنسبة لكتل ​​Gutenberg ، عليك فقط النقر فوق الكتل وتنجز مهمتك.

نظرة عامة على جوتنبرج:

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

في السابق ، كان الناس أكثر اعتيادًا على استخدام محرر "Classic Editor" ، محرر WordPress آخر. منذ ظهور Gutenberg ، اعتنق الناس محرر الكتلة أكثر مقارنة بالمحرر الكلاسيكي. تخصص Gutenberg هو محتواه القائم على الكتلة .

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

وهذا بالضبط ما سنركز عليه في هذه المدونة الإعلامية اعتبارًا من الآن فصاعدًا ، ستكون مجموعة من ميزات ShopEngine تحت تصرفك في Gutenberg for WooCommerce. قبل أن نتوسع في كتل ShopEngine المخصصة في Gutenberg ، اسمحوا لي أن ألقي الضوء على سبب دمجنا ShopEngine مع Gutenberg لـ WooCommerce .

لماذا يتم دمج ShopEngine مع Gutenberg:

تم تصميم ShopEngine في البداية حصريًا لـ Elementor. هذا يعني أنه يمكنك إنشاء صفحات WooCommerce الخاصة بك فقط من أجل Elementor. ولكن الآن ، كما ذكرت سابقًا ، خطت ShopEngine خطوة واحدة للأمام بعد دمجها مع Gutenberg.

إذن ، ما الذي جعلنا ندمج ShopEngine مع Gutenberg لـ WooCommerce ؟ للإجابة على هذا السؤال ، دعني أقدم لك أجزاء من البيانات-

وفقًا لـ gutenstats.blog ، تلقت Gutenberg 76 مليون عملية تثبيت نشطة حتى الآن. علاوة على ذلك ، تم كتابة 264.5 مليون مشاركة مع جوتنبرج حتى الآن.

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

بعض الأسباب الأخرى لتكامل ShopEngine مع Gutenberg:

اسمحوا لي أن أؤكد على نقطة مفادها أن Gutenberg ليس محرر محتوى فقط . يهدف مشروع Gutenberg إلى تحويل محرر الكتلة إلى أداة تحرير كاملة الموقع في المستقبل القريب.

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

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

بعض كتل ShopEngine البارزة في Gutenberg:

قبل أن ألقي الضوء على كتل ShopEngine ، دعني أوضح أن ShopEngine يأتي مع أكثر من 65 عنصر واجهة مستخدم ، وأكثر من 13 وحدة نمطية ، وعدد لا يحصى من القوالب لصفحات متجر WooCommerce التي تلبي احتياجات مستخدمي Elementor. بعد دمج ShopEngine مع Gutenberg لـ WooCommerce ، يمكنك الآن الوصول إلى أكثر من 45 مجموعة ShopEngine في Gutenberg .

اعتمادًا على نوع الصفحة الذي تحدده لإنشاء نموذج لمتجر WooCommerce ، ستظهر كتل Gutenberg وفقًا لذلك. بالإضافة إلى ذلك ، ستتمكن من الوصول إلى وحدات مثل Quick View و Variation Swatches و Product Comparison و Wishlist .

دعنا نلقي نظرة على بعض كتل ShopEngine في Gutenberg لمتجر WooCommerce-

عنوان المنتج:

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

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

قائمة المنتجات:

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

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

وصف المنتج:

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

الدفع عند الخروج:

مثل أداة Checkout Payment في Elementor ، يعمل حظر Checkout Payment في Gutenberg. يمكنك عرض كتلة "Checkout Payment" إذا انتقلت إلى قالب إنشاء لصفحة الدفع الخاصة بك. بعد ذلك ، يمكنك إضافة حظر دفع الخروج كما تحتاج لمتجر WooCommerce الخاص بك.

سيكون لديك خيارات لتغيير نمط المحتوى وطرق الدفع والأزرار وما إلى ذلك. يمكنك تعديل موضع مربع الاختيار ولون الزر والطباعة والحدود وما إلى ذلك.

منتجات الأرشيف:

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

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

طاولة عربة:

في جدول سلة التسوق ، تظهر جميع تفاصيل المنتجات المحددة بما في ذلك اسم المنتجات والسعر والكمية والإجمالي الفرعي والمبلغ الإجمالي. باستخدام كتلة ShopEngine Cart Table ، يمكنك عرض جميع المعلومات ذات الصلة بمنتجاتك للمشترين من خلال جدول عربة في صفحة عربة WooCommerce.

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

المنتجات المعروضة مؤخرا:

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

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

راسلنا:

إذن ، ما هو رأيك في خطوتنا لدمج ShopEngine مع Gutenberg لـ WooCommerce ؟ لا تخبرنا بتجربتك في نشر كتل ShopEngine في Gutenberg لمتجر WooCommerce.

نرحب بك كثيرًا لتقديم أي ملاحظات إيجابية أو سلبية حول تكامل Gutenberg لـ WooCommerce. كما نقدر تلقي اقتراحات منك لتبسيط عملية التكامل الخاصة بنا. ومع ذلك ، لا تزال أعمالنا على تكامل ShopEngine مع Gutenberg قيد التقدم. قريباً ، سننتهي من المشروع.