@spwig/theme-cli 1.1.0 → 2.0.0

package/dist/templates/components/header.styles.css.template

@@ -0,0 +1,104 @@
+/* Header Component Styles */
+
+.site-header {
+  background-color: var(--background-color, #ffffff);
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  padding: var(--spacing-md, 1rem) 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md, 1rem);
+}
+
+.header-logo {
+  flex-shrink: 0;
+}
+
+.logo-image {
+  max-height: 48px;
+  width: auto;
+}
+
+.logo-text {
+  font-size: var(--heading-size-lg, 1.5rem);
+  font-weight: 700;
+  color: var(--text-color, #1f2937);
+  text-decoration: none;
+}
+
+.logo-text:hover {
+  text-decoration: none;
+  color: var(--primary-color, #3b82f6);
+}
+
+.main-navigation {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md, 1rem);
+}
+
+.nav-link {
+  color: var(--text-color, #1f2937);
+  font-weight: 500;
+  padding: var(--spacing-xs, 0.5rem) var(--spacing-sm, 0.75rem);
+  border-radius: var(--border-radius, 4px);
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.nav-link:hover {
+  background-color: var(--background-secondary, #f3f4f6);
+  color: var(--primary-color, #3b82f6);
+  text-decoration: none;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 0.75rem);
+}
+
+.cart-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-xs, 0.5rem);
+  color: var(--text-color, #1f2937);
+}
+
+.cart-link:hover {
+  color: var(--primary-color, #3b82f6);
+}
+
+.cart-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.cart-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background-color: var(--primary-color, #3b82f6);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .main-navigation {
+    display: none;
+  }
+}

package/dist/templates/components/section.manifest.json.template

@@ -6,6 +6,6 @@
   "author": "{{author}}",
   "tier_compatibility": ["A", "B", "C"],
   "regions": ["main", "sidebar"],
-  "category": "section",
-  "tags": ["section", "content"]
+  "category": "hero",
+  "tags": ["hero", "banner", "content"]
 }

package/dist/templates/components/section.schema.json.template

@@ -0,0 +1,40 @@
+{
+  "settings": [
+    {
+      "id": "title",
+      "type": "text",
+      "label": "Title",
+      "default": "Welcome"
+    },
+    {
+      "id": "description",
+      "type": "textarea",
+      "label": "Description",
+      "default": "Discover our amazing products"
+    },
+    {
+      "id": "background_color",
+      "type": "color",
+      "label": "Background Color",
+      "default": "#ffffff"
+    },
+    {
+      "id": "show_button",
+      "type": "checkbox",
+      "label": "Show Button",
+      "default": true
+    },
+    {
+      "id": "button_text",
+      "type": "text",
+      "label": "Button Text",
+      "default": "Shop Now"
+    },
+    {
+      "id": "button_url",
+      "type": "url",
+      "label": "Button URL",
+      "default": "/products"
+    }
+  ]
+}

package/dist/templates/components/section.styles.css.template

@@ -0,0 +1,60 @@
+/* Hero Section Component Styles */
+
+.hero-section {
+  padding: var(--spacing-xxl, 5rem) 0;
+  background-color: var(--background-color, #ffffff);
+}
+
+.hero-content {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.hero-title {
+  font-family: var(--heading-font, inherit);
+  font-size: var(--heading-size-xxl, 3rem);
+  font-weight: 700;
+  color: var(--text-color, #1f2937);
+  margin-bottom: var(--spacing-md, 1rem);
+  line-height: 1.2;
+}
+
+.hero-description {
+  font-size: var(--text-lg, 1.25rem);
+  color: var(--text-secondary, #6b7280);
+  margin-bottom: var(--spacing-lg, 2rem);
+  line-height: 1.6;
+}
+
+.hero-button {
+  display: inline-block;
+  padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 2rem);
+  background-color: var(--primary-color, #3b82f6);
+  color: white;
+  font-weight: 600;
+  border-radius: var(--border-radius, 4px);
+  text-decoration: none;
+  transition: background-color 0.2s, transform 0.2s;
+}
+
+.hero-button:hover {
+  background-color: var(--primary-dark, #2563eb);
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero-section {
+    padding: var(--spacing-xl, 3rem) 0;
+  }
+
+  .hero-title {
+    font-size: var(--heading-size-xl, 2rem);
+  }
+
+  .hero-description {
+    font-size: var(--text-md, 1rem);
+  }
+}

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

@@ -0,0 +1,104 @@
+{% extends "layout.html" %}
+
+{% block title %}Shopping Cart - {{ store.name }}{% endblock %}
+
+{% block body_class %}page-cart{% endblock %}
+
+{% block content %}
+  <div class="cart-page">
+    <div class="container">
+      <h1 class="page-title">Shopping Cart</h1>
+
+      {% if cart.items %}
+        <div class="cart-layout">
+          <!-- Cart Items -->
+          <div class="cart-items">
+            {% for item in cart.items %}
+              <div class="cart-item" data-item-id="{{ item.id }}">
+                <div class="item-image">
+                  {% if item.image %}
+                    <img src="{{ item.image }}" alt="{{ item.title }}">
+                  {% endif %}
+                </div>
+
+                <div class="item-details">
+                  <h3 class="item-title">
+                    <a href="{{ item.url }}">{{ item.title }}</a>
+                  </h3>
+                  {% if item.variant_title %}
+                    <p class="item-variant">{{ item.variant_title }}</p>
+                  {% endif %}
+                </div>
+
+                <div class="item-quantity">
+                  <form action="/cart/update/" method="post" class="quantity-form">
+                    {% csrf_token %}
+                    <input type="hidden" name="item_id" value="{{ item.id }}">
+                    <button type="button" class="qty-btn minus" onclick="this.nextElementSibling.stepDown(); this.form.submit();">-</button>
+                    <input type="number" name="quantity" value="{{ item.quantity }}" min="0" max="99" class="qty-input">
+                    <button type="button" class="qty-btn plus" onclick="this.previousElementSibling.stepUp(); this.form.submit();">+</button>
+                  </form>
+                </div>
+
+                <div class="item-price">
+                  {{ item.line_price|currency }}
+                </div>
+
+                <form action="/cart/remove/" method="post" class="remove-form">
+                  {% csrf_token %}
+                  <input type="hidden" name="item_id" value="{{ item.id }}">
+                  <button type="submit" class="remove-btn" aria-label="Remove item">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                  </button>
+                </form>
+              </div>
+            {% endfor %}
+          </div>
+
+          <!-- Cart Summary -->
+          <div class="cart-summary">
+            <h2>Order Summary</h2>
+
+            <div class="summary-line">
+              <span>Subtotal</span>
+              <span>{{ cart.subtotal|currency }}</span>
+            </div>
+
+            {% if cart.discount %}
+              <div class="summary-line discount">
+                <span>Discount</span>
+                <span>-{{ cart.discount|currency }}</span>
+              </div>
+            {% endif %}
+
+            <div class="summary-line shipping">
+              <span>Shipping</span>
+              <span>Calculated at checkout</span>
+            </div>
+
+            <div class="summary-total">
+              <span>Total</span>
+              <span>{{ cart.total|currency }}</span>
+            </div>
+
+            <a href="/checkout/" class="checkout-button">
+              Proceed to Checkout
+            </a>
+
+            <a href="/" class="continue-shopping">
+              Continue Shopping
+            </a>
+          </div>
+        </div>
+      {% else %}
+        <div class="cart-empty">
+          <p>Your cart is empty.</p>
+          <a href="/" class="continue-shopping-button">Continue Shopping</a>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endblock %}

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}
+  ]
+}