Basket Object

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

Basic Cart Information

Access the essential cart data for displaying cart status and totals:

<!-- 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}}

<div class="cart-widget">
    <button class="cart-toggle" aria-expanded="false">
        <i class="icon-shopping-cart"></i>
        <span class="cart-label">{{#lang}}Cart{{/lang}}</span>
        {{^basket.isEmpty}}
            <span class="cart-badge">{{basket.items_count}}</span>
        {{/basket.isEmpty}}
    </button>
    
    <div class="cart-dropdown">
        {{#basket.isEmpty}}
            <p class="empty-message">{{#lang}}Your cart is empty{{/lang}}</p>
        {{/basket.isEmpty}}
        
        {{^basket.isEmpty}}
            <div class="cart-items">
                <!-- Cart items will go here -->
            </div>
            <div class="cart-footer">
                <div class="cart-total">
                    {{#lang}}Total{{/lang}}: {{basket.total_amount}}
                </div>
                <a href="{{paylink}}" class="checkout-btn">
                    {{#lang}}Checkout{{/lang}}
                </a>
            </div>
        {{/basket.isEmpty}}
    </div>
</div>

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:

{{#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}}

<table class="cart-table">
    <thead>
        <tr>
            <th>{{#lang}}Product{{/lang}}</th>
            <th>{{#lang}}Price{{/lang}}</th>
            <th>{{#lang}}Quantity{{/lang}}</th>
            <th>{{#lang}}Total{{/lang}}</th>
        </tr>
    </thead>
    <tbody>
        {{#basket.items}}
        <tr class="cart-row">
            <td class="product-cell">
                <div class="product-info">
                    {{#item.firstimage}}
                        <img src="{{#img}}{{item.firstimage}}_80x80{{/img}}" 
                             alt="{{item.title}}" 
                             class="product-thumb">
                    {{/item.firstimage}}
                    
                    <div class="product-details">
                        <h4><a href="{{item.url}}">{{item.title}}</a></h4>
                        <p class="product-sku">{{#lang}}SKU{{/lang}}: {{item.sku}}</p>
                        
                        {{#is_variant}}
                            <p class="variant-details">{{variant_name}}</p>
                        {{/is_variant}}
                    </div>
                </div>
            </td>
            <td class="price-cell">{{item.price}}</td>
            <td class="quantity-cell">{{qty}}</td>
            <td class="total-cell">{{amount}}</td>
        </tr>
        {{/basket.items}}
    </tbody>
    <tfoot>
        <tr class="cart-total-row">
            <td colspan="3">{{#lang}}Total{{/lang}}</td>
            <td class="total-amount">{{basket.total_amount}}</td>
        </tr>
    </tfoot>
</table>

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

Navigation Object

Build dynamic navigation menus and breadcrumbs

Product Object

Learn about displaying individual product information

Order Object

Display order confirmation and thank you page content

Shop Object

Explore store-wide settings and information

Getting Started

Template Language

Global Objects

Page Objects

Basic Cart Information

Available Properties

Cart Items

Cart Item Properties

Checkout Integration

Paylink Usage

Mini Cart Examples

Slide-out Cart

Cart Page Template

Mobile Cart Examples

Mobile Cart Badge

Best Practices

Empty State Handling

Performance

Accessibility

Mobile First

Common Patterns

Cart Item Counter

Quick Add Success Message

Next Steps

Navigation Object

Product Object

Order Object

Shop Object

​Basic Cart Information

​Available Properties

​Cart Items

​Cart Item Properties

​Checkout Integration

​Paylink Usage

​Mini Cart Examples

​Slide-out Cart

​Cart Page Template

​Mobile Cart Examples

​Mobile Cart Badge

​Best Practices

Empty State Handling

Performance

Accessibility

Mobile First

​Common Patterns

​Cart Item Counter

​Quick Add Success Message

​Next Steps

Navigation Object

Product Object

Order Object

Shop Object

Basic Cart Information

Available Properties

Cart Items

Cart Item Properties

Checkout Integration

Paylink Usage

Mini Cart Examples

Slide-out Cart

Cart Page Template

Mobile Cart Examples

Mobile Cart Badge

Best Practices

Common Patterns

Cart Item Counter

Quick Add Success Message

Next Steps