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

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

صفحة متجر 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 “.

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

إعداد عنصر واجهة مستخدم 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 (إعادة تعيين المرشحات بنقرة واحدة)

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

YITH WooCommerce Ajax الواجهة الخلفية لمرشح المنتج

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

الشريط الجانبي لصفحة التسوق بعد تثبيت المكون الإضافي YITH WooCommerce Ajax Product Filter

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

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

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

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

4. FacetWP  (PREMIUM)

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

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

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

مربعات الاختيار

اسقاط

اختر

مذياع

تسلسل

المنزلق

بحث

الإكمال التلقائي

نطاق الموعد

نطاق العدد

تصنيف النجوم

القرب

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

سعر

سعر البيع

سعر عادي

متوسط ​​تقييم

حالة المخزون (في المخزون / نفاد المخزون)

للبيع

فئات المنتجات

علامات المنتج

سمات المنتج

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

FacetWP: حدد اختيار مصدر البيانات المناسب مثل سمات المنتج وفئات المنتج وما إلى ذلك

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

5. JetSmartFilters بواسطة Crocoblock

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

مرشح التصنيف – يرتب المنتجات حسب التصنيف.

المرشح المرئي – فعال للغاية للمحلات التجارية عبر الإنترنت التي تخزن ألوانًا أو علامات تجارية مختلفة.

مرشح البحث – يسمح بالبحث عن طريق الكلمات أو العبارات ويعرض النتائج المقابلة بسرعة.

مرشح الراديو – يوفر خيارًا لاختيار منتج أو منشور واحد من القائمة.

مرشح مربع الاختيار – يتيح اختيار عدة خيارات من قائمة التحقق.

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

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

مرشح النطاق – يسمح لك بإعداد نطاق البحث بمساعدة شريط التمرير .

تحديد عامل تصفية – يتيح تحديد الخيارات في شكل قائمة منسدلة .

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

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

المنشورات ذات الصلة:

WooCommerce: كيفية إظهار اقتراحات البحث عن المنتج؟

WooCommerce: لماذا وكيف تعطل أجزاء عربة Ajax