@o2vend/theme-cli 1.0.32

package/test-theme/templates/account/order-detail.liquid

@@ -0,0 +1,230 @@
+{% layout 'layout/theme' %}
+
+<section class="account-page">
+  <div class="container">
+    <div class="account-header">
+      <h1 class="account-title display-2">Order Details</h1>
+      {% if order %}
+        <p class="account-subtitle">Order #{{ order.orderNumber }}</p>
+      {% endif %}
+    </div>
+
+    <div class="account-layout">
+      <!-- Sidebar -->
+      <aside class="account-sidebar">
+        {% render 'snippets/account-sidebar' %}
+      </aside>
+
+      <!-- Content -->
+      <div class="account-content">
+        {% if order %}
+          <div class="account-section-header">
+            <h2 class="account-section-title">Order #{{ order.orderNumber }}</h2>
+          </div>
+
+          <div class="order-detail">
+
+            <!-- ORDER INFO -->
+            <div class="order-detail-summary">
+              <p><strong>Date:</strong> {{ order.createdOn | date: '%d-%m-%Y %H:%M' }}</p>
+              <p><strong>Status:</strong> {{ order.orderStatus }}</p>
+              {% if order.couponCode %}
+                <p><strong>Coupon:</strong> {{ order.couponCode }}</p>
+              {% endif %}
+            </div>
+
+            <!-- PAYMENT DETAILS -->
+            <div class="payment-details">
+              <h5>Payment Details</h5>
+
+              <div class="payment-row">
+                <span>Subtotal</span>
+                <span>{{ order.subTotal | money_with_settings: shop.settings }}</span>
+              </div>
+
+              <div class="payment-row">
+                <span>Tax Amount</span>
+                <span>{{ order.taxAmount | money_with_settings: shop.settings }}</span>
+              </div>
+
+              <div class="payment-row">
+                <span>Discount</span>
+                <span>- {{ order.discountAmount | money_with_settings: shop.settings }}</span>
+              </div>
+
+              <div class="payment-row">
+                <span>Payment Fee</span>
+                <span>{{ order.paymentFeeAmount | money_with_settings: shop.settings }}</span>
+              </div>
+
+              <div class="payment-row payment-total">
+                <span>Order Total</span>
+                <span>{{ order.orderTotal | money_with_settings: shop.settings }}</span>
+              </div>
+            </div>
+
+            <!-- ITEMS -->
+            <div class="order-items">
+              <h5>Items</h5>
+              {% if order.items and order.items.size > 0 %}
+                <table class="order-items-table">
+                  <thead>
+                    <tr>
+                      <th>Product</th>
+                      <th>Qty</th>
+                      <th>Price</th>
+                      <th>Total</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {% for item in order.items %}
+                      <tr>
+                        <td>{{ item.productName }}</td>
+                        <td>{{ item.quantity }}</td>
+                        <td>{{ item.productPrice | money_with_settings: shop.settings }}</td>
+                        <td>{{ item.total | money_with_settings: shop.settings }}</td>
+                      </tr>
+                    {% endfor %}
+                  </tbody>
+                </table>
+              {% else %}
+                <p>No items found.</p>
+              {% endif %}
+            </div>
+
+            <!-- ADDRESSES -->
+            {% if order.billingAddress %}
+            <div class="order-detail-addresses">
+              <div class="order-address">
+                <h6>Billing Address</h6>
+                <p>{{ order.billingAddress.contactName }}</p>
+                <p>{{ order.billingAddress.addressLine1 }}</p>
+                <p>{{ order.billingAddress.addressLine2 }}</p>
+                <p>{{ order.billingAddress.city }},
+                  {{ order.billingAddress.stateOrProvinceName }}
+                  {{ order.billingAddress.zipCode }}</p>
+                <p>{{ order.billingAddress.countryName }}</p>
+                <p>Phone: {{ order.billingAddress.phone }}</p>
+              </div>
+
+              {% if order.shippingAddress %}
+              <div class="order-address">
+                <h6>Shipping Address</h6>
+                <p>{{ order.shippingAddress.contactName }}</p>
+                <p>{{ order.shippingAddress.addressLine1 }}</p>
+                <p>{{ order.shippingAddress.addressLine2 }}</p>
+                <p>{{ order.shippingAddress.city }},
+                  {{ order.shippingAddress.stateOrProvinceName }}
+                  {{ order.shippingAddress.zipCode }}</p>
+                <p>{{ order.shippingAddress.countryName }}</p>
+                <p>Phone: {{ order.shippingAddress.phone }}</p>
+              </div>
+              {% endif %}
+            </div>
+            {% endif %}
+
+          </div>
+        {% else %}
+          <div class="empty-state">
+            <p>Order not found.</p>
+            <a href="/orders" class="btn btn-primary">Back to Orders</a>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+:root {
+  --color-primary:#2563eb;
+  --color-border:#e5e7eb;
+  --color-border-light:#f3f4f6;
+  --color-text:#1f2937;
+  --color-text-light:#6b7280;
+  --color-bg:#f9fafb;
+  --card:#fff;
+  --radius:0.6rem;
+}
+
+/* Layout */
+.account-page { background:var(--color-bg); padding:3rem 1rem; }
+.container { max-width:1200px; margin:auto; }
+.account-layout { display:grid; grid-template-columns:280px 1fr; gap:2rem; }
+.account-sidebar, .account-content { background:var(--card); border-radius:var(--radius); padding:1.5rem; border:1px solid var(--color-border); }
+
+/* Summary */
+.order-detail-summary {
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
+  gap:1rem;
+  background:var(--color-border-light);
+  padding:1rem;
+  border-radius:var(--radius);
+  font-size:1.1rem;
+}
+
+/* Payment */
+.payment-details {
+  max-width:500px;
+  border:1px solid var(--color-border);
+  border-radius:var(--radius);
+  padding:1rem;
+}
+
+.payment-details h5 {
+  font-size:1.3rem;
+  margin-bottom:1rem;
+}
+
+.payment-row {
+  display:flex;
+  justify-content:space-between;
+  padding:.6rem 0;
+  border-bottom:1px dashed var(--color-border);
+  font-size:1.15rem;
+}
+
+.payment-row:last-child { border:none; }
+
+.payment-total {
+  font-size:1.3rem;
+  font-weight:700;
+  color:var(--color-primary);
+}
+
+/* Table */
+.order-items-table {
+  width:100%;
+  border-collapse:collapse;
+  margin-top:1rem;
+}
+
+.order-items-table th,
+.order-items-table td {
+  padding:.8rem;
+  border-bottom:1px solid var(--color-border);
+}
+
+.order-items-table th { background:var(--color-border-light); }
+
+/* Addresses */
+.order-detail-addresses {
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:1.5rem;
+}
+
+.order-address {
+  background:var(--color-border-light);
+  padding:1rem;
+  border-radius:var(--radius);
+}
+
+/* Responsive */
+@media(max-width:768px){
+  .account-layout { grid-template-columns:1fr; }
+  .order-detail-addresses { grid-template-columns:1fr; }
+}
+
+</style>

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

@@ -0,0 +1,349 @@
+{% layout 'layout/theme' %}
+
+<section class="account-page">
+  <div class="container">
+
+    <!-- Page Header -->
+    <header class="account-header">
+      <h1 class="account-title display-2">My 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">Order History</h2>
+        </div>
+
+        <div class="orders-list">
+          {% assign orderItems = orders.items | 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, %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
+   =============================== */
+
+: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);
+  /*max-height: calc(109vh - 200px);*/ /* optional: control inner scroll area */
+  overflow-y: auto;
+}
+.pagination {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+.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>