@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/templates/address-book.liquid

@@ -69,8 +69,8 @@
                 </div>
 
                 <div class="address-card-actions">
-                  <button class="btn btn-outline btn-sm edit-address" data-address-id="{{ address.id }}">Edit</button>
-                  <button class="btn btn-outline-danger btn-sm delete-address" data-address-id="{{ address.id }}">
+                  <button type="button" class="btn btn-outline btn-sm edit-address" data-address-id="{{ address.id }}">Edit</button>
+                  <button type="button" class="btn btn-outline-danger btn-sm delete-address" data-address-id="{{ address.id }}">
                     <span class="btn-text">Delete</span>
                     <span class="btn-loading" style="display: none;">
                       <span class="btn-spinner"></span>
@@ -97,31 +97,41 @@
 </section>
 
 <style>
+/* Use theme-wide variables from assets/theme.css as the source of truth.
+   Map any template-specific variable names to the global theme variables
+   so we avoid hardcoded values here. */
 :root {
-  --color-primary: #2563eb;
-  --color-primary-hover: #1d4ed8;
-  --color-primary-light: #dbeafe;
-  --color-success: #10b981;
-  --color-success-light: #d1fae5;
-  --color-danger: #ef4444;
-  --color-danger-hover: #dc2626;
-  --color-danger-light: #fee2e2;
-  --color-text: #1f2937;
-  --color-text-light: #6b7280;
-  --color-background: #f9fafb;
-  --color-card-bg: #ffffff;
-  --color-border: #e5e7eb;
-  --color-border-light: #f3f4f6;
-  --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-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-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-hover: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_muted | default: '#666666' }};
+
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+
+  --spacing-xs: var(--space-3);
+  --spacing-sm: var(--space-4);
+  --spacing-md: var(--space-6);
+  --spacing-lg: var(--space-8);
+  --spacing-xl: var(--space-12);
 }
 /* Page */
 .account-page {
@@ -159,10 +169,10 @@
 
 .account-sidebar,
 .account-content {
-  background: #fff;
+  background: var(--color-white);
   border-radius: 14px;
   padding: 1.75rem;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--color-border);
 }
 
 /* Section header */
@@ -227,10 +237,13 @@
 .default-badge {
   background: #dcfce7;
   color: #166534;
-  font-size: .7rem;
+  font-size: 1rem;
   padding: .3rem .6rem;
-  border-radius: 999px;
+  border-radius: 10px;
   font-weight: 600;
+  display: flex;
+    align-items: center;
+    height: fit-content;
 }
 
 /* Body */
@@ -344,7 +357,7 @@
   width: 90%;
   max-height: 90vh;
   overflow-y: auto;
-  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
+
 }
 
 .address-modal-header {
@@ -412,12 +425,16 @@
 }
 
 .iti__flag-container {
-  z-index: 1;
+  z-index: 2;
+  position: relative;
+  pointer-events: auto;
 }
 
 .iti__selected-flag {
   padding: 0 0.75rem 0 0.5rem;
   border-right: 1px solid #d1d5db;
+  cursor: pointer;
+  pointer-events: auto;
 }
 
 .iti__selected-flag:hover {
@@ -465,6 +482,7 @@
   width: 18px;
   height: 18px;
   cursor: pointer;
+   -webkit-appearance: auto !important;
 }
 
 .form-actions {
@@ -486,7 +504,6 @@
   align-items: center;
   gap: 0.5rem;
 }
-
 .btn-spinner {
   width: 14px;
   height: 14px;
@@ -526,7 +543,7 @@
   <div class="address-modal-overlay" data-address-modal-close></div>
   <div class="address-modal-content">
     <div class="address-modal-header">
-      <h3 id="address-modal-title">Add New Address</h3>
+      <h5 id="address-modal-title">Add New Address</h5>
       <button class="address-modal-close" data-address-modal-close aria-label="Close">×</button>
     </div>
     <form class="address-form" id="address-form" action="/webstoreapi/addresses" method="post">
@@ -591,7 +608,7 @@
 
       <div class="form-group">
         <label for="address-phone" class="form-label">Phone</label>
-        <input type="tel" id="address-phone" name="phone" class="form-input">
+        <input type="tel" id="address-phone" pattern="[\d\s()+-]{7,20}"  name="phone" class="form-input">
       </div>
 
       <div class="form-group">
@@ -643,7 +660,7 @@
     }
   }
 
-  document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener('DOMContentLoaded', () => {
     const modal = document.getElementById('address-modal');
     const openButtons = document.querySelectorAll('#add-address-btn, #add-first-address-btn, .edit-address');
     const closeButtons = document.querySelectorAll('[data-address-modal-close]');
@@ -651,6 +668,36 @@
     const addresses = {% if addresses %}{{ addresses | json }}{% else %}[]{% endif %};
     const COUNTRIES_DATA = {% if countries %}{{ countries | json }}{% else %}[]{% endif %};
     let addressPhoneIti = null;
+    let intlTelInputLoadPromise = null;
+
+    function ensureIntlTelInputLoaded() {
+      if (typeof window.intlTelInput !== 'undefined') {
+        return Promise.resolve(true);
+      }
+
+      if (intlTelInputLoadPromise) {
+        return intlTelInputLoadPromise;
+      }
+
+      intlTelInputLoadPromise = new Promise((resolve) => {
+        const existingScript = document.querySelector('script[data-intl-tel-input-loader="address-book"]');
+        if (existingScript) {
+          existingScript.addEventListener('load', () => resolve(typeof window.intlTelInput !== 'undefined'), { once: true });
+          existingScript.addEventListener('error', () => resolve(false), { once: true });
+          return;
+        }
+
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/intlTelInput.min.js';
+        script.defer = true;
+        script.setAttribute('data-intl-tel-input-loader', 'address-book');
+        script.onload = () => resolve(typeof window.intlTelInput !== 'undefined');
+        script.onerror = () => resolve(false);
+        document.head.appendChild(script);
+      });
+
+      return intlTelInputLoadPromise;
+    }
 
     // Helper function to get states for a country
     function getStatesForCountry(countryIdentifier) {
@@ -750,8 +797,24 @@
       stateSelect.style.display = 'block';
       stateSelect.required = true;
       
+      // De-duplicate states to avoid repeated options when upstream data contains duplicates.
+      const seenStateKeys = new Set();
+      const uniqueStates = [];
+      countryStates.forEach((state) => {
+        const stateCode = state && (state.code || state.abbreviation || state.isoCode || '');
+        const stateName = state && (state.name || state.label || '');
+        const normalizedCode = String(stateCode).trim().toLowerCase();
+        const normalizedName = String(stateName).trim().toLowerCase().replace(/\s+/g, ' ');
+        const key = normalizedCode ? `code:${normalizedCode}` : `name:${normalizedName}`;
+
+        if (!seenStateKeys.has(key)) {
+          seenStateKeys.add(key);
+          uniqueStates.push(state);
+        }
+      });
+
       // Populate the dropdown
-      countryStates.forEach(state => {
+      uniqueStates.forEach(state => {
         const option = document.createElement('option');
         const stateId = state.id || state.stateOrProvinceId || state.stateId;
         const stateName = state.name || state.label || '';
@@ -790,7 +853,15 @@
     // Initialize intl-tel-input for address phone
     function initializeAddressPhoneInput() {
       const phoneInput = document.getElementById('address-phone');
-      if (phoneInput && typeof intlTelInput !== 'undefined') {
+      if (!phoneInput) {
+        return;
+      }
+
+      ensureIntlTelInputLoaded().then((isLoaded) => {
+        if (!isLoaded || typeof window.intlTelInput === 'undefined') {
+          return;
+        }
+
         // Destroy existing instance if any
         if (addressPhoneIti) {
           addressPhoneIti.destroy();
@@ -799,30 +870,38 @@
         
         // Get country code from country select
         const countrySelect = document.getElementById('address-country');
-        let initialCountry = 'auto';
+        let initialCountry = 'us';
         
         if (countrySelect && countrySelect.value) {
-          const countryCode = countrySelect.options[countrySelect.selectedIndex]?.getAttribute('data-country-code2') || 
-                             countrySelect.value.toLowerCase();
-          initialCountry = countryCode.toLowerCase();
+          const selectedCountryCode = (countrySelect.options[countrySelect.selectedIndex]?.getAttribute('data-country-code2') || '').trim().toLowerCase();
+          if (/^[a-z]{2}$/.test(selectedCountryCode)) {
+            initialCountry = selectedCountryCode;
+          }
         }
         
         // Initialize intl-tel-input
-        addressPhoneIti = intlTelInput(phoneInput, {
-          utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/utils.js',
-          initialCountry: initialCountry,
-          preferredCountries: ['us', 'gb', 'ca', 'au', 'in'],
-          separateDialCode: true,
-          nationalMode: false
-        });
+        try {
+          addressPhoneIti = window.intlTelInput(phoneInput, {
+            utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.0/build/js/utils.js',
+            initialCountry: initialCountry,
+            preferredCountries: ['us', 'gb', 'ca', 'au', 'in'],
+            separateDialCode: true,
+            nationalMode: false,
+            dropdownContainer: document.body
+          });
+        } catch (error) {
+          console.error('[ADDRESS BOOK] Failed to initialize phone country selector', error);
+          return;
+        }
+        window.addressPhoneIti = addressPhoneIti;
         
         // Update country when address country changes
-        if (countrySelect) {
-          countrySelect.addEventListener('change', function() {
-            const countryCode = this.options[this.selectedIndex]?.getAttribute('data-country-code2') || 
-                               this.value.toLowerCase();
-            if (addressPhoneIti && countryCode) {
-              addressPhoneIti.setCountry(countryCode.toLowerCase());
+        if (countrySelect && !countrySelect.dataset.phoneCountrySyncBound) {
+          countrySelect.dataset.phoneCountrySyncBound = '1';
+          countrySelect.addEventListener('change', () => {
+            const countryCode = (countrySelect.options[countrySelect.selectedIndex]?.getAttribute('data-country-code2') || '').trim().toLowerCase();
+            if (addressPhoneIti && /^[a-z]{2}$/.test(countryCode)) {
+              addressPhoneIti.setCountry(countryCode);
             }
             
             // Populate states when country changes
@@ -832,7 +911,7 @@
             }
           });
         }
-      }
+      });
     }
 
     function openModal(addressId = null) {
@@ -902,11 +981,11 @@
       document.body.style.overflow = 'hidden';
       
       // Initialize phone input after modal is shown
-      setTimeout(function() {
+      setTimeout(() => {
         initializeAddressPhoneInput();
         // Set phone number if editing (after initialization completes)
         if (addressId) {
-          setTimeout(function() {
+          setTimeout(() => {
             const address = addresses.find(a => a.id == addressId);
             if (address && address.phone && addressPhoneIti) {
               addressPhoneIti.setNumber(address.phone);
@@ -925,11 +1004,13 @@
         addressPhoneIti.destroy();
         addressPhoneIti = null;
       }
+      window.addressPhoneIti = null;
     }
 
     openButtons.forEach(btn => {
-      btn.addEventListener('click', function() {
-        const addressId = this.dataset.addressId || null;
+      btn.addEventListener('click', (event) => {
+        const targetButton = event.currentTarget || btn;
+        const addressId = targetButton.dataset.addressId || null;
         openModal(addressId);
       });
     });
@@ -939,7 +1020,7 @@
     });
 
     // Handle form submission
-    form.addEventListener('submit', async function(e) {
+    form.addEventListener('submit', async (e) => {
       e.preventDefault();
       
       const submitBtn = document.getElementById('save-address-btn');
@@ -1060,33 +1141,49 @@
 
     // Handle delete
     document.querySelectorAll('.delete-address').forEach(btn => {
-      btn.addEventListener('click', async function() {
+      btn.addEventListener('click', async (event) => {
+        event.preventDefault();
         if (confirm('Are you sure you want to delete this address?')) {
-          const addressId = this.dataset.addressId;
-          setButtonLoading(this, true, 'Deleting...');
+          const targetButton = event.currentTarget || btn;
+          const addressId = targetButton.dataset.addressId;
+          if (!addressId) {
+            alert('Invalid address. Please refresh and try again.');
+            return;
+          }
+          setButtonLoading(targetButton, true, 'Deleting...');
           
           try {
+           
+
             const response = await fetch(`/webstoreapi/addresses/${addressId}`, {
+
               method: 'DELETE',
               headers: {
+                
                 'X-Requested-With': 'XMLHttpRequest'
               }
             });
+           
 
             if (response.ok) {
               window.location.reload();
             } else {
-              const error = await response.json();
-              setButtonLoading(this, false);
+                            const error = await response.json();
+
+              setButtonLoading(targetButton, false, 'Delete');
               alert('Error deleting address: ' + (error.error || error.message || 'Unknown error'));
             }
           } catch (error) {
             console.error('Error deleting address:', error);
-            setButtonLoading(this, false);
-            alert('Error deleting address. Please try again.');
+            setButtonLoading(targetButton, false, 'Delete');
+            if (error.name === 'AbortError') {
+              alert('Delete request timed out. Please try again.');
+            } else {
+              alert('Error deleting address. Please try again.');
+            }
           }
         }
       });
     });
   });
-</script>
+</script>

package/test-theme/templates/categories.liquid

@@ -1,20 +1,37 @@
 {% layout 'layout/theme' %}
 
+<!-- Hero Widgets (if any) -->
+{% assign hero_widgets = widgets.hero %}
+{% if hero_widgets and hero_widgets.size > 0 %}
+  <section class="theme-section theme-section--hero" data-section="hero">
+    {% for widget in hero_widgets %}
+      <div class="theme-widget-wrapper" 
+           data-widget-id="{{ widget.id }}" 
+           data-widget-type="{{ widget.type }}"
+           data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
+        {% if widget and widget.template_path %}
+          {% render widget.template_path, widget: widget, settings: settings, shop: shop, is_hero_first: forloop.first %}
+        {% endif %}
+      </div>
+    {% endfor %}
+  </section>
+{% endif %}
+
 <div class="collections-page">
   <div class="collections-header">
-    <h1 class="page-title">Our Collections</h1>
-    <p class="page-description">Discover our curated collections of amazing products</p>
+    <h1 class="page-title">Our Categories</h1>
+    <p class="page-description">Discover our curated categories of amazing products</p>
   </div>
   <div class="collections-content">
-    {% if collections.size > 0 %}
+    {% if categories.size > 0 %}
       <div class="collections-grid">
-        {% for collection in collections %}
+        {% for category in categories %}
           <div class="collection-card">
-            <a href="/{{ collection.slug }}" class="collection-link">
+            <a href="/{{ category.slug }}" class="collection-link">
               <div class="collection-image">
-                {% if collection.image %}
-                  <img src="{{ collection.image }}" 
-                       alt="{{ collection.title | default: collection.name }}" 
+                {% if category.image %}
+                  <img src="{{ category.image }}" 
+                       alt="{{ category.title | default: category.name }}" 
                        width="100%"
                        height="200"
                        loading="lazy">
@@ -35,9 +52,9 @@
                 {% endif %}
               </div>
               <div class="collection-info">
-                <h3 class="collection-title">{{ collection.title | default: collection.name }}</h3>
-                {% if collection.description %}
-                  <p class="collection-description">{{ collection.description }}</p>
+                <h3 class="collection-title">{{ category.title | default: category.name }}</h3>
+                {% if category.description %}
+                  <p class="collection-description">{{ category.description }}</p>
                 {% else %}
                   <p class="collection-description">Setup your products and images in Catalog - Category</p>
                 {% endif %}
@@ -47,12 +64,12 @@
         {% endfor %}
       </div>
     {% else %}
-      <!-- No Collections -->
+      <!-- No Categories -->
       <div class="no-collections">
         <div class="no-collections-content">
           <div class="no-collections-icon">📂</div>
-          <h2>No Collections Available</h2>
-          <p>We're working on creating amazing collections for you. Check back soon!</p>
+          <h2>No Categories Available</h2>
+          <p>We're working on creating amazing categories for you. Check back soon!</p>
           <a href="/products" class="btn btn-primary">Browse All Products</a>
         </div>
       </div>
@@ -65,11 +82,55 @@
   </div>
 </div>
 
+<!-- Content Widgets (if any) -->
+{% assign content_widgets = widgets.content %}
+{% if content_widgets and content_widgets.size > 0 %}
+  <section class="theme-section theme-section--content" data-section="content">
+    {% for widget in content_widgets %}
+      <div class="theme-widget-wrapper" 
+           data-widget-id="{{ widget.id }}" 
+           data-widget-type="{{ widget.type }}"
+           data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
+        {% if widget and widget.template_path %}
+          {% render widget.template_path, widget: widget, settings: settings, shop: shop %}
+        {% endif %}
+      </div>
+    {% endfor %}
+  </section>
+{% endif %}
+
 <style>
+  /* Template-level variable mappings to global theme variables */
+  :root {
+    --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-danger: {{ settings.color_error | default: '#ef4444' }};
+    --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+    --color-text: {{ settings.color_text | default: '#000000' }};
+    --color-text-light: {{ settings.color_text_muted | default: '#666666' }};
+    --color-background: {{ settings.color_background | default: '#ffffff' }};
+    --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+    --color-border: {{ settings.color_border | default: '#cccccc' }};
+    --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --radius-md: var(--radius-md);
+    --radius-lg: var(--radius-lg);
+    --spacing-xs: var(--space-3);
+    --spacing-sm: var(--space-4);
+    --spacing-md: var(--space-6);
+    --spacing-lg: var(--space-8);
+    --spacing-xl: var(--space-12);
+  }
+
 /* Collection Toolbar Styles */
 .collection-toolbar {
-  background-color: #fff;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: var(--color-white);
+  border-bottom: 1px solid var(--color-border);
   padding: 1.5rem 0;
   margin-bottom: 2rem;
 }
@@ -84,7 +145,7 @@
   padding: 50px 20px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
-  border-radius: 12px;
+  border-radius: var(--border-radius-medium);
 }
 
 .page-title {
@@ -114,10 +175,8 @@
 
 .collection-card {
   background: white;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: box-shadow 0.3s ease;
+  border-radius: var(--border-radius-medium);
+  overflow: hidden;  
   position: relative;
   display: flex;
   flex-direction: column;
@@ -125,9 +184,9 @@
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-.collection-card:hover {
+{% comment %} .collection-card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
+} {% endcomment %}
 
 .collection-link {
   text-decoration: none;
@@ -147,6 +206,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--border-radius-medium);
 }
 
 .collection-image img {
@@ -214,7 +274,7 @@
 }
 
 .collection-title {
-  font-size: 1rem;
+  font-size: var(--text-xs);
   margin-bottom: 8px;
   color: #000;
   font-weight: 700;
@@ -320,7 +380,7 @@
 </style>
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
   // Parse URL parameters
   const urlParams = new URLSearchParams(window.location.search);
   
@@ -389,7 +449,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Toggle sort dropdown
   if (sortToggle && sortMenu) {
-    sortToggle.addEventListener('click', function(e) {
+    sortToggle.addEventListener('click', (e) => {
       e.stopPropagation();
       sortMenu.classList.toggle('active');
       sortToggle.setAttribute('aria-expanded', sortMenu.classList.contains('active'));
@@ -397,7 +457,7 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   // Close sort dropdown when clicking outside
-  document.addEventListener('click', function(e) {
+  document.addEventListener('click', (e) => {
     if (sortDropdown && !sortDropdown.contains(e.target)) {
       sortMenu.classList.remove('active');
       sortToggle.setAttribute('aria-expanded', 'false');
@@ -408,7 +468,7 @@ document.addEventListener('DOMContentLoaded', function() {
   if (sortMenu) {
     const sortOptions = sortMenu.querySelectorAll('.sort-option');
     sortOptions.forEach(option => {
-      option.addEventListener('click', function() {
+      option.addEventListener('click', () => {
         const sortValue = this.getAttribute('data-sort');
         const orderValue = this.getAttribute('data-order');
         const label = this.getAttribute('data-label');
@@ -439,11 +499,11 @@ document.addEventListener('DOMContentLoaded', function() {
   const collectionCards = document.querySelectorAll('.collection-card');
   
   collectionCards.forEach(card => {
-    card.addEventListener('mouseenter', function() {
+    card.addEventListener('mouseenter', () => {
       this.style.transform = 'translateY(-8px)';
     });
     
-    card.addEventListener('mouseleave', function() {
+    card.addEventListener('mouseleave', () => {
       this.style.transform = 'translateY(0)';
     });
   });