@o2vend/theme-cli 1.0.37 → 1.0.38

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

@@ -95,6 +95,16 @@
 </div>
 
 <style>
+:root {
+  --color-white: #ffffff;
+  --color-surface: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-error-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-error: {{ settings.color_error | default: '#ef4444' }};
+  --color-error-dark: {{ settings.color_error | default: '#ef4444' }};
+  --shadow-sm: var(--shadow-sm);
+}
+
   .customer-register {
     min-height: 60vh;
     display: flex;
@@ -128,10 +138,10 @@
   }
 
   .customer-register-form-wrapper {
-    background: white;
+    background: var(--color-surface);
     padding: 2rem;
     border-radius: 0.5rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--shadow-sm);
   }
 
   .form-group {
@@ -148,7 +158,7 @@
   .form-input {
     width: 100%;
     padding: 0.75rem 1rem;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--color-border);
     border-radius: 0.375rem;
     font-size: 1rem;
     transition: border-color 0.2s ease;
@@ -183,15 +193,15 @@
   }
 
   .form-errors {
-    background: #fee2e2;
-    border: 1px solid #fecaca;
+    background: var(--color-error-light);
+    border: 1px solid var(--color-error);
     border-radius: 0.375rem;
     padding: 1rem;
     margin-bottom: 1.5rem;
   }
 
   .form-error {
-    color: #991b1b;
+    color: var(--color-error-dark);
     margin: 0;
     font-size: 0.875rem;
   }
@@ -204,7 +214,7 @@
     text-align: center;
     margin-top: 1.5rem;
     padding-top: 1.5rem;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--color-border);
   }
 
   .customer-register-footer a {
@@ -218,7 +228,7 @@
 </style>
 
 <script>
-  document.getElementById('customer-register-form')?.addEventListener('submit', function(e) {
+  document.getElementById('customer-register-form')?.addEventListener('submit', (e) => {
     const password = document.getElementById('customer-password-register').value;
     const passwordConfirm = document.getElementById('customer-password-confirm').value;
     

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

@@ -99,35 +99,36 @@
     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;
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-warning: {{ settings.color_warning | default: '#f59e0b' }};
+  --color-warning-light: {{ settings.color_warning | default: '#f59e0b' }};
+  --color-warning-dark: {{ settings.color_warning | default: '#f59e0b' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-info: {{ settings.color_info | default: '#3b82f6' }};
+  --color-info-light: {{ settings.color_info | default: '#3b82f6' }};
+  --color-info-dark: {{ settings.color_info | default: '#3b82f6' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-white: #ffffff;
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --radius-md: var(--radius-lg);
+  --radius-lg: var(--radius-xl);
+  --spacing-sm: var(--space-4);
+  --spacing-md: var(--space-6);
+  --spacing-lg: var(--space-8);
+  --spacing-xl: var(--space-12);
 }
 
 .account-page {
@@ -222,7 +223,7 @@
   align-items: center;
   padding: 1.25rem 1.5rem;
   border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--color-border);
   box-sizing: border-box;
 }
 

package/test-theme/templates/account/store-credit.liquid

@@ -93,7 +93,7 @@
                 </div>
                 <p class="empty-title">No Eligible Orders</p>
                 <p class="empty-description">You don't have any orders eligible for return at the moment.</p>
-                <a href="/collections" class="btn btn-primary">Continue Shopping</a>
+                <a href="/categories" class="btn btn-primary">Continue Shopping</a>
               </div>
             {% endif %}
           </div>
@@ -109,28 +109,29 @@
 
 <style>
 :root {
-  --color-primary: #2563eb;
-  --color-primary-hover: #1d4ed8;
-  --color-primary-light: #dbeafe;
-  --color-success: #10b981;
-  --color-success-light: #d1fae5;
-  --color-success-dark: #065f46;
-  --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-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --spacing-xs: 0.5rem;
-  --spacing-sm: 1rem;
-  --spacing-md: 1.5rem;
-  --spacing-lg: 2rem;
-  --spacing-xl: 3rem;
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-white: #ffffff;
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --radius-sm: var(--radius-md);
+  --radius-md: var(--radius-lg);
+  --radius-lg: var(--radius-xl);
+  --spacing-xs: var(--space-2);
+  --spacing-sm: var(--space-4);
+  --spacing-md: var(--space-6);
+  --spacing-lg: var(--space-8);
+  --spacing-xl: var(--space-12);
 }
 
 .account-page {
@@ -209,11 +210,11 @@
 }
 
 .store-credit-balance {
-  background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
+  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
   border-radius: var(--radius-lg);
   padding: var(--spacing-xl);
   text-align: center;
-  color: white;
+  color: var(--color-white);
   box-shadow: var(--shadow-lg);
   position: relative;
   overflow: hidden;
@@ -387,7 +388,7 @@
 
 .btn-primary {
   background: var(--color-primary);
-  color: white;
+  color: var(--color-white);
   border: 2px solid var(--color-primary);
 }
 

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

@@ -124,7 +124,24 @@
 </div>
 
 <style>
-/* Account subscriptions page uses theme.css variables - no local :root needed */
+:root {
+  --bg: var(--color-background);
+  --card: var(--color-surface);
+  --border: var(--color-border);
+  --text: var(--color-text);
+  --muted: var(--color-text-muted);
+  --primary: var(--color-primary);
+  --radius: var(--radius-lg);
+  --shadow: var(--shadow-md);
+  --shadow-xl: var(--shadow-xl);
+  --success-bg: var(--color-success-light);
+  --success-text: var(--color-success-dark);
+  --warning-bg: var(--color-warning-light);
+  --warning-text: var(--color-warning-dark);
+  --danger-bg: var(--color-error-light);
+  --danger-text: var(--color-error-dark);
+  --color-white: #ffffff;
+}
 
 .account-page {
   background: var(--bg);
@@ -266,7 +283,7 @@
   padding: .5rem 1rem;
   border-radius: 8px;
   border: 1px solid var(--border);
-  background: white;
+  background: var(--color-white);
   color: var(--text);
   text-decoration: none;
   font-size: 1.4rem;
@@ -277,7 +294,7 @@
 
 .btn-outline:hover {
   background: var(--primary);
-  color: #fff;
+  color: var(--color-white);
   border-color: var(--primary);
 }
 
@@ -327,7 +344,7 @@
   position: relative;
   background: var(--card);
   border-radius: var(--radius);
-  box-shadow: 0 20px 60px rgba(0,0,0,.3);
+  box-shadow: var(--shadow-xl);
   max-width: 600px;
   width: 100%;
   max-height: 90vh;
@@ -593,7 +610,7 @@ function closeFrequencyModal() {
 }
 
 // Close modal on Escape key
-document.addEventListener('keydown', function(e) {
+document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
     closeFrequencyModal();
   }

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

@@ -29,8 +29,8 @@
               {% for item in wishlist.items %}
                 <article class="product-card">
                   <div class="product-card-image">
-                    {% if item.product.image %}
-                      <img src="{{ item.product.image }}" alt="{{ item.product.name | default: item.product.title }}" loading="lazy">
+                    {% if item.productImageUrl  %}
+                      <img src="{{ item.productImageUrl  }}" alt="{{ item.productName  | default: item.title }}" loading="lazy">
                     {% else %}
                       <div class="product-placeholder">
                         <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -40,7 +40,7 @@
                         </svg>
                       </div>
                     {% endif %}
-                    <button class="remove-wishlist-btn" data-item-id="{{ item.id }}" title="Remove from wishlist">
+                    <button class="remove-wishlist-btn" data-item-id="{{ item.productId }}" title="Remove from wishlist">
                       <svg width="20" height="20" 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>
@@ -49,23 +49,23 @@
                   </div>
                   
                   <div class="product-card-content">
-                    <a href="{{ item.product.url | default: '#' }}" class="product-card-link">
-                      <h3 class="product-card-title">{{ item.product.name | default: item.product.title }}</h3>
+                    <a href="{{ item.url | default: '#' }}" class="product-card-link">
+                      <h3 class="product-card-title">{{ item.productName  | default: item.title }}</h3>
                     </a>
                     
-                    {% if item.product.price %}
+                    {% if item.price %}
                       <div class="product-card-price">
-                        {% if item.product.compareAtPrice and item.product.compareAtPrice > item.product.price %}
-                          <span class="price-compare">{{ item.product.compareAtPrice | money_with_settings: shop.settings }}</span>
-                          <span class="price-current sale">{{ item.product.price | money_with_settings: shop.settings }}</span>
+                        {% if item.compareAtPrice and item.compareAtPrice > item.price %}
+                          <span class="price-compare">{{ item.compareAtPrice | money_with_settings: shop.settings }}</span>
+                          <span class="price-current sale">{{ item.price | money_with_settings: shop.settings }}</span>
                         {% else %}
-                          <span class="price-current">{{ item.product.price | money_with_settings: shop.settings }}</span>
+                          <span class="price-current">{{ item.price | money_with_settings: shop.settings }}</span>
                         {% endif %}
                       </div>
                     {% endif %}
                     
-                    {% if item.product.available %}
-                      <button class="btn btn-primary btn-block add-to-cart" data-product-id="{{ item.product.id }}">
+                    {% if item.isInStock  %}
+                      <button class="btn btn-primary btn-block add-to-cart add-to-cart-btn" data-product-id="{{ item.productId }}">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                           <circle cx="9" cy="21" r="1"></circle>
                           <circle cx="20" cy="21" r="1"></circle>
@@ -95,12 +95,81 @@
         </div>
         {% hook 'account_wishlist_after' %}
       </div>
+           <!-- Pagination -->
+    {% include 'snippets/pagination', pagination: pagination %}
     </div>
   </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.remove-wishlist-btn').forEach((btn) => {
+    if (btn.dataset.wishlistBound === '1') return;
+    btn.dataset.wishlistBound = '1';
+
+    btn.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const productId = btn.getAttribute('data-item-id');
+      if (!productId) return;
+
+      btn.disabled = true;
+      const article = btn.closest('article');
+
+      try {
+        // Use dedicated remove behavior on account wishlist page.
+        // Calling Theme.toggleWishlist here can show the wrong toast because this button
+        // does not carry `.in-wishlist` state used by the shared toggle handler.
+        const res = await fetch('/webstoreapi/wishlist/toggle', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
+          body: JSON.stringify({ productId: productId })
+        });
+        const data = await res.json();
+        if (!data.success) throw new Error(data.error || data.message || 'Failed to remove from wishlist');
+        if (window.Theme && typeof window.Theme.showNotification === 'function') {
+          window.Theme.showNotification('Removed from wishlist', 'success');
+        }
+
+        // Remove item from DOM with a small transition
+        if (article) {
+          article.style.transition = 'opacity 200ms ease';
+          article.style.opacity = '0';
+          setTimeout(() => {
+            if (article && article.parentNode) article.remove();
+
+            // Update items count
+            const countEl = document.querySelector('.items-count');
+            if (countEl) {
+              const m = countEl.textContent.match(/(\d+)/);
+              if (m) {
+                let count = Math.max(0, parseInt(m[1], 10) - 1);
+                if (count === 0) {
+                  // reload to show empty state
+                  window.location.reload();
+                } else {
+                  countEl.textContent = count + ' item' + (count !== 1 ? 's' : '');
+                }
+              }
+            }
+          }, 220);
+        }
+      } catch (err) {
+        console.error('[wishlist] remove failed', err);
+        if (window.Theme && typeof window.Theme.showNotification === 'function') {
+          window.Theme.showNotification('Failed to remove item from wishlist. Please try again.', 'error');
+        }
+        btn.disabled = false;
+      }
+    });
+  });
+});
+</script>
 </section>
 
 <style>
-/* Account wishlist page uses theme.css variables - no local :root needed */
+:root {
+  --color-white: #ffffff;
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+}
 
 .account-page {
   padding: var(--spacing-section) var(--spacing-small);
@@ -248,7 +317,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: white;
+  background: var(--color-white);
   border: none;
   border-radius: 50%;
   cursor: pointer;
@@ -259,7 +328,7 @@
 
 .remove-wishlist-btn:hover {
   background: var(--color-danger);
-  color: white;
+  color: var(--color-white);
   transform: scale(1.1);
 }
 
@@ -276,7 +345,7 @@
 }
 
 .product-card-title {
-  font-size: 1rem;
+  font-size: 2rem;
   font-weight: 600;
   color: var(--color-text);
   margin: 0;
@@ -321,7 +390,7 @@
   justify-content: center;
   gap: 0.5rem;
   padding: 0.625rem 1.5rem;
-  font-size: 1.2rem;
+  font-size: 1.6rem;
   font-weight: 500;
   text-decoration: none;
   border-radius: var(--radius-md);
@@ -333,7 +402,7 @@
 
 .btn-primary {
   background: var(--color-primary);
-  color: white;
+  color: var(--color-white);
   border: 2px solid var(--color-primary);
 }
 
@@ -416,4 +485,4 @@
     grid-template-columns: 1fr;
   }
 }
-</style>
+</style>