@zohofinance/commerce 1.0.0 → 1.0.1

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

@@ -0,0 +1,156 @@
+---
+title: "Pages"
+weight: 7
+---
+
+# Pages
+
+Pages define the default section configurations for different page types. They are JSON files in the `pages/` folder that specify which sections appear and in what order.
+
+## Important Note
+
+Zoho Commerce themes use a **single `page.liquid`** template file in the `sections/` folder for all custom pages created in the admin panel. There is no support for individual `pages/*.json` files for custom pages — the JSON files in the `pages/` folder only define default configurations for the built-in page types listed below.
+
+## Supported Page Types
+
+| File | Page Type | Description |
+|------|-----------|-------------|
+| `index.json` | Home | Store homepage |
+| `product.json` | Product | Product detail page |
+| `collection.json` | Collection | Collection listing page |
+| `category.json` | Category | Category listing page |
+| `cart.json` | Cart | Shopping cart |
+| `checkout.json` | Checkout | Checkout page |
+| `search.json` | Search | Search results page |
+| `blog.json` | Blog | Blog post page |
+| `blogs.json` | Blogs | Blog listing page |
+| `signin.json` | Sign In | Login page |
+| `signup.json` | Sign Up | Registration page |
+| `forgotpassword.json` | Password Reset | Password recovery page |
+| `account-profile.json` | Account Profile | Customer profile page |
+| `account-address.json` | Account Addresses | Saved addresses management |
+| `account-order.json` | Account Orders | Order history listing |
+| `account-order-detail.json` | Order Detail | Single order detail view |
+| `account-order-status.json` | Order Status | Order tracking/status page |
+| `account-quote-list.json` | Quote List | Customer quote request history |
+| `account-quote-details.json` | Quote Details | Single quote detail view |
+| `account-quote-request.json` | Quote Request | Submit a new quote request |
+| `account-wishlist.json` | Wishlist | Customer wishlist page |
+| `orders.json` | Orders | Orders overview page |
+| `payment.json` | Payment | Payment confirmation/failure page |
+| `sitemap.json` | Sitemap | XML sitemap page |
+| `page.json` | Custom Pages | Default for all admin-created custom pages |
+| `404.json` | Not Found | 404 error page |
+
+## Page Structure
+
+Each page JSON file declares which sections appear and their default settings:
+
+```json
+{
+  "sections": {
+    "hero": {
+      "type": "hero-banner",
+      "settings": {
+        "title": "Welcome to Our Store"
+      }
+    },
+    "featured": {
+      "type": "featured-products"
+    }
+  },
+  "order": ["hero", "featured"]
+}
+```
+
+### Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `layout` | string | Layout to use: `"theme"` or `"accounts"`. Omit to use the default `theme.liquid`. |
+| `sections` | object | Map of section instances keyed by unique IDs |
+| `order` | array | Array of section IDs defining render order |
+
+Each entry in `sections` must reference a `type` matching a file in the `sections/` folder (without `.liquid`).
+
+---
+
+## Section Instance
+
+```json
+{
+  "hero": {
+    "type": "hero-banner",
+    "settings": {
+      "title": "Summer Sale",
+      "background_color": "#f5f5f5"
+    },
+    "blocks": {
+      "slide_1": {
+        "type": "slide",
+        "settings": {
+          "image": {
+            "url": "summer-banner.webp",
+            "enable_customisation": true
+          },
+          "caption": "Up to 50% off"
+        }
+      }
+    },
+    "block_order": ["slide_1"]
+  }
+}
+```
+
+### Section Instance Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `type` | string | Section filename (without `.liquid`) |
+| `settings` | object | Values matching the section's schema settings |
+| `blocks` | object | Block instances keyed by unique IDs |
+| `block_order` | array | Array of block IDs defining render order |
+
+---
+
+## Account Pages
+
+Account pages (`account-profile.json`, `account-address.json`, `account-order.json`, `account-order-detail.json`, `account-order-status.json`, `account-quote-list.json`, `account-quote-details.json`, `account-quote-request.json`) use `"layout": "accounts"` to load the `accounts.liquid` layout instead of the default `theme.liquid`. This layout is purpose-built for the account area — it renders the `accounts-header` snippet and loads the account-specific scripts required for the Zoho accounts portal.
+
+All account pages share the same structure: an `account-tab-navigation` section (the sidebar/tab nav between Profile, Orders, Addresses, and Quotes) paired with their respective content section:
+
+```json
+{
+  "layout": "accounts",
+  "sections": {
+    "account-tab": {
+      "type": "account-tab-navigation"
+    },
+    "profile": {
+      "type": "account-profile"
+    }
+  },
+  "order": ["account-tab", "profile"]
+}
+```
+
+| Page file | Section type used |
+|-----------|------------------|
+| `account-profile.json` | `account-profile` |
+| `account-address.json` | `account-address` |
+| `account-order.json` | `account-order` |
+| `account-order-detail.json` | `accounts-order-details` |
+| `account-order-status.json` | `account-order-status` |
+| `account-quote-list.json` | `account-quote-list` |
+| `account-quote-details.json` | `accounts-quote-details` |
+| `account-quote-request.json` | `account-quote-request` |
+
+The `account-wishlist.json` and `orders.json` pages use `"layout": "theme"` (the regular layout with header and footer), not the accounts layout.
+
+---
+
+## Custom Pages
+
+All custom pages created through the Zoho Commerce admin panel use the single `page.liquid` section template. The `page.json` file defines the default configuration for these pages.
+
+To create custom page layouts, use section settings and blocks within `page.liquid` to allow store admins to customize the content through the theme editor.

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

@@ -0,0 +1,4 @@
+---
+title: "Reference"
+weight: 10
+---

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

@@ -0,0 +1,419 @@
+---
+title: "Filters"
+weight: 11
+---
+
+# Filters
+
+Filters modify the output of variables. Apply them using the pipe `|` character.
+
+```liquid
+{{ product.title | upcase }}
+{{ "main.css" | asset_url }}
+```
+
+Multiple filters can be chained — they execute left to right.
+
+---
+
+## Zoho Commerce Filters
+
+These filters are specific to Zoho Commerce and extend standard Liquid.
+
+### asset_url
+
+Prepends the CDN URL to asset filenames from the `assets/` folder. Uses `fingerprint.json` for cache busting with versioned filenames.
+
+```liquid
+{{ "main.css" | asset_url }}
+```
+
+**Output:** `https://cdn.example.com/assets/main-585919664682927.css`
+
+```liquid
+<link rel="stylesheet" href="{{ "main.css" | asset_url }}">
+<script src="{{ "header.js" | asset_url }}" defer></script>
+<img src="{{ "logo.png" | asset_url }}" alt="Logo">
+```
+
+**Output:**
+```html
+<link rel="stylesheet" href="https://cdn.example.com/assets/main-585919664682927.css">
+<script src="https://cdn.example.com/assets/header-317103717237078.js" defer></script>
+<img src="https://cdn.example.com/assets/logo-442891003756812.png" alt="Logo">
+```
+
+> **Important:** Use `asset_url` only for files in your theme's `assets/` folder. Pass just the filename (e.g., `"main.css"`), not the full path. The filter looks up the fingerprinted filename and prepends the CDN URL.
+
+### image_url
+
+Returns the URL for an image with optional dimension parameters. Used primarily for product images and other dynamic content.
+
+```liquid
+{{ product.cover_media | image_url }}
+```
+
+**Output:** `https://cdn.example.com/products/product-image.jpg`
+
+```liquid
+{{ product.cover_media | image_url: width: 300, height: 200 }}
+```
+
+**Output:** `https://cdn.example.com/products/product-image.jpg?width=300&height=200`
+
+> **Common Error:** Don't confuse `image_url` with `asset_url`. Use `image_url` for product/collection images from the Zoho Commerce system. Use `asset_url` for static theme assets.
+
+### color_component
+
+Extracts a color channel value from a hex color string.
+
+```liquid
+{{ "#ff5733" | color_component: "red" }}
+{{ "#ff5733" | color_component: "green" }}
+{{ "#ff5733" | color_component: "blue" }}
+```
+
+**Output:**
+- `255`
+- `87`
+- `51`
+
+**Supported components:** `red`, `green`, `blue`, `hue`, `saturation`, `lightness`, `alpha`
+
+### t (translate)
+
+Translates a key using the current locale's i18n file.
+
+```liquid
+{{ "product.add_to_cart" | t }}
+{{ "header.cart" | t }}
+```
+
+**Output:**
+- `Add to Cart`
+- `Cart`
+
+(Values from `i18n/en..json`)
+
+### json
+
+Converts a value to JSON format. Useful for passing data to JavaScript.
+
+```liquid
+<script>
+  var productData = {{ product | json }};
+</script>
+```
+
+**Output:**
+```html
+<script>
+  var productData = {"id":123,"title":"Blue T-Shirt","price":2999,...};
+</script>
+```
+
+### default
+
+Returns a fallback value if the input is nil, empty, or false.
+
+```liquid
+{{ product.description | default: "No description available" }}
+{{ customer.name | default: "Guest" }}
+```
+
+**Output:**
+- `No description available` (if description is empty)
+- `Guest` (if customer name is not set)
+
+---
+
+## String Filters
+
+### append
+
+Appends a string to the end of another string.
+
+```liquid
+{{ "hello" | append: " world" }}
+```
+
+**Output:** `hello world`
+
+### capitalize
+
+Capitalizes the first character.
+
+```liquid
+{{ "hello" | capitalize }}
+```
+
+**Output:** `Hello`
+
+### downcase / upcase
+
+Converts to lowercase or uppercase.
+
+```liquid
+{{ "Hello" | downcase }}
+{{ "hello" | upcase }}
+```
+
+**Output:**
+- `hello`
+- `HELLO`
+
+### strip / lstrip / rstrip
+
+Removes whitespace — all, leading only, or trailing only.
+
+```liquid
+{{ "  hello world  " | strip }}
+{{ "  hello" | lstrip }}
+{{ "hello  " | rstrip }}
+```
+
+**Output:**
+- `hello world`
+- `hello`
+- `hello`
+
+### strip_html
+
+Strips all HTML tags from a string.
+
+```liquid
+{{ "<b>bold</b> and <i>italic</i>" | strip_html }}
+```
+
+**Output:** `bold and italic`
+
+### escape
+
+Escapes HTML entities for safe rendering.
+
+```liquid
+{{ "<p>Hello & welcome</p>" | escape }}
+```
+
+**Output:** `&lt;p&gt;Hello &amp; welcome&lt;/p&gt;`
+
+### url_encode / url_decode
+
+Encodes or decodes a string for use in URLs.
+
+```liquid
+{{ "hello world" | url_encode }}
+{{ "hello+world" | url_decode }}
+```
+
+**Output:**
+- `hello+world`
+- `hello world`
+
+### truncate / truncatewords
+
+Truncates to a character count or word count.
+
+```liquid
+{{ "Hello wonderful world" | truncate: 8 }}
+{{ "one two three four five" | truncatewords: 2 }}
+```
+
+**Output:**
+- `Hello...`
+- `one two...`
+
+### replace / replace_first
+
+Replaces all or the first occurrence of a substring.
+
+```liquid
+{{ "Hello Hello" | replace: "Hello", "Hi" }}
+{{ "aabb" | replace_first: "a", "x" }}
+```
+
+**Output:**
+- `Hi Hi`
+- `xabb`
+
+### remove / remove_first
+
+Removes all or the first occurrence of a substring.
+
+```liquid
+{{ "Hello World" | remove: "l" }}
+{{ "Hello World" | remove_first: "l" }}
+```
+
+**Output:**
+- `Heo Word`
+- `Helo World`
+
+### prepend
+
+Prepends a string to the beginning.
+
+```liquid
+{{ "world" | prepend: "hello " }}
+```
+
+**Output:** `hello world`
+
+### newline_to_br
+
+Replaces newline characters with `<br>` tags.
+
+```liquid
+{% assign text = "Line 1
+Line 2" %}
+{{ text | newline_to_br }}
+```
+
+**Output:** `Line 1<br>Line 2`
+
+### split
+
+Splits a string into an array by a delimiter.
+
+```liquid
+{% assign tags = "red,green,blue" | split: "," %}
+{{ tags[0] }}
+```
+
+**Output:** `red`
+
+### slice
+
+Extracts a substring by offset and length.
+
+```liquid
+{{ "hello world" | slice: 0, 5 }}
+{{ "hello" | slice: 1, 3 }}
+```
+
+**Output:**
+- `hello`
+- `ell`
+
+### strip_newlines
+
+Removes all newline characters from a string.
+
+```liquid
+{% assign text = "Line 1
+Line 2" %}
+{{ text | strip_newlines }}
+```
+
+**Output:** `Line 1Line 2`
+
+---
+
+## Math Filters
+
+| Filter | Example | Result | Description |
+|--------|---------|--------|-------------|
+| `plus` | `3 \| plus: 2` | `5` | Addition |
+| `minus` | `5 \| minus: 2` | `3` | Subtraction |
+| `times` | `3 \| times: 4` | `12` | Multiplication |
+| `divided_by` | `10 \| divided_by: 3` | `3` | Integer division |
+| `modulo` | `10 \| modulo: 3` | `1` | Remainder |
+| `round` | `4.6 \| round` | `5` | Rounds to nearest integer |
+| `ceil` | `4.1 \| ceil` | `5` | Rounds up |
+| `floor` | `4.9 \| floor` | `4` | Rounds down |
+| `abs` | `-5 \| abs` | `5` | Absolute value |
+| `at_most` | `5 \| at_most: 3` | `3` | Limits to maximum |
+| `at_least` | `2 \| at_least: 5` | `5` | Ensures minimum |
+
+---
+
+## Array Filters
+
+### map
+
+Extracts a property from each item in an array.
+
+```liquid
+{{ collection.products | map: "title" | join: ", " }}
+```
+
+### where
+
+Filters array items by a property value.
+
+```liquid
+{% assign available = collection.products | where: "available", true %}
+{% for product in available %}
+  {{ product.title }}
+{% endfor %}
+```
+
+### sort / sort_natural
+
+Sorts alphabetically or case-insensitively.
+
+```liquid
+{% assign sorted = collection.products | sort: "price" %}
+```
+
+### Other Array Filters
+
+| Filter | Description |
+|--------|-------------|
+| `join` | Joins array into a string with separator |
+| `first` | Returns first element |
+| `last` | Returns last element |
+| `size` | Returns element count |
+| `reverse` | Reverses order |
+| `uniq` | Removes duplicates |
+| `compact` | Removes nil values |
+| `concat` | Concatenates two arrays |
+
+---
+
+## Date Filter
+
+The `date` filter formats timestamps.
+
+```liquid
+{{ product.created_at | date: "%B %d, %Y" }}
+```
+
+**Output:** `January 15, 2024`
+
+```liquid
+{{ "now" | date: "%Y-%m-%d" }}
+```
+
+**Output:** `2024-07-15`
+
+### Format Codes
+
+| Code | Output | Example |
+|------|--------|---------|
+| `%Y` | 4-digit year | `2024` |
+| `%m` | Month (01-12) | `07` |
+| `%d` | Day (01-31) | `15` |
+| `%B` | Full month name | `January` |
+| `%b` | Abbreviated month | `Jan` |
+| `%A` | Full weekday | `Monday` |
+| `%a` | Abbreviated weekday | `Mon` |
+| `%H` | Hour 24h (00-23) | `14` |
+| `%I` | Hour 12h (01-12) | `02` |
+| `%M` | Minute (00-59) | `30` |
+| `%S` | Second (00-59) | `45` |
+| `%p` | AM/PM | `PM` |
+
+---
+
+## Quick Reference
+
+| Category | Filters |
+|----------|---------|
+| **Asset** | `asset_url`, `image_url` |
+| **Color** | `color_component` |
+| **Commerce** | `json`, `default`, `t` |
+| **String** | `append`, `capitalize`, `downcase`, `upcase`, `strip`, `truncate`, `replace`, `remove`, `split`, `slice`, `escape`, `url_encode` |
+| **Math** | `plus`, `minus`, `times`, `divided_by`, `modulo`, `round`, `ceil`, `floor`, `abs` |
+| **Array** | `join`, `first`, `last`, `size`, `sort`, `reverse`, `map`, `where`, `uniq`, `compact` |
+| **Date** | `date` |