Backend Object Schemas

{"markdown":"## 4. Backend Object Schemas (Section Specific)\n\nWhen the AI is asked to generate specific E-commerce, Blog, or Form sections, the platform injects massive data objects. **You MUST use the exact schema variables listed below.**\n\n### 4.1 E-Commerce: Cart Section (`$has_cart`)\n*   **Requirement**: Main wrapper must have class `jw_cart_section` and `id=\"{{section.id}}\"`. Code must be wrapped in `{% if cart.items %} ... {% else %} Empty State {% endif %}`.\n*   **Cart Object Schema**:\n    *   `{{ cart.subtotal }}`\n    *   `{{ cart.discount }}`\n    *   `{{ cart.total }}`\n    *   `{{ cart.checkout }}` (Inject directly into the checkout `<a id=\"jwCheckout__nav\" {{cart.checkout}}>`)\n*   **Cart Items Loop** (`{% for item in cart.items %}`):\n    *   `{{ item.product_url }}`, `{{ item.cover }}`, `{{ item.title }}`, `{{ item.varients }}`, `{{ item.qty }}`\n    *   Price logic: `{{ item.sale_price * item.qty }}` or `{{ item.price * item.qty }}`\n*   **CRITICAL Interactions**: Do NOT alter these functions:\n    *   Increase Qty: `onclick=\"JWCart.update('redirect', '{{item.hash}}', 1, 'positive', '{{item.product_id}}')\"`\n    *   Decrease Qty: `onclick=\"JWCart.update('redirect', '{{item.hash}}', -1, 'negative', '{{item.product_id}}')\"`\n    *   Remove Item: Embed the attribute `{{item.remove}}` into the delete button.\n\n### 4.2 E-Commerce: Product Feed (`type: \"ProductFeed\"`)\n*   **Object Schema** (`{% for product in products %}`):\n    *   `product.hash`: Unique Hash\n    *   `product.default_varient`: Variant ID (Critical for Cart\/Wishlist)\n    *   `product.cover`: Primary Image\n    *   `product.cover.alt`: Alt Text\n    *   `product.media`: Secondary\/Hover Image\n    *   `product.title`, `product.description`, `product.url`\n    *   `product.sale_price`, `product.price`, `product.discount`\n    *   `product.ribbon` (e.g., \"New\", \"Sale\")\n    *   `product.stock`, `product.in_stock` (Boolean)\n*   **Wishlist Action**:\n    ```html\n    <div class=\"jw-wishlist-toggle\" onclick=\"customWishlist('custom', '{{product.default_varient}}', this);\"><\/div>\n    ```\n*   **Add to Cart Action**:\n    ```html\n    <a onclick=\"JWCart.add('redirect', '{{product.default_varient}}', 1)\">Add to Cart<\/a>\n    ```\n\n### 4.3 E-Commerce: Product Catalogue (`type: \"catalogue\"`)\n*   Used for tabs\/categories of products.\n*   **Object Schema** (`{% for key, item in catalogue.collections %}`):\n    *   `item.label`: Collection Title\n    *   `item.cover`: Collection Image\n    *   `item.url`: Collection URL\n    *   `item.handle`: HTML ID for tabs\n    *   `item.products`: Array of product objects (Identical to Product Feed schema above).\n\n### 4.4 E-Commerce: Collection Feed (`type: \"CollectionFeed\"`)\n*   **Object Schema** (`{% for key, item in collection.items %}`):\n    *   `item.title`, `item.url`, `item.cover`, `item['cover.alt']`\n\n### 4.5 Blog: Details \/ Single Article (`type: \"blog\"`)\n*   **Requirement**: Never use the `strip_html` filter on the article body. It must be SEO optimized. Provide robust schema settings for typography, colors, and layout (e.g., hiding sidebars).\n*   **Blog Object Schema**:\n    *   `{{ blog.title }}`\n    *   `{{ blog.media }}` and `{{ blog.media.alt }}`\n    *   `{{ blog.summary }}`\n    *   `{{ blog.article }}` (HTML content from CKEditor - Render fully formatted)\n    *   `{{ blog.created }}`, `{{ blog.author }}`, `{{ blog.readtime }}`, `{{ blog.views }}`\n    *   `{{ blog.share }}` (Pre-rendered social icons)\n*   **Nested Arrays** (Must check if exists, do not mock data):\n    *   `blog.tags[]`: `{ \"title\": \"...\", \"url\": \"...\" }`\n    *   `blog.related_post[]`: `{ \"img\": \"...\", \"title\": \"...\", \"url\": \"...\", \"summary\": \"...\", \"created\": \"...\", \"author\": \"...\" }`\n    *   `blog.popular_post[]`: Identical schema to `related_post`.\n    *   `blog.category[]`: `{ \"title\": \"...\", \"url\": \"...\" }`\n\n### 4.6 Blog: Feed (`type: \"BlogFeed\"`)\n*   **Object Schema** (`{% for itemkey, blog in blog.items %}`):\n    *   `blog.url`, `blog.img`, `blog.title`, `blog.description`, `blog.created`, `blog.author`, `blog.views`.\n\n### 4.7 Forms & Lead Capture (`type: \"siteform\"`)\n*   **Requirement**: A section MUST only contain a single form.\n*   **Schema**: Add `\"formType\": \"basic\"` (or `login`, `signup`) to the presets.\n*   **Required Hidden Elements**:\n    ```html\n    <form class=\"jw_dynamic_form\" name=\"form_v_{{ form.id }}\">\n        <input type=\"hidden\" name=\"csrf_token\" value=\"{{ form.csrf }}\">\n        <signature style=\"display:none\">{{ form.signature }}<\/signature>\n        \n        <input type=\"hidden\" class=\"_tx_\" value=\"{{ form.id }}\">\n        <input type=\"submit\" value=\"{{ form.submit_label | default('Submit') }}\">\n    <\/form>\n    ```\n*   **Form Fields Array** (`{% for field in form.fields %}`):\n    *   `field.type`: `text`, `tel`, `number`, `email`, `date`, `singlefile`, `textarea`, `dropdown`, `radio`, `multicheckbox`, `checkbox`.\n    *   `field.mode`: `\"system\"` (mapped to backend CRM) or `\"normal\"` (custom data).\n    *   `field.name`, `field.label`, `field.placeholder`, `field.required`, `field.extra.options` (for dropdowns\/radios).\n\n### 4.8 Popups (`$is_popup`)\n*   **Requirement**: Outermost wrapper MUST include the data attribute `data-popup=\"{{section.page_id}}\"`.\n*   **CSS Requirements**: Outermost wrapper = `display: none;` (spanning full screen). Inner modal = `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);`.\n*   **Interactions**: NO JS\/JQuery for opening. The core handles autoshow\/triggers.\n\n### 4.9 Header \/ Navigation Architecture\nThe Header is the most complex UI component. It must act as a premium application navigation bar, especially on mobile devices.\n*   **Schema & Preset**: \n    - The block type must be `\"navigation\"`.\n    - You must include a default preset array so the navigation isn't empty upon creation. Example:\n      `\"presets\": [{ \"blocks\": [ { \"type\": \"navigation\", \"settings\": { \"links\": [{\"label\": \"Home\", \"type\": \"home\"}] } } ] }]`\n*   **Navigation Object (`section.navigation`)**:\n    The backend provides a heavily nested object for the menu structure. You must iterate through it properly.\n    *   **Level 1 Loop**: `{% for menu in section.navigation %}`\n        *   `{{ menu.label }}`: Link Text\n        *   `{{ menu.link }}`: URL (href)\n        *   `{{ menu.target }}`: `_self` or `_blank`\n        *   `{% if menu.children %}`: Check if a dropdown exists.\n    *   **Level 2 Loop (Dropdowns)**: `{% for submenu in menu.children %}`\n        *   `{{ submenu.label }}`, `{{ submenu.link }}`, `{{ submenu.target }}`\n        *   `{{ submenu.icon }}` and `{{ submenu.alt }}`: Images can be attached to dropdowns. Use `{% if submenu.icon %}` to format image-based submenus differently.\n        *   `{% if submenu.children %}`: Check if a sub-dropdown exists.\n    *   **Level 3 Loop (Sub-Dropdowns)**: `{% for submenu2 in submenu.children %}`\n        *   `{{ submenu2.label }}`, `{{ submenu2.link }}`\n*   **Mandatory Requirements**: \n    - You MUST write the custom CSS\/JS to handle the dropdown toggles (`onhover` for desktop, `onclick` for mobile).\n    - Do NOT use stock photos for logos. The logo should use a standard `image_picker` block or `section.settings.logo`.\n\n### 4.10 Footer Architecture (Nested Blocks)\nFooters in JoonWeb utilize nested blocks to allow merchants to easily rearrange columns.\n*   **Schema & Preset**:\n    - The main section must create a block type `\"columns\"`.\n    - Inside `\"columns\"`, you must allow nested `\"blocks\"`, specifically a `\"navigation\"` block.\n    - Example Schema snippet:\n      ```json\n      \"blocks\": [\n        {\n          \"type\": \"columns\",\n          \"name\": \"Columns\",\n          \"settings\": [{ \"type\": \"text\", \"id\": \"heading\", \"label\": \"Heading\" }],\n          \"blocks\": [ { \"type\": \"navigation\", \"name\": \"Menu Links\" }, { \"type\": \"themes\" } ]\n        }\n      ]\n      ```\n*   **Footer Object Structure**:\n    - Iterate over the main columns: `{% for block in section.blocks %}` (assuming block type is `columns`).\n    - Render the column heading: `{{ block.settings.heading }}`.\n    - Iterate over the NESTED blocks: `{% for subblock in block.blocks %}`.\n    - If `subblock.type == \"navigation\"`, iterate over the links: `{% for menu in subblock.settings.links %}`.\n*   **Nested Navigation Object (`subblock.settings.links`)**:\n    *   `{{ menu.label }}`\n    *   `{{ menu.link }}`\n    *   `{{ menu.target }}`\n    *   `{{ menu.icon }}`: Optional SVGs or images for the menu item.\n*   **Handling SVGs**: For social icons or links inside the footer, you MUST use inline SVGs, not font-icons.\n\n---\n*END OF DOCUMENTATION*\n"}

Endpoint Title

No results found.