> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Basket Object

> Access shopping cart data, items, and checkout functionality

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.

<Info>
  **Usage**: Available globally - use anywhere to display cart contents, totals, and checkout links
</Info>

## Basic Cart Information

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

<CodeGroup>
  ```mustache Cart Overview theme={null}
  <!-- 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}}
  ```

  ```mustache Cart Header Widget theme={null}
  <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>
  ```
</CodeGroup>

## 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:

<CodeGroup>
  ```mustache Basic Cart Items theme={null}
  {{#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}}
  ```

  ```mustache Detailed Cart Table theme={null}
  <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>
  ```
</CodeGroup>

### 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:

<CodeGroup>
  ```mustache Checkout Integration theme={null}
  {{^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}}
  ```
</CodeGroup>

## Mini Cart Examples

### Slide-out Cart

<CodeGroup>
  ```mustache Slide-out Mini Cart theme={null}
  <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>
  ```
</CodeGroup>

### Cart Page Template

<CodeGroup>
  ```mustache Full Cart Page theme={null}
  <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>
  ```
</CodeGroup>

## Mobile Cart Examples

### Mobile Cart Badge

<CodeGroup>
  ```mustache Mobile Cart Badge theme={null}
  <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>
  ```
</CodeGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Empty State Handling" icon="circle-xmark">
    Always provide meaningful empty cart states with clear calls-to-action
  </Card>

  <Card title="Performance" icon="gauge">
    Use image optimization with the `{{#img}}` wrapper for cart item thumbnails
  </Card>

  <Card title="Accessibility" icon="universal-access">
    Include proper ARIA labels and semantic HTML for cart interactions
  </Card>

  <Card title="Mobile First" icon="mobile">
    Design cart widgets to work well on all screen sizes
  </Card>
</CardGroup>

## Common Patterns

### Cart Item Counter

<CodeGroup>
  ```mustache Dynamic Cart Counter theme={null}
  <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>
  ```
</CodeGroup>

### Quick Add Success Message

<CodeGroup>
  ```mustache Add to Cart Success theme={null}
  <!-- 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}}
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Navigation Object" icon="bars" href="/theme-development/global/navigation">
    Build dynamic navigation menus and breadcrumbs
  </Card>

  <Card title="Product Object" icon="box" href="/theme-development/pages/product">
    Learn about displaying individual product information
  </Card>

  <Card title="Order Object" icon="receipt" href="/theme-development/pages/order">
    Display order confirmation and thank you page content
  </Card>

  <Card title="Shop Object" icon="store" href="/theme-development/global/shop">
    Explore store-wide settings and information
  </Card>
</CardGroup>