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

JetSmartFilters For Elementor

 ساخت صفحات آرشیو و پست با اعمال فیلترهای هوشمند

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

فقط بخاطر داشته باشید، کلیک کردن روی فیلتر خاص برای نشان دادن محصولات، مثلاً در محدوده قیمت تعیین شده، اگر زمانی طولانی از وقت بازدید کننده را بگیرد تا صفحه با نتایج لازم بارگیری شود، ناامیدکننده است. حالا اگر برای پیدا کردن آنچه می خواهید بیش از چند فیلتر استفاده کنید چه اتفاقی می افتد؟

اگر نمی خواهید بازدید کنندگان و مشتریان شما اینگونه منتظر بمانند، پلاگین JetSmartFilters دقیقاً همان برنامه مورد نیاز شماست. این پلاگین از روش AJAX استفاده می کند که اجازه می دهد محصولات یا پست های فیلتر شده را بدون نیاز به بارگیری مجدد و تجدید صفحه در هر بار که اعمال می کنید، بارگیری شود.

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

این برنامه کاملاً با الگوهای JetWooBuilder و JetEngine کار می کند. به طور کلی، ۷ نوع فیلتر مختلف وجود دارد. همچنین، ۷ ویجت فیلتر منطبق وجود دارد که اجازه می دهد فیلترها را به صفحات ساخته شده با Elementor، حاوی آرشیو پست و محصول اضافه کنید.

همچنین چندین گزینه اضافی دیگر توسط پلاگین JetSmartFilters مانند صفحه بندی براساس روش بارگذاری AJAX ارائه شده است.

شما می توانید به بازدیدکنندگان این امکان را بدهید تا با یک کلیک فیلترهای فعلی را فعال یا غیرفعال کنند – و این فیلترها در مدت زمان یک ثانیه اعمال می شوند یا از بین می روند.

در حال حاضر، اگر اشتراک Crocoblock را دریافت کرده اید، از قبل می توانید به پلاگین JetSmartFilters دسترسی پیدا کنید. بیایید نگاهی دقیق به نحوه ایجاد فیلتر جدید بیندازیم و آن را به صفحه فروشگاه اضافه کنیم تا ابزار فیلتر کردن محصولات را فراهم کنیم.

مرحله ۱٫ یک فیلتر جدید ایجاد کنید.

بیایید با اضافه کردن یک فیلتر جدید و تنظیم آن شروع کنیم. این یک مرحله ضروری قبل از افزودن ویجت به صفحه است، زیرا ما باید قبل از استفاده از ویجت، همه چیز را آماده کنیم. پس از فعال سازی پلاگین JetSmartFilters می توانید تب Smart Filters را در داشبورد وردپرس مشاهده کنید. آن را باز کنید و روی Add new کلیک کنید تا فیلتر جدیدی ایجاد شود.

• در صفحه افزودن فیلتر جدید می توانید به راحتی نام فیلتر جدید را تعیین کنید، برچسبی را که باید توسط ویجت نمایش داده شود تنظیم کنید و برچسب را تنظیم کنید تا هنگام فعال شدن فیلتر نشان داده شود.

در این مورد، ما برچسب فیلتر را به عنوان “Range Price” و برچسب Active را به عنوان “Price Range Set to” مشخص خواهیم کرد.

• در بلاک Filter Settings، باید نوع فیلتر مورد نظر خود را برای افزودن به الگوی صفحه آرشیو محصولات یا پست ها تعیین کنید. همانطور که در بالا ذکر کردیم، ۷ نوع فیلتر مختلف وجود دارد، مانند لیست checkbox، انتخاب، دامنه، دامنه بررسی، دامنه تاریخ، رادیو و جستجو. هر یک از انواع فیلترها مشخصات خاص خود را دارند و به راحتی می توانید تمام اطلاعات لازم در مورد نحوه استفاده از آنها را در مستندات گسترده JetSmartFilters بدست آورید.

• در این مورد، ما فیلتر Price Range را به صفحه فروشگاه ووکامرس اضافه خواهیم کرد. بیایید نوع فیلتر Range را انتخاب کنیم.

تنظیمات فیلتر

• پس از آن، گزینه هایی برای تنظیم متغیر جستجو  و سایر داده های اضافی و مورد نیاز برای نمایش دامنه (مانند پیشوند قیمت، مقادیر حداقل و حداکثر قیمت و غیره) به دست ما می رسد.
• برای تعیین معیارهایی که این فیلتر بر اساس آنها ساخته شده است، باید کلید متا فیلد را در قسمت Query Variable اضافه کنیم.
• صفحه را کمی پیمایش کنید تا محبوب ترین کلیدهای متا فیلد رایج برای ووکامرس را مشاهده کنید. نیازی نیست که به دنبال کلید متای مناسب در پایگاه داده باشید، فقط گزینه نیاز را کپی کرده و در قسمت متغیر Query جای گذاری کنید. در این مورد، باید کلید متا _ قیمت را در قسمت مربوطه کپی و پیست کنیم.

توجه

• همچنین می توان پیشوند را اضافه کرد تا ارزی را که قیمت در آن فیلتر نشان داده می شود، نشان دهد.
• پس از آن، ضمن تعریف دامنه قیمت ها، می توانید مقادیر حداقل و حداکثر قیمت را به صورت دستی تنظیم کنید یا به صورت خودکار مقادیر حداقل / حداکثر را بدست آورید. برای انجام این کار، قیمت های min / max را در لیست drop-down انتخاب کنید.
• اکنون که همه چیز آماده است بر روی دکمه انتشار / به روز رسانی کلیک کنید. اکنون آماده هستیم تا فیلتر را به یک صفحه ساخته شده توسط Elementor اضافه کنیم.

مرحله ۲٫ فیلتر را به صفحه فروشگاه اضافه کنید.

• بیایید الگوی صفحه WooCommerce Shop را باز کنیم. در صورت استفاده از JetWooBuilder، می توانید چنین الگویی را در تب WooCommerce> Jet Woo Templates ایجاد کنید (یا ممکن است قبلاً داشته باشید).

الگوی فروشگاه را که محصولات را در آن نمایش داده اید برای ویرایش باز کنید و ویجت Range Filter را در هرجایی که می خواهید قرار دهید رها کنید.

• فیلتر مورد نظر جهت نمایش این ویجت را در قسمت Select Filter انتخاب کنید.
• منبعی را مشخص کنید که محصولی را که باید به آن فیلتر اعمال کنید نمایش داده شود. در این مورد، محصولات توسط Products Loop نمایش داده می شوند، بنابراین ما باید گزینه WooCommerce Archive را انتخاب کنیم. با این وجود، گزینه های بیشتری در دسترس است و درصورتی که محصولات را با استفاده از چندین روش مختلف نمایش می دهید، می توانید فیلترهای مختلف را برای هر یک از آنها با تعیین منبع مورد نیاز در این فیلتر برای dropdown تنظیم کنید.
• AJAX را در قسمت Apply Type انتخاب کنید تا سرعت بارگذاری افزایش یابد و اجازه دهید فیلتر بدون بارگیری مجدد صفحه کار کند.
• شما می توانید انتخاب کنید که فیلتر روی دکمه کلیک اعمال شود یا وقتی یکی مقدار را تغییر می دهید اعمال شود.
• در صورت دریافت چندین ویجت از یک نوع که محتوای مختلف را نمایش می دهند، می توانید برای تنظیمات پیشرفته برای هر یک از ویجت ها یک شناسه تعیین کنید و سپس شناسه ویجت خاص را در قسمت شناسه درخواست وارد کنید.
• نمایش برچسب فیلتر را فعال کنید تا برچسبی را که تعیین کرده ایم در وهله اول فیلتر ایجاد کنیم.
• اکنون تنها چیزی که باقی مانده این است که فیلتر را بر اساس نیاز شخصی تنظیم کنید. چندین تنظیمات استایل در بلاک Style موجود است.

همانطور که مشاهده کردید، همه چیز کاملاً آسان است و شما می توانید هر ۷ نوع فیلتر را به صفحات ساخته شده توسط Elementor اضافه کنید تا بازدیدکنندگان محصولات یا انتشارات را فیلتر کنند.

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

فیلترها مطمئناً باید به بخشی اجتناب ناپذیر در هر سایت موفق ووکامرس تبدیل شوند تا مشتریان بتوانند محصولات مورد نیاز و واقعی خود را همیشه پیدا کنند.