آموزش ساخت فیلترهای AJAX در ووکامرس: گالری محصولات حرفه‌ای و پرسرعت (خداحافظی با لودینگ‌های طولانی)

در فروشگاه‌های خشکبار که تنوع محصول بالاست (پسته خام، شور، زعفرانی، احمدآقایی، اکبری…)، مشتری اگر نتواند سریعاً چیزی را که می‌خواهد پیدا کند، سایت را ترک می‌کند. سیستم‌های فیلترینگ قدیمی وردپرس یک ایراد بزرگ دارند: با هر بار انتخاب یک فیلتر (مثلاً “پسته”)، کل صفحه دوباره بارگذاری (Reload) می‌شود. این وقفه ۳ ثانیه‌ای، قاتلِ تجربه کاربری (UX) است.

راه حل چیست؟ تکنولوژی AJAX. در این روش، وقتی کاربر فیلتری را انتخاب می‌کند، فقط “بخش محصولات” تغییر می‌کند و بقیه سایت ثابت می‌ماند. همه چیز آنی و در کسری از ثانیه رخ می‌دهد.

در این مقاله تخصصی، ما روش پیاده‌سازی این سیستم را با استفاده از بهترین ابزارهای موجود (به‌ویژه برای کاربران المنتور) بررسی می‌کنیم تا بتوانی سایتی بسازی که مشتری از کار کردن با آن لذت ببرد.

---

فاز اول: زیرساخت داده‌ها (Data Preparation)

قبل از اینکه فیلتر بسازید، باید چیزی برای فیلتر کردن داشته باشید! قدرت فیلترها به “ویژگی‌های محصول” (Attributes) وابسته است.

۱. تعریف ویژگی‌ها در ووکامرس

برای خشکبار، دسته‌بندی کافی نیست. باید ویژگی‌های دقیق تعریف کنید:

• طعم: (شور، خام، زعفرانی، فلفلی).

• وزن: (۲۵۰ گرم، ۵۰۰ گرم، ۱ کیلو).

• نوع پوست: (با پوست، مغز شده).

• درجه کیفیت: (اعلا، درجه یک، اقتصادی).

نکته فنی: حتماً تیک گزینه “Enable Archives” (فعال کردن بایگانی) را در تعریف ویژگی بزنید تا قابل فیلتر کردن باشند.

---

فاز دوم: انتخاب ابزار (Plugin Selection)

کدنویسی دستی سیستم فیلتر AJAX بسیار پیچیده است. بهترین راه، استفاده از افزونه‌های قدرتمندی است که برای توسعه‌دهندگان ساخته شده‌اند.

۱. افزونه JetSmartFilters (پادشاه المنتور)

اگر از المنتور (Elementor) استفاده می‌کنی، این بهترین گزینه است (از خانواده Crocoblock).

• مزایا: کاملاً با ویجت‌های المنتور سازگار است. انواع فیلتر (چک‌باکس، رادیو، اسلایدر قیمت، جستجو) را دارد و قابلیت Indexer (نمایش تعداد محصولات موجود) دارد.

۲. افزونه Filter Everything (سریع و سبک)

اگر می‌خواهی روی هر قالبی (حتی بدون المنتور) کار کنی.

• مزایا: سرعت فوق‌العاده بالا، سئوی عالی (تغییر URL بدون ریلود)، و طراحی تمیز.

۳. افزونه WOOF (Husky)

گزینه رایگان و قدرتمند، اما کمی پیچیده در تنظیمات.

---

فاز سوم: پیاده‌سازی عملی با JetSmartFilters (گام‌به‌گام)

بیایید فرض کنیم می‌خواهیم یک صفحه آرشیو خشکبار با فیلترهای “دسته‌بندی” و “قیمت” بسازیم.

گام ۱: ساخت فیلترها

1. به منوی Smart Filters > Add New برو.

2. Filter Label: نام فیلتر (مثلاً “انتخاب طعم”).

3. Filter Type: نوع را انتخاب کن (مثلاً “Checkboxes list”).

4. Data Source: منبع داده را انتخاب کن (مثلاً “Taxonomies” برای دسته‌بندی یا ویژگی‌ها).

5. Taxonomy: ویژگی مورد نظر (مثلاً pa_taste برای طعم) را انتخاب کن.

6. ذخیره کن. همین کار را برای “اسلایدر قیمت” (Range Filter) هم انجام بده.

گام ۲: طراحی در المنتور

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

2. ویجت “Products Grid” (یا هر ویجت لیست محصولی که استفاده می‌کنی) را در صفحه بگذار.

3. در سایدبار، ویجت‌های فیلتری که ساختی (Checkboxes Filter, Range Filter) را بکش و رها کن.

گام ۳: اتصال فیلتر به گالری (The Vital Link)

این مهم‌ترین بخش است. فیلتر باید بداند کدام گالری را تغییر دهد.

1. روی ویجت فیلتر کلیک کن.

2. در بخش “This filter for”، گزینه‌ای را انتخاب کن که با گالری تو هماهنگ است (مثلاً JetEngine یا WooCommerce Archive).

3. اگر از JetEngine استفاده می‌کنی، باید یک Query ID (مثلاً dried-fruit-grid) به گالری بدهی و همان ID را در تنظیمات فیلتر وارد کنی.

گام ۴: فعال‌سازی AJAX

• در تنظیمات فیلتر، گزینه “Apply type” را روی “AJAX” بگذارید.

• همچنین گزینه “Reload” را روی حالت “Instant” (لحظه‌ای) یا “On Button Click” (با دکمه اعمال فیلتر) تنظیم کنید. (برای دسکتاپ Instant و برای موبایل Button بهتر است).

---

فاز چهارم: بهبود تجربه کاربری (UX)

فیلترها باید هوشمند باشند، نه مزاحم.

۱. استفاده از “Indexer” (شمارشگر)

کاربر نباید روی فیلتری کلیک کند و با پیام “محصولی یافت نشد” روبرو شود.

• راهکار: قابلیت Indexer را فعال کنید. این قابلیت کنار هر گزینه تعداد را می‌نویسد: پسته (۱۲). و اگر گزینه‌ای محصول نداشت، آن را مخفی یا کمرنگ می‌کند.

۲. فیلترهای فعال (Active Tags)

کاربر باید بداند چه فیلترهایی را انتخاب کرده است.

• ویجت: از ویجت “Active Tags” در بالای گالری استفاده کنید تا کاربر بتواند با یک کلیک (ضربدر)، فیلترهای اعمال شده را حذف کند.

۳. طراحی موبایل (Mobile Optimization)

سایدبار در موبایل جای زیادی می‌گیرد.

• راهکار: در حالت موبایل، فیلترها را در یک پاپ‌آپ (Off-canvas) یا منوی کشویی قرار دهید که با دکمه “فیلتر پیشرفته” باز شود.

---

فاز پنجم: سئو و سرعت (نکات فنی)

فیلترهای AJAX اگر درست تنظیم نشوند، می‌توانند به سئو ضربه بزنند (چون URL تغییر نمی‌کند و گوگل صفحات فیلتر شده را نمی‌بیند).

۱. تغییر URL (Permalinks)

از تنظیمات افزونه مطمئن شوید که وقتی کاربر فیلتر می‌کند، URL تغییر می‌کند (مثلاً: site.com/shop/?taste=salty). این کار باعث می‌شود کاربر بتواند آن نتیجه خاص را برای دوستش بفرستد یا بوکمارک کند.

۲. مدیریت ایندکس گوگل

شما نمی‌خواهید گوگل هزاران صفحه فیلتر شده (مثلاً “پسته شورِ ۵۰۰ گرمیِ ارزان”) را ایندکس کند (Duplicate Content).

• راهکار: در تنظیمات سئو، صفحات دارای پارامتر فیلتر را Canonical کنید به صفحه اصلی دسته، یا آن‌ها را Noindex کنید (مگر اینکه استراتژی سئوی Long-tail خاصی داشته باشید).

---

بخش پرسش و پاسخ فنی (FAQ)

۱. آیا فیلتر AJAX سرعت سایت را کند می‌کند؟ خودِ AJAX سریع است، اما اگر تعداد محصولات زیاد باشد (مثلاً ۵۰۰۰ محصول)، کوئری‌های دیتابیس سنگین می‌شود.

• راهکار: از سیستم‌های ایندکسینگ (Indexing) افزونه‌ها استفاده کنید که یک جدول جداگانه در دیتابیس می‌سازند و سرعت جستجو را ۱۰ برابر می‌کنند.

۲. چرا فیلتر من کار نمی‌کند؟ (Troubleshooting)

• تداخل با افزونه کش: مطمئن شوید که کوئری‌های فیلتر کش نمی‌شوند.

• عدم تطابق ID: آی‌دی ویجت گالری و ویجت فیلتر باید دقیقاً یکی باشد.

۳. بهترین فیلتر برای سایت خشکبار چیست؟

• محدوده قیمت: (چون بودجه مهم است).

• وزن: (چون خرید کیلویی و گرمی رایج است).

• طعم: (شور، خام، ترش).

---

جمع‌بندی: سایتی که مشتری را می‌فهمد

ایجاد گالری با فیلترهای AJAX، به مشتری این حس را می‌دهد که سایت شما “هوشمند” است و به وقت او احترام می‌گذارد. وقتی مشتری می‌تواند در ۳ ثانیه، از بین ۱۰۰ محصول، دقیقاً “پسته اکبری، خام، ۱ کیلویی” را پیدا کند، احتمال خرید او به شدت بالا می‌رود.

به عنوان طراح وب، این یکی از ارزشمندترین فیچرهایی است که می‌توانی روی ووکامرس پیاده‌سازی کنی.