The basket object contains all information about the customer’s shopping cart. It’s available globally across all pages, making it perfect for cart widgets, mini-carts, and checkout processes.
Usage : Available globally - use anywhere to display cart contents, totals, and checkout links
Access the essential cart data for displaying cart status and totals:
Cart Overview
Cart Header Widget
<!-- Basic cart status --> {{^basket.isEmpty}} <div class="cart-summary"> <span class="cart-count">{{basket.items_count}}</span> <span class="cart-total">{{basket.total_amount}}</span> <a href="{{paylink}}" class="checkout-btn">{{#lang}}Checkout{{/lang}}</a> </div> {{/basket.isEmpty}} {{#basket.isEmpty}} <p class="empty-cart">{{#lang}}Your cart is empty{{/lang}}</p> {{/basket.isEmpty}}
Available Properties Property Type Description basket.isEmptyBoolean Check if cart is empty basket.items_countNumber Number of items in cart basket.total_amountString Total amount for items in cart basket.itemsArray Object containing all products in cart
Cart Items Loop through cart items to display detailed cart contents:
Basic Cart Items
Detailed Cart Table
{{#basket.items}} <div class="cart-item"> <div class="item-image"> {{#item.firstimage}} <img src="{{#img}}{{item.firstimage}}_100x100{{/img}}" alt="{{item.title}}"> {{/item.firstimage}} </div> <div class="item-details"> <h4 class="item-title"> <a href="{{item.url}}">{{item.title}}</a> </h4> {{#is_variant}} <p class="variant-info">{{variant_name}}</p> {{/is_variant}} <div class="item-pricing"> <span class="item-price">{{item.price}}</span> <span class="item-qty">× {{qty}}</span> <span class="item-total">{{amount}}</span> </div> </div> </div> {{/basket.items}}
Cart Item Properties When looping through basket.items, each item has these properties:
Property Type Description item.idString Product ID item.skuString Product article number item.urlString Product link address item.titleString Product title item.firstimageString Product image is_variantBoolean True if it’s a product variant variant_nameString Variant designation item.priceString Product unit price qtyNumber Quantity of product added to cart amountString Product total amount (unit price x quantity)
Checkout Integration Paylink Usage The paylink provides the correct checkout URL when the cart is not empty:
{{^basket.isEmpty}} <div class="checkout-section"> <div class="checkout-summary"> <h3>{{#lang}}Ready to checkout?{{/lang}}</h3> <p>{{basket.items_count}} {{#lang}}items{{/lang}} • {{basket.total_amount}}</p> </div> <a href="{{paylink}}" class="main-checkout-btn"> {{#lang}}Secure Checkout{{/lang}} </a> <div class="checkout-security"> <i class="icon-shield"></i> <span>{{#lang}}SSL Secure Checkout{{/lang}}</span> </div> </div> {{/basket.isEmpty}} Mini Cart Examples Slide-out Cart <div class="mini-cart-overlay"> <div class="mini-cart"> <div class="mini-cart-header"> <h3>{{#lang}}Shopping Cart{{/lang}}</h3> <button class="close-cart" aria-label="{{#lang}}Close cart{{/lang}}">×</button> </div> <div class="mini-cart-body"> {{#basket.isEmpty}} <div class="empty-cart-message"> <i class="icon-shopping-cart"></i> <p>{{#lang}}Your cart is empty{{/lang}}</p> <a href="/" class="continue-shopping"> {{#lang}}Continue Shopping{{/lang}} </a> </div> {{/basket.isEmpty}} {{^basket.isEmpty}} <div class="cart-items-list"> {{#basket.items}} <div class="mini-cart-item"> <div class="item-image"> {{#item.firstimage}} <img src="{{#img}}{{item.firstimage}}_60x60{{/img}}" alt="{{item.title}}"> {{/item.firstimage}} </div> <div class="item-info"> <h4><a href="{{item.url}}">{{item.title}}</a></h4> {{#is_variant}}<p class="variant">{{variant_name}}</p>{{/is_variant}} <div class="item-meta"> <span class="quantity">{{qty}}</span> <span class="price">{{item.price}}</span> </div> </div> <div class="item-total">{{amount}}</div> </div> {{/basket.items}} </div> {{/basket.isEmpty}} </div> {{^basket.isEmpty}} <div class="mini-cart-footer"> <div class="cart-summary"> <div class="subtotal"> <span>{{#lang}}Subtotal{{/lang}} ({{basket.items_count}} {{#lang}}items{{/lang}})</span> <span class="amount">{{basket.total_amount}}</span> </div> </div> <div class="cart-actions"> <a href="/cart" class="view-cart-btn"> {{#lang}}View Cart{{/lang}} </a> <a href="{{paylink}}" class="checkout-btn"> {{#lang}}Checkout{{/lang}} </a> </div> </div> {{/basket.isEmpty}} </div> </div> Cart Page Template <div class="cart-page"> <h1>{{#lang}}Shopping Cart{{/lang}}</h1> {{#basket.isEmpty}} <div class="empty-cart"> <div class="empty-cart-content"> <i class="icon-shopping-cart-empty"></i> <h2>{{#lang}}Your cart is empty{{/lang}}</h2> <p>{{#lang}}Looks like you haven't added anything to your cart yet{{/lang}}</p> <a href="/" class="continue-shopping-btn"> {{#lang}}Start Shopping{{/lang}} </a> </div> </div> {{/basket.isEmpty}} {{^basket.isEmpty}} <div class="cart-content"> <div class="cart-items-section"> <h2>{{#lang}}Cart Items{{/lang}} ({{basket.items_count}})</h2> <div class="cart-items"> {{#basket.items}} <div class="cart-item"> <div class="item-image"> {{#item.firstimage}} <img src="{{#img}}{{item.firstimage}}_150x150{{/img}}" alt="{{item.title}}"> {{/item.firstimage}} </div> <div class="item-details"> <h3><a href="{{item.url}}">{{item.title}}</a></h3> <p class="item-sku">{{#lang}}SKU{{/lang}}: {{item.sku}}</p> {{#is_variant}} <p class="item-variant">{{variant_name}}</p> {{/is_variant}} <div class="item-price"> <span class="unit-price">{{item.price}}</span> <span class="quantity-label">× {{qty}}</span> </div> </div> <div class="item-total"> <span class="total-price">{{amount}}</span> </div> </div> {{/basket.items}} </div> </div> <div class="cart-summary-section"> <div class="cart-totals"> <h3>{{#lang}}Order Summary{{/lang}}</h3> <div class="totals-line"> <span>{{#lang}}Subtotal{{/lang}} ({{basket.items_count}} {{#lang}}items{{/lang}})</span> <span>{{basket.total_amount}}</span> </div> <div class="totals-line total"> <span>{{#lang}}Total{{/lang}}</span> <span>{{basket.total_amount}}</span> </div> <div class="checkout-actions"> <a href="{{paylink}}" class="checkout-button"> {{#lang}}Proceed to Checkout{{/lang}} </a> <a href="/" class="continue-shopping"> {{#lang}}Continue Shopping{{/lang}} </a> </div> </div> </div> </div> {{/basket.isEmpty}} </div> Mobile Cart Examples Mobile Cart Badge <div class="mobile-cart-badge"> <a href="/cart" class="cart-link"> <div class="cart-icon-wrapper"> <i class="icon-shopping-bag"></i> {{^basket.isEmpty}} <span class="cart-count-badge">{{basket.items_count}}</span> {{/basket.isEmpty}} </div> <div class="cart-info"> <span class="cart-label">{{#lang}}Cart{{/lang}}</span> {{^basket.isEmpty}} <span class="cart-total">{{basket.total_amount}}</span> {{/basket.isEmpty}} {{#basket.isEmpty}} <span class="cart-empty">{{#lang}}Empty{{/lang}}</span> {{/basket.isEmpty}} </div> </a> </div> Best Practices
Empty State Handling Always provide meaningful empty cart states with clear calls-to-action
Performance Use image optimization with the {{#img}} wrapper for cart item thumbnails
Accessibility Include proper ARIA labels and semantic HTML for cart interactions
Mobile First Design cart widgets to work well on all screen sizes
Common Patterns Cart Item Counter <div class="cart-counter"> {{#basket.isEmpty}} <span class="counter-text">{{#lang}}Cart{{/lang}}</span> {{/basket.isEmpty}} {{^basket.isEmpty}} <span class="counter-text"> {{basket.items_count}} {{#lang}}item{{/lang}}{{#basket.items_count}}s{{/basket.items_count}} </span> {{/basket.isEmpty}} </div> Quick Add Success Message <!-- This would typically be shown after adding an item --> {{^basket.isEmpty}} <div class="cart-success-message"> <i class="icon-check-circle"></i> <span>{{#lang}}Item added to cart{{/lang}}</span> <a href="{{paylink}}" class="quick-checkout"> {{#lang}}Checkout now{{/lang}} </a> </div> {{/basket.isEmpty}} Next Steps 