.jw Template Syntax & Control Flow

Introduction to the JW Template Engine #

The **JW Template Language** is the native, high-performance templating engine powering JoonWeb storefronts, `.jw` theme sections, components, blocks, and app extensions. JW templates blend standard HTML with programming logic, expressions, loops, and visual customizer rules. All `.jw` templates compile directly on high-speed servers with zero runtime framework overhead on the buyer's browser. ### Core Delimiters | Delimiter | Purpose | Example | |---|---|---| | `{{ ... }}` | **Expression Output**: Evaluates expressions, variables, and filters to emit content into HTML. | `{{ product.title }}` | | `{% ... %}` | **Control Flow Tag**: Executes logic structures such as conditionals, loops, assignments, and schema. | `{% if product.in_stock %}` | | `{# ... #}` | **Template Comment**: Stripped completely during compilation; never visible in rendered page source. | `{# Internal notes #}` | ### Whitespace Trimming JW supports whitespace trimming using hyphens inside delimiters: - `{{- variable -}}`: Trims whitespace to the left and right of the output expression. - `{%- tag -%}`: Trims whitespace around logic statements to ensure compact, clean HTML output.

1. Variables & Data Types #

JW templates support all standard data types: - **Strings**: `'Standard text'` or `"Double quoted text"` - **Numbers**: Integers (`42`), Decimals (`19.99`) - **Booleans**: `true` or `false` - **Null**: `null` (evaluates as falsy) - **Arrays (Sequences)**: `['apple', 'banana', 'orange']` - **Hashes (Objects / Key-Value Maps)**: `{'size': 24, 'color': '#0f172a'}` ### Variable Assignment (`{% set %}`) Assign or compute local variables using `{% set %}`: ```jw {% set currency_sign = site.currency | default('₹') %} {% set is_discounted = product.price > product.sale_price %} {% set discount_amount = product.price - product.sale_price %} {% set card_classes = section.colors2 ? section.colors2 : 'background5' %} {% set button_sizes = { "small": "btns-sm", "medium": "btns-md", "large": "btns-lg" } %} {% set btn_class = button_sizes[section.desktop.buttonSize] ?? 'btns-md' %} ```

2. Conditional Branching ({% if %}) #

Execute conditional logic using `{% if %}`, `{% elseif %}`, `{% else %}`, and `{% endif %}`: ```jw {% if product.in_stock and product.sale_price > 0 %} <button class="btn btn-primary" onclick="JWCart.add('redirect', '{{ product.default_varient }}', 1)"> Add to Cart — {{ site.currency }}{{ product.sale_price }} </button> {% elseif product.preorder %} <button class="btn btn-warning">Pre-order Now</button> {% else %} <button class="btn btn-secondary" disabled>Sold Out</button> {% endif %} ``` ### Boolean & Logical Operators - `and`: Logical AND (true if both conditions are truthy) - `or`: Logical OR (true if either condition is truthy) - `not`: Logical NOT (inverts boolean condition) - `()`: Group conditions for explicit precedence: `{% if (has_discount or has_coupon) and in_stock %}` ### Comparison Operators - `==`: Loose equality - `!=`: Inequality - `<` / `>`: Less than / Greater than - `<=` / `>=`: Less than or equal / Greater than or equal - `in`: Checks if a value exists within an array or string: `{% if 'featured' in product.tags %}` - `starts with` / `ends with`: String prefix and suffix matching: `{% if product.url starts with '/collections' %}`

3. Loops & Collection Iteration ({% for %}) #

Iterate over arrays, products, blocks, or dictionaries using `{% for %}`: ```jw <div class="product-grid row g-4"> {% for product in products %} <div class="col-md-4"> <div class="product-card card p-3 {{ section.colors2 ? section.colors2 : 'background5' }}"> <img src="{{ product.cover }}" alt="{{ product.title }}" class="img-fluid rounded"> <h4 class="fontStyle4 mt-2">{{ product.title }}</h4> <span class="price fontStyle7 fw-bold">{{ site.currency }}{{ product.sale_price }}</span> </div> </div> {% else %} <div class="col-12 text-center py-5"> <p class="fontStyle7 text-muted">No products available in this collection.</p> </div> {% endfor %} </div> ``` ### The `loop` Context Object Inside any `{% for %}` block, the special `loop` object provides helpful metadata: | Property | Description | |---|---| | `loop.index` | 1-based current iteration number (`1`, `2`, `3`...) | | `loop.index0` | 0-based current iteration number (`0`, `1`, `2`...) | | `loop.first` | Boolean `true` on the first iteration of the loop | | `loop.last` | Boolean `true` on the final iteration of the loop | | `loop.length` | Total item count in the collection | | `loop.revindex` | Number of iterations from the end (countdown down to `1`) | | `loop.parent` | Accesses the outer loop context when nesting loops |

4. Multi-Branch Switch Statements ({% switch %}) #

When rendering dynamic blocks configured in the JoonWeb Site Builder, use `{% switch %}` to dispatch markup based on `block.type`: ```jw {% for block in section.blocks %} <div class="block-wrapper" {{ jw_attributes(block) }}> {% switch block.type %} {% case "heading" %} <h2 class="fontStyle2">{{ block.settings.title }}</h2> {% case "image_banner" %} <img src="{{ block.settings.image | asset_url }}" class="img-fluid rounded"> {% case "cta_button" %} <a href="{{ block.settings.url.url }}" class="btns btns-md background1"> {{ block.settings.url.label | default('Learn More') }} </a> {% default %} {# Universal fallback rendering for Theme App Extensions and standard blocks #} {{ render_block(block) }} {% endswitch %} </div> {% endfor %} ```

5. Pagination ({% paginate %}) & Verbatim ({% raw %}) #

### Pagination Wrapper Easily paginate product feeds or collection items using `{% paginate %}`: ```jw {% paginate collection.products by 12 %} <div class="row g-4"> {% for product in collection.products %} <div class="col-md-3"> {# Render product item card #} </div> {% endfor %} </div> <div class="pagination-wrapper mt-5 text-center"> {{ paginate | default_pagination }} </div> {% endpaginate %} ``` ### Verbatim Raw Blocks (`{% raw %}`) If your page embeds client-side frontend libraries (such as Vue, Mustache, or Angular) that use double curly braces, wrap them inside `{% raw %}` to prevent the JW Engine from evaluating them: ```jw {% raw %} <div v-for="item in dynamicCartItems"> <span>{{ item.name }}</span> </div> {% endraw %} ```

6. Template Inclusions ({% include %}, {% import %}) #

Organize complex storefront templates into reusable snippets located in `components/` or `blocks/`: ```jw {# Include a reusable component snippet #} {% include 'components/pagination.jw' %} {# Include with local variable scope #} {% include 'components/product-list.jw' with { product: featured_item } %} {# Import macro helper functions #} {% import 'components/breadcrumbs.jw' as breadcrumbs %} ``` > 💡 **Path Rule**: Inclusions must point to paths inside `components/`, `blocks/`, or `sections/`. System directories like `trash/`, `cache/`, or `rules/` are restricted.

7. Operators & Type Tests #

### String Concatenation (`~`) Always use the `~` (tilde) operator to concatenate strings in JW templates: ```jw {% set full_title = store.name ~ " - " ~ page.title %} {% set image_alt = product.title ~ " High Resolution" %} ``` ### Ternary & Null Coalescing Operators - **Ternary**: `{{ section.colors ? section.colors : 'background5' }}` - **Null Coalescing (`??`)**: `{{ section.desktop.borderRadius ?? 12 }}` ### Type Tests (`is`) Test variable states using the `is` keyword: - `is defined` / `is not defined`: Checks if variable exists in scope - `is empty`: Checks if string or array is empty - `is null`: Checks if variable is strictly null - `is even` / `is odd`: Tests numeric parity - `is iterable`: Tests if variable can be traversed in a `{% for %}` loop

8. Essential Section Attributes & CSS Space Invariant #

### Essential Customizer Functions - **`{{ jw_attributes(block) }}`**: Emits DOM attributes for click-to-edit selection and drag-and-drop ordering in the Site Builder. **Always attach to custom block wrappers.** - **`{{ render_block(block) }}`**: Renders installed app extension blocks. **Always place in the `{% default %}` switch branch.** ### ⚠️ The `{ #` CSS Whitespace Rule In scoped section styles, always place a whitespace or newline after `{` before `#{{ section.id }}`: ```css /* ❌ ERROR - Causes "Unclosed comment" parse failure because {# starts comment: */ @media (max-width: 768px) {#{{ section.id }} { padding: 20px; }} /* ✅ CORRECT - Space separates brace from hash selector: */ @media (max-width: 768px) { #{{ section.id }} { padding: 20px; } } ```