@o2vend/theme-cli 1.0.32

package/test-theme/templates/account/register.liquid

@@ -0,0 +1,232 @@
+{% layout 'layout/theme' %}
+{% comment %}
+  Customer Registration Template
+{% endcomment %}
+
+<div class="customer-register">
+  <div class="customer-register-container">
+    <div class="customer-register-header">
+      <h1 class="customer-register-title">Create Account</h1>
+      <p class="customer-register-subtitle">Sign up to start shopping</p>
+    </div>
+
+    <div class="customer-register-form-wrapper">
+      <form class="customer-register-form" action="/webstoreapi/customer/register" method="post" id="customer-register-form">
+        {% if form.errors %}
+          <div class="form-errors">
+            {% for error in form.errors %}
+              <p class="form-error">{{ error }}</p>
+            {% endfor %}
+          </div>
+        {% endif %}
+
+        <div class="form-group">
+          <label for="customer-first-name" class="form-label">First Name</label>
+          <input type="text" 
+                 id="customer-first-name" 
+                 name="firstName" 
+                 class="form-input" 
+                 placeholder="Enter your first name"
+                 required
+                 autocomplete="given-name">
+        </div>
+
+        <div class="form-group">
+          <label for="customer-last-name" class="form-label">Last Name</label>
+          <input type="text" 
+                 id="customer-last-name" 
+                 name="lastName" 
+                 class="form-input" 
+                 placeholder="Enter your last name"
+                 required
+                 autocomplete="family-name">
+        </div>
+
+        <div class="form-group">
+          <label for="customer-email-register" class="form-label">Email</label>
+          <input type="email" 
+                 id="customer-email-register" 
+                 name="email" 
+                 class="form-input" 
+                 placeholder="Enter your email"
+                 required
+                 autocomplete="email">
+        </div>
+
+        <div class="form-group">
+          <label for="customer-password-register" class="form-label">Password</label>
+          <input type="password" 
+                 id="customer-password-register" 
+                 name="password" 
+                 class="form-input" 
+                 placeholder="Create a password"
+                 required
+                 autocomplete="new-password"
+                 minlength="8">
+          <p class="form-help">Must be at least 8 characters</p>
+        </div>
+
+        <div class="form-group">
+          <label for="customer-password-confirm" class="form-label">Confirm Password</label>
+          <input type="password" 
+                 id="customer-password-confirm" 
+                 name="passwordConfirm" 
+                 class="form-input" 
+                 placeholder="Confirm your password"
+                 required
+                 autocomplete="new-password">
+        </div>
+
+        <div class="form-group">
+          <label class="form-checkbox">
+            <input type="checkbox" name="acceptTerms" id="accept-terms" required>
+            <span>I agree to the <a href="/pages/terms" target="_blank">Terms of Service</a> and <a href="/pages/privacy" target="_blank">Privacy Policy</a></span>
+          </label>
+        </div>
+
+        <button type="submit" class="btn btn-primary btn-block">Create Account</button>
+      </form>
+
+      <div class="customer-register-footer">
+        <p>Already have an account? <a href="/customer/login">Sign in</a></p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .customer-register {
+    min-height: 60vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 1rem;
+    background: {{ settings.color_background }};
+  }
+
+  .customer-register-container {
+    max-width: 400px;
+    width: 100%;
+  }
+
+  .customer-register-header {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  .customer-register-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem 0;
+    color: {{ settings.color_text }};
+  }
+
+  .customer-register-subtitle {
+    font-size: 1rem;
+    color: {{ settings.color_text_light }};
+    margin: 0;
+  }
+
+  .customer-register-form-wrapper {
+    background: white;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  }
+
+  .form-group {
+    margin-bottom: 1.5rem;
+  }
+
+  .form-label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: {{ settings.color_text }};
+  }
+
+  .form-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    font-size: 1rem;
+    transition: border-color 0.2s ease;
+  }
+
+  .form-input:focus {
+    outline: none;
+    border-color: {{ settings.color_primary }};
+  }
+
+  .form-help {
+    font-size: 0.875rem;
+    color: {{ settings.color_text_light }};
+    margin: 0.25rem 0 0 0;
+  }
+
+  .form-checkbox {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+  }
+
+  .form-checkbox a {
+    color: {{ settings.color_primary }};
+    text-decoration: none;
+  }
+
+  .form-checkbox a:hover {
+    text-decoration: underline;
+  }
+
+  .form-errors {
+    background: #fee2e2;
+    border: 1px solid #fecaca;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .form-error {
+    color: #991b1b;
+    margin: 0;
+    font-size: 0.875rem;
+  }
+
+  .btn-block {
+    width: 100%;
+  }
+
+  .customer-register-footer {
+    text-align: center;
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  .customer-register-footer a {
+    color: {{ settings.color_primary }};
+    text-decoration: none;
+  }
+
+  .customer-register-footer a:hover {
+    text-decoration: underline;
+  }
+</style>
+
+<script>
+  document.getElementById('customer-register-form')?.addEventListener('submit', function(e) {
+    const password = document.getElementById('customer-password-register').value;
+    const passwordConfirm = document.getElementById('customer-password-confirm').value;
+    
+    if (password !== passwordConfirm) {
+      e.preventDefault();
+      alert('Passwords do not match');
+      return false;
+    }
+  });
+</script>
+

package/test-theme/templates/account/return-orders.liquid

@@ -0,0 +1,348 @@
+{% layout 'layout/theme' %}
+
+<section class="account-page">
+  <div class="container">
+
+    <!-- Page Header -->
+    <header class="account-header">
+      <h1 class="account-title display-2">My Return Orders</h1>
+      <p class="account-subtitle">View and manage your orders</p>
+    </header>
+
+    <div class="account-layout">
+
+      <!-- Sidebar -->
+      <aside class="account-sidebar">
+        {% render 'snippets/account-sidebar' %}
+      </aside>
+
+      <!-- Orders Content -->
+      <main class="account-content">
+        {% hook 'account_orders_before' %}
+
+        <div class="account-section-header">
+          <h2 class="account-section-title">Return Order History</h2>
+        </div>
+
+        <div class="orders-list">
+          {% assign orderItems = orders.returns  | default: orders.orders | default: orders %}
+
+          {% if orderItems and orderItems.size > 0 %}
+            {% for order in orderItems %}
+              {% hook 'account_order_before' %}
+
+              <article class="order-card">
+                <div class="order-card-left">
+                  <h3 class="order-number">
+                    Order #{{ order.orderNumber }}
+                  </h3>
+
+                  <div class="order-meta">
+                    <span class="order-date">
+                  {{ order.createdOn | date: "%d-%m-%Y" }}
+                    </span>
+                    <span class="order-items">
+                      {{ order.itemCount }} item{{ order.itemCount | pluralize }}
+                    </span>
+                  </div>
+                </div>
+
+                <div class="order-card-center">
+                  <span class="status-badge status-{{ order.orderStatus | downcase }}">
+                    {{ order.orderStatus }}
+                  </span>
+                </div>
+
+                <div class="order-card-right">
+                  <div class="order-total">
+                    {{ order.orderTotal | money_with_settings: shop.settings }}
+                  </div>
+
+                  <a
+                    href="/orders/{{ order.id }}"
+                    class="btn btn-sm btn-outline"
+                    aria-label="View order {{ order.orderNumber }}"
+                  >
+                    View Details
+                  </a>
+                </div>
+              </article>
+
+              {% hook 'account_order_after' %}
+            {% endfor %}
+          {% else %}
+            <div class="empty-state">
+              <h3>No orders yet</h3>
+              <p>You haven’t placed any orders.</p>
+              <a href="/products" class="btn btn-primary">
+                Start Shopping
+              </a>
+            </div>
+          {% endif %}
+            <!-- Pagination -->
+    {% include 'snippets/pagination', pagination: pagination %}
+        </div>
+
+        {% hook 'account_orders_after' %}
+      </main>
+
+    </div>
+  </div>
+    
+</section>
+<style>/* ===============================
+   ACCOUNT PAGE BASE
+   =============================== */
+.pagination {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+:root {
+  --color-primary: #1f2937;
+  --color-primary-hover: #1d4ed8;
+  --color-primary-light: #dbeafe;
+  --color-success: #10b981;
+  --color-success-light: #d1fae5;
+  --color-success-dark: #065f46;
+  --color-warning: #f59e0b;
+  --color-warning-light: #fef3c7;
+  --color-warning-dark: #92400e;
+  --color-danger: #ef4444;
+  --color-danger-light: #fee2e2;
+  --color-danger-dark: #991b1b;
+  --color-info: #3b82f6;
+  --color-info-light: #dbeafe;
+  --color-info-dark: #1e40af;
+  --color-text: #1f2937;
+  --color-text-light: #6b7280;
+  --color-background: #f9fafb;
+  --color-card-bg: #ffffff;
+  --color-border: #e5e7eb;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 3rem;
+}
+
+.account-page {
+  padding: var(--spacing-xl) var(--spacing-sm);
+  background: var(--color-background);
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-sm);
+}
+
+.account-header {
+  text-align: center;
+  margin-bottom: var(--spacing-xl);
+}
+
+.account-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0 0 0.5rem 0;
+  letter-spacing: -0.025em;
+}
+
+.account-subtitle {
+  font-size: 1.125rem;
+  color: var(--color-text-light);
+  margin: 0;
+}
+
+/* Two-column layout on desktop */
+.account-layout {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: var(--spacing-lg);
+  align-items: flex-start;
+}
+
+/* Sidebar */
+.account-sidebar {
+  position: sticky;
+  top: var(--spacing-lg);
+  background: var(--color-card-bg);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
+}
+
+/* Main content */
+.account-content {
+  background: var(--color-card-bg);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
+
+  overflow-y: auto;
+}
+
+.account-section-header {
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.account-section-title {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+/* ===============================
+   ORDERS LIST
+   =============================== */
+
+.orders-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Order Card */
+.order-card {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1.5rem;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+}
+
+.order-card-left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.order-number {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.order-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 1.4rem;
+  opacity: 0.85;
+}
+
+.order-card-center {
+  display: flex;
+  justify-content: center;
+}
+
+.order-card-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.6rem;
+}
+
+.order-total {
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+/* ===============================
+   EMPTY STATE
+   =============================== */
+
+.empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+}
+
+.empty-state h3 {
+  margin-bottom: 0.5rem;
+}
+
+/* ===============================
+   RESPONSIVE
+   =============================== */
+
+/* Tablet and below: stack sidebar on top */
+@media (max-width: 1024px) {
+  .account-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .account-sidebar {
+    position: static;
+    width: 100%;
+  }
+
+  .account-content {
+    max-height: none;
+    overflow: visible;
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .account-title {
+    font-size: 2rem;
+  }
+
+  .order-card {
+    grid-template-columns: 1fr 1fr 1fr;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .order-card-left,
+  .order-card-center,
+  .order-card-right {
+    align-items: flex-start;
+  }
+
+  .order-card-right {
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .btn {
+    min-height: 42px;
+    padding: 0.5rem 1rem;
+  }
+}
+
+/* Small phones */
+@media (max-width: 480px) {
+  .order-meta {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .btn {
+    width: 100%;
+    text-align: center;
+  }
+
+  .order-card-right {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+</style>