آموزش ساخت گرید محصولات با جت انجین – لیستینگ شبکه شماره ای

آیا می‌خواهید یک سایت فروشگاهی شبیه دیجی‌کالا داشته باشید که پرفروش‌ترین محصولات را به صورت داینامیک نمایش دهد و هر محصول با یک شماره جایگاه خود را مشخص کند؟ در این قسمت با آموزش ساخت گرید محصولات با جت انجین یاد میگیرید که بخش پرفروشترین محصولات ووکامرس را طراحی کنید که نه تنها اعتماد مشتریان را جلب می‌کند، بلکه می‌تواند به صورت چشمگیری فروش شما را افزایش دهد.

در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور ، قدم به قدم به شما آموزش می‌دهیم که چگونه با استفاده از افزونه جت انجین و ویجت لیستینگ شبکه، یک گرید محصولات کاملاً سفارشی، بهینه و با قابلیت شماره‌گذاری خودکار ایجاد کنید. این آموزش از معرفی و نصب افزونه تا پیاده‌سازی نهایی این قابلیت را پوشش می‌دهد.

چرا باید ساخت گرید محصولات با جت انجین انجام شود؟

اگر یک فروشگاه اینترنتی با ووکامرس دارید، نمایش پرفروش‌ترین محصولات می‌تواند باعث افزایش فروش و جلب اعتماد مشتریان شود. با استفاده از افزونه جت انجین و ویجت Listing Grid، می‌توانید این محصولات را به‌صورت خودکار و کاملاً سفارشی در صفحات سایت خود نمایش دهید. علاوه بر این، می‌توانید مانند سایت دیجی‌کالا، کنار هر محصول یک شماره خودکار نمایش دهید که جایگاه محصول را در لیست مشخص کند. این آموزش از معرفی تا پیاده‌سازی کامل این قابلیت را به شما یاد می‌دهد.

JetEngine یک ابزار قدرتمند برای ساخت محتوای داینامیک در وردپرس است. این افزونه به شما امکان می‌دهد داده‌ها را به صورت پویا نمایش دهید، کوئری‌های سفارشی ایجاد کنید و لیست‌های مختلفی از محتوا بسازید. برای نمایش پرفروش‌ترین محصولات ووکامرس، از قابلیت Query Builder و ویجت Listing Grid استفاده می‌کنیم تا محصولات بر اساس تعداد فروش مرتب شوند.

گام اول: نصب و فعال‌سازی افزونه JetEngine

برای شروع، باید افزونه JetEngine را روی سایت خود نصب و فعال کنید که از لینک زیر از سایت میهن تم میتوانید آخرین نسخه افزونه جت انجین را دانلود کنید. نصب آن مشابه هر افزونه دیگر است و پس از فعال‌سازی باید مطمئن شوید که بخش‌های Post Types و Query Builder فعال باشند.

مراحل نصب:

1. وارد پیشخوان وردپرس شوید و به مسیر افزونه‌ها > افزودن بروید.
2. روی دکمه بارگذاری افزونه کلیک کنید و فایل ZIP افزونه JetEngine را انتخاب کنید.
3. افزونه را نصب و فعال کنید.

گام دوم: ساخت قالب لیستینگ (Listing Template) اختصاصی محصول

قالب لیستینگ همان طرحی است که ظاهر هر محصول را در لیست پرفروش‌ترین‌ها مشخص می‌کند. این قالب می‌تواند شامل تصویر محصول، نام، قیمت و دکمه خرید باشد. طراحی قالب در المنتور انجام می‌شود تا بتوانید رنگ‌ها، فونت‌ها و چینش را مطابق برند خود تنظیم کنید.

مراحل ساخت قالب:

1. به مسیر جت انجین < Listings < افزودن جدید بروید.
2. پست ها را به عنوان منبع لیستینگ انتخاب کنید.
3. نوع پست را روی محصولات قرار دهید.
4. ویرایشگر المنتور را انتخاب کرده و یک نام برای قالب خود (مثلاً “قالب لیستینگ شماره ای”) تعیین کنید.
5. در محیط المنتور، المان‌های داینامیک را به کار بگیرید: تصویر شاخص داینامیک (Dynamic Featured Image)، عنوان محصول (Post Title)، قیمت و دکمه خرید. این ساخت پوسته محصول به شما امکان شخصی‌سازی کامل می‌دهد.
6. قالب را ذخیره کنید.

گام سوم: ساخت کوئری سفارشی برای پرفروش‌ترین محصولات

برای اینکه لیست محصولات به‌صورت پرفروش‌ترین‌ها مرتب شود، باید یک کوئری سفارشی در JetEngine بسازیم. این کوئری از فیلد متای total_sales استفاده می‌کند که توسط ووکامرس برای ذخیره تعداد فروش هر محصول ایجاد می‌شود.

مراحل ساخت کوئری:

1. به مسیر جت انجین > سازنده کوئری > افزودن جدید بروید.
2. کوئری پست ها را به عنوان نوع کوئری انتخاب کنید.
3. نوع پست را روی محصولات قرار دهید.
4. در بخش Order & Order By، Meta Value Num را به عنوان Order By انتخاب کنید.
5. total_sales را به عنوان Meta Key وارد کنید.
6. DESC را برای Order (نزولی) انتخاب کنید تا پرفروش‌ترین‌ها در ابتدا نمایش داده شوند.
7. تعداد محصولات مورد نظر برای نمایش را تعیین کنید و کوئری را با نامی مانند پرفروشترین محصولات ذخیره کنید.

گام چهارم: افزودن شماره‌گذاری خودکار محصولات برای شبیه‌سازی دیجی‌کالا

برای شبیه‌سازی شماره‌گذاری مانند دیجی‌کالا، می‌توانیم از روش های مختلفی استفاده کنیم که شماره آیتم‌ها را بر اساس جایگاهشان در Listing Grid نمایش می‌دهد. این یک ترفند عالی برای افزایش جذابیت بصری و بهبود تجربه کاربری است.

مراحل شماره‌گذاری:

1. به قالب لیستیگ خود یک کلاس مثلا item-loop بدهید.
2. به کانتینر اصلی که ویجت لیستینگ شبکه داخل آن قرار دارد آی دی listing-container را بدهید.
3. برای زیباتر شدن شماره‌ها، می‌توانید استایل‌های دلخواه خود را به ویجت بدهید.

حالا شماره هر محصول به‌صورت خودکار و بر اساس جایگاهش در لیست، تولید و نمایش داده می‌شود.

کدهای CSS را در انتهای مقاله میتوانید مشاهده کنید (مخصوص کاربران VIP)

گام پنجم: نمایش در ویجت Listing Grid

پس از ساخت قالب و کوئری، باید آن‌ها را در یک صفحه یا قالب نمایش دهید. ویجت Listing Grid در المنتور این امکان را می‌دهد که کوئری و قالب لیستینگ را ترکیب کرده و نتیجه را به شکل یک شبکه منظم از محصولات نمایش دهید.

مراحل نمایش گرید:

1. یک صفحه یا قالب (مثلاً صفحه اصلی) را با المنتور باز کنید.
2. ویجت Listing Grid را از منوی المنتور بکشید و در جای دلخواه قرار دهید.
3. در بخش Listing، قالبی که در مرحله ۳ ساختید را انتخاب کنید.
4. در بخش Custom Query، کوئری پرفروشترین محصولات را انتخاب کنید.
5. تعداد ستون‌ها (Columns) و تعداد آیتم‌ها (Items Number) را تنظیم کرده و استایل شبکه را مطابق سلیقه خود شخصی‌سازی کنید.

نکات مهم برای نمایش صحیح و بهینه‌سازی سئو

برای اینکه لیست پرفروش‌ترین محصولات به درستی کار کند و از نظر سئویی نیز بهینه باشد، به نکات زیر توجه کنید:

• ثبت فروش: مطمئن شوید که محصولات شما حداقل یک فروش ثبت‌شده داشته باشند تا در کوئری نمایش داده شوند.
• بررسی وضعیت محصولات: بررسی کنید که محصولات مورد نظر منتشر و فعال باشند.
• سئو گرید محصولات: در قالب لیستینگ، از تگ‌های Heading مناسب (مانند <h3> برای عنوان محصول) استفاده کنید تا گوگل ساختار صفحه را بهتر درک کند. همچنین، برای تصاویر، Alt Text توصیفی و مرتبط با کلمات کلیدی بنویسید.
• لینک‌سازی داخلی: از طریق دکمه “مشاهده محصول” یا عنوان آن، به صفحه تکی محصول لینک داخلی دهید.
• افزودن فیلتر: برای افزودن قابلیت فیلترگذاری پیشرفته به لیست پرفروش‌ها، می‌توانید از افزونه JetSmartFilters استفاده کنید.

نتیجه گیری

با اجرای مراحل بالا، شما یک بخش جذاب و پویا از پرفروش‌ترین محصولات فروشگاه خود خواهید داشت که به‌صورت خودکار بر اساس آمار فروش به‌روزرسانی می‌شود و هر محصول دارای شماره جایگاه خود است. این قابلیت باعث افزایش نرخ تبدیل، جلب اعتماد مشتریان و ارتقای تجربه کاربری سایت شما خواهد شد.

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