Converting Static HTML to Dynamic .jw Sections

Overview: The 5-Step Section Conversion Workflow #

Converting static HTML into a fully dynamic, merchant-editable JoonWeb section requires 5 straightforward steps: 1. **Identify Editable Elements**: Determine which headings, images, links, and collections should be configurable in the Site Builder. 2. **Implement Scoped CSS**: Namespace all styles with `#{{ section.id }}` to prevent CSS bleed and respect the `{ #` spacing rule. 3. **Bind JW Variables & Dynamic Objects**: Replace static copy with `{{ section.settings.* }}`, `{{ site.currency }}`, and `JWCart` methods. 4. **Render Dynamic Blocks**: Wrap repetitive cards or columns in `{% for block in section.blocks %}` with `{{ jw_attributes(block) }}`. 5. **Attach Embedded {% rules %}**: Define the JSON schema blueprint with settings, blocks, and default presets.

Step 1: Start with Static HTML & Bootstrap 5.3 #

Here is a static Bootstrap 5.3 feature section before conversion: ```html <!-- Static HTML Example --> <section class="features-section py-5 bg-light" id="features"> <div class="container"> <div class="text-center mb-5"> <h2 class="fw-bold">Why Shop With Us</h2> <p class="text-muted">Premium quality guaranteed with every order</p> </div> <div class="row g-4"> <div class="col-md-4"> <div class="card p-4 text-center border-0 shadow-sm"> <img src="/images/shipping.svg" class="mb-3 mx-auto" width="48"> <h4>Fast Express Shipping</h4> <p class="text-muted">Dispatched within 24 hours.</p> </div> </div> </div> </div> </section> ```

Step 2: Add Scoped Styles & Responsive Padding #

Add scoped styles using `#{{ section.id }}`. ⚠️ **Crucial Invariant**: Always ensure there is a whitespace between `{` and `#` (e.g. `{ #{{ section.id }}`) so the JW Engine does not mistake it for a comment tag (`{#`): ```jw <style> /* Border radius for cards */ {% if section.desktop.borderRadius %} #{{ section.id }} .feature-card { border-radius: {{ section.desktop.borderRadius }}px; } {% endif %} /* Responsive padding */ #{{ section.id }} { padding-top: {{ section.mobile.deskPaddingTop | default(40) }}px; padding-bottom: {{ section.mobile.deskPaddingBottom | default(40) }}px; } @media screen and (min-width: 750px) { #{{ section.id }} { padding-top: {{ section.desktop.deskPaddingTop | default(80) }}px; padding-bottom: {{ section.desktop.deskPaddingBottom | default(80) }}px; } } </style> ```

Step 3: Convert Static Markup into Dynamic JW Template #

Replace static text with JW template expressions and block iterations: ```jw <section class="jw_section section-padding {{ section.colors ? section.colors : 'background5' }}" id="{{ section.id }}"> <div class="{{ section.desktop.sectionWidth ? section.desktop.sectionWidth : 'container' }}"> {# Section Heading #} {% if section.settings.heading %} <div class="text-center mb-5"> <h2 class="fontStyle2 mb-2">{{ section.settings.heading }}</h2> {% if section.settings.subheading %} <p class="fontStyle7 text-muted">{{ section.settings.subheading }}</p> {% endif %} </div> {% endif %} {# Dynamic Blocks Grid #} {% if section.blocks is defined and section.blocks | length > 0 %} <div class="row g-4"> {% for block in section.blocks %} <div class="col-md-4" {{ jw_attributes(block) }}> {% switch block.type %} {% case "feature_item" %} <div class="feature-card card p-4 text-center border-0 shadow-sm {{ section.colors2 ? section.colors2 : 'background5' }}"> {% if block.settings.icon %} <img src="{{ block.settings.icon | asset_url }}" alt="{{ block.settings.title }}" class="mb-3 mx-auto" style="width: 48px; height: 48px; object-fit: contain;"> {% endif %} <h4 class="fontStyle4 mb-2">{{ block.settings.title }}</h4> <p class="fontStyle8 text-muted mb-0">{{ block.settings.description }}</p> </div> {% default %} {{ render_block(block) }} {% endswitch %} </div> {% endfor %} </div> {% endif %} </div> </section> ```

Step 4: Append Embedded {% rules %} JSON Schema #

Place the `{% rules %}` block at the very end of your `.jw` file to register controls with the Site Builder: ```jw {% rules %} { "name": "Feature Highlights", "settings": [ { "type": "text", "id": "heading", "label": "Section Heading", "default": "Why Shop With Us" }, { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Premium quality guaranteed with every order" }, { "type": "range", "id": "borderRadius", "label": "Card Border Radius", "min": 0, "max": 30, "step": 2, "unit": "px", "default": 12 } ], "blocks": [ { "type": "feature_item", "name": "Feature Item", "settings": [ { "type": "image_picker", "id": "icon", "label": "Feature Icon" }, { "type": "text", "id": "title", "label": "Title", "default": "Fast Shipping" }, { "type": "textarea", "id": "description", "label": "Description", "default": "Dispatched within 24 hours." } ] }, { "type": "themes" }, { "type": "apps" } ], "presets": [ { "name": "Feature Highlights", "category": "Promotional", "blocks": [ { "type": "feature_item", "settings": { "title": "Fast Shipping", "description": "Dispatched within 24 hours." } }, { "type": "feature_item", "settings": { "title": "Secure Payments", "description": "100% encrypted checkout." } }, { "type": "feature_item", "settings": { "title": "Easy Returns", "description": "7-day hassle-free returns." } } ] } ] } {% endrules %} ```

Step 5: Quality Checklist for JoonWeb Themes #

Before publishing or submitting a section: - [x] **No Forbidden Tags**: Ensure there are zero mentions of external templating engines. Strictly use JW Engine tags. - [x] **Comment Collision Check**: Verified that all `{ #{{ section.id }}` styles have spaces between `{` and `#`. - [x] **Dynamic Click-to-Edit**: `{{ jw_attributes(block) }}` is attached to each block container. - [x] **Fallback Block Support**: `{{ render_block(block) }}` is called in the `{% default %}` switch branch. - [x] **Universal App Extension Compatibility**: `{"type": "themes"}` and `{"type": "apps"}` are included in `blocks` array. - [x] **Valid JSON Schema**: No trailing commas or invalid JSON syntax in `{% rules %}`.