@spwig/theme-cli 1.0.0 → 2.0.0

package/dist/templates/pages/collection.html.template

@@ -0,0 +1,86 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ collection.title }} - {{ store.name }}{% endblock %}
+
+{% block meta_description %}{{ collection.description|truncatewords:30 }}{% endblock %}
+
+{% block body_class %}page-collection{% endblock %}
+
+{% block content %}
+  <div class="collection-page">
+    <div class="container">
+      <!-- Collection Header -->
+      <div class="collection-header">
+        <h1 class="collection-title">{{ collection.title }}</h1>
+        {% if collection.description %}
+          <p class="collection-description">{{ collection.description }}</p>
+        {% endif %}
+      </div>
+
+      <!-- Filters and Sort -->
+      <div class="collection-toolbar">
+        <div class="filter-controls">
+          <!-- Filter implementation depends on your backend -->
+          <span class="product-count">{{ products|length }} products</span>
+        </div>
+
+        <div class="sort-controls">
+          <label for="sort">Sort by:</label>
+          <select id="sort" onchange="window.location.href=this.value">
+            <option value="?sort=featured">Featured</option>
+            <option value="?sort=price-asc">Price: Low to High</option>
+            <option value="?sort=price-desc">Price: High to Low</option>
+            <option value="?sort=newest">Newest</option>
+            <option value="?sort=title-asc">Name: A-Z</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Products Grid -->
+      <div class="product-grid">
+        {% for product in products %}
+          <div class="product-card">
+            <a href="{{ product.url }}" class="product-link">
+              {% if product.image %}
+                <img src="{{ product.image }}" alt="{{ product.title }}" class="product-image" loading="lazy">
+              {% else %}
+                <div class="product-image-placeholder"></div>
+              {% endif %}
+
+              <div class="product-details">
+                <h3 class="product-title">{{ product.title }}</h3>
+                <div class="product-price">
+                  {% if product.compare_at_price %}
+                    <span class="compare-price">{{ product.compare_at_price|currency }}</span>
+                  {% endif %}
+                  <span class="current-price">{{ product.price|currency }}</span>
+                </div>
+              </div>
+            </a>
+          </div>
+        {% empty %}
+          <div class="no-products">
+            <p>No products found in this collection.</p>
+          </div>
+        {% endfor %}
+      </div>
+
+      <!-- Pagination -->
+      {% if is_paginated %}
+        <nav class="pagination">
+          {% if page_obj.has_previous %}
+            <a href="?page={{ page_obj.previous_page_number }}" class="page-link">Previous</a>
+          {% endif %}
+
+          <span class="page-info">
+            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
+          </span>
+
+          {% if page_obj.has_next %}
+            <a href="?page={{ page_obj.next_page_number }}" class="page-link">Next</a>
+          {% endif %}
+        </nav>
+      {% endif %}
+    </div>
+  </div>
+{% endblock %}

package/dist/templates/pages/home.html.template

@@ -0,0 +1,51 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ store.name }} - Home{% endblock %}
+
+{% block body_class %}page-home{% endblock %}
+
+{% block content %}
+  <!-- Hero Section -->
+  {% include "components/sections/hero_section/template.html" with settings=page.sections.0.settings %}
+
+  <!-- Featured Products -->
+  <section class="featured-products">
+    <div class="container">
+      <h2 class="section-title">Featured Products</h2>
+      <div class="product-grid">
+        {% for product in featured_products %}
+          <div class="product-card">
+            <a href="{{ product.url }}" class="product-link">
+              {% if product.image %}
+                <img src="{{ product.image }}" alt="{{ product.title }}" class="product-image">
+              {% endif %}
+              <h3 class="product-title">{{ product.title }}</h3>
+              <p class="product-price">{{ product.price|currency }}</p>
+            </a>
+          </div>
+        {% empty %}
+          <p class="no-products">No featured products available.</p>
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+
+  <!-- Featured Collections -->
+  {% if featured_collections %}
+    <section class="featured-collections">
+      <div class="container">
+        <h2 class="section-title">Shop by Category</h2>
+        <div class="collection-grid">
+          {% for collection in featured_collections %}
+            <a href="{{ collection.url }}" class="collection-card">
+              {% if collection.image %}
+                <img src="{{ collection.image }}" alt="{{ collection.title }}" class="collection-image">
+              {% endif %}
+              <h3 class="collection-title">{{ collection.title }}</h3>
+            </a>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+  {% endif %}
+{% endblock %}

package/dist/templates/pages/layout.html.template

@@ -0,0 +1,48 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="{{ request.LANGUAGE_CODE|default:'en' }}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="{% block meta_description %}{{ store.description }}{% endblock %}">
+
+  <title>{% block title %}{{ store.name }}{% endblock %}</title>
+
+  <!-- Theme Styles -->
+  {% if theme_css_url %}
+    <link rel="stylesheet" href="{{ theme_css_url }}">
+  {% endif %}
+  {% if brand_css_url %}
+    <link rel="stylesheet" href="{{ brand_css_url }}">
+  {% endif %}
+  <link rel="stylesheet" href="{% static 'themes/' %}{{ active_theme.slug }}/assets/styles/global.css">
+
+  <!-- Favicon -->
+  {% if store.favicon %}
+    <link rel="icon" href="{{ store.favicon }}">
+  {% endif %}
+
+  {% block head_extra %}{% endblock %}
+</head>
+<body class="{% block body_class %}{% endblock %}">
+  <!-- Header -->
+  {% block header %}
+    {% include "components/headers/default_header/template.html" %}
+  {% endblock %}
+
+  <!-- Main Content -->
+  <main id="main-content" class="main-content">
+    {% block content %}{% endblock %}
+  </main>
+
+  <!-- Footer -->
+  {% block footer %}
+    {% include "components/footers/default_footer/template.html" %}
+  {% endblock %}
+
+  <!-- Theme Scripts -->
+  <script src="{% static 'themes/' %}{{ active_theme.slug }}/assets/theme.js"></script>
+
+  {% block scripts_extra %}{% endblock %}
+</body>
+</html>

package/dist/templates/pages/product.html.template

@@ -0,0 +1,90 @@
+{% extends "layout.html" %}
+
+{% block title %}{{ product.title }} - {{ store.name }}{% endblock %}
+
+{% block meta_description %}{{ product.description|truncatewords:30 }}{% endblock %}
+
+{% block body_class %}page-product{% endblock %}
+
+{% block content %}
+  <div class="product-page">
+    <div class="container">
+      <div class="product-layout">
+        <!-- Product Images -->
+        <div class="product-images">
+          {% if product.images %}
+            <div class="main-image">
+              <img src="{{ product.images.0 }}" alt="{{ product.title }}" id="main-product-image">
+            </div>
+            {% if product.images|length > 1 %}
+              <div class="thumbnail-gallery">
+                {% for image in product.images %}
+                  <button class="thumbnail" data-image="{{ image }}">
+                    <img src="{{ image }}" alt="{{ product.title }} - Image {{ forloop.counter }}">
+                  </button>
+                {% endfor %}
+              </div>
+            {% endif %}
+          {% else %}
+            <div class="no-image">
+              <span>No image available</span>
+            </div>
+          {% endif %}
+        </div>
+
+        <!-- Product Info -->
+        <div class="product-info">
+          <h1 class="product-title">{{ product.title }}</h1>
+
+          <div class="product-price">
+            {% if product.compare_at_price %}
+              <span class="compare-price">{{ product.compare_at_price|currency }}</span>
+            {% endif %}
+            <span class="current-price">{{ product.price|currency }}</span>
+          </div>
+
+          <div class="product-description">
+            {{ product.description|safe }}
+          </div>
+
+          <!-- Add to Cart Form -->
+          <form action="/cart/add/" method="post" class="add-to-cart-form">
+            {% csrf_token %}
+            <input type="hidden" name="product_id" value="{{ product.id }}">
+
+            <!-- Variant Selector -->
+            {% if product.variants|length > 1 %}
+              <div class="variant-selector">
+                <label for="variant">Select Option:</label>
+                <select name="variant_id" id="variant" required>
+                  {% for variant in product.variants %}
+                    <option value="{{ variant.id }}" {% if not variant.available %}disabled{% endif %}>
+                      {{ variant.title }} - {{ variant.price|currency }}
+                      {% if not variant.available %}(Sold out){% endif %}
+                    </option>
+                  {% endfor %}
+                </select>
+              </div>
+            {% else %}
+              <input type="hidden" name="variant_id" value="{{ product.variants.0.id }}">
+            {% endif %}
+
+            <!-- Quantity -->
+            <div class="quantity-selector">
+              <label for="quantity">Quantity:</label>
+              <input type="number" name="quantity" id="quantity" value="1" min="1" max="99">
+            </div>
+
+            <button type="submit" class="add-to-cart-button" {% if not product.available %}disabled{% endif %}>
+              {% if product.available %}
+                Add to Cart
+              {% else %}
+                Sold Out
+              {% endif %}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}

package/dist/templates/presets/footer.json.template

@@ -0,0 +1,16 @@
+{
+  "name": "{{displayName}} Footer",
+  "description": "Custom footer preset for {{displayName}} theme",
+  "layout_type": "standard",
+  "zone_layouts": {
+    "main-footer": ["left", "center", "right"],
+    "bottom-bar": ["left", "right"]
+  },
+  "widget_placements": [
+    {"widget_type": "text", "zone": "main-footer_left", "order": 0},
+    {"widget_type": "links", "zone": "main-footer_center", "order": 0},
+    {"widget_type": "newsletter", "zone": "main-footer_right", "order": 0},
+    {"widget_type": "social", "zone": "bottom-bar_left", "order": 0},
+    {"widget_type": "text", "zone": "bottom-bar_right", "order": 0, "config": {"content": "© {{year}} {{displayName}}. All rights reserved."}}
+  ]
+}

package/dist/templates/presets/header.json.template

@@ -0,0 +1,16 @@
+{
+  "name": "{{displayName}} Header",
+  "description": "Custom header preset for {{displayName}} theme",
+  "layout_type": "classic",
+  "is_sticky": true,
+  "enable_notification_zone": false,
+  "zone_layouts": {
+    "main-header": ["left", "center", "right"]
+  },
+  "widget_placements": [
+    {"widget_type": "logo", "zone": "main-header_left", "order": 0},
+    {"widget_type": "search", "zone": "main-header_center", "order": 0},
+    {"widget_type": "cart", "zone": "main-header_right", "order": 0},
+    {"widget_type": "account", "zone": "main-header_right", "order": 1}
+  ]
+}

package/dist/templates/theme/README.md.template

@@ -6,54 +6,84 @@
 
 - **Author**: {{author}}
 - **Version**: 1.0.0
+- **SDK Version**: 2.0
 - **License**: {{license}}
+- **Min Platform Version**: 2.0.0
 
 ## Features
 
 - Responsive design optimized for all devices
-- Modern and clean aesthetics
-- Customizable color schemes via design tokens
-- Performance optimized
+- Mobile-first approach
+- Fully customizable via design tokens
+- Header and footer presets included
 - Accessible and SEO-friendly
 
+## Theme Structure
+
+```
+{{themeName}}/
+├── manifest.json          # Theme metadata and configuration
+├── tokens.json            # Design tokens (colors, typography, spacing, etc.)
+├── presets/
+│   ├── header.json        # Default header layout preset
+│   └── footer.json        # Default footer layout preset
+├── css/
+│   └── theme.css          # Custom CSS overrides (optional)
+├── preview.png            # Theme preview image
+└── README.md
+```
+
 ## Development
 
 ```bash
-# Start development server
+# Start development server with live preview
 spwig dev
 
-# Validate theme
+# Validate theme structure and tokens
 spwig validate
 
 # Package for distribution
 spwig package
 ```
 
-## Bundled Components
+## Customization
 
-This theme includes the following components:
+### Design Tokens
 
-- **Default Header** - Site header with navigation
-- **Default Footer** - Site footer with links
-- **Hero Section** - Eye-catching hero banner
+The `tokens.json` file is the primary deliverable of your theme. It controls every visual aspect of the storefront:
 
-## Customization
+- **Colors** - Primary, secondary, accent, text, backgrounds, borders, status colors
+- **Typography** - Font families, sizes, weights, line heights, letter spacing
+- **Spacing** - Consistent spacing scale used throughout the layout
+- **Borders** - Border widths and radius values
+- **Shadows** - Elevation levels from subtle to prominent
+- **Transitions** - Animation durations and easing functions
+- **Breakpoints** - Responsive design breakpoints
+- **Z-Index** - Layering system for overlapping elements
+- **Container** - Max width and padding for page content
+- **Menu** - Navigation styling and behavior
+- **Header** - Header zones, backgrounds, text colors, and per-layout-type overrides
+- **Footer** - Footer zones, backgrounds, text colors
+- **Search** - Search input, button, and dropdown styling
+- **Buttons** - Primary, secondary, neutral, and danger button variants (solid, outline, ghost)
+- **Cards** - Default, elevated, bordered, and minimal card variants
+- **Elements** - Hero, heading, body text, form, product card, gallery, modal, and more
+- **Widgets** - Account, cart, logo, language, currency, announcement, newsletter, social, links, text, payment, trust badges, contact
 
-### Design Tokens
+Edit `tokens.json` to customize any of these values. The platform converts tokens into CSS custom properties automatically.
+
+### Header & Footer Presets
 
-Edit `design_tokens.json` to customize colors, typography, spacing, and more.
+The `presets/` directory contains default header and footer configurations:
 
-### Components
+- **header.json** - Defines the header layout type, sticky behavior, zone layout, and widget placements
+- **footer.json** - Defines the footer layout type, zone layout, and widget placements
 
-Components are located in the `components/` directory. Each component has:
-- `manifest.json` - Component configuration
-- `template.html` - Component template
-- `schema.json` - Component settings schema
-- `styles.css` - Component styles (optional)
+These presets are applied when a merchant activates your theme, giving them a ready-to-use layout that matches your design vision.
 
-### Pages
+### Custom CSS (Optional)
 
-Page schemas are in the `pages/` directory. Configure which components appear on each page type.
+For advanced customization beyond tokens, add a `css/theme.css` file. This CSS is loaded after the token-generated styles and can override specific rules.
 
 ## Support
 

package/dist/templates/theme/manifest.json.template

@@ -1,40 +1,18 @@
 {
   "name": "{{themeName}}",
   "version": "1.0.0",
+  "sdk_version": "2.0",
   "display_name": "{{displayName}}",
   "description": "{{description}}",
   "author": "{{author}}",
   "license": "{{license}}",
-  "bundled_components": [
-    {
-      "type": "header",
-      "name": "default_header",
-      "path": "components/headers/default_header"
-    },
-    {
-      "type": "footer",
-      "name": "default_footer",
-      "path": "components/footers/default_footer"
-    },
-    {
-      "type": "section",
-      "name": "hero_section",
-      "path": "components/sections/hero_section"
-    }
-  ],
-  "page_schemas": {
-    "home": "pages/home.json",
-    "product": "pages/product.json",
-    "collection": "pages/collection.json",
-    "cart": "pages/cart.json"
-  },
-  "design_tokens": "design_tokens.json",
+  "min_platform_version": "2.0.0",
   "tags": ["ecommerce", "modern"],
   "categories": ["general"],
   "features": [
     "Responsive design",
-    "Modern aesthetics",
-    "Customizable color schemes",
-    "Performance optimized"
-  ]
+    "Mobile-first",
+    "Customizable via design tokens"
+  ],
+  "preview_image": "preview.png"
 }