فهرست مطالب
اگر یک فروشگاه اینترنتی با وردپرس و ووکامرس دارید و میخواهید بخش فیلتر مرتب سازی محصولات را مشابه دیجی کالا بسازید، افزونه JetSmartFilters یکی از بهترین انتخاب هاست. این افزونه امکانات فیلتر پیشرفته و مرتب سازی را به صورت حرفه ای در اختیار شما قرار میدهد و به خوبی با المنتور هماهنگ است.
در این راهنمای کامل از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور، از نصب و آمادهسازی تا استایل دهی ویجت «فیلتر مرتب سازی افزونه جت اسمارت فیلتر» را مرحله به مرحله مرور می کنیم تا بتوانید ظاهری شبیه سایت دیجی کالا ایجاد کنید.
1. نیازمندی های ساخت فیلتر مرتب سازی محصولات
برای شروع کار، ابتدا مطمئن شوید این افزونهها روی سایت شما نصب و فعال هستند:
- افزونه المنتور پرو: نسخه پرو المنتور برای طراحی قالبهای آرشیو محصولات و دسترسی به امکانات حرفهای ضروری است.
- افزونه JetSmartFilters : افزونه اصلی برای ساخت فیلترها و گزینههای مرتبسازی.
بعد از نصب، حتما هر دو افزونه را فعال کنید و مطمئن شوید آخرین نسخه آن ها در سایت شما در حال اجرا است.
2. ساخت یا آمادهسازی صفحه آرشیو محصولات
مرتبسازی باید در صفحهای انجام شود که لیست محصولات ووکامرس نمایش داده میشود. این صفحه را میتوانید به دو صورت آماده کنید:
- اگر هنوز قالب آرشیو ندارید، در مسیر قالبها > افزودن قالب در المنتور پرو یک صفحه آرشیو جدید بسازید. (آموزش ساخت صفحه آرشیو ووکامرس با المنتور)
- اگر صفحه آرشیو را در جلسات قبل ساخته اید، همان صفحه آرشیو موجود را ویرایش کنید تا بتوانید ویجت فیلتر مرتب سازی محصولات را در آن قرار دهید.
این مرحله مهم است، زیرا ویجت Sorting Filter فقط در صفحاتی که محصولات به صورت آرشیو یا لیست نمایش داده میشوند کار میکند.
3. افزودن ویجت «فیلتر مرتبسازی» به صفحه
پس از ساخت فیلتر، باید آن را در صفحه آرشیو محصولات قرار دهید:
- به المنتور بروید و صفحه آرشیو محصولات را باز کنید.
- ویجت فیلتر مرتب سازی را جستجو کرده و در جای مناسب (معمولاً بالای لیست محصولات) بکشید و رها کنید.
- از تنظیمات ویجت، انتخاب کنید که فیلتر روی کدام ویجت حلقه اعمال شود.
- نوع اعمال را روی آژاکس قرار دهید.
- حالت اعمال را روی تغییر مقدار تنظیم کنید.
- در بخش لیست مرتب سازی ، میتوانید مقادیر دیگری را مانند ارزانترین ، گرانترین ، محبوترین ، پرطرفدارترین ، جدیدترین و موارد دیگر را اضافه یا کم کنید.
4. استایلدهی شبیه دیجیکالا
بعد از قرار دادن ویجت، نوبت به استایلدهی میرسد. هدف این است که فیلتر مرتب سازی شما ظاهری شبیه دیجی کالا پیدا کند؛ ساده، مرتب و کاربرپسند. برای این کار میتوانید از تب استایل در المنتور استفاده کنید:
- چیدمان افقی و منظم: گزینهها را در یک ردیف کنار هم نمایش دهید.
- فونت و رنگ هماهنگ: از فونت اصلی سایت و رنگهای برند خود استفاده کنید. برای حالت فعال، رنگ شاخص (مثلاً قرمز دیجیکالا یا رنگ اصلی برند) انتخاب کنید.
- فاصله مناسب: برای هر گزینه پدینگ و فاصله کافی قرار دهید تا کاربر راحت بتواند کلیک کند.
- حالت فعال مشخص: برای گزینه انتخابشده رنگ متفاوت یا افکت پسزمینه بگذارید تا کاربر بداند کدام گزینه فعال است.
- واکنشگرایی (ریسپانسیو): در موبایل اگر تعداد گزینهها زیاد است، از حالت کشویی (Dropdown) استفاده کنید یا فاصلهها را کمتر کنید تا همه گزینهها بهخوبی نمایش داده شوند.
همچنین از کدهایی که در ادامه ویدیو برای کاربران عضو این دوره قرار داده ایم میتوانید استفاده کنید.
جمعبندی
با نصب Elementor Pro و JetSmartFilters، ساخت یک فیلتر مرتب سازی، قرار دادن ویجت «Sorting Filter» در صفحه آرشیو محصولات و اعمال استایلهای دلخواه، میتوانید تجربهای حرفهای و شبیه سایتهای بزرگ مثل دیجیکالا برای کاربران خود ایجاد کنید. این کار علاوه بر جذابیت بصری، باعث میشود مشتریان بتوانند محصولات را راحتتر مرتب کنند و سریعتر به نتیجه دلخواه برسند.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
