@o2vend/theme-cli 1.0.37 → 1.0.38

package/test-theme/widgets/footer-menu.liquid

@@ -34,6 +34,98 @@
 </nav>
 
 <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-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-text-muted: {{ 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' }};
+  --color-white: #ffffff;
+  --color-black: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-gray-25: {{ settings.color_background | default: '#ffffff' }};
+  --color-gray-50: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-100: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-200: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-300: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-400: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-500: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-600: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-700: {{ settings.color_text | default: '#000000' }};
+  --color-gray-800: {{ settings.color_text | default: '#000000' }};
+  --color-gray-900: {{ settings.color_text | default: '#000000' }};
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  /* Shadow variables - mapped from settings */
+  --shadow-opacity: {{ settings.shadow_opacity | default: 0.1 }};
+  --shadow-blur: {{ settings.shadow_blur | default: 8 }}px;
+  --shadow-spread: {{ settings.shadow_spread | default: 0 }}px;
+  
+  /* Border radius - mapped from settings */
+  --radius-sm: {{ settings.border_radius_small | default: 6 }}px;
+  --radius-md: {{ settings.border_radius_medium | default: 10 }}px;
+  --radius-lg: {{ settings.border_radius_large | default: 16 }}px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
+  --radius-full: 9999px;
+  
+  /* Spacing - mapped from settings */
+  --spacing-xs: {{ settings.spacing_xsmall | default: 4 }}px;
+  --spacing-sm: {{ settings.spacing_small | default: 8 }}px;
+  --spacing-md: {{ settings.spacing_element | default: 16 }}px;
+  --spacing-lg: {{ settings.spacing_component | default: 24 }}px;
+  --spacing-xl: {{ settings.spacing_large | default: 32 }}px;
+  
+  /* Typography - mapped from settings */
+  --font-primary: {{ settings.font_primary | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-heading: {{ settings.font_heading | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-display: {{ settings.font_display | default: '' }}, 'Georgia', 'Times New Roman', serif;
+  --font-body: {{ settings.font_body | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-weight-bold: {{ settings.font_weight_bold | default: 700 }};
+  --font-weight-medium: {{ settings.font_weight_medium | default: 500 }};
+  --line-height-heading: {{ settings.line_height_heading | default: 1.2 }};
+  
+  /* Text sizes - based on font_size_base from settings */
+  --text-xs: 12px;
+  --text-sm: {{ settings.font_size_base | default: 14 }}px;
+  --text-base: {{ settings.font_size_base | default: 14 }}px;
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 21px;
+  
+  /* Transitions - mapped from settings */
+  --transition-fast: 133ms cubic-bezier(0, 0, 0.2, 1);
+  --transition: {{ settings.button_transition_speed | default: 200 }}ms cubic-bezier(0, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0, 0, 0.2, 1);
+  --duration-150: 150ms;
+  --duration-300: 300ms;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Z-index values */
+  --z-10: 10;
+  --z-modal: 1050;
+  --z-dropdown: 1000;
+  
+  /* Line heights - mapped from settings */
+  --leading-none: 1;
+  --leading-normal: {{ settings.line_height_base | default: 1.6 }};
+  --leading-snug: 1.375;
+  --tracking-wider: var(--tracking-wider);
+  }
+  
   .widget-footer-menu {
     padding: 0;
     margin: 0 auto;
@@ -42,24 +134,24 @@
 
   .widget-footer-menu__loading,
   .widget-footer-menu__error {
-    padding: 1rem;
+    padding: var(--space-4);
     text-align: center;
-    font-size: 0.875rem;
-    color: #9ca3af;
+    font-size: var(--text-sm);
+    color: var(--color-gray-400);
   }
 
   .widget-footer-menu__error {
-    color: #ef4444;
+    color: var(--color-error);
   }
 
   .widget-footer-menu__columns {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 2.5rem;
+    gap: var(--space-10);
     list-style: none;
     margin: 0;
     padding: 0;
-    min-height: 30px;
+    min-height: var(--space-8);
   }
 
   .widget-footer-menu__column {
@@ -73,10 +165,10 @@
 
   .widget-footer-menu__title {
     margin: 0;
-    font-size: 0.875rem;
+    font-size: var(--text-sm);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-weight: 600;
+    letter-spacing: var(--tracking-wider);
+    font-weight: var(--font-weight-bold);
     color: {{ widget_settings.title_color | default: '#ffffff' }};
     display: none;
   }
@@ -87,19 +179,19 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
-    margin-top: 1rem;
+    gap: var(--space-3);
+    margin-top: var(--space-4);
   }
   
   .widget-footer-menu__child-list {
     list-style: none;
     margin: 0;
     padding: 0;
-    padding-left: 1rem;
-    margin-top: 0.5rem;
+    padding-left: var(--space-4);
+    margin-top: var(--space-2);
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
   
   .widget-footer-menu__item--has-children {
@@ -115,9 +207,9 @@
   .widget-footer-menu__link {
     color: {{ widget_settings.link_color | default: '#9ca3af' }};
     text-decoration: none;
-    font-size: 0.9375rem;
-    font-weight: 400;
-    transition: color 0.2s ease;
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    transition: color var(--transition);
     display: inline-block;
     padding: 0;
     white-space: nowrap;
@@ -129,15 +221,15 @@
 
   @media (max-width: 768px) {
     .widget-footer-menu__columns {
-      gap: 2rem;
+      gap: var(--space-8);
     }
     
     .widget-footer-menu__list {
-      gap: 2rem;
+      gap: var(--space-8);
     }
     
     .widget-footer-menu__link {
-      font-size: 0.875rem;
+      font-size: var(--text-sm);
     }
   }
 
@@ -145,20 +237,20 @@
     .widget-footer-menu__columns {
       flex-direction: column;
       align-items: center;
-      gap: 1.5rem;
+      gap: var(--space-6);
     }
     
     .widget-footer-menu__list {
       flex-direction: column;
       align-items: center;
-      gap: 1rem;
+      gap: var(--space-4);
       text-align: center;
     }
   }
 </style>
 
 <script>
-  (function() {
+  (() => {
     'use strict';
 
     // Configuration

package/test-theme/widgets/footer.liquid

@@ -17,15 +17,61 @@
   endif
 
   assign social_links = widget_settings.social_links | default: widget_content.social_links | default: widget_data.social_links
+  assign heading = widget_settings.title | default: widget_content.title | default: widget.Title | default: widget.title
+  assign subtitle = widget_settings.subtitle | default: widget_content.subtitle | default: widget.Subtitle | default: widget.subtitle
+  assign show_widget_title_raw = widget_settings.showWidgetTitle | default: widget_settings.ShowWidgetTitle | default: widget_content.showWidgetTitle | default: widget_content.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: widget_content.widgetTitleAlignment | default: widget_content.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
+
+  comment
+    HTML content for footer widget:
+    - Comes from widget.htmlData / HtmlData on the widget object (saved via editor)
+    - Fallbacks to HtmlContent/htmlContent if present
+  endcomment
+  assign footer_html_raw = widget.htmlData | default: widget.HtmlData | default: widget.htmlContent | default: widget.HtmlContent
+  assign footer_html = blank
+  if footer_html_raw and footer_html_raw != blank and footer_html_raw != 'null'
+    assign footer_html = footer_html_raw
+  endif
 %}
 
 <footer class="widget widget-footer" 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 %}
+
   <div class="widget-footer__inner">
     <div class="widget-footer__brand">
-      <h3>{{ widget_settings.title | default: widget_content.title | default: shop.name }}</h3>
       <p>{{ widget_settings.description | default: widget_content.description | default: shop.description }}</p>
     </div>
 
+    {% if footer_html and footer_html != blank %}
+      <div class="widget-footer__html">
+        {{ footer_html }}
+      </div>
+    {% endif %}
+
     {% if columns and columns.size > 0 %}
       <div class="widget-footer__columns">
         {% for column in columns %}
@@ -66,7 +112,7 @@
   </div>
 
   <div class="widget-footer__bottom">
-    <p>&copy; {{ 'now' | date: '%Y' }} {{ shop.name }}. {{ widget_settings.legal_text | default: 'All rights reserved.' }}</p>
+
     {% if widget_settings.legal_links %}
       <ul>
         {% for link in widget_settings.legal_links %}
@@ -77,18 +123,52 @@
   </div>
 
   <style>
+    :root {
+      --footer-border: var(--color-border);
+      --footer-spacing-component: var(--spacing-component);
+      --footer-spacing-element: var(--spacing-element);
+      --footer-spacing-small: var(--spacing-small);
+      --footer-container-padding: var(--container-padding);
+      --footer-text-sm: var(--text-sm);
+      --footer-radius-full: var(--radius-full);
+    }
+    
     .widget-footer {
       background: {{ widget_settings.background_color | default: settings.color_background }};
       color: {{ widget_settings.text_color | default: settings.color_text }};
       padding: 3rem 1rem;
       border-top: 1px solid rgba(0,0,0,0.08);
     }
+    .widget-footer .widget-header {
+      max-width: {{ settings.container_width | default: 1200 }}px;
+      margin: 0 auto 1.25rem;
+      padding: 0;
+    }
+    .widget-footer .widget-title {
+      margin: 0 0 0.35rem 0;
+      font-size: 1.4rem;
+      font-weight: 500;
+      line-height: 1.3;
+      color: inherit;
+    }
+    .widget-footer .widget-subtitle {
+      margin: 0;
+      font-size: 0.95rem;
+      line-height: 1.5;
+      opacity: 0.85;
+      color: inherit;
+    }
     .widget-footer__inner {
-      max-width: {{ settings.container_width }}px;
+      max-width: {{ settings.container_width | default: 1200 }}px;
       margin: 0 auto 2rem;
       display: grid;
       gap: 2rem;
     }
+    .widget-footer__html {
+      margin-top: var(--footer-spacing-element);
+      font-size: var(--footer-text-sm);
+      line-height: var(--leading-normal);
+    }
     .widget-footer__brand h3 {
       margin: 0 0 0.5rem;
       font-size: 1.5rem;
@@ -143,7 +223,7 @@
       max-height: 18px;
     }
     .widget-footer__bottom {
-      max-width: {{ settings.container_width }}px;
+      max-width: {{ settings.container_width | default: 1200 }}px;
       margin: 0 auto;
       padding-top: 1.5rem;
       border-top: 1px solid rgba(255,255,255,0.08);
@@ -152,6 +232,29 @@
       gap: 0.75rem;
       font-size: 0.875rem;
     }
+    .widget-footer__bottom-left {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      flex: 1;
+      min-width: 0;
+    }
+    .widget-footer__bottom .footer-powered {
+      margin: 0;
+      color: inherit;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      display: block;
+      visibility: visible;
+    }
+    .widget-footer__bottom .footer-powered-link {
+      color: inherit;
+      text-decoration: underline;
+      transition: opacity 0.2s ease;
+    }
+    .widget-footer__bottom .footer-powered-link:hover {
+      opacity: 0.8;
+    }
     .widget-footer__bottom ul {
       list-style: none;
       margin: 0;
@@ -164,13 +267,23 @@
       color: inherit;
       text-decoration: none;
     }
+    @media (max-width: 767px) {
+      .widget-footer__bottom-left {
+        width: 100%;
+      }
+      .widget-footer__bottom .footer-powered {
+        display: block !important;
+        visibility: visible !important;
+        margin-top: 0.5rem;
+      }
+    }
     @media (min-width: 768px) {
       .widget-footer__inner {
         grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
       }
       .widget-footer__bottom {
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
       }
     }

package/test-theme/widgets/gallery.liquid

@@ -36,6 +36,10 @@
   assign show_container = widget_settings.showContainer
   assign gap = widget_settings.gap | default: 16
 %}
+{% 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-gallery" data-widget-id="{{ widget.id }}"{% if background_color and background_color != blank and background_color != 'null' %} style="background-color: {{ background_color }};"{% endif %}>
   <div class="widget-gallery__inner{% if show_container == 'No' %} widget-gallery__inner--full{% endif %}">
@@ -67,7 +71,10 @@
           {% if item_link and item_link != blank and item_link != 'null' %}
             <a href="{{ item_link }}" class="widget-gallery__item widget-gallery__item--link">
               {% if image_url and image_url != blank and image_url != 'null' %}
-                <img src="{{ image_src }}" alt="{{ image_alt }}" width="400" height="400" loading="lazy">
+                {% if forloop.first and is_hero_priority_widget %}
+                  <link rel="preload" as="image" href="{{ image_src }}" fetchpriority="high">
+                {% endif %}
+                <img src="{{ image_src }}" alt="{{ image_alt }}" width="400" height="400" loading="{% if forloop.first %}eager{% else %}lazy{% endif %}" {% if forloop.first and is_hero_priority_widget %}fetchpriority="high"{% endif %}>
                 {% if item_caption and item_caption != blank %}
                   <div class="widget-gallery__caption">{{ item_caption }}</div>
                 {% endif %}
@@ -76,7 +83,10 @@
           {% else %}
             <figure class="widget-gallery__item">
               {% if image_url and image_url != blank and image_url != 'null' %}
-                <img src="{{ image_src }}" alt="{{ image_alt }}" width="400" height="400" loading="lazy">
+                {% if forloop.first and is_hero_priority_widget %}
+                  <link rel="preload" as="image" href="{{ image_src }}" fetchpriority="high">
+                {% endif %}
+                <img src="{{ image_src }}" alt="{{ image_alt }}" width="400" height="400" loading="{% if forloop.first %}eager{% else %}lazy{% endif %}" {% if forloop.first and is_hero_priority_widget %}fetchpriority="high"{% endif %}>
                 {% if item_caption and item_caption != blank %}
                   <figcaption class="widget-gallery__caption">{{ item_caption }}</figcaption>
                 {% endif %}
@@ -93,6 +103,22 @@
   </div>
 
   <style>
+    :root {
+      --gallery-white: var(--color-white);
+      --gallery-text: var(--color-text);
+      --gallery-text-muted: var(--color-text-muted);
+      --gallery-spacing-section: var(--spacing-section);
+      --gallery-spacing-large: var(--spacing-large);
+      --gallery-spacing-component: var(--spacing-component);
+      --gallery-spacing-element: var(--spacing-element);
+      --gallery-spacing-small: var(--spacing-small);
+      --gallery-spacing-xsmall: var(--spacing-xsmall);
+      --gallery-container-padding: var(--container-padding);
+      --gallery-transition: var(--transition);
+      --gallery-transition-fast: var(--transition-fast);
+      --gallery-text-sm: var(--text-sm);
+    }
+    
     .widget-gallery {
       padding: 48px 0;
       position: relative;
@@ -157,14 +183,12 @@
       overflow: hidden;      
       background: #f5f5f5;
       aspect-ratio: 1 / 1;
-      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
-      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      transition: transform 0.3s ease;
       border-radius: var(--border-radius-medium);
     }
     
     .widget-gallery__item:hover {
       transform: translateY(-4px);
-      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
     }
     
     .widget-gallery__item--link {

package/test-theme/widgets/header-menu.liquid

@@ -52,6 +52,20 @@
     </div>
 
 <style>
+  :root {
+    --header-menu-text: var(--color-text);
+    --header-menu-text-muted: var(--color-text-muted);
+    --header-menu-border: var(--color-border);
+    --header-menu-white: var(--color-white);
+    --header-menu-spacing-element: var(--spacing-element);
+    --header-menu-spacing-small: var(--spacing-small);
+    --header-menu-spacing-xsmall: var(--spacing-xsmall);
+    --header-menu-transition-fast: var(--transition-fast);
+    --header-menu-text-sm: var(--text-sm);
+    --header-menu-text-base: var(--text-base);
+    --header-menu-text-lg: var(--text-lg);
+  }
+  
   /* Menu Navigation Styles */
   .header-menu-nav {
     flex: 1 1 auto;
@@ -138,7 +152,7 @@
 
   .header-menu-nav__submenu {
     position: absolute;
-    top: calc(100% + var(--space-2, 0.5rem));
+    top: 100%;
     left: 0;
     display: none;
     flex-direction: column;
@@ -146,7 +160,6 @@
     background: var(--dropdown-bg, #fff);
     padding: var(--space-2, 0.5rem) 0;
       border-radius: var(--border-radius-medium, 8px);
-    box-shadow: 0 var(--space-4, 1rem) var(--space-6, 1.5rem) rgba(0, 0, 0, 0.1);
     min-width: var(--space-50, 12.5rem);
     list-style: none;
     margin: 0;
@@ -219,7 +232,6 @@
         -webkit-overflow-scrolling: touch;
         transform: translateX(-100%);
       transition: transform var(--transition-slow, var(--duration-300, 300ms) var(--ease-out, ease));
-      box-shadow: var(--space-0-5, 0.125rem) 0 var(--space-2, 0.5rem) rgba(0, 0, 0, 0.15);
         display: flex !important;
         flex-direction: column !important;
         margin: 0 !important;
@@ -352,7 +364,7 @@
 </style>
 
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener('DOMContentLoaded', () => {
     const menuNav = document.querySelector('[data-widget-id="{{ widget.id }}"][data-header-menu-nav]');
     if (!menuNav) return;
 
@@ -377,9 +389,9 @@
     
     // Re-setup on window resize
     let resizeTimeout;
-    window.addEventListener('resize', function() {
+    window.addEventListener('resize', () => {
       clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(function() {
+      resizeTimeout = setTimeout(() => {
         if (window.innerWidth <= 768) {
           setupHamburgerMenu();
         }
@@ -498,7 +510,7 @@
 
           // Close on Escape key (only add once)
           if (!window.__headerMenuWidgetEscapeHandler) {
-            window.__headerMenuWidgetEscapeHandler = function(e) {
+            window.__headerMenuWidgetEscapeHandler = (e) => {
               if (e.key === 'Escape' && window.innerWidth <= 768) {
                 const currentDrawer = document.getElementById(drawerId);
                 if (currentDrawer && currentDrawer.classList.contains('active')) {
@@ -512,7 +524,7 @@
 
           // Close on outside click (only add once)
           if (!window.__headerMenuWidgetOverlayHandler) {
-            window.__headerMenuWidgetOverlayHandler = function(e) {
+            window.__headerMenuWidgetOverlayHandler = (e) => {
               if (window.innerWidth > 768) return;
               const currentDrawer = document.getElementById(drawerId);
               if (currentDrawer && currentDrawer.classList.contains('active')) {
@@ -651,11 +663,11 @@
         // Step 3: Fetch full menu details with items
         const menuResponse = await fetch(`/webstoreapi/menus/${mainMenu.id}`, {
           method: 'GET',
-              headers: {
-                'Accept': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest'
-              }
-            });
+          headers: {
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        });
 
         if (!menuResponse.ok) {
           throw new Error(`Failed to fetch menu details: ${menuResponse.status}`);