سبد خرید (WooCommerce)
صفحه Cart صفحه ویژه WooCommerce است که هنگام نصب بهصورت پیشفرض ساخته میشود. بلوکهای Gutenberg Cart دارد. همه بلوکهای Gutenberg را حذف کنید و بهجای آن از [woocommerce_cart] استفاده کنید.
بلوک Gutenberg
اگر بلوک Gutenberg Cart در صفحه Cart دارید، آن را حذف کنید. بهجای آن [woocommerce_cart] بگذارید یا اگر صفحه Cart را با Bricks ویرایش کردهاید از المان Shortcode استفاده کنید.
Bricks فقط shortcode [woocommerce_cart] را پشتیبانی میکند. میتوانید shortcode را مستقیماً در صفحه Cart بگذارید، یا صفحه را با Bricks ویرایش کنید و در المان Shortcode محتوا را [woocommerce_cart] تنظیم کنید. Bricks دو نوع قالب (در این زمینه مثل بخشهای قالب) برای سفارشیسازی سبد دارد:
- WooCommerce - Cart: وقتی سبد محصول دارد رندر میشود.
- WooCommerce - Empty Cart: وقتی سبد خالی است.
انواع قالب Cart
انواع قالب «Cart» و «Empty Cart» فقط وقتی WooCommerce نصب و فعال باشد دیده میشوند. این قالبها داخل منطق shortcode Cart WooCommerce استفاده میشوند و از Template Conditions پشتیبانی نمیکنند (بهصورت خودکار در صفحه درست رندر میشوند).
بهطور پیشفرض سبد در پوسته Bricks مثل تصویر زیر است. معمولاً دو ناحیه دارید: جدول آیتمهای سبد و جمع سبد:
برای سفارشیسازی این صفحه، قالبی از نوع WooCommerce - Cart بسازید.
افزونههای شخص ثالث
اگر از افزونههای شخص ثالث استفاده میکنید، هوکهای قالب (template hooks) را اضافه کنید.
نوع قالب: WooCommerce - Cart
نوع قالب WooCommerce - Cart را برای سفارشیسازی صفحه Cart (وقتی سبد محصول دارد) تنظیم کنید.
با باز کردن این قالب در Bricks سه المان جدید (مخصوص این نوع قالب) میبینید:
Cart items
جدول محتوای سبد را رندر میکند. با این المان میتوانید بخشهای جدول را مخفی کنید، استایل جدول و دکمهها را تنظیم کنید و ورودی کوپن را مخفی کنید (تا جدا با Cart Coupon بگذارید). برای چیدمان سفارشی بخش Cart contents loop را ببینید.
Cart totals
ناحیه جمع سبد را رندر میکند. cross-sellهای سبد را مخفی کنید، جدول جمع را استایل دهید و دکمه را سفارشی کنید.
Cart Coupon
ورودی کوپن را رندر میکند. اگر نمیخواهید کوپن به جدول Cart items چسبیده باشد از این المان استفاده کنید. ورودی و دکمه Apply coupon را استایل دهید.
نوع قالب: WooCommerce - Empty Cart
نوع قالب WooCommerce - Empty Cart را برای سفارشیسازی صفحه سبد وقتی خالی است تنظیم کنید.
پیشفرض: پیام و دکمه بازگشت به فروشگاه.
برای سفارشیسازی، قالبی از نوع WooCommerce - Empty Cart بسازید و المانهای لازم را قرار دهید.
Cart contents loop
Bricks 1.4 نوع حلقه query جدید Cart Contents را معرفی کرد. این حلقه همه محصولات سبد را میگردد و برچسبهای داده پویا (Dynamic Data) برای نام (post title)، تصویر (featured image)، قیمت، توضیح، SKU و غیره در دسترس است. این حلقه فقط برای صفحه Cart است.
با آن ویجت سفارشی آیتمهای سبد بسازید و هر جای سایت قرار دهید.
ساخت المان سفارشی آیتمهای سبد در صفحه Cart
پیشفرض: لیست محصولات سبد در جدول است — در قالب Cart پیشفرض WooCommerce یا با Cart Items در Bricks.
برای چیدمان متفاوت، container با query loop از نوع Cart Contents اضافه کنید. داخل آن از dynamic tagهای جدید (از Bricks 1.5.3) استفاده کنید:
کلاسهای CSS
برای کارکرد حلقه سفارشی سبد، کلاس CSS woocommerce-cart-form__cart-item cart_item را روی حلقه و woocommerce-cart-form__contents را روی والد div حلقه اضافه کنید.
{woo_cart_product_name}— نام محصول با لینک. فقط داخل Cart Contents loop.{woo_cart_remove_link}— لینک حذف محصول از سبد. پیشفرض «x» در محتوای anchor. کلاسproduct-removeرا روی المان نگهدارنده این tag بگذارید. روی Rich text یا tag اضافی استفاده نکنید — AJAX خراب میشود.{woo_product_price}— قیمت محصول. داخل Cart Contents loop قیمت حراج را نشان نمیدهد.{woo_cart_quantity}— فیلد تعداد افزودن/کاهش در سبد.{woo_cart_subtotal}— جمع جزء (قیمت × تعداد).
برای تکمیل، حلقه محصولات را داخل tag form بپیچید تا فیلدهای تعداد کار کنند. container حلقه را داخل container (یا div یا block) دیگری بگذارید، HTML tag را custom کنید و form در فیلد Custom tag وارد کنید.
مهم
از Bricks 1.10.2+ باید tag HTML form را بهصورت برنامهنویسی مجاز کنید. دستورالعمل: Filter: bricks/allowed_html_tags
این container form برای کار درست با اسکریپتهای WooCommerce نیاز دارد:
- کلاس سفارشی
woocommerce-cart-form(Style > CSS > CSS classes) - attributeهای سفارشی: method =
postو action ={post_url}
برای دکمه بهروزرسانی سبد، dynamic tag {woo_cart_update} را داخل container form (خارج از حلقه) اضافه کنید. دکمهای با تنظیمات درست برای بهروزرسانی سبد تولید میکند.