Connecting Sections to Store Data (Data Binding)

How Sections Bind to Live Storefront Data #

When developing JoonWeb theme sections, components can be static UI elements (such as hero banners configured via `section.settings`), or **dynamic data-bound sections** that display live e-commerce catalog items, blog feeds, or shopping cart drawers. JoonWeb enables this through **Schema Data Binding**. By adding the `"type"` key to the root of your section's `{% rules %}` JSON schema, the backend engine automatically queries the store database and injects live objects directly into the section template scope: ```json {% rules %} { "name": "Featured Products Grid", "type": "ProductFeed", "settings": [ { "type": "text", "id": "heading", "label": "Heading", "default": "Trending Products" }, { "type": "number", "id": "limit", "label": "Products count", "default": 8 } ], "presets": [{ "name": "Featured Products Grid", "category": "Products" }] } {% endrules %} ``` When rendered on the storefront, the engine detects `"type": "ProductFeed"` and automatically hydrates the `products` array with live catalog data.

Complete Section Type & Data Binding Blueprint #

Here is the complete reference of section types and the backend objects they activate: | Schema `"type"` | Injected Template Variables | Primary Section Use Case | |---|---|---| | `"ProductFeed"` | `products` | Product grid, trending slider, recommendation carousel | | `"CollectionFeed"` | `collection.items` | Category cards, featured collections list | | `"catalogue"` | `catalogue.collections` | Multi-tab category browser with nested product cards | | `"cart"` | `cart` | Slide-out cart drawer, cart page template | | `"BlogFeed"` | `blog.items`, `blog.category` | Recent blog news grid, editorial articles carousel | | `"blog"` / `"blog-post"` | `blog` | Editorial single-article detail page with tags and related posts | | `"pricing"` / `"plans"` | `plans` | Membership subscription tiers, pricing comparison table | | `"siteform"` | `block.form` | Dynamic lead generation form with CSRF and CRM integration | | *(None / Custom)* | `site`, `theme`, `section`, `user`, `query` | Hero banner, features grid, FAQ accordion, testimonials |

1. Building a Dynamic Product Grid (type: "ProductFeed") #

To display live store products with images, prices, compare-at discounts, and one-click add to cart, declare `"type": "ProductFeed"`: ```jw {# 1. SECTION WRAPPER #} <section id="jw-section-{{ section.id }}" class="py-5 {{ section.colors | default('background5') }}"> <div class="jw-container" data-id="{{ section.id }}"> {% if section.settings.heading %} <div class="text-center mb-5"> <h2 class="fontStyle2">{{ section.settings.heading }}</h2> {% if section.settings.subheading %} <p class="fontStyle7 text-muted">{{ section.settings.subheading }}</p> {% endif %} </div> {% endif %} {# 2. PRODUCTS LOOP #} <div class="row g-4"> {% for product in products %} <div class="col-lg-3 col-md-4 col-sm-6"> <div class="product-card card h-100 p-3 border rounded shadow-sm"> {% if product.ribbon %} <span class="badge bg-danger position-absolute top-0 start-0 m-3">{{ product.ribbon }}</span> {% endif %} <a href="{{ product.url }}" class="d-block mb-3 text-center"> <img src="{{ product.cover }}" alt="{{ product.cover_alt | default(product.title) }}" class="img-fluid rounded" style="max-height: 220px; object-fit: contain;"> </a> <h5 class="fontStyle5 flex-grow-1"> <a href="{{ product.url }}" class="text-decoration-none text-dark">{{ product.title }}</a> </h5> <div class="pricing d-flex gap-2 align-items-center my-3"> <span class="sale-price fontStyle7 fw-bold text-primary">{{ 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 #} {% if product.in_stock %} <button class="btns btns-sm background1 w-100 text-center" onclick="JWCart.add('redirect', '{{ product.default_varient }}', 1)"> Add to Cart </button> {% else %} <button class="btns btns-sm btn-secondary w-100 text-center" disabled>Out of Stock</button> {% endif %} </div> </div> {% endfor %} </div> </div> </section> {# 3. RULES SCHEMA #} {% rules %} { "name": "Featured Products Grid", "type": "ProductFeed", "settings": [ { "type": "text", "id": "heading", "label": "Heading", "default": "Trending Products" }, { "type": "text", "id": "subheading", "label": "Subheading", "default": "Discover our handpicked selections" }, { "type": "number", "id": "limit", "label": "Products to show", "default": 8 } ], "presets": [{ "name": "Featured Products Grid", "category": "Products" }] } {% endrules %} ```

2. Building an Interactive Cart Drawer (type: "cart") #

To create a slide-out cart drawer or mini-cart, set `"type": "cart"` in your rules. This injects the `cart` object with all active line items and summary totals: ```jw {# Cart Drawer Section Template #} <div id="cart-drawer-{{ section.id }}" class="cart-drawer offcanvas offcanvas-end" tabindex="-1"> <div class="offcanvas-header border-bottom"> <h5 class="offcanvas-title fontStyle4">Your Shopping Cart</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body d-flex flex-column"> {% if cart.items %} <div class="cart-items flex-grow-1 overflow-auto"> {% for item in cart.items %} <div class="cart-item d-flex align-items-center mb-3 pb-3 border-bottom"> <img src="{{ item.cover }}" width="65" height="65" class="rounded object-fit-cover" alt="{{ item['cover.alt'] }}"> <div class="item-info ms-3 flex-grow-1"> <a href="{{ item.product_url }}" class="fontStyle6 fw-bold text-decoration-none text-dark">{{ item.title }}</a> <div class="fontStyle8 text-muted">{{ item.varients }}</div> <div class="fontStyle7 fw-bold mt-1 text-primary">{{ site.currency }}{{ item.sale_price * item.qty }}</div> </div> {# Quantity Mutation Controls via JWCart.update #} <div class="quantity-control 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> {# Cart Summary & Checkout #} <div class="cart-footer border-top pt-3 mt-3"> <div class="d-flex justify-content-between mb-2"> <span class="fontStyle7">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 class="fontStyle8">Savings:</span> <strong>-{{ site.currency }}{{ cart.discount }}</strong> </div> {% endif %} <div class="d-flex justify-content-between fontStyle4 mb-3 pt-2 border-top"> <span>Total:</span> <strong>{{ site.currency }}{{ cart.total }}</strong> </div> {# 1-Click Hosted Checkout Trigger #} <a href="javascript:void(0);" id="jwCheckout__nav" class="btns btns-lg background1 w-100 text-center" {{ cart.checkout }}> Checkout Now </a> </div> {% else %} <div class="empty-state text-center py-5 my-auto"> <i class="fa fa-shopping-bag fa-3x text-muted mb-3"></i> <p class="fontStyle6">Your shopping cart is currently empty.</p> <a href="{{ root.url }}/collections" class="btns btns-md background1 mt-2">Start Shopping</a> </div> {% endif %} </div> </div> {% rules %} { "name": "Cart Drawer", "type": "cart", "settings": [], "presets": [{ "name": "Cart Drawer", "category": "Cart" }] } {% endrules %} ```

3. Building a Blog News Feed (type: "BlogFeed") #

To display recent news, journal articles, or editorial guides, set `"type": "BlogFeed"`: ```jw <section class="py-5 background5"> <div class="jw-container"> <h2 class="fontStyle2 text-center mb-5">{{ section.settings.title | default("From the Journal") }}</h2> <div class="row g-4"> {% for post in blog.items %} <div class="col-md-4"> <div class="card h-100 border-0 shadow-sm rounded overflow-hidden"> {% if post.img %} <a href="{{ post.url }}"> <img src="{{ post.img }}" class="card-img-top" style="height: 220px; object-fit: cover;" alt="{{ post['img.alt'] }}"> </a> {% endif %} <div class="card-body p-4 d-flex flex-column"> <div class="meta text-muted fontStyle8 mb-2"> <span>{{ post.created }}</span> &bull; <span>{{ post.categoryName }}</span> </div> <h5 class="fontStyle5 mb-2"><a href="{{ post.url }}" class="text-decoration-none text-dark">{{ post.title }}</a></h5> <p class="fontStyle7 text-muted flex-grow-1">{{ post.description }}</p> <a href="{{ post.url }}" class="fontStyle8 fw-bold text-primary text-decoration-none mt-2">Read More &rarr;</a> </div> </div> </div> {% endfor %} </div> </div> </section> {% rules %} { "name": "Blog News Feed", "type": "BlogFeed", "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Latest Stories" } ], "presets": [{ "name": "Blog News Feed", "category": "Blog" }] } {% endrules %} ```

Global Store Context (Available in EVERY Section) #

Even when a section has **no special type** (or custom UI controls), the JoonWeb engine always provides global store variables: | Variable | Description | Common Expressions | |---|---|---| | `site` | Store merchant identity & settings | `{{ site.title }}`, `{{ site.currency }}`, `{{ site.phone }}`, `{{ site.email }}` | | `theme` | Design system configuration tokens | `{{ theme.colors.color1.value }}`, `{{ theme.fontStyle.heading }}` | | `section` | Active section instance metadata | `{{ section.id }}`, `{{ section.settings.heading }}`, `{{ section.blocks }}` | | `user` | Authenticated customer account | `{% if user %}{{ user.username }} ({{ user.orders_count }} orders){% endif %}` | | `query` | URL query parameters | `{{ query.page }}`, `{{ query.sort_by }}` | | `current_url` | Full active page URL | `{{ current_url }}` | | `root` | Root paths for storefront linking | `<a href="{{ root.url }}/collections">Collections</a>` | > [!TIP] > **Complete Property Reference**: For an exhaustive, property-by-property breakdown of every object and model, visit the **[JW Language Storefront Objects Reference](https://joonweb.dev/jw-language/syntax-and-logic/backend-objects)**.