@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/templates/products.liquid

@@ -3,8 +3,53 @@
   O2VEND Default Theme - Products Template
 {% endcomment %}
 
+<style>
+  :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);
+  }
+</style>
+
 <!-- Breadcrumb Navigation Removed for Default Style -->
 
+<!-- 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 %}
+
 <!-- Collection Header -->
 <section class="collection-header">
   <div class="collection-header-wrapper">
@@ -110,7 +155,7 @@
       <div class="products-grid" id="products-grid">
         {% for product in collection.products %}
           {% hook 'product_card_before' %}
-          {% include 'snippets/product-card', product: product %}
+          {% render  'snippets/product-card', product: product %}
           {% hook 'product_card_after' %}
         {% endfor %}
       </div>
@@ -123,7 +168,7 @@
             <p class="no-products-description">Try adjusting your filters or browse our other collections.</p>
             <div class="no-products-actions">
               <button class="btn btn-primary" id="clear-all-filters">Clear All Filters</button>
-              <a href="/collections" class="btn btn-outline">Browse Collections</a>
+              <a href="/categories" class="btn btn-outline">Browse Categories</a>
             </div>
           </div>
         </div>
@@ -131,14 +176,31 @@
     </div>
     
     <!-- Pagination -->
-    {% include 'snippets/pagination', pagination: pagination %}
+    {% render  'snippets/pagination', pagination: pagination %}
   </div>
 </section>
 {% hook 'product_list_after' %}
 
+<!-- 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 %}
+
 <script>
 // Collection page specific JavaScript - Server-side filtering & sorting
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
   // Parse URL parameters
   const urlParams = new URLSearchParams(window.location.search);
   
@@ -321,27 +383,90 @@ document.addEventListener('DOMContentLoaded', function() {
   const resetFiltersBtn = document.getElementById('reset-filters');
   const clearAllFiltersBtn = document.getElementById('clear-all-filters');
   
+  // Calculate scrollbar width to prevent layout shift
+  function getScrollbarWidth() {
+    // Create a temporary div to measure scrollbar width
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.overflow = 'scroll';
+    outer.style.msOverflowStyle = 'scrollbar';
+    outer.style.width = '100px';
+    outer.style.position = 'absolute';
+    outer.style.top = '-9999px';
+    document.body.appendChild(outer);
+    
+    const inner = document.createElement('div');
+    inner.style.width = '100%';
+    outer.appendChild(inner);
+    
+    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+    
+    outer.parentNode.removeChild(outer);
+    
+    return scrollbarWidth;
+  }
+  
+  // Store scrollbar width in CSS variable (only calculate once)
+  let scrollbarWidth = null;
+  function getScrollbarWidthCached() {
+    if (scrollbarWidth === null) {
+      scrollbarWidth = getScrollbarWidth();
+      document.documentElement.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
+    }
+    return scrollbarWidth;
+  }
+  
+  // Initialize scrollbar width on page load
+  getScrollbarWidthCached();
+  
+  // Function to open filter with scroll lock
+  function openFilter() {
+    const scrollY = window.scrollY;
+    // Store scroll position before applying fixed position
+    document.body.dataset.scrollY = scrollY;
+    document.body.style.top = `-${scrollY}px`;
+    document.body.classList.add('filter-open');
+  }
+  
+  // Function to close filter and restore scroll
+  function closeFilter() {
+    const scrollY = parseInt(document.body.dataset.scrollY || '0');
+    document.body.classList.remove('filter-open');
+    document.body.style.top = '';
+    delete document.body.dataset.scrollY;
+    // Restore scroll position
+    window.scrollTo(0, scrollY);
+  }
+  
   // Toggle filter dropdown
   if (filterToggle && filterDropdown) {
-    filterToggle.addEventListener('click', function() {
+    filterToggle.addEventListener('click', () => {
+      const isOpening = !filterDropdown.classList.contains('active');
       filterDropdown.classList.toggle('active');
-      document.body.classList.toggle('filter-open');
+      
+      if (isOpening) {
+        openFilter();
+      } else {
+        closeFilter();
+      }
     });
   }
   
   // Close filter dropdown
   if (filterClose) {
-    filterClose.addEventListener('click', function() {
+    filterClose.addEventListener('click', () => {
       filterDropdown.classList.remove('active');
-      document.body.classList.remove('filter-open');
+      closeFilter();
     });
   }
   
   // Close filter dropdown when clicking outside
-  document.addEventListener('click', function(e) {
-    if (filterDropdown && !filterDropdown.contains(e.target) && !filterToggle.contains(e.target)) {
+  document.addEventListener('click', (e) => {
+    if (filterDropdown && filterDropdown.classList.contains('active') && 
+        !filterDropdown.contains(e.target) && 
+        !filterToggle.contains(e.target)) {
       filterDropdown.classList.remove('active');
-      document.body.classList.remove('filter-open');
+      closeFilter();
     }
   });
   
@@ -374,7 +499,7 @@ document.addEventListener('DOMContentLoaded', function() {
   
   // Apply filters - Submit to server
   if (applyFiltersBtn) {
-    applyFiltersBtn.addEventListener('click', function() {
+    applyFiltersBtn.addEventListener('click', () => {
       applyFiltersToURL();
     });
   }
@@ -405,16 +530,16 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   if (sortToggle && sortMenu) {
-    sortToggle.addEventListener('click', function() {
+    sortToggle.addEventListener('click', () => {
       sortDropdown.classList.toggle('open');
       const expanded = sortToggle.getAttribute('aria-expanded') === 'true';
       sortToggle.setAttribute('aria-expanded', (!expanded).toString());
     });
 
     sortMenu.querySelectorAll('.sort-option').forEach(option => {
-      option.addEventListener('click', function() {
-        const value = this.getAttribute('data-value');
-        const label = this.getAttribute('data-label') || this.textContent;
+      option.addEventListener('click', () => {
+        const value = option.getAttribute('data-value');
+        const label = option.getAttribute('data-label') || option.textContent;
         
         // Update sort toggle label
         if (sortLabel) {
@@ -432,8 +557,8 @@ document.addEventListener('DOMContentLoaded', function() {
           opt.classList.remove('active', 'selected');
           opt.setAttribute('aria-selected', 'false');
         });
-        this.classList.add('active', 'selected');
-        this.setAttribute('aria-selected', 'true');
+        option.classList.add('active', 'selected');
+        option.setAttribute('aria-selected', 'true');
         
         sortDropdown.classList.remove('open');
         applySort(value);
@@ -441,7 +566,7 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     // Close on outside click
-    document.addEventListener('click', function(e) {
+    document.addEventListener('click', (e) => {
       if (!sortDropdown.contains(e.target)) {
         sortDropdown.classList.remove('open');
         sortToggle.setAttribute('aria-expanded', 'false');
@@ -454,12 +579,12 @@ document.addEventListener('DOMContentLoaded', function() {
   const productsGrid = document.getElementById('products-grid');
   
   viewBtns.forEach(btn => {
-    btn.addEventListener('click', function() {
-      const view = this.dataset.view;
+    btn.addEventListener('click', () => {
+      const view = btn.dataset.view;
       
       // Update active button
       viewBtns.forEach(b => b.classList.remove('active'));
-      this.classList.add('active');
+      btn.classList.add('active');
       
       // Update grid class
       if (productsGrid) {
@@ -491,26 +616,26 @@ document.addEventListener('DOMContentLoaded', function() {
   const priceRangeMax = document.getElementById('price-range-max');
   
   if (priceMin && priceRangeMin) {
-    priceMin.addEventListener('input', function() {
-      priceRangeMin.value = this.value;
+    priceMin.addEventListener('input', () => {
+      priceRangeMin.value = priceMin.value;
     });
   }
   
   if (priceMax && priceRangeMax) {
-    priceMax.addEventListener('input', function() {
-      priceRangeMax.value = this.value;
+    priceMax.addEventListener('input', () => {
+      priceRangeMax.value = priceMax.value;
     });
   }
   
   if (priceRangeMin && priceMin) {
-    priceRangeMin.addEventListener('input', function() {
-      priceMin.value = this.value;
+    priceRangeMin.addEventListener('input', () => {
+      priceMin.value = priceRangeMin.value;
     });
   }
   
   if (priceRangeMax && priceMax) {
-    priceRangeMax.addEventListener('input', function() {
-      priceMax.value = this.value;
+    priceRangeMax.addEventListener('input', () => {
+      priceMax.value = priceRangeMax.value;
     });
   }
 });