فهرست مطالب
اگر قصد دارید یک سایت فروشگاهی حرفه ای مثل دیجیکالا راهاندازی کنید، داشتن بخش فیلتر محصولات پیشرفته از مهم ترین نیازهاست. کاربران میخواهند با چند کلیک، محصول مورد نظرشان را بر اساس رنگ، موجودی، محدوده قیمت یا ویژگی های خاص پیدا کنند. افزونه JetSmartFilters از مجموعه Crocoblock دقیقاً برای همین کار ساخته شده و به طور کامل با المنتور پرو و ووکامرس سازگار است. با کمک این افزونه میتوانید فیلترهای حرفهای و داینامیک طراحی کنید و آنها را به ویجت حلقه شبکه المنتور متصل کنید تا صفحه آرشیو محصولات فروشگاهی شما دقیقاً مثل دیجی کالا عمل کند.
در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور، نحوه ساخت فیلتر محصولات مشابه دیجی کالا با استفاده از افزونه جت اسمارت فیلتر و المنتور را به طور کامل یاد میگیرید.
پیش نیازها برای راه اندازی فیلتر محصولات ووکامرس
برای شروع کار، به چند افزونه و تنظیم اولیه نیاز دارید:
- افزونه Elementor Pro : برای ساخت قالب آرشیو و ویجت Loop Grid
- افزونه WooCommerce برای مدیریت فروشگاه و محصولات
- افزونه JetSmartFilters برای ایجاد فیلترهای پویا و قابل اتصال به المنتور
- افزونه JetEngine (اختیاری) برای ساخت فیلدهای متا یا ویژگیهای اختصاصی
اطمینان داشته باشید که محصولات شما ویژگیهای لازم مثل رنگ، سایز یا سایر اتربیوت ها را داشته باشند تا بتوانید فیلترهای دقیق و کاربردی بسازید.
گام اول: طراحی قالب و Loop Grid در المنتور
- ابتدا یک آیتم حلقه بسازید که مشخصات هر محصول (تصویر، نام، قیمت، دکمه افزودن به سبد خرید) را نمایش دهد.
- سپس یک صفحه آرشیو یا قالب جدید ایجاد کنید و ویجت Loop Grid را اضافه کنید.
- در تنظیمات Loop Grid منبع داده را روی محصولات ووکامرس قرار دهید و قالب Loop Item را انتخاب کنید.
این مرحله پایهٔ اصلی کار است و تمام فیلترها به همین Loop Grid متصل خواهند شد.
گام دوم: ایجاد فیلتر رنگ (Color Filter)
فیلتر رنگ یکی از جذاب ترین فیلترها در فروشگاه های بزرگ است. برای ساخت آن:
- در پیشخوان وردپرس به بخش محصولات > ویژگیها (Attributes) بروید و یک ویژگی جدید به نام «رنگ» بسازید. برای هر رنگ، ترم های جداگانه تعریف کنید (مثلاً قرمز، آبی، سبز).
- هنگام ویرایش محصولات، ویژگی رنگ را به هر محصول اختصاص دهید.
- در منوی افزونه Jet Smart Filters یک فیلتر جدید ایجاد کنید و نوع آن را بصری انتخاب کنید.
- منبع داده را روی تاکسونومی یا ویژگیهای ووکامرس (Attribute) قرار دهید و برای هر ترم رنگ یک کد رنگ یا تصویر دلخواه تعریف کنید.
- در صفحه آرشیو المنتور، ویجت فیلتر را بکشید و فیلتر رنگ را انتخاب کنید. Provider را روی Elementor Pro Loop Grid تنظیم کنید.
با این روش، کاربران میتوانند فقط با کلیک روی دایره های رنگی، محصولات مرتبط با همان رنگ را ببینند.
گام سوم: فیلتر محصولات بر اساس موجودی (In-Stock)
یکی از ویژگیهای ضروری هر فروشگاه، امکان فیلتر محصولات موجود است.
- به بخش Smart Filters بروید و یک فیلتر جدید از نوع Checkbox یا Radio بسازید.
- منبع داده را Custom Fields انتخاب کنید و در قسمت متا کلید، عبارت
_stock_statusرا وارد کنید. - گزینه «موجود» را با مقدار
instockو (در صورت تمایل) گزینه «ناموجود» را با مقدارoutofstockثبت کنید. - فیلتر را در صفحه المنتور قرار دهید و اعمال کننده را روی Loop Grid بگذارید.
اکنون کاربر میتواند با یک تیک ساده، فقط کالاهای موجود را مشاهده کند.
گام چهارم: فیلتر محدوده قیمت (Price Range)
فیلتر بازه قیمت یکی از بخش های کاربردی و جذاب از فیلتر محصولات می باشد که به کاربران اجازه میدهد محصولات را بر اساس بودجه خود انتخاب کنند.
- در افزونه جت اسمارت فیلتر، یک فیلتر جدید ایجاد کرده و نوع آن را محدوده قیمت انتخاب کنید.
- منبع داده را روی «قیمت ووکامرس» بگذارید تا کمترین و بیشترین قیمت محصولات به صورت خودکار دریافت شود.
- اسلایدر بازه قیمت را به دلخواه شخصیسازی کنید (واحد تومان، کمترین و بیشترین مقدار، نمایش عددی و …).
- ویجت فیلتر را در صفحه قرار دهید و اعمال کننده را روی حلقه شبکه المنتور تنظیم کنید.
گام پنجم: فیلتر ویژگی های محصول افزونه جت اسمارت فیلتر
برای فیلتر بر اساس ویژگی های خاص (مثل سایز، جنس یا برند):
- ویژگی مورد نظر را از بخش محصولات > ویژگی ها ایجاد کنید.
- برای هر محصول مقدار مناسب را تنظیم کنید.
- در Smart Filters یک فیلتر جدید از نوع لیست چک باکس یا انتخابی بسازید و منبع داده را همان تاکسونومی یا ویژگی قرار دهید.
- فیلتر را در صفحه آرشیو المنتور اضافه کنید و Provider را روی Loop Grid انتخاب کنید.
نکات بهینهسازی و افزایش سرعت در بخش فیلتر محصولات ووکامرس
- در تنظیمات JetSmartFilters فقط اعمال کننده های مورد نیاز را فعال کنید تا سرعت بارگذاری بهتر شود.
- در سایتهای بزرگ، از قابلیت Indexer استفاده کنید تا شمارندههای هر فیلتر سریع و دقیق بهروزرسانی شوند.
- اگر از سیستم کش استفاده میکنید، مطمئن شوید که صفحات فیلتر شده از کش استثنا شده باشند تا نتایج لحظهای نمایش داده شوند.
عیبیابی مشکلات رایج
- فیلتر کار نمیکند: مطمئن شوید که حتما اعمال کننده فیلتر روی Elementor Pro Loop Grid تنظیم شده باشد.
- شمارش گزینهها اشتباه است: یک بار Indexer را اجرا کنید تا شمارنده ها بهروزرسانی شوند.
- گزینه رنگ نمایش داده نمیشود: بررسی کنید که ویژگی رنگ به محصولات اختصاص داده شده باشد و منبع داده درست انتخاب شده باشد.
- محدوده قیمت نادرست است: مطمئن شوید منبع فیلتر روی قیمت ووکامرس تنظیم شده باشد.
سوالات متداول درباره JetSmartFilters و المنتور
آیا برای استفاده از JetSmartFilters نیاز به دانش برنامهنویسی دارم؟
خیر، استفاده از JetSmartFilters نیاز به دانش برنامهنویسی ندارد. این افزونه با رابط کاربری ساده و قابلیت کشیدن و رها کردن (drag and drop) طراحی شده است، بنابراین حتی کاربران مبتدی نیز میتوانند فیلترهای مورد نظر خود را ایجاد و سفارشیسازی کنند.
آیا میتوان چند فیلتر همزمان استفاده کرد؟
بله، JetSmartFilters از چندین فیلتر بهصورت همزمان پشتیبانی میکند و کاربران میتوانند رنگ، قیمت، موجودی و ویژگیها را با هم ترکیب کنند.
آیا این فیلترها با المنتور سازگار هستند؟
بله فیلتر محصولات به طور کامل با افزونه المنتور پرو سازگاری کامل را دارند.
جمعبندی
با افزونه JetSmartFilters و قدرت المنتور پرو میتوانید یک بخش فیلتر حرفه ای و جذاب مانند دیجی کالا ایجاد کنید. این سیستم باعث بهبود تجربه کاربری، افزایش نرخ تبدیل و رضایت مشتریان فروشگاه شما میشود. با رعایت مراحل بالا و بهینهسازیهای پیشنهاد شده، فروشگاه ووکامرسی شما به یک مرجع قدرتمند و قابل اعتماد تبدیل خواهد شد.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
