افزودنی فیلتر هوشمند محصولات ووکامرس | JetSmartFilters For Elementor

افزونه جت اسمارت فیلترز (JetSmartFilters) از Crocoblock برای فهرست محصولات ووکامرس و فهرست‌های دیگر سایت فیلتر می‌سازد. بازدیدکننده با تیک زدن یک دسته، نوشتن یک عبارت یا جابه‌جا کردن یک بازه، فهرست را (در نوع اعمال AJAX) بدون بارگذاری دوباره صفحه محدود می‌بیند. فیلترها در پیشخوان ساخته می‌شوند و با ابزارک‌های المنتور به صفحه می‌روند؛ بلوک‌هایشان هم برای ویرایشگر وردپرس ثبت می‌شود.

صفحه این افزونه در وردپرس نیاز زیر عنوان افزونه‌های کاربردی وردپرس است. نصب آزمایشی این بررسی یک وردپرس فارسی با المنتور رایگان و ووکامرس بود و ابزارک‌های فیلتر در آن بدون نسخه Pro ثبت و اجرا شدند. نصب افزونه و وصل کردن فیلترها به فهرست‌های سایت از کارهای پشتیبانی وردپرس است.

ساخت فیلتر در JetSmartFilters

از منوی Smart Filters در پیشخوان، گزینه Add New فیلتر تازه‌ای می‌سازد: نام فیلتر، نوع فیلتر و منبع داده. نوع‌های فیلتر این صفحه روی نصب آزمایشی این‌ها بود:

• Checkboxes list: فهرست گزینه‌های تیک‌دار
• Select: انتخاب از فهرست کشویی
• Range: بازه با دو دستگیره
• Check Range Filter
• Date Range
• Date Period
• Radio: گزینه‌های تک‌انتخابی
• Rating: امتیاز ستاره‌ای
• Alphabet: حروف الفبا
• Search: جستجو
• Visual: رنگ یا تصویر

برای فیلتر Checkboxes list منبع داده روی نصب آزمایشی یکی از این گزینه‌ها بود:

• Taxonomies
• Manual Input
• Posts
• Custom Fields

روی نصب آزمایشی یک فیلتر Checkboxes list با منبع Taxonomies و تاکسونومی دسته‌های محصولات با کلیک روی همین صفحه ساخته شد؛ نام فیلتر و برچسب آن را هم خودتان می‌نویسید.

ابزارک‌ها و بلوک‌ها

هر فیلتر با یک ابزارک المنتور به صفحه می‌آید. ابزارک‌های دیگری هم در همان دسته پنل المنتور هستند:

• Sorting Filter: فهرست ترتیب‌دهی که عنوان هر گزینه‌اش را خودتان می‌نویسید
• Active Filters و Active Tags: نمایش فیلترهای فعال
• Remove Filters: برداشتن فیلترها
• Apply Button: دکمه اعمال فیلتر
• Pagination: صفحه‌بندی فهرست فیلترشده

بلوک‌های همین فیلترها برای ویرایشگر وردپرس هم ثبت می‌شوند و صفحه ساخت فیلتر افزونه در پیشخوان بدون المنتور هم باز شد.

فهرست‌هایی که فیلتر می‌شوند

ابزارک فیلتر خودش فهرستی نمی‌سازد و روی فهرستی کار می‌کند که یکی از منبع‌های افزونه آن را نشان بدهد. در پنل هر ابزارک فیلتر، گزینه This filter for همین منبع را انتخاب می‌کند. منبع‌ها ابزارک‌های Elementor Pro، افزونه‌های JetEngine و JetWooBuilder همین فروشگاه و فهرست‌های ووکامرس را در بر می‌گیرند. گزینه‌های این فهرست در پنل ابزارک در ویرایشگر المنتور نصب آزمایشی این‌ها بود:

• Elementor Pro Archive Products
• Elementor Pro Archive
• Elementor Pro Loop Grid
• Elementor Pro Portfolio
• Elementor Pro Posts
• Elementor Pro Products
• JetEngine Calendar
• JetEngine
• JetWooBuilder Products Grid
• JetWooBuilder Products List
• JSF Listing
• WooCommerce Archive (by JetWooBuilder)
• Default WooCommerce Archive (Classic)
• WooCommerce Shortcode

از این فهرست فقط WooCommerce Shortcode روی نصب آزمایشی اجرا شد. صفحه Settings افزونه همین منبع‌ها را با یک کلید برای هرکدام نشان می‌دهد و در نصب آزمایشی همه روشن بودند.

فیلتر بدون بارگذاری مجدد صفحه

برای آزمایش صفحه‌ای با المنتور آماده شد: ابزارک‌های فیلتر در ستون کناری و فهرست محصولات با کد کوتاه فهرست محصولات ووکامرس در ستون دیگر. ۱۲ محصول نمونه در سه دسته برای آزمایش ثبت شد و فهرست در هر صفحه چهار محصول نشان می‌داد. منبع ابزارک‌ها برای آزمایش روی WooCommerce Shortcode گذاشته شد و Query ID برابر با ویژگی class همان کد کوتاه شد؛ یادداشت پنل ابزارک هم همین را می‌گوید. گزینه Apply type در پنل سه حالت دارد: AJAX که پیش‌فرض است، Page reload و Mixed؛ فقط حالت پیش‌فرض اجرا شد.

یک بازدیدکننده بدون ورود به سایت روی یک دسته تیک زد. فهرست به چهار محصول همان دسته رسید، آدرس صفحه عوض نشد، صفحه دوباره بارگذاری نشد و برای همان کلیک یک درخواست به admin-ajax رفت. ابزارک Active Filters همان دسته را نشان داد. بعد در فیلتر Search عبارتی با کلید زدن واقعی نوشته شد و با دکمه Apply filter فهرست به یک محصول رسید و فیلتر دسته هم فعال ماند. انتخاب یکی از گزینه‌های Sorting ترتیب محصولات را عوض کرد، Pagination صفحه دوم را بدون بارگذاری مجدد آورد و ابزارک Range فهرست را از سه صفحه به دو صفحه رساند و Active Filters بازه را نشان داد.

همین تیک دسته یک بار با قالب کلاسیک Hello Elementor و یک بار با قالب بلوکی Twenty Twenty-Five زده شد و هر دو بار فهرست به همان چهار محصول رسید.

روی سایت فارسی

برای بررسی راست‌چین بودن، همان صفحه با همان فیلترها برای بازدیدکننده‌ای بدون ورود دو بار اندازه گرفته شد، یک بار انگلیسی و یک بار فارسی، و فقط زبان فرق داشت. فیلد جستجو، ردیف‌های تیک‌دار و منوی ترتیب از لبه‌ای که متن از آن شروع می‌شود فاصله یکسان داشتند (روی سایت فارسی از راست و روی سایت انگلیسی از چپ)، کادر تیک کنار متنش در همین لبه بود، و ترتیب صفحه‌بندی برعکس شد: شماره ۱ روی سایت فارسی سمت راست بود و دکمه Next سمت چپ. صفحه‌های افزونه در پیشخوان (فهرست فیلترها، ویرایش فیلتر، تنظیمات و Listing Builder) هم روی پیشخوان فارسی راست‌به‌چپ شدند.

پیش از خرید

• فیلتر به یک فهرست نیاز دارد که یکی از منبع‌های بالا آن را نشان بدهد. وقتی چند فهرست با یک منبع یکسان در یک صفحه هست، برای هر فهرست یک Query ID یکتا بگذارید و همان را روی ابزارک‌های فیلتر آن فهرست هم بگذارید.
• با کد کوتاه فهرست محصولات ووکامرس که صفحه‌بندی روشن داشت، منوی ترتیب خود ووکامرس کنار فهرست پس از اولین فیلتر دیگر منو نبود و گزینه‌هایش به متن ساده تبدیل شده بود.

جت اسمارت فیلترز برای سایت‌هایی است که فهرست محصول یا فهرستی دیگر دارند و بازدیدکننده باید آن را با دسته، عبارت، بازه یا ترتیب محدود کند. فیلترها را در پیشخوان می‌سازید، با ابزارک‌های المنتور به صفحه می‌آورید و به یکی از منبع‌های فهرست وصل می‌کنید.