Global Context & Backend Object Schemas

Detailed technical documentation and implementation guide for Global Context & Backend Object Schemas.

Schema Type Activation & Section Data Binding #

In the **JoonWeb Storefront Engine**, `.jw` sections are data-bound components. Declaring the `"type"` property in the root of your `{% rules %}` (or `{% schema %}`) configuration acts as a backend data pipeline trigger.

When the rendering engine executes a section, it evaluates the `"type"` and automatically hydrates the template scope with live e-commerce, editorial, or membership objects from the store database:

```json
{% rules %}
{
  "name": "Featured Products",
  "type": "ProductFeed",
  "settings": [
    { "type": "number", "id": "limit", "label": "Products to show", "default": 8 }
  ],
  "presets": [{ "name": "Featured Products", "category": "Products" }]
}
{% endrules %}
```

### Complete Schema `"type"` Activation Reference

| Schema `"type"` | Activated Objects | Scope & Data Injected |
|---|---|---|
| `"ProductFeed"` | `products` | Product feed array filtered by category, limit, and sort order |
| `"CollectionFeed"` | `collection.items` | Store collections listing with handles, banners, and product counts |
| `"catalogue"` | `catalogue.collections` | Hierarchical tabbed category matrix with nested product cards |
| `"cart"` | `cart` | Active customer cart session with line items, subtotal, and checkout trigger |
| `"BlogFeed"` | `blog.items`, `blog.category`, `blog.itemsCount` | Multi-post blog roll with excerpts, authors, categories, and views |
| `"blog"` / `"blog-post"` | `blog` | Editorial single-article detail scope with media, tags, and related posts |
| `"pricing"` / `"plans"` | `plans` | Membership subscription tiers with pricing, features, and buy triggers |
| `"siteform"` | `block.form` | Dynamic lead capture form with CSRF protection, signature, and CRM fields |
| *(None / Custom)* | `site`, `theme`, `section`, `user`, `query` | Global store context, typography system, customer session, and custom blocks |

Storefront Global Context Objects #

Every `.jw` template, section, and component has access to global storefront context variables:

| Object | Description | Key Properties |
|---|---|---|
| `site` | Store merchant identity and configuration | `site.title`, `site.name`, `site.tagline`, `site.currency`, `site.currency_code`, `site.email`, `site.phone`, `site.address`, `site.social`, `site.url`, `site.id` |
| `theme` | Global design tokens from `theme_config.json` | `theme.colors.color1.value`, `theme.fontStyle.heading`, `theme.fontUnit` |
| `section` | Active section instance scope | `section.id`, `section.settings`, `section.blocks`, `section.order`, `section.blocks_order`, `section.colors` |
| `user` | Logged-in customer account data | `user.id`, `user.username`, `user.email`, `user.mobile`, `user.avatar`, `user.status`, `user.orders`, `user.orders_count`, `user.created` |
| `root` | Root URLs for internal storefront linking | `root.url` (store base path), `root.cdn` (media root) |
| `Property` | Section-level typography styling controls | `Property.title.style['size']`, `['family']`, `['weight']`, `['height']`, `['spacing']` |
| `query` | Associative array of HTTP GET query parameters | `{{ query.page }}`, `{{ query.sort_by }}`, `{{ query.q }}` |
| `current_url` | Full active URL string of the requested page | `https://store.example.com/collections/summer` |
| `isBuilder` | Boolean flag indicating if page is rendered inside visual editor | `{% if isBuilder %}` |
| `page` | Page metadata object | `page.title`, `page.handle`, `page.type` |

1. Product Objects (`product` & `products`) #

The `product` object is available on single product pages (`store-product`), while the `products` array is provided in product feed sections (`"type": "ProductFeed"`) and collection archives.

### Product Object Properties

| Property | Type | Description |
|---|---|---|
| `product.title` | `string` | Product name / headline |
| `product.url` | `string` | Relative product permalink (e.g. `./pure-saffron`) |
| `product.cover` | `string` | Primary CDN thumbnail URL |
| `product.cover_alt` | `string` | Image alternative text |
| `product.images` | `array` | Gallery images array (`value`, `alt`) |
| `product.description` | `string` | Full rich-text HTML description |
| `product.sku` | `string` | Default variant Stock Keeping Unit code |
| `product.sale_price` | `string` | Formatted selling price (e.g. `'2,499.00'`) |
| `product.sale_price_raw` | `float` | Raw numeric selling price (e.g. `2499.00`) |
| `product.price` | `string` | Formatted original MRP compare-at price |
| `product.price_raw` | `float` | Raw numeric MRP compare-at price |
| `product.discount` | `number` | Calculated savings percentage |
| `product.in_stock` | `boolean` | `1` if item is purchasable, `0` if out of stock |
| `product.stock` | `integer` | Available inventory quantity count |
| `product.ribbon` | `string` | Promotional badge label (e.g. `'Best Seller'`, `'Trending'`) |
| `product.default_varient` | `string` | Hash identifier of default variant (for `JWCart.add`) |
| `product.varients` | `string` | Selected variant title / summary |
| `product.options` | `array` | Variant option groups (e.g. Size, Color) |
| `product.variants` | `string` | JSON matrix of variant combinations |
| `product.combinations` | `array` | Array of combination objects with prices and hashes |
| `product.coupons` | `array` | Applicable discount coupons for this product |
| `product.rating` | `float` | Average customer review rating (e.g. `4.8`) |
| `product.reviews_count` | `integer` | Total number of published customer reviews |
| `product.extraprodesc` | `string` | Custom specification tabs content from product modules |
| `product.metafields` | `object` | Storefront custom metafield values |

### Product Card Template Example

```jw
{% for product in products %}
  <div class="col-md-3 mb-4">
    <div class="product-card card h-100 p-3 {{ section.colors2 | default('background5') }}">
      {% if product.ribbon %}
        <span class="badge bg-danger position-absolute top-0 start-0 m-2">{{ product.ribbon }}</span>
      {% endif %}
      
      <a href="{{ product.url }}" class="product-thumb d-block mb-3">
        <img src="{{ product.cover }}" alt="{{ product.cover_alt | default(product.title) }}" class="img-fluid rounded">
      </a>
      
      <h5 class="fontStyle5"><a href="{{ product.url }}" class="text-decoration-none">{{ product.title }}</a></h5>
      
      <div class="pricing d-flex gap-2 align-items-center mb-3">
        <span class="sale-price fontStyle7 fw-bold">{{ site.currency }}{{ product.sale_price }}</span>
        {% if product.price and product.price_raw > product.sale_price_raw %}
          <span class="compare-price fontStyle8 text-muted text-decoration-line-through">{{ site.currency }}{{ product.price }}</span>
        {% endif %}
      </div>

{# 1-Click Add to Cart via JWCart JavaScript API #}
      {% if product.in_stock %}
        <button class="btns btns-sm background1 w-100" onclick="JWCart.add('redirect', '{{ product.default_varient }}', 1)">
          Add to Cart
        </button>
      {% else %}
        <button class="btns btns-sm btn-secondary w-100" disabled>Out of Stock</button>
      {% endif %}
    </div>
  </div>
{% endfor %}
```

2. Shopping Cart Object (`cart`) #

The `cart` object is available on all pages and cart drawer sections (`"type": "cart"`).

### Cart Object Properties

| Property | Type | Description |
|---|---|---|
| `cart.items` | `array` | List of items currently in the customer's cart |
| `cart.subtotal` | `string` | Formatted subtotal amount before discounts |
| `cart.discount` | `string` | Formatted savings amount |
| `cart.tax` | `string` | Calculated tax total |
| `cart.cod` | `string` | Shipping fee / COD charges |
| `cart.total` | `float` | Final payable checkout amount |
| `cart.checkout` | `string` | Pre-rendered attribute string (`data-checkout="..."`) |

### Line Item Properties (`cart.items`)

| Property | Type | Description |
|---|---|---|
| `item.hash` | `string` | Unique line item hash in cart session |
| `item.product_id` | `integer` | Underlying product numeric ID |
| `item.title` | `string` | Product title |
| `item.product_url` | `string` | Product page URL |
| `item.cover` | `string` | Variant / product thumbnail URL |
| `item['cover.alt']` | `string` | Image alternative text |
| `item.varients` | `string` | Selected variant attributes (e.g. `'Size: 1g'`) |
| `item.sale_price` | `float` | Unit price for this line item |
| `item.qty` | `integer` | Selected quantity count |
| `item.stock` | `integer` | Available warehouse inventory |
| `item.addons` | `array` | Custom product configuration attachments |

### Cart Drawer Template Example

```jw
{% if cart.items %}
  <div class="cart-items-wrapper">
    {% for item in cart.items %}
      <div class="cart-item d-flex align-items-center mb-3 pb-3 border-bottom">
        <img src="{{ item.cover }}" class="item-img rounded" width="60" alt="{{ item['cover.alt'] }}">
        <div class="item-details ms-3 flex-grow-1">
          <a href="{{ item.product_url }}" class="item-title fontStyle6 fw-bold text-decoration-none">{{ item.title }}</a>
          <div class="item-variants fontStyle8 text-muted">{{ item.varients }}</div>
          <div class="item-price fontStyle7 fw-bold mt-1">
            {{ site.currency }}{{ item.sale_price * item.qty }}
          </div>
        </div>

{# Quantity Mutation Controls via JWCart.update #}
        <div class="quantity-controls d-flex align-items-center border rounded">
          <button class="btn btn-sm px-2 py-0" onclick="JWCart.update('redirect', '{{ item.hash }}', -1, 'negative', '{{ item.product_id }}')">-</button>
          <span class="px-2 fontStyle8">{{ item.qty }}</span>
          <button class="btn btn-sm px-2 py-0" onclick="JWCart.update('redirect', '{{ item.hash }}', 1, 'positive', '{{ item.product_id }}')">+</button>
        </div>
      </div>
    {% endfor %}
  </div>

<div class="cart-summary mt-4 p-3 background2 rounded">
    <div class="d-flex justify-content-between mb-2"><span>Subtotal:</span><strong>{{ site.currency }}{{ cart.subtotal }}</strong></div>
    {% if cart.discount and cart.discount != '0.00' %}
      <div class="d-flex justify-content-between mb-2 text-success"><span>Savings:</span><strong>-{{ site.currency }}{{ cart.discount }}</strong></div>
    {% endif %}
    <div class="d-flex justify-content-between fontStyle4 mt-2 pt-2 border-top"><span>Total:</span><strong>{{ site.currency }}{{ cart.total }}</strong></div>
    
    {# 1-Click Hosted Checkout Initiation #}
    <a href="javascript:void(0);" id="jwCheckout__nav" class="btns btns-lg background1 w-100 text-center mt-3" {{ cart.checkout }}>
      Proceed to Checkout
    </a>
  </div>
{% else %}
  <div class="empty-cart text-center py-5">
    <p class="fontStyle6">Your shopping bag is empty.</p>
    <a href="{{ root.url }}/collections" class="btns btns-md background1">Explore Catalog</a>
  </div>
{% endif %}
```

3. Collections & Catalogue Objects (`collection` & `catalogue`) #

### Collection Feed (`"type": "CollectionFeed"`)
In collection listing sections, `collection.items` provides the list of merchant collections:

| Property | Type | Description |
|---|---|---|
| `item.title` | `string` | Collection title (e.g. `'Saffron & Spices'`) |
| `item.url` | `string` | Collection archive URL |
| `item.cover` / `item.image` | `string` | Collection banner or thumbnail URL |
| `item.description` | `string` | Collection descriptive synopsis |
| `item.count` | `integer` | Number of active products in this collection |

```jw
<div class="row">
  {% for col in collection.items %}
    <div class="col-md-4 mb-4">
      <a href="{{ col.url }}" class="collection-card d-block text-decoration-none">
        <img src="{{ col.cover }}" alt="{{ col.title }}" class="img-fluid rounded mb-2">
        <h4 class="fontStyle5 text-dark">{{ col.title }}</h4>
        <span class="text-muted fontStyle8">{{ col.count }} Products</span>
      </a>
    </div>
  {% endfor %}
</div>
```

### Tabbed Catalogue Matrix (`"type": "catalogue"`)
Sections with `"type": "catalogue"` inject `catalogue.collections` for multi-tab storefront navigation:

```jw
<ul class="nav nav-tabs">
  {% for key, col in catalogue.collections %}
    <li class="nav-item">
      <button class="nav-link {% if loop.first %}active{% endif %}" data-bs-toggle="tab" data-bs-target="#tab-{{ col.handle }}">
        {{ col.label }}
      </button>
    </li>
  {% endfor %}
</ul>

<div class="tab-content pt-4">
  {% for key, col in catalogue.collections %}
    <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="tab-{{ col.handle }}">
      <div class="row">
        {% for product in col.products %}
          <div class="col-md-3 mb-3">
            <a href="{{ product.url }}" class="text-decoration-none">
              <img src="{{ product.cover }}" class="img-fluid rounded mb-2">
              <h6>{{ product.title }}</h6>
              <strong>{{ site.currency }}{{ product.sale_price }}</strong>
            </a>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endfor %}
</div>
```

4. Editorial Blog Objects (`blog`: Feed vs Single Post) #

The `blog` object operates in two modes depending on section `"type"`:

### Mode A: Multi-Post Feed (`"type": "BlogFeed"`)
In blog listing and recent news sections, `blog.items` contains an array of article previews:

| Property | Type | Description |
|---|---|---|
| `post.title` | `string` | Article headline |
| `post.url` | `string` | Full permalink to article |
| `post.img` | `string` | Cover image URL |
| `post['img.alt']` | `string` | Image alternative text |
| `post.summary` | `string` | Short synopsis |
| `post.description` | `string` | 320-character plain text excerpt |
| `post.article` | `string` | Full article body HTML |
| `post.category` | `string` | Category URL slug |
| `post.categoryName` | `string` | Category display title |
| `post.created` | `string` | Formatted date (e.g. `'12 Oct 2026'`) |
| `post.author` | `string` | Author name |
| `post.views` | `integer` | Total view counter |
| `post.is_featured` | `boolean` | `true` if marked as featured article |

### Mode B: Single Article Detail (`"type": "blog"` / `"blog-post"`)
On individual blog post pages, `blog` represents the active article:

| Property | Type | Description |
|---|---|---|
| `blog.title` | `string` | Article title |
| `blog.url` | `string` | Canonical article URL |
| `blog.media` | `string` | Main hero image URL |
| `blog['media.alt']` | `string` | Image alt text |
| `blog.summary` | `string` | Lead summary text |
| `blog.article` | `string` | Complete rich-text editorial content |
| `blog.author` | `string` | Author name |
| `blog.created` | `string` | Formatted publication date |
| `blog.readtime` | `integer` | Estimated reading duration in minutes |
| `blog.views` | `integer` | View count |
| `blog.share` | `string` | Pre-rendered social share icon links |
| `blog.tags` | `array` | Article tags (`title`, `url`) |
| `blog.related_post` | `array` | Related articles list |
| `blog.popular_post` | `array` | Trending articles list |

```jw
<article class="blog-details py-5">
  <h1 class="fontStyle1">{{ blog.title }}</h1>
  <div class="meta text-muted mb-4 fontStyle8">
    <span>By {{ blog.author }}</span> &bull; 
    <span>{{ blog.created }}</span> &bull; 
    <span>{{ blog.readtime }} min read</span>
  </div>

{% if blog.media %}
    <img src="{{ blog.media }}" alt="{{ blog['media.alt'] }}" class="img-fluid rounded mb-4">
  {% endif %}

<div class="article-content fontStyle7 leading-relaxed">
    {{ blog.article }}
  </div>

{% if blog.tags %}
    <div class="tags mt-4">
      {% for tag in blog.tags %}
        <a href="{{ tag.url }}" class="badge bg-light text-dark me-1 text-decoration-none">#{{ tag.title }}</a>
      {% endfor %}
    </div>
  {% endif %}
</article>
```

5. Pricing & Subscription Plans (`plans`) #

When a section declares `"type": "pricing"` or `"type": "plans"`, the engine injects the `plans` array:

### Plan Object Properties

| Property | Type | Description |
|---|---|---|
| `plan.title` | `string` | Tier name (e.g. `'Starter'`, `'Professional'`) |
| `plan.tagline` | `string` | Plan subtitle description |
| `plan.price` | `float` | Recurring or one-time price float (e.g. `49.00`) |
| `plan.icon` | `string` | Tier badge or icon URL |
| `plan.features` | `array` | Feature list (`title`, `starred`, `info`) |
| `plan.ribbon` | `string` | Highlight ribbon (e.g. `'Most Popular'`) |
| `plan.highlight` | `string` | CSS class `'see-highlight-card'` if recommended |
| `plan.buynow` | `string` | Pre-rendered instant checkout form trigger |

```jw
<div class="row">
  {% for plan in plans %}
    <div class="col-md-4 mb-4">
      <div class="plan-card card p-4 h-100 {{ plan.highlight }}">
        {% if plan.ribbon %}
          <span class="badge bg-primary mb-2 align-self-start">{{ plan.ribbon }}</span>
        {% endif %}
        <h3>{{ plan.title }}</h3>
        <p class="text-muted">{{ plan.tagline }}</p>
        <div class="price fontStyle1 mb-4">{{ site.currency }}{{ plan.price }}</div>
        
        <ul class="features list-unstyled flex-grow-1">
          {% for feature in plan.features %}
            <li class="mb-2 {% if feature.starred %}fw-bold text-primary{% endif %}">
              <i class="fa fa-check me-2 text-success"></i>{{ feature.title }}
            </li>
          {% endfor %}
        </ul>

{{ plan.buynow }}
      </div>
    </div>
  {% endfor %}
</div>
```

6. Customer Account & Members Area (`user`) #

Whenever a customer is authenticated on the store (`{% if user %}`), the `user` object is available across all storefront templates:

### User Object Properties

| Property | Type | Description |
|---|---|---|
| `user.id` | `integer` | Customer unique ID |
| `user.username` | `string` | Customer display username |
| `user.email` | `string` | Customer registered email address |
| `user.mobile` | `string` | Phone number |
| `user.avatar` | `string` | Profile avatar URL |
| `user.status` | `string` | Account status (`'active'`, `'pending'`) |
| `user.orders` | `array` | List of past customer purchase orders |
| `user.orders_count` | `integer` | Total count of placed orders |
| `user.created` | `string` | Member registration date |

```jw
{% if user %}
  <div class="user-greeting d-flex align-items-center">
    {% if user.avatar %}<img src="{{ user.avatar }}" class="rounded-circle me-2" width="32">{% endif %}
    <span>Welcome back, <strong>{{ user.username }}</strong> ({{ user.orders_count }} orders)</span>
    <a href="{{ root.url }}/account" class="btn btn-sm btn-outline-primary ms-3">My Account</a>
  </div>
{% else %}
  <div class="auth-links">
    <a href="{{ root.url }}/login" class="btn btn-sm btn-outline-secondary">Sign In</a>
    <a href="{{ root.url }}/register" class="btn btn-sm btn-primary ms-2">Register</a>
  </div>
{% endif %}
```

7. Dynamic Forms (`siteform`) & Navigation (`section.navigation`) #

### Dynamic Lead Forms (`type: "siteform"`)
JoonWeb form blocks manage CSRF tokens, anti-spam signatures, and CRM field persistence:

```jw
{% for block in section.blocks %}
  {% if block.type == "siteform" and block.form %}
    <form class="jw_dynamic_form p-4 background2 rounded" name="form_v_{{ block.form.id }}">
      <input type="hidden" name="csrf_token" value="{{ block.form.csrf }}">
      <signature style="display:none">{{ block.form.signature }}</signature>
      <input type="hidden" class="_tx_" value="{{ block.form.id }}">

{% for field in block.form.fields %}
        <div class="mb-3">
          <label class="form-label fontStyle8 fw-bold">{{ field.label }}</label>
          {% if field.type == "textarea" %}
            <textarea name="{{ field.name }}" class="form-control fontStyle7" placeholder="{{ field.placeholder }}" {% if field.required == "yes" %}required{% endif %}></textarea>
          {% else %}
            <input type="{{ field.type }}" name="{{ field.name }}" class="form-control fontStyle7" placeholder="{{ field.placeholder }}" {% if field.required == "yes" %}required{% endif %}>
          {% endif %}
        </div>
      {% endfor %}

<button type="submit" class="btns btns-md background1 w-100">
        {{ block.form.submit_label | default('Submit') }}
      </button>
    </form>
  {% endif %}
{% endfor %}
```

### Multi-Level Navigation Architecture (`section.navigation`)
Header and footer navigation menus support multi-level child trees:

```jw
<nav class="navbar-nav">
  {% for menu in section.navigation %}
    {% if menu.children %}
      {# Level 1 Dropdown #}
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="{{ menu.link }}">{{ menu.label }}</a>
        <ul class="dropdown-menu">
          {% for submenu in menu.children %}
            <li>
              <a class="dropdown-item" href="{{ submenu.link }}">
                {% if submenu.icon %}<img src="{{ submenu.icon }}" width="16" class="me-1">{% endif %}
                {{ submenu.label }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </li>
    {% else %}
      <li class="nav-item">
        <a class="nav-link" href="{{ menu.link }}" target="{{ menu.target }}">{{ menu.label }}</a>
      </li>
    {% endif %}
  {% endfor %}
</nav>
```

Last modified: Oct 12, 2026