پرش به محتویات

ساخت Quick View محصول با Bricks

قالب popup مورد استفاده برای Quick View را طراحی کنید. المان‌های ضروری مثل Product Gallery، Product Rating، Product Price و دکمه Add to Cart را اضافه کنید.

المان WooCommerce Notice را هم در popup قرار دهید تا پس از افزودن به سبد، اعلان‌ها مستقیماً به کاربر نشان داده شود.

hookهای قالب مناسب — مشابه صفحه تک محصول — را پیاده کنید. اگر با template hook آشنا نیستید این مقاله را ببینید.

نمونه طراحی Quick View Popup:

نمونه طراحی Quick View Popup

WooCommerce Quick View (@since 1.10.2) و Fetch content via AJAX را در Settings > Template Settings > Popup فعال کنید.

AJAX loader تجربه کاربری روان‌تری برای popup فراهم می‌کند.

توجه

برای قالب popup شرط قالب (template condition) تنظیم نکنید؛ popup را داخل حلقه Products embed می‌کنیم.

کنترل‌های Quick View در تنظیمات Popup

مرحله ۳: ساخت Product Query Loop

Product query loop را در صفحه جدید یا قالب Shop بسازید و المان‌های لازم را اضافه کنید.

template hook مناسب را در حلقه قرار دهید تا افزونه‌های شخص ثالث WooCommerce منطق خود را اعمال کنند.

نمونه Product query loop

داخل حلقه محصول، المان Template را اضافه کنید و قالب popup مرحله ۱ را انتخاب کنید.

برای HTML تمیزتر Render without wrapper را فعال کنید.

محل المان Template در حلقه

انتخاب قالب popup در المان Template

به‌جای Add to Cart در حلقه از المان Button استفاده کنید.

برای باز شدن popup Quick View، interaction را مطابق تصویر تنظیم کنید:

تنظیم interaction دکمه Quick View

جمع‌بندی

با این مراحل Quick View Popup با Bricks پیاده‌سازی شد.

بازدیدکننده بدون ترک صفحه فعلی جزئیات محصول را می‌بیند و یکپارچگی با WooCommerce حفظ می‌شود.

طراحی و interaction را متناسب با نیاز سایت تنظیم کنید تا Quick View مؤثرتر عمل کند.