@zohofinance/commerce 1.0.0 → 1.1.0

package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/reference/tags.md

@@ -0,0 +1,259 @@
+---
+title: "Tags"
+weight: 12
+---
+
+# Tags
+
+Tags create logic and control flow in templates. They are wrapped in `{% %}` delimiters and do not produce visible output on their own.
+
+---
+
+## Control Flow
+
+### if / elsif / else
+
+```liquid
+{% if product.available %}
+  <button>Add to Cart</button>
+{% elsif product.coming_soon %}
+  <button disabled>Coming Soon</button>
+{% else %}
+  <span>Sold Out</span>
+{% endif %}
+```
+
+### unless
+
+Executes the block if the condition is **false** (opposite of `if`):
+
+```liquid
+{% unless product.available %}
+  <span>Sold Out</span>
+{% endunless %}
+```
+
+### case / when
+
+```liquid
+{% case section.settings.layout %}
+  {% when "grid" %}
+    <span>Grid view</span>
+  {% when "list" %}
+    <span>List view</span>
+  {% else %}
+    <span>Default layout</span>
+{% endcase %}
+```
+
+---
+
+## Iteration
+
+### for
+
+Loops through arrays and collections:
+
+```liquid
+{% for product in collection.products %}
+  <div class="product">
+    <h3>{{ product.title }}</h3>
+    <p>{{ product.price }}</p>
+  </div>
+{% endfor %}
+```
+
+#### for Parameters
+
+| Parameter | Description | Example |
+|-----------|-------------|---------|
+| `limit` | Max iterations | `{% for item in array limit: 5 %}` |
+| `offset` | Skip first N items | `{% for item in array offset: 2 %}` |
+| `reversed` | Reverse order | `{% for item in array reversed %}` |
+
+#### forloop Object
+
+Available inside every `for` loop:
+
+| Property | Description |
+|----------|-------------|
+| `forloop.index` | Current index (1-based) |
+| `forloop.index0` | Current index (0-based) |
+| `forloop.first` | `true` on first iteration |
+| `forloop.last` | `true` on last iteration |
+| `forloop.length` | Total number of items |
+| `forloop.rindex` | Reverse index (1-based) |
+
+```liquid
+{% for product in collection.products %}
+  <div class="product {% if forloop.first %}first{% endif %}">
+    <span>{{ forloop.index }} of {{ forloop.length }}</span>
+    {{ product.title }}
+  </div>
+{% endfor %}
+```
+
+### for / else
+
+The `else` block runs when the array is empty:
+
+```liquid
+{% for product in collection.products %}
+  {{ product.title }}
+{% else %}
+  <p>No products found.</p>
+{% endfor %}
+```
+
+### Range Loops
+
+```liquid
+{% for i in (1..5) %}
+  <span>{{ i }}</span>
+{% endfor %}
+<!-- Output: 1 2 3 4 5 -->
+```
+
+---
+
+## Variable Tags
+
+### liquid
+
+Allows writing multiple Liquid statements without repeating `{% %}` delimiters:
+
+```liquid
+{% liquid
+  assign product_title = product.title | upcase
+  assign show_sale = product.on_sale
+%}
+```
+
+Useful for complex logic that would otherwise require many separate tags. Each statement goes on its own line without `{% %}`.
+
+### assign
+
+Creates a new variable:
+
+```liquid
+{% assign greeting = "Hello" %}
+{% assign full_name = customer.first_name | append: " " | append: customer.last_name %}
+{{ greeting }}, {{ full_name }}
+```
+
+### capture
+
+Captures a block of content into a variable:
+
+```liquid
+{% capture product_card %}
+  <div class="card">
+    <h3>{{ product.title }}</h3>
+    <p>{{ product.price }}</p>
+  </div>
+{% endcapture %}
+
+{{ product_card }}
+```
+
+### increment / decrement
+
+Creates and modifies a counter:
+
+```liquid
+{% increment counter %}  <!-- 0 -->
+{% increment counter %}  <!-- 1 -->
+{% increment counter %}  <!-- 2 -->
+
+{% decrement counter %}  <!-- -1 -->
+{% decrement counter %}  <!-- -2 -->
+```
+
+> `increment` and `decrement` create their own independent counters that don't affect variables created by `assign`.
+
+---
+
+## Template Tags
+
+### render
+
+Includes a snippet file. Variables must be passed explicitly:
+
+```liquid
+{% render 'product-card', product: item, show_price: true %}
+```
+
+> Snippets have isolated scope — they cannot access parent template variables.
+
+### sections
+
+Renders a named section group (Zoho Commerce-specific tag — not standard Liquid). Used in layouts to render the header and footer groups defined by their corresponding JSON files in `sections/`:
+
+```liquid
+{% sections 'header-group' %}
+{% sections 'footer-group' %}
+```
+
+> See [Layouts](/layouts/) for how section groups work and how their JSON files are structured.
+
+### schema
+
+Defines section settings (JSON, once per section file):
+
+```liquid
+{% schema %}
+{
+  "name": "My Section",
+  "settings": [
+    { "type": "text", "id": "title", "label": "Title", "default": "Hello" }
+  ]
+}
+{% endschema %}
+```
+
+### comment
+
+Content inside is not rendered:
+
+```liquid
+{% comment %}
+  This is a developer note. It won't appear in the HTML output.
+{% endcomment %}
+```
+
+---
+
+## Output Control
+
+### raw
+
+Outputs Liquid syntax as plain text without processing:
+
+```liquid
+{% raw %}
+  {{ this.will.not.be.processed }}
+{% endraw %}
+```
+
+### Whitespace Control
+
+Add `-` to tag delimiters to strip whitespace:
+
+```liquid
+{%- assign name = "World" -%}
+Hello, {{ name }}!
+```
+
+Without `-`, extra blank lines appear in the output. Use whitespace control in loops and conditionals to keep HTML clean.
+
+---
+
+## Tag Quick Reference
+
+| Category | Tags |
+|----------|------|
+| **Control Flow** | `if`, `elsif`, `else`, `endif`, `unless`, `endunless`, `case`, `when`, `endcase` |
+| **Iteration** | `for`, `endfor`, `else` (empty), `break`, `continue` |
+| **Variables** | `liquid`, `assign`, `capture`, `endcapture`, `increment`, `decrement` |
+| **Template** | `render`, `sections` (Zoho-specific), `schema`, `endschema`, `comment`, `endcomment` |
+| **Output** | `raw`, `endraw`, whitespace control (`-`) |

package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/zcommerce-docs/sections.md

@@ -0,0 +1,203 @@
+---
+title: "Sections"
+weight: 5
+---
+
+# Sections
+
+Sections are reusable, configurable content modules. Each section is a `.liquid` file in the `sections/` folder with a JSON schema that defines settings and blocks.
+
+## Section Structure
+
+```liquid
+<section class="banner-section">
+  {% assign img = section.settings.banner_image %}
+  {% if img.url != blank %}
+    <img src="{{ img.url | asset_url }}" alt="{{ img.alt_text }}" loading="lazy"
+      style="filter: {{ img.filters.filter }}; opacity: {{ img.filters.opacity }};">
+  {% endif %}
+
+  <div class="banner-content">
+    {% for block in section.blocks %}
+      {% case block.type %}
+        {% when 'heading' %}
+          <h2 {{ block.zcommerce_attributes }}>{{ block.settings.heading }}</h2>
+        {% when 'sub-heading' %}
+          <p {{ block.zcommerce_attributes }}>{{ block.settings.sub_heading }}</p>
+        {% when 'button' %}
+          <a href="{{ block.settings.button_link.handle }}" class="btn" {{ block.zcommerce_attributes }}>
+            {{ block.settings.button_label }}
+          </a>
+      {% endcase %}
+    {% endfor %}
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "t:sections.banner.name",
+  "category": "Banner",
+  "tag": "section",
+  "class": "section banner-section",
+  "available_in": {"templates": ["index", "collection", "category"]},
+  "settings": [
+    {
+      "type": "image_picker",
+      "id": "banner_image",
+      "label": "t:sections.banner.settings.banner_image.label",
+      "default": { "url": "home_banner.webp", "enable_customisation": true },
+      "meta": "desktop"
+    },
+    {
+      "type": "preview_layout",
+      "id": "content_alignment",
+      "label": "t:sections.banner.settings.content_alignment.label",
+      "options": [
+        { "value": "left",   "label": "t:sections.banner.settings.content_alignment.options.left" },
+        { "value": "center", "label": "t:sections.banner.settings.content_alignment.options.center" },
+        { "value": "right",  "label": "t:sections.banner.settings.content_alignment.options.right" }
+      ],
+      "default": { "display_name": "t:sections.banner.settings.content_alignment.default", "value": "left" },
+      "meta": "desktop"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "heading",
+      "name": "t:sections.banner.blocks.heading.name",
+      "settings": [
+        {
+          "type": "text",
+          "id": "heading",
+          "label": "t:sections.banner.blocks.heading.settings.heading.label",
+          "default": "Welcome to Our Store"
+        }
+      ]
+    },
+    {
+      "type": "sub-heading",
+      "name": "t:sections.banner.blocks.sub_heading.name",
+      "settings": [
+        {
+          "type": "text",
+          "id": "sub_heading",
+          "label": "t:sections.banner.blocks.sub_heading.settings.sub_heading.label",
+          "default": "Discover amazing products"
+        }
+      ]
+    },
+    {
+      "type": "button",
+      "name": "t:sections.banner.blocks.button.name",
+      "limit": 2,
+      "settings": [
+        {
+          "type": "text",
+          "id": "button_label",
+          "label": "t:sections.banner.blocks.button.settings.label.label",
+          "default": "Shop Now"
+        },
+        {
+          "type": "url",
+          "id": "button_link",
+          "label": "t:sections.banner.blocks.button.settings.link.label",
+          "default": { "display_name": "t:sections.banner.blocks.button.settings.link.default", "handle": "collections/all-products" }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}
+```
+
+---
+
+## Schema
+
+The `{% schema %}` tag defines the section's configuration. It must contain valid JSON and appears once per section file.
+
+### Top-Level Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `name` | string | Display name in the theme editor (use `t:` prefix for translations) |
+| `category` | string | Section category for grouping in admin |
+| `tag` | string | HTML element for wrapper (default: `div`) |
+| `class` | string | CSS class(es) for section wrapper |
+| `available_in` | object | Templates where section can be used |
+| `settings` | array | Section-level settings (see [Schema Types](./reference/schema-types)) |
+| `blocks` | array | Repeatable content modules within the section |
+| `limit` | number | Maximum instances of this section per page |
+
+---
+
+## Blocks
+
+Blocks are repeatable items inside a section. Each block has its own type, name, and settings.
+
+### Block Schema
+
+```json
+{
+  "type": "heading",
+  "name": "t:sections.banner.blocks.heading.name",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "t:sections.banner.blocks.heading.settings.heading.label",
+      "default": "Welcome to Our Store"
+    }
+  ]
+}
+```
+
+Common block types used in themes include: `heading`, `sub-heading`, `button`, `image`, `description`.
+
+**Field type rule:** heading/title blocks use `type: "text"` settings only. Description/content blocks use `type: "richtext"`. Never use `richtext` for heading blocks.
+
+### Rendering Blocks
+
+```liquid
+{% for block in section.blocks %}
+  {% case block.type %}
+    {% when 'heading' %}
+      <h2 {{ block.zcommerce_attributes }}>{{ block.settings.heading }}</h2>
+    {% when 'sub-heading' %}
+      <p {{ block.zcommerce_attributes }}>{{ block.settings.sub_heading }}</p>
+    {% when 'button' %}
+      <a href="{{ block.settings.button_link.handle }}" {{ block.zcommerce_attributes }}>
+        {{ block.settings.button_label }}
+      </a>
+  {% endcase %}
+{% endfor %}
+```
+
+### Block Variables
+
+| Variable | Description |
+|----------|-------------|
+| `block.type` | The block's type identifier |
+| `block.settings` | Object containing the block's setting values |
+| `block.zcommerce_attributes` | Required HTML attributes for Zoho Commerce editor interaction |
+
+> **Important:** Always include `{{ block.zcommerce_attributes }}` on the block's outermost HTML element. This enables drag-and-drop and inline editing in the theme editor.
+
+---
+
+## Accessing Section Settings
+
+```liquid
+<!-- Section-level setting -->
+{{ section.settings.title }}
+
+<!-- Block setting inside a loop -->
+{% for block in section.blocks %}
+  {{ block.settings.heading }}
+{% endfor %}
+
+<!-- Accessing select/radio values -->
+{{ section.settings.layout_style.value }}
+```
+
+For a complete list of available setting types, defaults, and output formats, see [Schema Types](./reference/schema-types).