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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
تب تغییر وضعیت فیلتر المنتور

اگر با صفحه ساز المنتور فروشگاه خودتان را طراحی کرده باشید، ممکن است از ویجت های افزونه 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 را مشاهده کنید.

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

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

دانلود فایل

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

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات دیجیتال

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=93868

فهرست مطالب

Avatar
حسین ریحانی در 17:22

فوق العاده است. خیلی توانمند هستید و دانش عمیقی دارید. به امید موفقیت های بیشتر گروه شما.

پاسخ
المنتور فارسی
المنتور فارسی در 12:24

با سلام
ممنون از همراهی شما

پاسخ
Avatar
ali.pakdell@live.com در 17:33

فوق العاده بود، ممنونم مهندس جان، انشاالله هر چیاز خدا میخوای بهت بده، هزاران هزار بار سپاسگزارم♥️

پاسخ
المنتور فارسی
المنتور فارسی در 18:19

با سلام
در خدمت هستیم. موفق باشید

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید