فیلتر محصول ووکامرس با افزونه Advanced AJAX Product Filters
افزونه Advanced AJAX Product Filters یکی از افزونه های فیلتر محصولات ووکامرس است که قابلیت فیلتر کردن محصولات را به فروشگاه ووکامرس شما می دهد. با استفاده از آن مشتریان می توانند انتخاب آسان تر و خرید بهتری را تجربه کنند.
اگر تا به حال به فروشگاه های اینترنتی بزرگی مانند Amazon یا eBay سر زده باشید، می دانید که آنها هرکدام میلیون ها محصول دارند. این وب سایت ها علاوه بر نوار جستجو از فیلترهایی در ساید بار خود استفاده می کنند که به مشتریان این امکان را می دهد تا بتوانند محصولات مورد نظر خود را بر اساس قیمت، بررسی ها، برچسب ها، دسته و غیره جستجو کنند.
نکته جالب توجه این است که وب سایت با هر بار جستجو رفرش نمی شود، بلکه نتایج فیلتر شده بلافاصله در همان صفحه باز می شوند. این فیلترها Ajax Product Filter نامیده می شوند (آژاکس مجموعه ای از برنامه های کاربردی است که بدون نیاز به رفرش صفحه در پشت صحنه اجرا می شوند). اگر بیش از 100 محصول در فروشگاه آنلاین خود دارید، استفاده از یک فیلتر آژاکس برای وب سایت شما ضروری است.
اگر از ووکامرس برای ساخت فروشگاه اینترنتی در وردپرس استفاده کرده اید، خبر خوب این است که افزونه های فیلتر آژاکس زیادی برای ووکامرس عرضه شده است. یکی از آنها افزونه yith woocommerce ajax product filter است که توسط کمپانی معروف YITH ارائه شده است.
از دیگر افزونه های فیلتر آژاکس محصولات ووکامرس می توان به افزونه Advanced Ajax Product Filters اشاره کرد که افزونه بسیار قدرتمندی بوده و گزینه های مختلف فیلتر مانند فیلتر محصولات براساس قیمت، دسته بندی ها، برچسب ها، ویژگی ها و حتی طبقه بندی های سفارشی را در اختیار شما قرار می دهد.
در این مقاله افزونه Advanced Ajax Product Filters را مورد بررسی قرار داده و نحوه استفاده از آن را توضیح می دهیم.
آموزش افزونه Advanced AJAX Product Filters و فیلتر محصول ووکامرس
توجه داشته باشید که برای استفاده از این افزونه باید فروشگاه اینترنتی خود را با استفاده از افزونه WooCommerce ساخته باشید.
ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس منوی جدیدی به نام BeRocket اضافه می شود.
در پیشخوان وردپرس به مسیر BeRocket » Product Filters » Filters بروید.
در این صفحه تمام فیلترهای ساخته شده توسط افزونه Advanced AJAX Product Filters همراه با شورت کد آنها نمایش داده می شود.
آموزش ساخت فیلتر
برای ساخت اولین فیلتر روی دکمه Add Filter کلیک کنید.
صفحه ای مشابه شکل زیر مشاهده خواهید کرد:
در قسمت افزودن عنوان، یک عنوان وارد کنید. متنی که در این قسمت وارد می کنید، عنوان ابزارک فیلتر شما خواهد شد و می توانید آن را در بالای ابزارک نمایش دهید.
Conditions: در این قسمت می توانید منطق شرطی خود را برای نمایش یا عدم نمایش فیلتر اعمال کنید. کافی است روی آیکون + کلیک کنید. سپس براساس ID برگه یا دسته محصولات می توانید فیلتر را در صفحات شامل کرده یا پنهان کنید.
همچنین می توانید ابزارهایی که نمی خواهید فیلتر در آنها نمایش داده شود را انتخاب کنید. اگر هیچ گزینه ای را انتخاب نکنید، فیلتر در تمام دستگاه ها نمایش داده می شود.
باکس بعدی مربوط به تنظیمات فیلتر محصول در افزونه Advanced AJAX Product Filters است.
Widget Type: در این قسمت می توانید نوع ابزارک و در واقع هرچیزی که می خواهید نمایش داده شود را انتخاب کنید. گزینه هایی که می توانید در این قسمت انتخاب کنید شامل موارد زیر است.
- Filter: با انتخاب این گزینه ابزارک فیلتر، فیلترها را براساس ویژگی ها، برچسب ها، دسته های محصولات، قیمت و غیره نشان می دهد.
- Update Products button: اضافه کردن دکمه برای اعمال فیلتر به محصولات. فیلتر تنها پس از کلیک بر روی دکمه Update اعمال می شود.
- Reset Products button: اضافه کردن دکمه برای غیرفعال کردن تمام فیلترهای انتخاب شده
- Selected Filters area: فیلترهای انتخاب شده را نمایش می دهد و امکان غیرفعال کردن آنها را در یک مکان فراهم می کند.
با انتخاب گزینه فیلتر در قسمت Widget Type تنظیمات زیر نشان داده می شود.
- Filter By: در این قسمت می توانید گزینه های ویژگی ها، برچسب ها، دسته های محصول و رتبه بندی را برای فیلتر کردن انتخاب کنید.
- Attribute: اگر در قسمت Filter By گزینه Attribute را انتخاب کرده باشید، در این قسمت می توانید ویژگی مورد نظر خود را انتخاب نمایید. این ویژگی می تواند قیمت یا هر ویژگی دیگری که در مسیر محصولات » ویژگی ها ساخته اید، باشد. برای آشنایی با ساخت ویژگی ها در ووکامرس مقاله آموزش افزونه WooCommerce را مطالعه کنید. با انتخاب هر ویژگی تنظیماتی که بعد از آن می آید متفاوت خواهد بود.
- Type: آنچه که در این قسمت انتخاب می کنید، مشخص می کند که فیلتر شما به چه شکلی ظاهر شود. شما می توانید گزینه هایی مانند چک باکس، دکمه رادیویی، منوی کشویی، رنگ و تصویر را انتخاب کنید. گزینه های ارائه شده باز هم متناسب با نوع ویژگی انتخاب شده متفاوت خواهند بود. به عنوان مثال با انتخاب ویژگی قیمت تنها می توانید گزینه slider را در این قسمت انتخاب کنید.
- Operator: اگر گزینه And را در این قسمت انتخاب کنید، محصولاتی که همه ویژگی های انتخاب شده را دارند، نمایش داده می شوند. گزینه OR برای نمایش محصولاتی با حداقل یک ویژگی انتخاب شده، است.
- Values Order: در این قسمت می توانید ترتیب نمایش مقادیر را به صورت پیش فرض، الفبایی یا عددی انتخاب کنید.
- Order Type: در این قسمت می توانید نوع ترتیب نمایش را به صورت صعودی یا نزولی انتخاب کنید.
پس از اعمال تنظیمات مورد نظر خود روی دکمه Save کلیک کنید.
به محض ذخیره کردن فیلتر یک شورت کد در سایدبار سمت چپ صفحه نشان داده می شود. شما می توانید از این شورت کد برای نمایش فیلتر در تمام صفحات فروشگاه خود و همچنین ناحیه ابزارک ها استفاده کنید.
ساخت گروه در افزونه Advanced AJAX Product Filters
در پیشخوان وردپرس به مسیر BeRocket » Product Filters » Groups بروید.
در این صفحه تمام گروه های ساخته شده با افزونه Advanced AJAX Product Filters را می توانید مشاهده کنید.
برای ساخت اولین گروه روی دکمه Add Filter Group کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.
Custom CSS Class: در این قسمت می توانید یک کلاس سفارشی برای گروه تنظیم کنید. برای ایجاد چند کلاس مختلف کافی است بین اسامی کلاس ها یک فاصله ایجاد کنید.
Filters In Group: در این قسمت می توانید فیلترهایی که در قسمت قبل ساخته اید را به گروه اضافه کنید. کافی است در منوی کشویی فیلتر را انتخاب کرده و روی دکمه Add filter کلیک کنید.
پس از آن روی دکمه Save کلیک نمایید. با کلیک بر روی دکمه Save، افزونه در قسمت Shortcode یک شورت کد در اختیار شما قرار می دهد. شما می توانید از این شورت کد برای قرار دادن گروه فیلترها در نوشته ها، برگه ها و ناحیه ابزارک های فروشگاه خود استفاده کنید.
حال که با استفاده از افزونه Advanced AJAX Product Filters ، فیلتر و گروه فیلترهای مورد نیاز فروشگاه خود را ساخته اید، نوبت به نمایش آنها در ساید بار فروشگاه می رسد. در ادامه آموزش به بررسی این موضوع می پردازیم.
نمایش فیلتر در فروشگاه
شما می توانید از ابزارک برای نمایش فیلتر در صفحه فروشگاه خود استفاده کنید. برای این کار در پیشخوان وردپرس به مسیر نمایش » ابزارک ها بروید.
صفحه ابزارک ها مشابه شکل زیر به شما نشان داده می شود.
همانطور که ملاحظه می کنید دو ابزارک جدید به ابزارک های موجود در این صفحه اضافه شده است.
ابزارک AAPF Filter Single که مربوط به یک فیلتر تکی ساخته شده در افزونه Advanced AJAX Product Filters است را کشیده و در نوار کناری مورد نظر خود رها کنید. تنظیمات ابزارک به صورت زیر برای شما باز می شود.
- Manage filters: با کلیک بر روی این لینک به صفحه فیلترها هدایت می شوید.
- Custom CSS Class: در این قسمت می توانید کلاس CSS سفارشی خود را وارد کنید.
- Filter: فیلتر مورد نظر خود را انتخاب کنید.
- Create Filter: با کلیک بر روی این دکمه می توانید یک فیلتر را سریعاً بسازید.
در پایان روی دکمه ذخیره کلیک کنید.
حال ابزارک AAPF Filters Group را کشیده و در سایدبار مورد نظر خود رها کنید.
تنظیمات ابزارک مشابه شکل زیر برای شما باز می شود.
- Manage groups: با کلیک بر روی این لینک به صفحه گروه ها هدایت می شوید.
- عنوان: عنوانی که در صفحه سایت نمایش داده می شود.
- Custom CSS Class: در این قسمت می توانید کلاس CSS سفارشی را وارد کنید.
- Group: در این قسمت می توانید یک گروه برای نمایش انتخاب کنید.
- Create group: با کلیک بر روی این دکمه می توانید به سرعت یک گروه بسازید.
سپس روی دکمه ذخیره کلیک کنید.
حال می توانید به فرانت اند سایت خود مراجعه کرده و فیلتر ها را در نوار کناری فروشگاه خود مشاهده کنید.
امیدواریم از این آموزش بهره لازم را برده باشید. دیدگاه ها و نقطه نظرات خود را با ما در میان بگذارید.
سلام ببخشید من میخوام این فیلتر و تو صفحه فروشگاهم نشون بده ولی توی قسمت widget area فضایی برای فروشگاه نداره قالبم که بشه از ویجت داخلش استفاده کرد چکار باید بکنم
اگر قصد دارید که بصورت ویجت از این افزونه استفاده نمائید حتما باید با یک برنامه نویس صحبت کنید تا بتونه فضای مورد نظر شما در قالب قرار بده تا بتونید کد های ویجت خود را در آن قسمت نمایش دهید…
سلام خسته نباشید
من از این افزونه استفاده کردم ولی مشکلی که دارم در تمام صفحات دیگه مثل تماس با ما یا صفحه پشتیبانی این فیلتر محصولات نشون داده میشه چیکار کنم که تو اون صفحات نباشد؟
سلام و وقت شما بخیر
برای اینکه مشخص کنید فیلتر در چه صفحاتی نشان داده شود باید از Condition استفاده کنید. در صفحه ویرایش فیلتر روی آیکون + در قسمت Conditions کلیک کنید و شرایط خودتون رو برای نمایش فیلتر اعمال کنید.
با سلام متاسفانه برای من اصلا نشون نمیده تنظیمات رو به همین شکل انجام دادم. میشه راهنمایی کنید که چطور باید نمایش داده بشه
دوست من بهتره آموزش رو دقیق مطالعه کنید بخصوص پاراگراف نمایش فیلتر در فروشگاه و احیانا اگر تمامی مراحل را کامل انجام دادید و نتیجه حاصل نشد،بهتره که با یه قالب دیگه تست کنید…