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

# Objects and Attributes

> Understanding Mustache objects, attributes, and property access in Quickbutik themes

Objects and attributes form the foundation of Mustache templating in Quickbutik. Understanding how to access and manipulate object properties is essential for building dynamic, data-driven themes using only supported Quickbutik properties.

## What are Objects?

Objects in Mustache are data structures that contain information about your store, products, users, and other entities. Each object has attributes (properties) that hold specific values.

<CodeGroup>
  ```mustache Basic Object Access theme={null}
  <!-- Accessing shop object attributes -->
  <h1>{{shop.name}}</h1>
  <p>{{shop.contact_text}}</p>

  <!-- Accessing product object attributes -->
  <h2>{{product.title}}</h2>
  <p>Price: {{product.price}}</p>
  ```

  ```mustache Nested Object Access theme={null}
  <!-- Accessing nested attributes -->
  <p>{{shop.address}}</p>
  <p>{{shop.city}}, {{shop.zipcode}}</p>

  <!-- Accessing array items -->
  {{#product.images}}
      <img src="{{#img}}{{image}}_400x400{{/img}}" alt="{{alttext}}">
  {{/product.images}}
  ```
</CodeGroup>

## Available Object Types

Quickbutik provides several types of objects you can work with:

### Global Objects

Available on all pages throughout your theme:

| Object     | Description                    | Availability |
| ---------- | ------------------------------ | ------------ |
| `shop`     | Store information and settings | All pages    |
| `user`     | Current user/customer data     | All pages    |
| `basket`   | Shopping cart contents         | All pages    |
| `linklist` | Menu and navigation data       | All pages    |
| `settings` | Theme customization options    | All pages    |
| `seo`      | SEO meta information           | All pages    |

### Page-Specific Objects

Available only on specific page types:

| Object     | Description                   | Available On          |
| ---------- | ----------------------------- | --------------------- |
| `product`  | Individual product data       | Product pages         |
| `category` | Category and product listings | Category pages        |
| `order`    | Order confirmation details    | Order/Thank you pages |
| `blog`     | Blog post and article data    | Blog pages            |
| `page`     | Static page content           | Static pages          |

## Object Property Access

### Dot Notation for Nested Properties

Use dot notation to access nested properties:

<CodeGroup>
  ```mustache Property Access Patterns theme={null}
  <!-- Simple properties -->
  {{shop.name}}
  {{product.title}}
  {{user.login_url}}

  <!-- Nested properties -->
  {{order.customer.email}}
  {{order.customer.firstname}}
  {{order.customer.ship_address}}

  <!-- Settings properties -->
  {{settings.home_elements}}
  ```
</CodeGroup>

### Array Index Access

Access specific array items by their index position:

<CodeGroup>
  ```mustache Array Index Examples theme={null}
  <!-- Access first item (index 0) -->
  {{product.images.0.image}}
  {{linklist.main.0.name}}

  <!-- Access second item (index 1) -->
  {{product.images.1.image}}
  {{shop.cconverter_currencies.1.currency}}

  <!-- Access nested array items -->
  {{linklist.main.0.children.0.name}}
  ```
</CodeGroup>

## Working with Different Property Types

Understanding the different types of data that object properties can contain:

### String Properties

<CodeGroup>
  ```mustache Text Data theme={null}
  <!-- Simple text values -->
  <h1>{{product.title}}</h1>
  <p>{{product.description}}</p>
  <span class="sku">{{product.sku}}</span>
  <p>{{shop.contact_text}}</p>
  ```
</CodeGroup>

### Number Properties

<CodeGroup>
  ```mustache Numeric Data theme={null}
  <!-- Numeric values -->
  <p>Price: {{product.price}}</p>
  <p>Items: {{basket.items_count}}</p>
  <p>Order ID: {{order.id}}</p>
  <p>Quantity: {{qty}}</p>
  ```
</CodeGroup>

### Boolean Properties

<CodeGroup>
  ```mustache Boolean Values theme={null}
  <!-- Boolean properties for conditions -->
  {{#product.soldOut}}
      <span class="sold-out-badge">{{#lang}}Sold Out{{/lang}}</span>
  {{/product.soldOut}}

  {{#product.has_before_price}}
      <span class="sale-badge">{{#lang}}Sale{{/lang}}</span>
  {{/product.has_before_price}}

  {{#user.logged_in}}
      <p>{{#lang}}Welcome back{{/lang}}</p>
  {{/user.logged_in}}

  {{#basket.isEmpty}}
      <p>{{#lang}}Your cart is empty{{/lang}}</p>
  {{/basket.isEmpty}}
  ```
</CodeGroup>

### Array Properties

<CodeGroup>
  ```mustache Array Data theme={null}
  <!-- Arrays of objects -->
  {{#product.images}}
      <img src="{{#img}}{{image}}_400x400{{/img}}" alt="{{alttext}}">
  {{/product.images}}

  <!-- Navigation arrays -->
  {{#linklist.main}}
      <a href="{{url}}" class="nav-link">{{name}}</a>
  {{/linklist.main}}

  <!-- Order items array -->
  {{#order.items}}
      <div class="order-item">
          <h4>{{title}}</h4>
          <p>{{#lang}}Quantity{{/lang}}: {{qty}}</p>
      </div>
  {{/order.items}}
  ```
</CodeGroup>

### Object Properties (Nested Objects)

<CodeGroup>
  ```mustache Nested Objects theme={null}
  <!-- Customer address object -->
  <div class="address">
      <p>{{order.customer.ship_address}}</p>
      <p>{{order.customer.ship_city}}, {{order.customer.ship_zipcode}}</p>
      <p>{{order.customer.ship_country}}</p>
  </div>

  <!-- Settings home elements -->
  {{#settings.home_elements}}
      {{#element}}
          <h2>{{title}}</h2>
          {{#image1_link}}
              <img src="{{#img}}{{image1_link}}_600x400{{/img}}" alt="{{title}}">
          {{/image1_link}}
      {{/element}}
  {{/settings.home_elements}}
  ```
</CodeGroup>

## Common Object Usage Patterns

### Store Information Display

<CodeGroup>
  ```mustache Shop Object Examples theme={null}
  <header class="site-header">
      <h1>{{shop.name}}</h1>
      <a href="{{shop.url}}">{{#lang}}Visit Store{{/lang}}</a>
  </header>

  <div class="contact-info">
      {{#shop.address}}
          <p>{{shop.address}}</p>
          <p>{{shop.zipcode}} {{shop.city}}</p>
      {{/shop.address}}
      
      {{#shop.phone}}
          <p>{{#lang}}Phone{{/lang}}: {{shop.phone}}</p>
      {{/shop.phone}}
      
      {{#shop.contact_text}}
          <div class="contact-content">
              {{&shop.contact_text}}
          </div>
      {{/shop.contact_text}}
  </div>
  ```
</CodeGroup>

### Product Data Management

<CodeGroup>
  ```mustache Product Object Examples theme={null}
  <div class="product-details">
      <h1>{{product.title}}</h1>
      
      <div class="product-price">
          {{#product.has_before_price}}
              <span class="original-price">{{product.before_price}}</span>
          {{/product.has_before_price}}
          <span class="current-price">{{product.price}} {{product.currency}}</span>
      </div>
      
      <div class="product-meta">
          <p>{{#lang}}SKU{{/lang}}: {{product.sku}}</p>
          {{#product.gtin}}
              <p>{{#lang}}EAN{{/lang}}: {{product.gtin}}</p>
          {{/product.gtin}}
          
          <div class="stock-status">
              {{#product.soldOut}}
                  <span class="out-of-stock">
                      {{#shop.soldout_text}}
                          {{shop.soldout_text}}
                      {{/shop.soldout_text}}
                      {{^shop.soldout_text}}
                          {{#lang}}Out of Stock{{/lang}}
                      {{/shop.soldout_text}}
                  </span>
              {{/product.soldOut}}
              {{^product.soldOut}}
                  <span class="in-stock">{{#lang}}Available{{/lang}}</span>
              {{/product.soldOut}}
          </div>
      </div>
      
      {{#product.description}}
          <div class="product-description">
              {{&product.description}}
          </div>
      {{/product.description}}
  </div>
  ```
</CodeGroup>

### User Account Information

<CodeGroup>
  ```mustache User Object Examples theme={null}
  <!-- User authentication status -->
  {{#shop.login_active}}
      {{#user.logged_in}}
          <div class="user-info">
              <p>{{#lang}}Welcome back{{/lang}}</p>
              
              <nav class="user-nav">
                  <a href="{{user.login_url}}">{{#lang}}My Account{{/lang}}</a>
              </nav>
          </div>
      {{/user.logged_in}}

      {{^user.logged_in}}
          <div class="auth-links">
              <a href="{{user.login_url}}">{{#lang}}Login{{/lang}}</a>
          </div>
      {{/user.logged_in}}
  {{/shop.login_active}}
  ```
</CodeGroup>

## Working with Context and Parent Access

When iterating through arrays or working within sections, you may need to access parent object properties:

<CodeGroup>
  ```mustache Parent Context Access theme={null}
  <!-- Access parent product while iterating variants -->
  {{#product.options}}
      <div class="product-option">
          <h4>{{option_title}}</h4>
          {{#option_values}}
              <div class="variant">
                  <span>{{name}}</span>
                  <!-- Access parent product title using ../ -->
                  <p>{{#lang}}For{{/lang}}: {{../../title}}</p>
              </div>
          {{/option_values}}
      </div>
  {{/product.options}}

  <!-- Access global shop info within product loops -->
  {{#related_products}}
      <div class="product-card">
          <h3>{{rp.title}}</h3>
          <p>{{rp.price}}</p>
          <!-- Access global shop currency -->
          <p>{{#lang}}Currency{{/lang}}: {{../shop.name}}</p>
      </div>
  {{/related_products}}
  ```
</CodeGroup>

## Object Property Debugging

When working with objects, you might need to debug what properties are available:

<CodeGroup>
  ```mustache Debug Object Properties theme={null}
  <!-- Check if property exists -->
  {{#product.description}}
      <div class="description">{{&product.description}}</div>
  {{/product.description}}

  {{^product.description}}
      <div class="no-description">{{#lang}}No description available{{/lang}}</div>
  {{/product.description}}

  <!-- Check for images -->
  {{#product.images}}
      <div class="has-images">{{#lang}}Images available{{/lang}}</div>
  {{/product.images}}

  {{^product.images}}
      <div class="no-images">{{#lang}}No images available{{/lang}}</div>
  {{/product.images}}
  ```
</CodeGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Check Property Existence" icon="tag">
    Always check if a property exists before using it to avoid template errors
  </Card>

  <Card title="Understand Object Hierarchy" icon="sitemap">
    Learn the structure of objects to access nested properties efficiently
  </Card>

  <Card title="Handle Missing Data Gracefully" icon="exclamation-triangle">
    Provide fallbacks for optional properties that might not always be present
  </Card>
</CardGroup>

## Common Property Access Mistakes

<Warning>
  **Property Access Errors**: These common mistakes can break your templates:

  1. **Wrong property names**: `{{product.name}}` instead of `{{product.title}}`
  2. **Missing context**: Forgetting `../` when accessing parent properties
  3. **Array confusion**: Using `{{product.images}}` instead of iterating with `{{#product.images}}`
  4. **Case sensitivity**: `{{Product.title}}` instead of `{{product.title}}`
</Warning>

## Advanced Object Patterns

### Conditional Property Display

<CodeGroup>
  ```mustache Smart Property Display theme={null}
  <!-- Show additional info only if it exists -->
  <div class="product-specifications">
      {{#product.supplier_name}}<p><strong>{{#lang}}Supplier{{/lang}}:</strong> {{product.supplier_name}}</p>{{/product.supplier_name}}
      {{#product.supplier_sku}}<p><strong>{{#lang}}Supplier SKU{{/lang}}:</strong> {{product.supplier_sku}}</p>{{/product.supplier_sku}}
      {{#product.gtin}}<p><strong>{{#lang}}EAN{{/lang}}:</strong> {{product.gtin}}</p>{{/product.gtin}}
  </div>
  ```
</CodeGroup>

### Object Property Chaining

<CodeGroup>
  ```mustache Property Chain Examples theme={null}
  <!-- Chain through multiple levels -->
  {{settings.home_elements.element.title}}
  {{order.customer.ship_address}}
  {{product.options.option_values.name}}

  <!-- Safe chaining with existence checks -->
  {{#settings.home_elements}}
      {{#element}}
          {{#title}}
              <h2>{{title}}</h2>
          {{/title}}
          
          {{#page.content}}
              <div class="content">
                  {{&page.content}}
              </div>
          {{/page.content}}
      {{/element}}
  {{/settings.home_elements}}
  ```
</CodeGroup>

## Supported Object Properties Reference

### Shop Object Properties

<CodeGroup>
  ```mustache Shop Properties theme={null}
  <!-- Basic store info -->
  {{shop.name}}
  {{shop.url}}
  {{shop.address}}
  {{shop.zipcode}}
  {{shop.city}}
  {{shop.phone}}
  {{shop.contact_text}}
  {{shop.soldout_text}}

  <!-- Feature flags -->
  {{#shop.cconverter_active}}...{{/shop.cconverter_active}}
  {{#shop.app.languages}}...{{/shop.app.languages}}
  {{#shop.taxtoggle_active}}...{{/shop.taxtoggle_active}}
  {{#shop.login_active}}...{{/shop.login_active}}

  <!-- Currency converter -->
  {{#shop.cconverter_currencies}}
      {{currency}}
      {{#current}}...{{/current}}
  {{/shop.cconverter_currencies}}

  <!-- Languages -->
  {{#shop.languages}}
      {{id}}
      {{url}}
      {{#asset_flags}}{{id}}{{/asset_flags}}
  {{/shop.languages}}

  <!-- Tax toggle -->
  {{#shop.exclude_tax}}...{{/shop.exclude_tax}}
  {{shop.incl_tax_url}}
  {{shop.excl_tax_url}}
  ```
</CodeGroup>

### Product Object Properties

<CodeGroup>
  ```mustache Product Properties theme={null}
  <!-- Basic product info -->
  {{product.title}}
  {{product.id}}
  {{product.sku}}
  {{product.gtin}}
  {{product.price}}
  {{product.price_raw}}
  {{product.before_price}}
  {{product.currency}}
  {{product.description}}

  <!-- Images -->
  {{product.firstimage}}
  {{product.secondimage}}
  {{#product.images}}
      {{image}}
      {{image_id}}
      {{alttext}}
  {{/product.images}}

  <!-- Supplier info -->
  {{product.supplier_name}}
  {{product.supplier_sku}}

  <!-- Status -->
  {{#product.soldOut}}...{{/product.soldOut}}
  {{#product.has_before_price}}...{{/product.has_before_price}}

  <!-- Variants -->
  {{#product.hasOptions}}...{{/product.hasOptions}}
  {{#product.options}}
      {{option_title}}
      {{#option_values}}
          {{id}}
          {{name}}
      {{/option_values}}
  {{/product.options}}

  <!-- Custom data fields -->
  {{product.datafield_1}}
  {{product.datafield_2}}
  <!-- etc. -->
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Conditionals" icon="code-branch" href="/theme-development/conditionals">
    Learn how to use conditional logic with object properties
  </Card>

  <Card title="Wrappers and Functions" icon="function" href="/theme-development/wrappers-and-functions">
    Discover helper functions to manipulate object data
  </Card>

  <Card title="Global Objects" icon="globe" href="/theme-development/global/shop">
    Explore all available global objects in detail
  </Card>

  <Card title="Page Objects" icon="file" href="/theme-development/pages/product">
    Learn about page-specific objects and their properties
  </Card>
</CardGroup>