WooCommerce: كيفية تمكين فلاتر المنتج (مثل "Ajax Filters")؟

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

إذا كنت تتسوق على مواقع التجارة الإلكترونية الشهيرة مثل Amazon و eBay ، فأنت تعلم أنها تحمل مليار منتج لكل منها أو نحو ذلك. لحسن الحظ ، توفر مواقع الويب هذه ، أعلى شريط البحث المفيد جدًا ، " عوامل تصفية المنتج " في الشريط الجانبي. يمكنك التحسين حسب السعر والمراجعات والعلامة والفئة وما إلى ذلك ؛ لن يتم "تحديث" موقع الويب ولكنه سيعرض النتائج التي تمت تصفيتها على الفور على نفس الصفحة بدلاً من ذلك.

تسمى هذه " عوامل تصفية منتجات Ajax " (Ajax عبارة عن مجموعة من التطبيقات التي تعمل في الخلفية دون فرض تحديث لصفحة موقع الويب). وكما أثبتت لك Amazon و eBay ، فإن هذه المرشحات ضرورية للغاية إذا كان لديك أكثر من 100 منتج من منتجات WooCommerce.

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

بالإضافة إلى ذلك ، إذا كان لديك الكثير من المنتجات ، فلديك بالفعل العديد من فئات منتجات WooCommerce وعلامات المنتج وسمات المنتج والحقول المخصصة للمنتج والأسعار وحالات المخزون. هذا يعني أن تنفيذ Ajax Product Filters في متجر WooCommerce الخاص بك قد يستغرق 10 دقائق : قم بتنشيط المكون الإضافي ، واختر معايير التصفية وسيرى المستخدمون تلقائيًا أداة تصفية سلسة في الشريط الجانبي!

إذن ، ما هي أفضل الإضافات "WooCommerce Ajax Product Filter"؟

1. أدوات تصفية المنتج الافتراضية لـ WooCommerce (مجانًا)

مفاجئة

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

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

في حوالي دقيقة واحدة ، تمكنت من إضافة عوامل تصفية حسب السمة والتقييم و "شريط تمرير" السعر. سهل للغاية. ومع ذلك ، هناك مشكلتان رئيسيتان: فلاتر WooCommerce هذه غير مدعومة من Ajax (ومن هنا تأتي الصفحة "يعيد تحميل" بعد استخدام أحد المرشحات) وهي محدودة للغاية . لا يوجد سوى 3 عناصر واجهة مستخدم افتراضية ، يمكنك فقط الحصول على قائمة أو قائمة منسدلة للسمات ، ولديك فقط شريط تمرير أسعار وليس قائمة نطاقات أسعار مثل أمازون ... لا يمكنك فعل الكثير مع هذا الإعداد.

ربما تحتاج إلى أدوات أكثر تقدمًا ، والمزيد من خيارات التصميم ، ونظام يعمل بنظام Ajax وشيء أكثر قوة ومرونة.

2. تمكين Ajax-Enabled Enhanced Layered Navigation من WooCommerce (PREMIUM)

يعد هذا المكون الإضافي الرسمي من WooCommerce خطوة أولى رائعة نحو إتقان تصفية المنتج. يوفر هذا المكون الإضافي UX أفضل وخيارات عناصر واجهة مستخدم أكثر من أدوات تصفية المنتج الافتراضية التي لا تحتوي على Ajax.

بمجرد تنشيط البرنامج المساعد Ajax-Enabled Enhanced Layered Navigation ، يمنحك عنصر واجهة مستخدم إضافيًا يمكنك استخدامه في صفحات المتجر / الأرشيف / الفئة المسماة " WooCommerce Ajax Layered Nav ".

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

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

لذلك ، ما لم يكن هذا كافيًا لأهدافك ، فإن هذا المكون الإضافي غير مكتمل.

3. WooCommerce Ajax Product Filter plugin بواسطة YITH (مجاني و PREMIUM)

عندما يتعلق الأمر بـ YITH ، فأنت تعلم أن لديهم مكونًا إضافيًا WooCommerce لكل شيء ... وغني عن القول إنهم يبيعون أيضًا مكونًا إضافيًا لتصفية منتج Ajax.

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

بمجرد تنشيط المكون الإضافي المميز ، سترى 5 عناصر واجهة مستخدم جديدة:

• Ajax الترتيب حسب (هذا يفرز المنتجات وفقًا لخيارات فرز WooCommerce ، لكنه يفعل ذلك مع Ajax!)
• Ajax Product Filter (قم بالفرز حسب السمة / الفئة / العلامة / العلامة التجارية وعرضها كقائمة منسدلة / مربعات اختيار / قائمة / حوامل / ملصقات)
• Ajax Price Filter (إنشاء نطاقات أسعار في قائمة قابلة للتصفية)
• Ajax Stock / on Sale Filter (إضافة عنصر واجهة مستخدم لتصفية المنتج الداخل / الخارج للبيع أو في المخزون)
• Ajax Reset Filter (إعادة تعيين المرشحات بنقرة واحدة)

هذه هي النهاية الخلفية:

وهذه هي صفحة التسوق بمجرد تنشيط أدوات التصفية هذه:

لديك مجموعات فلاتر غير محدودة ويمكنك استخدام العديد من عناصر واجهة المستخدم "Ajax Product Filter". هذا يعني أنه في نفس الشريط الجانبي يمكنك التصفية حسب السمة والعلامة والفئة والسعر و / أو العلامة التجارية في نفس الوقت . وبدون تحديث الصفحة - يتم عرض النتائج على الفور.

كما يمكنك أن تتخيل ، فإن YITH WooCommerce Ajax Product Filter متوافق مع جميع ملحقات YITH الأخرى وبالتالي يمكنه القيام بأشياء متقدمة جدًا.

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

نعم ، هذا مرن للغاية. ويعمل.

4. FacetWP (PREMIUM)

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

لإضافة عامل تصفية ، يجب عليك إضافة رمز قصير إلى عنصر واجهة نصي أو - والأفضل من ذلك - إضافته عبر PHP إلى ملفات السمات (وهذا يعني أنه يمكنك أيضًا عرض عوامل التصفية خارج الشريط الجانبي ).

يتيح لك FacetWP إنشاء العديد من "الواجهات" ، مثل عروض التصفية ، مثل:

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

فيما يتعلق بـ WooCommerce ، يمكن لكل وجه أو عامل تصفية منتج أن يستهدف مصادر البيانات التالية:

1. سعر
2. سعر البيع
3. سعر عادي
4. متوسط ​​تقييم
5. حالة المخزون (في المخزون / نفاد المخزون)
6. للبيع
7. فئات المنتجات
8. علامات المنتج
9. سمات المنتج

كما ترى فإن إنشاء واجهة WooCommerce بسيط جدًا:

يأتي FacetWP بوثائق رائعة للمطورين وهو ضروري للمشاريع المتقدمة. إذا كان FacetWP ، على الطرف الآخر ، كثير جدًا بالنسبة لك ، فسيكون تفضيلي هو المكون الإضافي YITH WooCommerce Ajax Product Filter.

5. JetSmartFilters بواسطة Crocoblock

JetSmartFilters by Crocoblock هو مكون إضافي سهل الاستخدام مع نظام مرشح قائم على AJAX و 9 أدوات سهلة الاستخدام تجعل موقع WooCommerce سهل الاستخدام دون كتابة أي سطر واحد من التعليمات البرمجية:

1. مرشح التصنيف - يرتب المنتجات حسب التصنيف.
2. المرشح المرئي - فعال للغاية للمحلات التجارية عبر الإنترنت التي تخزن ألوانًا أو علامات تجارية مختلفة.
3. مرشح البحث - يسمح بالبحث إما بالكلمات أو العبارات ويعرض النتائج المقابلة بسرعة.
4. مرشح الراديو - يوفر خيارًا لاختيار منتج أو منشور واحد من القائمة.
5. مرشح مربع الاختيار - يتيح اختيار عدة خيارات من قائمة التحقق.
6. النطاق الزمني - خيار جيد إذا كنت تنوي تصفية المنشورات أو المنتجات بناءً على تاريخ إضافتها أو الأحداث حسب التاريخ الذي من المفترض أن تحدث فيه.
7. تحقق من مرشح النطاق - يساعد في إنشاء مجموعة من الخيارات في شكل قائمة مربعات الاختيار .
8. مرشح النطاق - يسمح لك بإعداد نطاق البحث بمساعدة شريط التمرير .
9. تحديد عامل تصفية - يتيح تحديد الخيارات في شكل قائمة منسدلة .

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

يرتبط JetSmartFilters ارتباطًا وثيقًا بملحق آخر أنتجته Crocoblock - JetWooBuilder. يعد هذا المكون الإضافي أداة لا غنى عنها لمنشئي مواقع التجارة الإلكترونية لأنه يوفر خيارات متعددة الاستخدامات لعرض المنتجات بدءًا من الأشكال المختلفة لشبكات المنتجات حتى مراجعة النماذج وتقييمها.