@o2vend/theme-cli 1.0.37 → 1.0.38

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

@@ -36,14 +36,26 @@
       assign show_widget_title = false
     endif
   endif
-  assign widget_title_alignment_raw = widget_settings.widgetTitleAlignment | default: 'center'
+  assign widget_title_alignment_raw = 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 = 'center'
+    assign widget_title_alignment = 'left'
   endif
   assign hide_dots = widget_settings.hideDot | default: false
   assign hide_arrows = widget_settings.hideArrow | default: false
+  assign priority_count_raw = widget_settings.priorityCount | default: widget_settings.prioritizeCount | default: widget_settings.priority
+  assign priority_count = priority_count_raw | default: 1
+  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-spacebar-carousel" data-widget-id="{{ widget.id }}" data-spacebar-carousel{% if background_color and background_color != blank and background_color != 'null' %} style="background-color: {{ background_color }};"{% endif %}>
   <div class="spacebar-carousel-container">
@@ -95,8 +107,8 @@
               {% assign item_image = item.ImageUrl | default: item.imageUrl | default: item.Image | default: item.image %}
               {% assign item_bg = item.BackgroundColor | default: item.backgroundColor %}
               {% assign item_text = item.TextColor | default: item.textColor %}
-              
-              <div class="spacebar-carousel-slide" data-slide-index="{{ forloop.index0 }}">
+              {% assign item_link = item.Link | default: item.link | default: item.TargetUrl | default: item.targetUrl %}
+              <div class="spacebar-carousel-slide{% if forloop.index0 < priority_count %} spacebar-carousel-slide--priority{% endif %}" data-slide-index="{{ forloop.index0 }}" {% if forloop.index0 < priority_count %}data-priority="high"{% endif %}>
                 <div class="spacebar-carousel-item"{% if item_bg and item_bg != blank %} style="background-color: {{ item_bg }};"{% endif %}>
                   {% if item_image and item_image != blank %}
                     {% if item_image contains 'http://' or item_image contains 'https://' %}
@@ -104,8 +116,11 @@
                     {% else %}
                       {% assign item_image_src = item_image | asset_url %}
                     {% endif %}
+                    {% if forloop.index0 < priority_count and is_hero_priority_widget %}
+                      <link rel="preload" as="image" href="{{ item_image_src }}" fetchpriority="high">
+                    {% endif %}
                     <div class="spacebar-carousel-item__icon spacebar-carousel-item__icon--image">
-                      <img src="{{ item_image_src }}" alt="{{ item_title }}" width="72" height="72" loading="lazy">
+                      <img src="{{ item_image_src }}" alt="{{ item_title }}" width="72" height="72" loading="{% if forloop.index0 < priority_count %}eager{% else %}lazy{% endif %}" {% if forloop.index0 < priority_count and is_hero_priority_widget %}fetchpriority="high"{% endif %}>
                     </div>
                   {% elsif item_icon and item_icon != blank %}
                     <div class="spacebar-carousel-item__icon spacebar-carousel-item__icon--html">
@@ -147,6 +162,23 @@
   </div>
 
   <style>
+    :root {
+      --spacebar-carousel-white: var(--color-white);
+      --spacebar-carousel-text: var(--color-text);
+      --spacebar-carousel-text-muted: var(--color-text-muted);
+      --spacebar-carousel-border: var(--color-border);
+      --spacebar-carousel-spacing-component: var(--spacing-component);
+      --spacebar-carousel-spacing-element: var(--spacing-element);
+      --spacebar-carousel-spacing-small: var(--spacing-small);
+      --spacebar-carousel-spacing-xsmall: var(--spacing-xsmall);
+      --spacebar-carousel-container-padding: var(--container-padding);
+      --spacebar-carousel-radius-full: var(--radius-full);
+      --spacebar-carousel-radius: var(--radius);
+      --spacebar-carousel-transition-fast: var(--transition-fast);
+      --spacebar-carousel-transition: var(--transition);
+      --spacebar-carousel-text-sm: var(--text-sm);
+    }
+    
     /* Spacebar Carousel - True Carousel Behavior */
     .widget-spacebar-carousel {
       padding: 32px 0;
@@ -240,7 +272,6 @@
       border-radius: 50%;
       border: none;
       background: #fff;
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
       align-items: center;
       justify-content: center;
       cursor: pointer;
@@ -302,14 +333,12 @@
       padding: 16px 20px;
       border-radius: var(--border-radius-medium);
       background: #fff;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      transition: transform 0.3s ease;
       height: 100%;
     }
     
     .widget-spacebar-carousel .spacebar-carousel-item:hover {
       transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     }
     
     .widget-spacebar-carousel .spacebar-carousel-item__icon {
@@ -527,7 +556,7 @@
   </style>
 
   <script>
-  (function() {
+  (() => {
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initSpacebarCarousel);
     } else {

package/test-theme/widgets/spacebar.liquid

@@ -20,12 +20,46 @@
   else
     assign items = content_data
   endif
-  assign background_color = content_data.backgroundColor | default: content_data.BackgroundColor | default: widget_settings.backgroundColor | default: '#ffffff'
-  assign text_color = content_data.textColor | default: content_data.TextColor | default: widget_settings.textColor | default: '#000000'
+  assign heading = widget_settings.title | default: widget.Title | default: widget.title
+  assign subtitle = widget_settings.subtitle
+  assign background_color = widget_settings.backgroundColor | default: '#f8f9fa'
+  assign text_color = widget_settings.textColor | default: '#111'
+  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
+  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
+  endif
+  assign widget_title_alignment_raw = 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
 %}
 
-<section class="widget widget-spacebar" data-widget-id="{{ widget.id }}" style="background-color: {{ background_color }};">
+<section class="widget widget-spacebar" data-widget-id="{{ widget.id }}"{% if background_color and background_color != blank and background_color != 'null' %} style="background-color: {{ background_color }};"{% endif %}>
   <div class="spacebar-inner">
+    {% if show_widget_title %}
+      {% if heading or subtitle %}
+        <header class="spacebar-header">
+          <div class="spacebar-header__text" style="text-align: {{ widget_title_alignment }};">
+            {% if heading %}
+              <h2 class="spacebar-title"{% if text_color and text_color != 'null' %} style="color: {{ text_color }};"{% endif %}>{{ heading }}</h2>
+            {% endif %}
+            {% if subtitle %}
+              <p class="spacebar-subtitle"{% if text_color and text_color != 'null' %} style="color: {{ text_color }};"{% endif %}>{{ subtitle }}</p>
+            {% endif %}
+          </div>
+        </header>
+      {% endif %}
+    {% endif %}
+
     {% if items and items.size > 0 %}
       <div class="spacebar-grid">
         {% for item in items %}
@@ -74,6 +108,19 @@
   </div>
 
   <style>
+    :root {
+      --spacebar-white: var(--color-white);
+      --spacebar-text: var(--color-text);
+      --spacebar-spacing-component: var(--spacing-component);
+      --spacebar-spacing-element: var(--spacing-element);
+      --spacebar-spacing-small: var(--spacing-small);
+      --spacebar-container-padding: var(--container-padding);
+      --spacebar-radius-xl: var(--radius-xl);
+      --spacebar-radius-lg: var(--radius-lg);
+      --spacebar-transition: var(--transition);
+      --spacebar-text-sm: var(--text-sm);
+    }
+    
     .widget-spacebar {
       padding: 32px 0;
       width: 100%;
@@ -84,6 +131,27 @@
       margin: 0 auto;
       padding: 0 24px;
     }
+
+    .widget-spacebar .spacebar-header {
+      margin-bottom: 24px;
+      position: static;
+      z-index: auto;
+    }
+
+    .widget-spacebar .spacebar-title {
+      font-size: 1.4rem;
+      font-weight: 500;
+      line-height: 1.3;
+      color: #111;
+      margin: 0 0 4px 0;
+      letter-spacing: -0.01em;
+    }
+
+    .widget-spacebar .spacebar-subtitle {
+      font-size: 14px;
+      color: #6b7280;
+      margin: 0;
+    }
     
     .widget-spacebar .spacebar-grid {
       display: grid;
@@ -97,14 +165,13 @@
       align-items: flex-start;
       gap: 16px;
       padding: 20px;
-      border-radius: 12px;
+      border-radius: var(--border-radius-medium);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       cursor: pointer;
     }
     
     .widget-spacebar .spacebar-item:hover {
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
       transform: translateY(-4px);
     }
     
@@ -204,6 +271,10 @@
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: 16px;
       }
+
+      .widget-spacebar .spacebar-title {
+        font-size: 1.3rem;
+      }
       
       .widget-spacebar .spacebar-item {
         gap: 14px;
@@ -276,4 +347,4 @@
       }
     }
   </style>
-</section>
+</section>

package/test-theme/widgets/splash.liquid

@@ -106,6 +106,19 @@
 </div>
 
 <style>
+  :root {
+    --splash-white: var(--color-white);
+    --splash-text: var(--color-text);
+    --splash-spacing-component: var(--spacing-component);
+    --splash-spacing-element: var(--spacing-element);
+    --splash-spacing-small: var(--spacing-small);
+    --splash-spacing-xsmall: var(--spacing-xsmall);
+    --splash-radius-lg: var(--radius-lg);
+    --splash-radius-full: var(--radius-full);
+    --splash-transition: var(--transition);
+    --splash-transition-fast: var(--transition-fast);
+  }
+  
   /* Splash Overlay */
   .widget-splash-overlay {
     display: none;
@@ -120,7 +133,7 @@
     justify-content: center;
     padding: 20px;
     opacity: 0;
-    transition: opacity 0.3s ease;
+    transition: opacity var(--splash-transition);
   }
   
   .widget-splash-overlay.active {
@@ -139,9 +152,8 @@
     max-height: 90vh;
     overflow: hidden;
     border-radius: var(--border-radius-medium);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     transform: scale(0.9) translateY(20px);
-    transition: transform 0.3s ease;
+    transition: transform var(--splash-transition);
   }
   
   .widget-splash-overlay.visible .widget-splash-modal {
@@ -157,19 +169,18 @@
     height: 36px;
     border: none;
     background: rgba(255, 255, 255, 0.9);
-    border-radius: 50%;
+    border-radius: var(--splash-radius-full);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #333;
+    color: var(--splash-text);
     z-index: 10;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all var(--splash-transition-fast);
   }
   
   .splash-close:hover {
-    background: #fff;
+    background: var(--splash-white);
     transform: scale(1.1);
   }
   
@@ -198,21 +209,21 @@
   
   /* Body */
   .splash-body {
-    padding: 24px;
+    padding: var(--splash-spacing-component);
     text-align: center;
   }
   
   .splash-title {
     font-size: 24px;
     font-weight: 700;
-    margin: 0 0 12px 0;
+    margin: 0 0 var(--splash-spacing-small) 0;
     line-height: 1.3;
   }
   
   .splash-description {
     font-size: 15px;
     line-height: 1.6;
-    margin: 0 0 20px 0;
+    margin: 0 0 var(--splash-spacing-component) 0;
     opacity: 0.85;
   }
   
@@ -220,21 +231,20 @@
   .splash-cta {
     display: inline-block;
     padding: 14px 32px;
-    background: #111;
-    color: #fff !important;
+    background: var(--splash-text);
+    color: var(--splash-white) !important;
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
-    border-radius: 8px;
-    transition: all 0.2s ease;
+    border-radius: var(--splash-radius-lg);
+    transition: all var(--splash-transition-fast);
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
   
   .splash-cta:hover {
-    background: #333;
+    background: var(--splash-text);
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
   
   /* Image Only Mode (no title/description) */
@@ -254,7 +264,7 @@
     
     .widget-splash-modal {
       max-width: 100%;
-      border-radius: 12px;
+      border-radius: var(--splash-spacing-small);
     }
     
     .splash-close {
@@ -291,11 +301,11 @@
 </style>
 
 <script>
-(function() {
+(() => {
   console.log('[Splash] Script loaded for widget {{ splash_id }}');
   
   // Wait for DOM to be ready
-  function initSplash() {
+  const initSplash = () => {
     console.log('[Splash] initSplash called');
     
     // Try multiple selectors
@@ -320,31 +330,31 @@
     
     // Show splash after delay
     console.log('[Splash] Setting timeout for', delaySeconds, 'second(s)...');
-    setTimeout(function() {
+    setTimeout(() => {
       console.log('[Splash] TIMEOUT FIRED - Showing popup NOW!');
       splashWidget.style.display = 'flex';
       splashWidget.classList.add('active');
       // Trigger animation after a frame
-      setTimeout(function() {
+      setTimeout(() => {
         splashWidget.classList.add('visible');
         console.log('[Splash] Added visible class');
       }, 50);
     }, delaySeconds * 1000);
     
-    // Close function
-    function closeSplash() {
+    // Close handler
+    const closeSplash = () => {
       console.log('[Splash] Closing popup');
       splashWidget.classList.remove('visible');
-      setTimeout(function() {
+      setTimeout(() => {
         splashWidget.classList.remove('active');
         splashWidget.style.display = 'none';
       }, 300);
-    }
+    };
     
     // Close button click
     const closeBtn = splashWidget.querySelector('[data-splash-close]');
     if (closeBtn) {
-      closeBtn.addEventListener('click', function(e) {
+      closeBtn.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
         closeSplash();
@@ -352,19 +362,19 @@
     }
     
     // Close on overlay click
-    splashWidget.addEventListener('click', function(e) {
+    splashWidget.addEventListener('click', (e) => {
       if (e.target === splashWidget) {
         closeSplash();
       }
     });
     
     // Close on Escape key
-    document.addEventListener('keydown', function(e) {
+    document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape' && splashWidget.classList.contains('active')) {
         closeSplash();
       }
     });
-  }
+  };
   
   // Initialize when DOM is ready
   if (document.readyState === 'loading') {