آموزش ساخت دکمه مشاهده سریع با ویجت Off-Canvas در المنتور (ویدیوی آموزشی)

در قالب‌هایی مانند وودمارت یا سایر قالب‌های فروشگاهی، معمولاً قابلیتی به نام مشاهده سریع وجود دارد که به کاربران اجازه می‌دهد بدون ترک صفحه، اطلاعات کاملی از محصولات را مشاهده کنند. اگر شما هم می‌خواهید چنین قابلیتی را با استفاده از المنتور برای سایت خود ایجاد کنید، در این قسمت در دوره جامع آموزش المنتور ، یاد می‌گیرید چگونه با کمک ویجت Off-Canvas، دکمه مشاهده سریع (Quick View) را به محصولات یا محتوای خود اضافه کنید.

کاربرد ویجت Off-Canvas در Loop Grid

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

مراحل ساخت دکمه مشاهده سریع با Off-Canvas

۱. ایجاد یک Loop Grid

• یک صفحه جدید در المنتور باز کنید.
• ویجت حلقه شبکه را به صفحه اضافه کنید.
• روی گزینه ایجاد قالب کلیک کنید تا قالب حلقه (Loop) خود را طراحی کنید.

۲. طراحی قالب حلقه

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

۳. افزودن ویجت Off-Canvas

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

۴. ایجاد دکمه “مشاهده سریع”

• ویجت دکمه را به قالب حلقه اضافه کنید.
• متن دکمه را به “مشاهده سریع” تغییر دهید.
• در تنظیمات دکمه، روی فیلد لینک URL کلیک کنید و برچسب های پویا را انتخاب کنید.
• از منوی کشویی، گزینه Off-Canvas را انتخاب کرده و ویجت Off-Canvas مربوطه را تنظیم کنید.

۵. ذخیره و پیش‌نمایش

• روی گزینه Save & Back کلیک کنید تا تغییرات ذخیره شوند.
• صفحه را منتشر کنید. در پیش‌نمایش، دکمه‌های “مشاهده سریع” را بررسی کنید تا مطمئن شوید پنل Off-Canvas به‌درستی کار می‌کند.

نتیجه‌گیری

با افزودن ویجت Off-Canvas به لوپ گرید در المنتور، می‌توانید امکاناتی مشابه قالب‌ های فروشگاهی معروف، مانند دکمه مشاهده سریع، به کارت محصولات خود اضافه کنید. این ابزار به شما کمک می‌کند اطلاعات تکمیلی محصولات را به شکلی پویا و بدون نیاز به بارگذاری مجدد صفحه نمایش دهید. با اجرای این روش، نه تنها ظاهر سایت حرفه‌ای‌تر به نظر می‌رسد، بلکه تعامل کاربران نیز افزایش می‌یابد.