@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/widgets/header.liquid

@@ -6,25 +6,56 @@
 
 {% liquid
   assign widget_settings = widget.settings
+  assign widget_content = widget.content
   assign widget_data = widget.data
 
   comment
     Static Widget: Content comes from widget_data.content (header configuration)
     Settings come from widget_settings
   endcomment
-
+  
+  if widget.htmlData
+    assign html_content = widget.htmlData
+  elsif widget.HtmlData
+    assign html_content = widget.HtmlData
+  elsif widget.htmlContent
+    assign html_content = widget.htmlContent
+  elsif widget.HtmlContent
+    assign html_content = widget.HtmlContent
+  elsif widget_data.htmlData
+    assign html_content = widget_data.htmlData
+  elsif widget_data.htmlContent
+    assign html_content = widget_data.htmlContent
+  elsif widget_content.Html
+    assign html_content = widget_content.Html
+  elsif widget_content.html
+    assign html_content = widget_content.html
+  elsif widget_content.HtmlContent
+    assign html_content = widget_content.HtmlContent
+  elsif widget_content.htmlContent
+    assign html_content = widget_content.htmlContent
+  elsif widget_content.Body
+    assign html_content = widget_content.Body
+  elsif widget_content.body
+    assign html_content = widget_content.body
+  elsif widget_content.Content
+    assign html_content = widget_content.Content
+  elsif widget_content.content
+    assign html_content = widget_content.content
+  elsif widget_settings.html
+    assign html_content = widget_settings.html
+  elsif widget_data.html
+    assign html_content = widget_data.html
+  else
+    assign html_content = ''
+  endif
+  
   assign content_data = widget_data.content | default: widget.content
   if content_data.size > 0
     assign header_config = content_data.first
   else
     assign header_config = content_data
   endif
-
-  assign html_content_raw = header_config.HtmlContent | default: header_config.htmlContent
-  assign html_content = blank
-  if html_content_raw and html_content_raw != blank and html_content_raw != 'null'
-    assign html_content = html_content_raw
-  endif
   assign hide_close_button = widget_settings.hideCloseButton
   if hide_close_button == nil and header_config and header_config.HideCloseButton != nil
     assign hide_close_button = header_config.HideCloseButton
@@ -38,26 +69,33 @@
     assign text_color = header_config.TextColor
   endif
 %}
-
-{% if html_content and html_content != blank and html_content != 'null' %}
-  <div class="widget-header-announcement" data-widget-id="{{ widget.id }}">
-    <div class="widget-header-announcement__bar"{% if background_color and background_color != 'null' and background_color != blank %} style="background-color: {{ background_color }};"{% endif %}>
-      <div class="widget-header-announcement__content"{% if text_color and text_color != 'null' and text_color != blank %} style="color: {{ text_color }};"{% endif %}>
-        {{ html_content }}
-      </div>
-      {% unless hide_close_button %}
-        <button class="widget-header-announcement__close" aria-label="Close announcement" data-announcement-close>
-          <svg width="16" height="16" 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>
-          </svg>
-        </button>
-      {% endunless %}
+{% if html_content and html_content != blank %}
+<div class="widget-header-announcement" data-widget-id="{{ widget.id }}">
+  <div class="widget-header-announcement__bar"{% if background_color and background_color != 'null' and background_color != blank %} style="background-color: {{ background_color }};"{% endif %}>
+    <div class="widget-header-announcement__content"{% if text_color and text_color != 'null' and text_color != blank %} style="color: {{ text_color }};"{% endif %}>
+      {{ html_content }}
     </div>
+    {% unless hide_close_button %}
+      <button class="widget-header-announcement__close" aria-label="Close announcement" data-announcement-close>
+        <svg width="16" height="16" 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>
+        </svg>
+      </button>
+    {% endunless %}
   </div>
+</div>
 {% endif %}
-
 <style>
+  :root {
+    --header-white: var(--color-white);
+    --header-text: var(--color-text);
+    --header-spacing-element: var(--spacing-component);
+    --header-spacing-small: var(--spacing-small);
+    --header-transition-fast: var(--transition-fast);
+    --header-text-sm: var(--text-sm);
+  }
+  
   /* Announcement Bar Styles */
   .widget-header-announcement__bar {
     display: flex;
@@ -131,11 +169,11 @@
 
 <script>
   // Handle announcement bar close button
-  (function() {
+  (() => {
     const announcementCloseBtn = document.querySelector('[data-announcement-close]');
     if (announcementCloseBtn) {
-      announcementCloseBtn.addEventListener('click', function() {
-        const announcement = this.closest('.widget-header-announcement__bar');
+      announcementCloseBtn.addEventListener('click', () => {
+        const announcement = announcementCloseBtn.closest('.widget-header-announcement__bar');
         if (announcement) {
           announcement.classList.add('hidden');
           // Store in sessionStorage to remember it's closed for this session

package/test-theme/widgets/html.liquid

@@ -7,17 +7,25 @@
   
   comment
     HTML content priority order:
-    1. HtmlContent / htmlContent - direct field from widget (highest priority)
-    2. widget.data.htmlContent - normalized HtmlContent
-    3. widget_content.HtmlContent / htmlContent - from content JSON
-    4. widget_content.Html / html - from content JSON
-    5. Other fallbacks for backward compatibility
+    1. htmlData / HtmlData - separate property saved via editor (highest priority)
+    2. HtmlContent / htmlContent - direct field from widget
+    3. widget.data.htmlContent - normalized HtmlContent
+    4. widget.data.htmlData - normalized HtmlData
+    5. widget_content.HtmlContent / htmlContent - from content JSON
+    6. widget_content.Html / html - from content JSON
+    7. Other fallbacks for backward compatibility
   endcomment
   
-  if widget.htmlContent
+  if widget.htmlData
+    assign html_content = widget.htmlData
+  elsif widget.HtmlData
+    assign html_content = widget.HtmlData
+  elsif widget.htmlContent
     assign html_content = widget.htmlContent
   elsif widget.HtmlContent
     assign html_content = widget.HtmlContent
+  elsif widget_data.htmlData
+    assign html_content = widget_data.htmlData
   elsif widget_data.htmlContent
     assign html_content = widget_data.htmlContent
   elsif widget_content.Html
@@ -87,6 +95,21 @@
   </div>
 
   <style>
+    :root {
+      --html-white: var(--color-white);
+      --html-text: var(--color-text);
+      --html-text-muted: var(--color-text-muted);
+      --html-border: var(--color-border);
+      --html-spacing-section: var(--spacing-section);
+      --html-spacing-component: var(--spacing-component);
+      --html-spacing-element: var(--spacing-element);
+      --html-spacing-xsmall: var(--spacing-xsmall);
+      --html-container-padding: var(--container-padding);
+      --html-radius-lg: var(--radius-lg);
+      --html-radius: var(--radius);
+      --html-text-sm: var(--text-sm);
+    }
+    
     .widget-html {
       padding: {{ padding_top | default: '40' }}px 0 {{ padding_bottom | default: '40' }}px;
     }

package/test-theme/widgets/news.liquid

@@ -114,6 +114,12 @@
 {% endif %}
 
 <style>
+  :root {
+    --news-spacing-section: var(--spacing-section);
+    --news-spacing-component: var(--spacing-component);
+    --news-text-sm: var(--text-sm);
+  }
+  
   .widget-news {
     padding: 40px 0;
   }

package/test-theme/widgets/product-canvas.liquid

@@ -89,6 +89,16 @@
   </section>
 
   <style>
+    :root {
+      --product-canvas-white: var(--color-white);
+      --product-canvas-text: var(--color-text);
+      --product-canvas-spacing-element: var(--spacing-element);
+      --product-canvas-spacing-small: var(--spacing-small);
+      --product-canvas-container-padding: var(--container-padding);
+      --product-canvas-radius-full: var(--radius-full);
+      --product-canvas-transition: var(--transition);
+    }
+    
     /* Product Canvas Widget */
     .widget-product-canvas {
       width: 100%;
@@ -120,13 +130,12 @@
       width: 48px;
       height: 48px;
       background: rgba(255, 255, 255, 0.9);
-      border: 2px solid {{ settings.color_text }};
+      border: 2px solid {{ settings.color_text | default: '#000000' }};
       border-radius: 50%;
-      color: {{ settings.color_text }};
+      color: {{ settings.color_text | default: '#000000' }};
       text-decoration: none;
       transition: all 0.3s ease;
       z-index: 10;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
     
     .widget-product-canvas .anchor-icon svg {
@@ -135,10 +144,9 @@
     }
     
     .widget-product-canvas .anchor-icon:hover {
-      background: {{ settings.color_text }};
-      color: {{ settings.color_background }};
+      background: {{ settings.color_text | default: '#000000' }};
+      color: {{ settings.color_background | default: '#ffffff' }};
       transform: scale(1.15);
-      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
     }
     
     /* Pulse Grow on Hover Animation */
@@ -188,9 +196,9 @@
     
     /* Container */
     .widget-product-canvas .container {
-      max-width: {{ settings.container_width }}px;
+      max-width: {{ settings.container_width | default: 1200 }}px;
       margin: 0 auto;
-      padding: 0 {{ settings.container_padding }}px;
+      padding: 0 {{ settings.container_padding | default: 16 }}px;
     }
     
     /* Mobile Responsive */
@@ -206,7 +214,7 @@
       }
       
       .widget-product-canvas .container {
-        padding: 0 {{ settings.spacing_element }}px;
+        padding: 0 {{ settings.spacing_element | default: 16 }}px;
       }
     }
     
@@ -222,14 +230,14 @@
       }
       
       .widget-product-canvas .container {
-        padding: 0 {{ settings.spacing_small }}px;
+        padding: 0 {{ settings.spacing_small | default: 8 }}px;
       }
     }
   </style>
 {% else %}
   <section class="widget widget-product-canvas widget-product-canvas--empty" data-widget-id="{{ widget.id }}">
-    <div class="widget-empty" style="padding: {{ settings.spacing_section }}px {{ settings.container_padding }}px; text-align: center;">
-      <p style="color: {{ settings.color_text_muted }}; margin: 0;">{{ widget_settings.empty_state | default: 'Please configure an image URL for the product canvas.' }}</p>
+    <div class="widget-empty" style="padding: {{ settings.spacing_section | default: 64 }}px {{ settings.container_padding | default: 16 }}px; text-align: center;">
+      <p style="color: {{ settings.color_text_muted | default: '#666666' }}; margin: 0;">{{ widget_settings.empty_state | default: 'Please configure an image URL for the product canvas.' }}</p>
     </div>
   </section>
 {% endif %}

package/test-theme/widgets/product-carousel.liquid

@@ -2,32 +2,51 @@
   assign widget_settings = widget.settings
   assign widget_data = widget.data
 
-  comment
-    Dynamic Widget: Products come from widget_data.products (enriched by WidgetService)
-    Settings come from widget_settings
-  endcomment
+  # Products
   assign products = widget_data.products
+
+  # Heading / Description
   assign heading = widget_settings.title
   assign description = widget_settings.subtitle
+
+  # Show title logic
   assign show_widget_title_raw = widget_settings.showWidgetTitle | default: 'Yes'
+
   if show_widget_title_raw == null or show_widget_title_raw == blank or show_widget_title_raw == 'null'
     assign show_widget_title = true
+  elsif show_widget_title_raw == 'Yes' or show_widget_title_raw == true
+    assign show_widget_title = true
   else
-    if show_widget_title_raw == 'Yes'
-      assign show_widget_title = true
-    elsif show_widget_title_raw == true
-      assign show_widget_title = true
-    else
-      assign show_widget_title = false
-    endif
+    assign show_widget_title = false
   endif
+
+  # Title alignment
   assign widget_title_alignment_raw = widget_settings.widgetTitleAlignment | default: 'center'
   assign widget_title_alignment = widget_title_alignment_raw | downcase
+
   if widget_title_alignment != 'left' and widget_title_alignment != 'right' and widget_title_alignment != 'center'
     assign widget_title_alignment = 'center'
   endif
+
+  # Background
   assign background_color = widget_settings.backgroundColor
+
+  # Priority Count (clamped 0–12)
+  assign priority_count = widget_settings.priorityCount | default: widget_settings.prioritizeCount | default: widget_settings.priority | default: 1 | plus: 0
+
+  if priority_count > 12
+    assign priority_count = 12
+  endif
+
+  if priority_count < 0
+    assign priority_count = 0
+  endif
 %}
+{% assign is_hero_priority_widget = false %}
+{% if is_hero_first == true or is_hero_first == 'true' or is_hero_first == 1 or is_hero_first == '1' %}
+  {% assign is_hero_priority_widget = true %}
+{% endif %}
+
 
 <section class="widget widget-product-carousel" data-widget-id="{{ widget.id }}" data-carousel-widget{% if background_color and background_color != blank and background_color != 'null' %} style="background-color: {{ background_color }};"{% endif %}>
   <div class="carousel-container">
@@ -73,7 +92,33 @@
           <div class="carousel-track" data-carousel-track>
             {% for product in products %}
               <div class="carousel-slide" data-slide-index="{{ forloop.index0 }}">
-                {% render 'snippets/product-card', product: product, widget: widget %}
+                {% comment %} Determine product first image for preload (simple fallback) {% endcomment %}
+                {% assign product_image = nil %}
+                {% if product.thumbnailImage1 and product.thumbnailImage1.url %}
+                  {% assign product_image = product.thumbnailImage1.url %}
+                {% elsif product.images and product.images.size > 0 %}
+                  {% assign first_image = product.images | first %}
+                  {% if first_image.url %}
+                    {% assign product_image = first_image.url %}
+                  {% endif %}
+                {% elsif product.thumbnailImage and product.thumbnailImage.url %}
+                  {% assign product_image = product.thumbnailImage.url %}
+                {% endif %}
+
+                {% if forloop.index0 < priority_count %}
+                  {% comment %} Preload only prioritized card image; avoid aggressive document/fetch preloads that can hurt LCP {% endcomment %}
+                  {% if product_image and is_hero_priority_widget %}
+                    <link rel="preload" as="image" href="{{ product_image }}" fetchpriority="high">
+                  {% endif %}
+
+                  {% if is_hero_priority_widget %}
+                    {% render 'snippets/product-card', product: product, widget: widget, loading: 'eager', image_fetchpriority: 'high' %}
+                  {% else %}
+                    {% render 'snippets/product-card', product: product, widget: widget, loading: 'eager' %}
+                  {% endif %}
+                {% else %}
+                  {% render 'snippets/product-card', product: product, widget: widget %}
+                {% endif %}
               </div>
             {% endfor %}
           </div>
@@ -96,16 +141,34 @@
   </div>
 
   <style>
+    :root {
+      --product-carousel-white: var(--color-white);
+      --product-carousel-text: var(--color-text);
+      --product-carousel-text-muted: var(--color-text-muted);
+      --product-carousel-border: var(--color-border);
+      --product-carousel-spacing-section: var(--spacing-section);
+      --product-carousel-spacing-large: var(--spacing-large);
+      --product-carousel-spacing-component: var(--spacing-component);
+      --product-carousel-spacing-element: var(--spacing-element);
+      --product-carousel-spacing-small: var(--spacing-small);
+      --product-carousel-spacing-xsmall: var(--spacing-xsmall);
+      --product-carousel-container-padding: var(--container-padding);
+      --product-carousel-radius-full: var(--radius-full);
+      --product-carousel-radius: var(--radius);
+      --product-carousel-transition-fast: var(--transition-fast);
+      --product-carousel-text-sm: var(--text-sm);
+    }
+    
     /* Product Carousel - True Carousel Behavior */
     .widget-product-carousel {
-      padding: 48px 0;
+      padding: var(--product-carousel-spacing-section) 0;
       overflow: hidden;
     }
     
     .widget-product-carousel .carousel-container {
       max-width: 1400px;
       margin: 0 auto;
-      padding: 0 24px;
+      padding: 0 var(--product-carousel-container-padding);
     }
     
     /* Header */
@@ -113,8 +176,8 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 28px;
-      gap: 16px;
+      margin-bottom: var(--product-carousel-spacing-component);
+      gap: var(--product-carousel-spacing-element);
       position: static;
       z-index: auto;
     }
@@ -124,45 +187,45 @@
     }
     
     .widget-product-carousel .carousel-title {
-      font-size: 1.4rem;
+      font-size: var(--product-carousel-text-sm);
       font-weight: 500;
       line-height: 1.3;
-      color: #111;
+      color: var(--product-carousel-text);
       margin: 0;
       letter-spacing: -0.01em;
     }
     
     .widget-product-carousel .carousel-subtitle {
-      font-size: 14px;
-      color: #6b7280;
-      margin: 6px 0 0 0;
+      font-size: var(--product-carousel-text-sm);
+      color: var(--product-carousel-text-muted);
+      margin: var(--product-carousel-spacing-xsmall) 0 0 0;
     }
     
     /* Header Nav Arrows */
     .widget-product-carousel .carousel-nav {
       display: flex;
-      gap: 8px;
+      gap: var(--product-carousel-spacing-xsmall);
     }
     
     .widget-product-carousel .carousel-arrow {
       width: 40px;
       height: 40px;
-      border-radius: 50%;
-      border: 1px solid #e0e0e0;
-      background: #fff;
+      border-radius: var(--product-carousel-radius-full);
+      border: 1px solid var(--product-carousel-border);
+      background: var(--product-carousel-white);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      color: #333;
-      transition: all 0.2s ease;
+      color: var(--product-carousel-text);
+      transition: all var(--product-carousel-transition-fast);
       flex-shrink: 0;
     }
     
     .widget-product-carousel .carousel-arrow:hover:not(:disabled) {
-      background: #111;
-      color: #fff;
-      border-color: #111;
+      background: var(--product-carousel-text);
+      color: var(--product-carousel-white);
+      border-color: var(--product-carousel-text);
     }
     
     .widget-product-carousel .carousel-arrow:disabled {
@@ -175,7 +238,7 @@
       position: relative;
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: var(--product-carousel-spacing-small);
     }
     
     /* Side Navigation Arrows */
@@ -183,22 +246,21 @@
       display: none; /* Hidden by default, shown on desktop */
       width: 30px;
       height: 30px;
-      border-radius: 50%;
+      border-radius: var(--product-carousel-radius-full);
       border: none;
-      background: #fff;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+      background: var(--product-carousel-white);
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      color: #333;
-      transition: all 0.2s ease;
+      color: var(--product-carousel-text);
+      transition: all var(--product-carousel-transition-fast);
       flex-shrink: 0;
       z-index: 10;
     }
     
     .widget-product-carousel .carousel-side-arrow:hover:not(:disabled) {
-      background: #111;
-      color: #fff;
+      background: var(--product-carousel-text);
+      color: var(--product-carousel-white);
       transform: scale(1.05);
     }
     
@@ -217,7 +279,7 @@
     /* The Scrolling Track */
     .widget-product-carousel .carousel-track {
       display: flex !important;
-      gap: 20px;
+      gap: var(--product-carousel-spacing-component);
       overflow-x: auto !important;
       overflow-y: hidden !important;
       scroll-snap-type: x mandatory;
@@ -225,7 +287,7 @@
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
       -ms-overflow-style: none;
-      padding: 4px 0;
+      padding: var(--product-carousel-spacing-xsmall) 0;
     }
     
     .widget-product-carousel .carousel-track::-webkit-scrollbar {
@@ -253,29 +315,29 @@
     .widget-product-carousel .carousel-dots {
       display: flex;
       justify-content: center;
-      gap: 8px;
-      margin-top: 20px;
+      gap: var(--product-carousel-spacing-xsmall);
+      margin-top: var(--product-carousel-spacing-component);
     }
     
     .widget-product-carousel .carousel-dot {
       width: 8px;
       height: 8px;
-      border-radius: 50%;
-      background: #d1d5db;
+      border-radius: var(--product-carousel-radius-full);
+      background: var(--product-carousel-border);
       border: none;
       padding: 0;
       cursor: pointer;
-      transition: all 0.2s ease;
+      transition: all var(--product-carousel-transition-fast);
     }
     
     .widget-product-carousel .carousel-dot:hover {
-      background: #9ca3af;
+      background: var(--product-carousel-text-muted);
     }
     
     .widget-product-carousel .carousel-dot.active {
-      background: #111;
+      background: var(--product-carousel-text);
       width: 24px;
-      border-radius: 4px;
+      border-radius: var(--product-carousel-radius);
     }
     
     /* Desktop: Show side arrows, hide header arrows */
@@ -295,23 +357,23 @@
         max-width: calc(33.333% - 14px) !important;
       }
       .widget-product-carousel .carousel-track {
-        gap: 20px;
+        gap: var(--product-carousel-spacing-component);
       }
     }
     
     /* Mobile: 2 items */
     @media (max-width: 768px) {
       .widget-product-carousel {
-        padding: 36px 0;
+        padding: var(--product-carousel-spacing-large) 0;
       }
       .widget-product-carousel .carousel-container {
-        padding: 0 16px;
+        padding: 0 var(--product-carousel-spacing-element);
       }
       .widget-product-carousel .carousel-title {
         font-size: 1.3rem;
       }
       .widget-product-carousel .carousel-track {
-        gap: 12px;
+        gap: var(--product-carousel-spacing-small);
         padding-left: 0;
         padding-right: 0;
       }
@@ -324,17 +386,17 @@
         height: 36px;
       }
       .widget-product-carousel .carousel-dots {
-        margin-top: 16px;
+        margin-top: var(--product-carousel-spacing-element);
       }
     }
     
     /* Small Mobile */
     @media (max-width: 480px) {
       .widget-product-carousel .carousel-container {
-        padding: 0 12px;
+        padding: 0 var(--product-carousel-spacing-small);
       }
       .widget-product-carousel .carousel-track {
-        gap: 10px;
+        gap: var(--product-carousel-spacing-small);
       }
       .widget-product-carousel .carousel-slide {
         flex: 0 0 calc(50% - 5px) !important;
@@ -347,7 +409,7 @@
   </style>
 
   <script>
-  (function() {
+  (() => {
     // Wait for DOM
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initCarousel);

package/test-theme/widgets/shared/product-grid.liquid

@@ -117,6 +117,18 @@
 {% endif %}
 
 <style>
+  :root {
+    --product-grid-white: var(--color-white);
+    --product-grid-text: var(--color-text);
+    --product-grid-text-muted: var(--color-text-muted);
+    --product-grid-spacing-section: var(--spacing-section);
+    --product-grid-spacing-component: var(--spacing-component);
+    --product-grid-spacing-element: var(--spacing-element);
+    --product-grid-spacing-small: var(--spacing-small);
+    --product-grid-spacing-xsmall: var(--spacing-xsmall);
+    --product-grid-text-sm: var(--text-sm);
+  }
+  
   /* Widget Products Grid - Responsive Layout */
   /* CRITICAL: All product cards MUST be identical size */