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.isEmpty
Boolean Check if cart is empty basket.items_count
Number Number of items in cart basket.total_amount
String Total amount for items in cart basket.items
Array 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.id
String Product ID item.sku
String Product article number item.url
String Product link address item.title
String Product title item.firstimage
String Product image is_variant
Boolean True if it’s a product variant variant_name
String Variant designation item.price
String Product unit price qty
Number Quantity of product added to cart amount
String 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