@o2vend/theme-cli 1.0.37 → 1.0.38

package/test-theme/widgets/category-list-carousel.liquid

@@ -30,6 +30,10 @@
   assign background_color = widget_settings.backgroundColor
   assign text_color = widget_settings.textColor
 %}
+{% 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-category-carousel" data-widget-id="{{ widget.id }}" data-category-carousel{% if background_color and background_color != blank and background_color != 'null' %} style="background-color: {{ background_color }};"{% endif %}>
   <div class="category-carousel-container">
@@ -114,7 +118,10 @@
                 <a href="{{ cat_url }}" class="category-carousel-item">
                   <div class="category-carousel-item__media">
                     {% if cat_image != blank and cat_image != nil and cat_image != 'null' %}
-                      <img src="{{ cat_image }}" alt="{{ cat_name }}" width="300" height="300" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                      {% if forloop.first and is_hero_priority_widget %}
+                        <link rel="preload" as="image" href="{{ cat_image }}" fetchpriority="high">
+                      {% endif %}
+                      <img src="{{ cat_image }}" alt="{{ cat_name }}" width="300" height="300" loading="{% if forloop.first %}eager{% else %}lazy{% endif %}" {% if forloop.first and is_hero_priority_widget %}fetchpriority="high"{% endif %} data-img-fallback="next" data-img-fallback-display="flex">
                       <span class="category-carousel-item__placeholder category-carousel-item__placeholder--fallback" style="display: none;">
                         <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                           <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/>
@@ -157,6 +164,27 @@
   </div>
 
   <style>
+    :root {
+      --category-carousel-white: var(--color-white);
+      --category-carousel-text: var(--color-text);
+      --category-carousel-text-muted: var(--color-text-muted);
+      --category-carousel-border: var(--color-border);
+      --category-carousel-spacing-section: var(--spacing-section);
+      --category-carousel-spacing-large: var(--spacing-large);
+      --category-carousel-spacing-component: var(--spacing-component);
+      --category-carousel-spacing-element: var(--spacing-element);
+      --category-carousel-spacing-small: var(--spacing-small);
+      --category-carousel-spacing-xsmall: var(--spacing-xsmall);
+      --category-carousel-container-padding: var(--container-padding);
+      --category-carousel-radius-xl: var(--radius-xl);
+      --category-carousel-radius-lg: var(--radius-lg);
+      --category-carousel-radius: var(--radius);
+      --category-carousel-radius-full: var(--radius-full);
+      --category-carousel-transition-fast: var(--transition-fast);
+      --category-carousel-text-sm: var(--text-sm);
+      --category-carousel-text-xs: var(--text-xs);
+    }
+    
     /* Category Carousel - True Carousel Behavior */
     .widget-category-carousel {
       padding: 48px 0;
@@ -249,7 +277,6 @@
       border-radius: 50%;
       border: none;
       background: #fff;
-      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
       align-items: center;
       justify-content: center;
       cursor: pointer;
@@ -310,15 +337,13 @@
       background: #fff;
       border-radius: 12px;
       overflow: hidden;
-      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
       text-decoration: none;
       color: inherit;
-      transition: transform 0.25s ease, box-shadow 0.25s ease;
+      transition: transform 0.25s ease;
     }
     
     .widget-category-carousel .category-carousel-item:hover {
       transform: translateY(-4px);
-      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
     }
     
     .widget-category-carousel .category-carousel-item__media {
@@ -330,8 +355,7 @@
     
     .widget-category-carousel .category-carousel-item__media img {
       width: 100%;
-      height: 100%;
-      object-fit: cover;
+      object-fit: contain;
       transition: transform 0.3s ease;
     }
     
@@ -504,7 +528,7 @@
   </style>
 
   <script>
-  (function() {
+  (() => {
     // Wait for DOM
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initCategoryCarousel);

package/test-theme/widgets/category-list.liquid

@@ -95,7 +95,7 @@
             <a href="{{ cat_url }}" class="widget-category-list__link">
               <div class="widget-category-list__media">
                 {% if cat_image != blank and cat_image != nil and cat_image != 'null' %}
-                  <img src="{{ cat_image }}" alt="{{ cat_name }}" width="300" height="300" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                  <img src="{{ cat_image }}" alt="{{ cat_name }}" width="300" height="300" loading="lazy" data-img-fallback="next" data-img-fallback-display="flex">
                   <span class="widget-category-list__placeholder widget-category-list__placeholder--fallback" style="display: none;" aria-hidden="true">
                     <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                       <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/>
@@ -129,6 +129,24 @@
   </div>
 
   <style>
+    :root {
+      --category-list-white: var(--color-white);
+      --category-list-text: var(--color-text);
+      --category-list-text-muted: var(--color-text-muted);
+      --category-list-spacing-section: var(--spacing-section);
+      --category-list-spacing-large: var(--spacing-large);
+      --category-list-spacing-component: var(--spacing-component);
+      --category-list-spacing-element: var(--spacing-element);
+      --category-list-spacing-small: var(--spacing-small);
+      --category-list-spacing-xsmall: var(--spacing-xsmall);
+      --category-list-container-padding: var(--container-padding);
+      --category-list-radius-xl: var(--radius-xl);
+      --category-list-radius-lg: var(--radius-lg);
+      --category-list-transition: var(--transition);
+      --category-list-text-sm: var(--text-sm);
+      --category-list-text-xs: var(--text-xs);
+    }
+    
     .widget-category-list {
       padding: 48px 0;
       background: transparent;
@@ -178,13 +196,11 @@
       background: #fff;
       border-radius: 12px;
       overflow: hidden;
-      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
-      transition: transform 0.25s ease, box-shadow 0.25s ease;
+      transition: transform 0.25s ease;
     }
     
     .widget-category-list__item:hover {
       transform: translateY(-4px);
-      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
     }
     
     .widget-category-list__link {
@@ -202,8 +218,7 @@
     
     .widget-category-list__media img {
       width: 100%;
-      height: 100%;
-      object-fit: cover;
+      object-fit: contain;
       transition: transform 0.3s ease;
     }
     

package/test-theme/widgets/category.liquid

@@ -12,10 +12,45 @@
     Dynamic Widget: Category comes from widget_data.category (enriched by WidgetService)
     Settings come from widget_settings
   endcomment
+  assign heading = widget_settings.title | default: widget.Title | default: widget.title
+  assign subtitle = widget_settings.subtitle | default: widget.Subtitle | default: widget.subtitle
   assign background_color = widget_settings.backgroundColor
   assign text_color = widget_settings.textColor | default: '#ffffff'
-  assign show_container = widget_settings.showContainer
-  assign show_bottom_margin = widget_settings.showWidgetBottomMargin
+  assign show_container_raw = widget_settings.showContainer | default: widget_settings.ShowContainer | default: true
+  if show_container_raw == null or show_container_raw == blank or show_container_raw == 'null'
+    assign show_container = true
+  else
+    if show_container_raw == 'Yes' or show_container_raw == true or show_container_raw == 'true' or show_container_raw == 1 or show_container_raw == '1'
+      assign show_container = true
+    else
+      assign show_container = false
+    endif
+  endif
+  assign show_bottom_margin_raw = widget_settings.showWidgetBottomMargin | default: widget_settings.ShowWidgetBottomMargin | default: true
+  if show_bottom_margin_raw == null or show_bottom_margin_raw == blank or show_bottom_margin_raw == 'null'
+    assign show_bottom_margin = true
+  else
+    if show_bottom_margin_raw == 'Yes' or show_bottom_margin_raw == true or show_bottom_margin_raw == 'true' or show_bottom_margin_raw == 1 or show_bottom_margin_raw == '1'
+      assign show_bottom_margin = true
+    else
+      assign show_bottom_margin = false
+    endif
+  endif
+  assign show_widget_title_raw = widget_settings.showWidgetTitle | default: widget_settings.ShowWidgetTitle | default: true
+  if show_widget_title_raw == null or show_widget_title_raw == blank or show_widget_title_raw == 'null'
+    assign show_widget_title = true
+  else
+    if show_widget_title_raw == 'Yes' or show_widget_title_raw == true or show_widget_title_raw == 'true' or show_widget_title_raw == 1 or show_widget_title_raw == '1'
+      assign show_widget_title = true
+    else
+      assign show_widget_title = false
+    endif
+  endif
+  assign widget_title_alignment_raw = widget_settings.widgetTitleAlignment | default: widget_settings.WidgetTitleAlignment | default: 'left'
+  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 = 'left'
+  endif
   
  
   assign category_slug = category.slug | default: category.Slug | default: category.handle
@@ -59,6 +94,19 @@
 
 {% if category %}
   <section class="widget widget-category-banner" data-widget-id="{{ widget.id }}">
+    {% if show_widget_title %}
+      {% if heading or subtitle %}
+        <header class="widget-header" style="text-align: {{ widget_title_alignment }};">
+          {% if heading and heading != blank %}
+            <h2 class="widget-title">{{ heading }}</h2>
+          {% endif %}
+          {% if subtitle and subtitle != blank %}
+            <p class="widget-subtitle">{{ subtitle }}</p>
+          {% endif %}
+        </header>
+      {% endif %}
+    {% endif %}
+
     <a href="{{ category_url }}" class="category-banner{% unless category_image %} category-banner--no-image{% endunless %}">
       
       {% if category_image %}
@@ -69,7 +117,7 @@
                width="1400" 
                height="400" 
                loading="lazy"
-               onerror="this.style.display='none';">
+               data-img-fallback="hide">
         </div>
         <div class="category-banner__overlay"></div>
         <div class="category-banner__content category-banner__content--overlay">
@@ -114,36 +162,62 @@
     </a>
 
     <style>
+      :root {
+        --category-banner-white: var(--color-white);
+        --category-banner-text: var(--color-text);
+        --category-banner-spacing-component: var(--spacing-component);
+        --category-banner-spacing-element: var(--spacing-element);
+        --category-banner-spacing-small: var(--spacing-small);
+        --category-banner-spacing-xsmall: var(--spacing-xsmall);
+        --category-banner-container-padding: var(--container-padding);
+        --category-banner-transition: var(--transition);
+        --category-banner-transition-fast: var(--transition-fast);
+      }
+      
       .widget-category-banner {
         width: 100%;
-        padding: 0 {{ settings.container_padding }}px;
-        {% if show_bottom_margin == 'Yes' %}
-          margin-bottom: {{ settings.spacing_large }}px;
-        {% elsif show_bottom_margin == 'No' %}
-          margin-bottom: 0;
+        padding: 0 {{ settings.container_padding | default: 16 }}px;
+        {% if show_bottom_margin %}
+          margin-bottom: {{ settings.spacing_large | default: 32 }}px;
         {% else %}
-          margin-bottom: {{ settings.spacing_component }}px;
+          margin-bottom: 0;
         {% endif %}
       }
+
+      .widget-category-banner .widget-header {
+        margin-bottom: 16px;
+      }
+
+      .widget-category-banner .widget-title {
+        font-size: 1.4rem;
+        font-weight: 500;
+        line-height: 1.3;
+        margin: 0 0 6px 0;
+        color: #111;
+      }
+
+      .widget-category-banner .widget-subtitle {
+        font-size: 14px;
+        margin: 0;
+        color: #6b7280;
+      }
       
       /* ===== WITH IMAGE: Full Banner ===== */
       .category-banner {
         display: block;
         position: relative;
         width: 100%;
-        max-width: {{ settings.container_width }}px;
+        max-width: {{ settings.container_width | default: 1200 }}px;
         margin: 0 auto;
         height: 280px;
         overflow: hidden;
         text-decoration: none;
-        color: {{ settings.color_background }};
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-        transition: box-shadow 0.3s ease, transform 0.3s ease;
+        color: {{ settings.color_background | default: '#ffffff' }};
+        transition: transform var(--category-banner-transition);
         border-radius: var(--border-radius-medium);
       }
       
       .category-banner:hover {
-        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
         transform: translateY(-2px);
       }
       
@@ -165,7 +239,7 @@
         height: 100%;
         object-fit: cover;
         object-position: center;
-        transition: transform 0.6s ease;
+        transition: transform var(--category-banner-transition);
       }
       
       {% comment %} 
@@ -201,8 +275,7 @@
         margin: 0 0 16px 0;
         line-height: 1.15;
         letter-spacing: -0.025em;
-        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
-        color: #fff;
+        color: var(--category-banner-white);
       }
       
       .category-banner__content--overlay .category-banner__description {
@@ -211,8 +284,7 @@
         margin: 0 0 28px 0;
         opacity: 0.95;
         max-width: 500px;
-        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
-        color: #fff;
+        color: var(--category-banner-white);
       }
       
       .category-banner__cta {
@@ -224,20 +296,19 @@
         text-transform: uppercase;
         letter-spacing: 0.1em;
         padding: 14px 32px;
-        background: {{ settings.color_background }};
-        color: {{ settings.color_text }};
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+        background: {{ settings.color_background | default: '#ffffff' }};
+        color: {{ settings.color_text | default: '#000000' }};
+        transition: all var(--category-banner-transition);
         border-radius: var(--border-radius-medium);
       }
       
       .category-banner:hover .category-banner__cta {
-        background: {{ settings.color_text }};
-        color: {{ settings.color_background }};
+        background: {{ settings.color_text | default: '#000000' }};
+        color: {{ settings.color_background | default: '#ffffff' }};
       }
       
       .category-banner__cta svg {
-        transition: transform 0.3s ease;
+        transition: transform var(--category-banner-transition);
       }
       
       .category-banner:hover .category-banner__cta svg {
@@ -293,14 +364,13 @@
       
       .category-banner__cta--solid {
         flex-shrink: 0;
-        background: #fff;
+        background: var(--category-banner-white);
         color: #764ba2;
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
       }
       
       .category-banner--no-image:hover .category-banner__cta--solid {
-        background: #111;
-        color: #fff;
+        background: var(--category-banner-text);
+        color: var(--category-banner-white);
       }
       
       /* ===== Tablet ===== */
@@ -356,9 +426,6 @@
           height: 200px;
         }
         
-        
-        }
-        
         .category-banner__content--overlay {
           height: 200px;
           padding: 24px;
@@ -460,14 +527,14 @@
   </section>
 {% else %}
   <section class="widget widget-category-banner widget-category-banner--empty" data-widget-id="{{ widget.id }}">
-      <div style="max-width: {{ settings.container_width }}px; margin: 0 auto; padding: 0 {{ settings.container_padding }}px;">
-      <div style="padding: {{ settings.spacing_component | times: 2 }}px; text-align: center;">
-        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="{{ settings.color_text_muted }}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: {{ settings.spacing_element }}px;">
+      <div style="max-width: {{ settings.container_width | default: 1200 }}px; margin: 0 auto; padding: 0 {{ settings.container_padding | default: 16 }}px;">
+      <div style="padding: {{ settings.spacing_component | default: 24 | times: 2 }}px; text-align: center;">
+        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="{{ settings.color_text_muted | default: '#666666' }}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: {{ settings.spacing_element | default: 16 }}px;">
           <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
           <line x1="3" y1="6" x2="21" y2="6"></line>
           <path d="M16 10a4 4 0 0 1-8 0"></path>
         </svg>
-        <p style="color: {{ settings.color_text_muted }}; margin: 0; font-size: {{ settings.font_size_base | plus: 1 }}px;">{{ widget_settings.empty_state | default: 'Category not found. Please configure a valid CategoryId.' }}</p>
+        <p style="color: {{ settings.color_text_muted | default: '#666666' }}; margin: 0; font-size: {{ settings.font_size_base | default: 14 | plus: 1 }}px;">{{ widget_settings.empty_state | default: 'Category not found. Please configure a valid CategoryId.' }}</p>
       </div>
     </div>
   </section>