free page hit counter
در حال بارگذاری وب سات شکیبا باشید

فیلتر محصول ووکامرس با افزونه Advanced AJAX Product Filters


Advanced AJAX Product Filters

افزونه Advanced AJAX Product Filters یکی از افزونه های فیلتر محصولات ووکامرس است که قابلیت فیلتر کردن محصولات را به فروشگاه ووکامرس شما می دهد.

اگر تا به حال به فروشگاه های اینترنتی بزرگی مانند Amazon یا eBay سر زده باشید، می دانید که آنها هرکدام میلیون ها محصول دارند. این وب سایت ها علاوه بر نوار جستجو از فیلترهایی در ساید بار خود استفاده می کنند که به مشتریان این امکان را می دهد تا بتوانند محصولات مورد نظر خود را بر اساس قیمت، بررسی ها، برچسب ها، دسته بندی و غیره جستجو کنند.

نکته جالب توجه این است که وب سایت با هر بار جستجو رفرش نمی شود، بلکه نتایج فیلتر شده بلافاصله در همان صفحه باز می شوند. این فیلترها Ajax Product Filter نامیده می شوند (آژاکس مجموعه ای از برنامه های کاربردی است که بدون نیاز به رفرش صفحه در پشت صحنه اجرا می شوند). اگر بیش از ۱۰۰ محصول در فروشگاه آنلاین خود دارید، استفاده از یک فیلتر آژاکس برای وب سایت شما ضروری است.

اگر از ووکامرس برای ساخت فروشگاه اینترنتی در وردپرس استفاده کرده اید، خبر خوب این است که افزونه های فیلتر آژاکس زیادی برای ووکامرس عرضه شده است. یکی از آنها افزونه 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

در این صفحه تمام فیلترهای ساخته شده توسط افزونه Advanced AJAX Product Filters همراه با شورت کد آنها نمایش داده می شود.

آموزش ساخت فیلتر

برای ساخت اولین فیلتر روی دکمه Add Filter کلیک کنید.

صفحه ای مشابه شکل زیر مشاهده خواهید کرد:

Advanced AJAX Product Filters

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

Conditions: در این قسمت می توانید ابزارهایی که نمی خواهید فیلتر در آنها نمایش داده شود را انتخاب کنید. اگر هیچ گزینه ای را انتخاب نکنید، فیلتر در تمام دستگاه ها نمایش داده می شود.

باکس بعدی مربوط به تنظیمات فیلتر محصول در افزونه 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

در این صفحه تمام گروه های ساخته شده با افزونه Advanced AJAX Product Filters را می توانید مشاهده کنید.

برای ساخت اولین گروه روی دکمه Add Filter Group کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

Advanced AJAX Product Filters

Custom CSS Class: در این قسمت می توانید یک کلاس سفارشی برای گروه تنظیم کنید. برای ایجاد چند کلاس مختلف کافی است بین اسامی کلاس ها یک فاصله ایجاد کنید.

Filters In Group: در این قسمت می توانید فیلترهایی که در قسمت قبل ساخته اید را به گروه اضافه کنید. کافی است در منوی کشویی فیلتر را انتخاب کرده و روی دکمه Add filter کلیک کنید.

پس از آن روی دکمه Save کلیک نمایید. با کلیک بر روی دکمه Save، افزونه در قسمت Shortcode یک شورت کد در اختیار شما قرار می دهد. شما می توانید از این شورت کد برای قرار دادن گروه فیلترها در نوشته ها، برگه ها و ناحیه ابزارک های فروشگاه خود استفاده کنید.

حال که با استفاده از افزونه Advanced AJAX Product Filters ، فیلتر و گروه فیلترهای مورد نیاز فروشگاه خود را ساخته اید، نوبت به نمایش آنها در ساید بار فروشگاه می رسد. در ادامه آموزش به بررسی این موضوع می پردازیم.

نمایش فیلتر در فروشگاه

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

صفحه ابزارک ها مشابه شکل زیر به شما نشان داده می شود.

Advanced AJAX Product Filters

همانطور که ملاحظه می کنید دو ابزارک جدید به ابزارک های
موجود در این صفحه اضافه شده است.

ابزارک AAPF Filter Single که مربوط به یک فیلتر تکی ساخته شده در افزونه Advanced AJAX Product Filters است را کشیده و در نوار کناری مورد نظر خود رها کنید. تنظیمات ابزارک به صورت زیر برای شما باز می شود.

Advanced AJAX Product Filters
  • Manage filters: با کلیک بر روی این لینک به صفحه فیلترها هدایت می شوید.
  • Custom CSS Class: در این قسمت می توانید کلاس CSS سفارشی خود را وارد کنید.
  • Filter: فیلتر مورد نظر خود را انتخاب کنید.
  • Create Filter: با کلیک بر روی این دکمه می توانید یک فیلتر را سریعاً بسازید.

در پایان روی دکمه ذخیره کلیک کنید.

حال ابزارک AAPF
Filters Group را کشیده و در
سایدبار مورد نظر خود رها کنید.

Advanced AJAX Product Filters

تنظیمات ابزارک مشابه شکل زیر برای شما باز می شود.

  • Manage groups: با کلیک بر روی این لینک به صفحه گروه ها هدایت می شوید.
  • عنوان: عنوانی که در صفحه سایت نمایش داده می شود.
  • Custom CSS Class: در این قسمت می توانید کلاس CSS سفارشی را وارد کنید.
  • Group: در این قسمت می توانید یک گروه برای نمایش انتخاب کنید.
  • Create group: با کلیک بر روی این دکمه می توانید به سرعت یک گروه بسازید.

سپس روی دکمه ذخیره کلیک کنید.

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

امیدواریم از این آموزش بهره لازم را برده باشید. دیدگاه ها و نقطه نظرات خود را با ما در میان بگذارید.

دانلود افزونه
صفحه افزونه



منبع مقاله ارائه شده

Share:

مایل به ثبت دیدگاه هستید؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین دیدگاه‌ها

    شمارنده

    • 250
    • 481
    • 9,348
    • 338,407
    • 2
    • 7,686
    • 1,060
    • ۲۹ بهمن ۱۳۹۸
    Cart Item Removed. Undo
    • No products in the cart.
    WeCreativez WhatsApp Support
    تیم پشتیبانی مشتری ما برای پاسخگویی به سوالات شما در اینجا قرار دارند. از ما چیزی بپرسید!
    👋 سلام ، چگونه می توانم کمک کنم ؟