ایجاد تب تغییر وضعیت برای فیلتر های افزونه JetSmartFilters

اگر با صفحه ساز المنتور فروشگاه خودتان را طراحی کرده باشید، ممکن است از ویجت های افزونه Jet Smart Filters برای ایجاد فیلتر محصولات استفاده کرده باشید.

بخوانید: نحوه فیلتر کردن محصولات ووکامرس بر اساس ویژگی محصول با المنتور

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

در این مقاله، قصد داریم تا با ایجاد تب های بازشونده برای فیلتر ها، تنها زمانی که کاربر روی تب مورد نظر کلیک کرد فیلتر ها نمایش داده شود.

ایجاد تب های بازشونده برای فیلتر های افزونه JetSmartFilters

سفارشی سازی ظاهر تب فیلتر

وارد صفحه فروشگاه یا دسته بندی محصولات در المنتور شده تا کمی ظاهر تب ها فیلتر را تغییر دهیم.

در اینجا می خواهیم یک فلش به لیبل تب ها اضافه کنیم تا حالت باز کردن را به کاربر نشان دهیم. وارد بخش CSS سفارشی ستونی که فیلتر ها قرار دارند شده و کد CSS زیر را قرار دهید.

.jet-filter-label:after {
content: '\f078';
font-family:fontawesome;
float: left;
}
.jet-filter-label.noicon:after{
content: "";
}
.jet-filter-label {
cursor: pointer;
}

بعد از قرار دادن کد، تب فیلتر ها به شکل زیر خواهد شد:

در ادامه باید عملیات باز و بسته شدن تب ها را با استفاده از کد JS انجام دهیم.

عملیات باز و بسته شدن تب فیلتر ها

برای این کار ابتدا افزونه Simple Custom CSS and JS را از مخزن وردپرس نصب کنید.

سپس در پیشخوان وردپرس روی تب Custom CSS and JS زده و گزینه سوم یعنی Add Custom JS را انتخاب کنید.

در صفحه باز شده، یک نام برای فایل JS و کد زیر را داخل بخش محتوایی قرار دهید:

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.jet-checkboxes-list-wrapper').slice(0).slideUp();
$('.jet-filter-label').click(function(){
$(this).next().slideToggle();
});
});
});

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

در انتها می توانید نحوه باز و بسته شدن تب های فلیتر افزونه Jet Smart Filters را مشاهده کنید.

دانلود فایل اجرایی

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

دانلود فایل

امیدوارم که از این آموزش هم به خوبی استفاده کرده باشید. اگر مشکلی در نحوه اجرای این مگامنو دارید از طریق بخش نظرات مطرح کنید.