@o2vend/theme-cli 1.0.32

package/test-theme/widgets/spacebar.liquid

@@ -0,0 +1,279 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_data = widget.data
+  
+  comment
+    Static Widget: Content comes from widget_data.content or widget.content
+    Settings come from widget_settings
+  endcomment
+
+  assign content_data = widget_data.content | default: widget.content
+  comment
+    Handle both formats:
+    1. Direct array: content_data is an array (when widget-service stores array directly)
+    2. Object with Items: content_data.Items or content_data.items (when stored as object)
+  endcomment
+  if content_data.Items
+    assign items = content_data.Items
+  elsif content_data.items
+    assign items = content_data.items
+  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'
+%}
+
+<section class="widget widget-spacebar" data-widget-id="{{ widget.id }}" style="background-color: {{ background_color }};">
+  <div class="spacebar-inner">
+    {% if items and items.size > 0 %}
+      <div class="spacebar-grid">
+        {% for item in items %}
+          {% liquid
+            assign item_title = item.title | default: item.Title
+            assign item_description = item.description | default: item.Description
+            assign item_icon = item.iconHtml | default: item.IconHtml
+            assign item_image = item.imageUrl | default: item.ImageUrl | default: item.image | default: item.Image
+            assign item_bg = item.backgroundColor | default: item.BackgroundColor | default: '#ffffff'
+            assign item_text = item.textColor | default: item.TextColor | default: text_color
+          %}
+          
+          <div class="spacebar-item" style="background-color: {{ item_bg }};">
+            {% if item_image and item_image != blank %}
+              {% comment %} Handle external URLs vs local assets {% endcomment %}
+              {% if item_image contains 'http://' or item_image contains 'https://' %}
+                {% assign item_image_src = item_image %}
+              {% else %}
+                {% assign item_image_src = item_image | asset_url %}
+              {% endif %}
+              <div class="spacebar-item__icon spacebar-item__icon--image">
+                <img src="{{ item_image_src }}" alt="{{ item_title | escape }}" loading="lazy">
+              </div>
+            {% elsif item_icon and item_icon != blank %}
+              <div class="spacebar-item__icon spacebar-item__icon--html">
+                {{ item_icon }}
+              </div>
+            {% endif %}
+            
+            <div class="spacebar-item__content" style="color: {{ item_text }};">
+              {% if item_title and item_title != blank %}
+                <h4 class="spacebar-item__title">{{ item_title }}</h4>
+              {% endif %}
+              {% if item_description and item_description != blank %}
+                <p class="spacebar-item__desc">{{ item_description }}</p>
+              {% endif %}
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% else %}
+      <div class="widget-empty">
+        <p style="color: {{ text_color }};">No items to display.</p>
+      </div>
+    {% endif %}
+  </div>
+
+  <style>
+    .widget-spacebar {
+      padding: 32px 0;
+      width: 100%;
+    }
+    
+    .widget-spacebar .spacebar-inner {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+    
+    .widget-spacebar .spacebar-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 24px;
+      align-items: stretch;
+    }
+    
+    .widget-spacebar .spacebar-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+      padding: 20px;
+      border-radius: 12px;
+      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);
+    }
+    
+    .widget-spacebar .spacebar-item__icon {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 72px;
+      height: 72px;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    
+    .widget-spacebar .spacebar-item__icon--image {
+      background: transparent;
+      padding: 0;
+    }
+    
+    .widget-spacebar .spacebar-item__icon--image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    
+    .widget-spacebar .spacebar-item__icon--html {
+      font-size: 36px;
+      background: rgba(0, 0, 0, 0.05);
+    }
+    
+    .widget-spacebar .spacebar-item__icon--html svg {
+      width: 40px;
+      height: 40px;
+    }
+    
+    .widget-spacebar .spacebar-item__content {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .widget-spacebar .spacebar-item__title {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0;
+      line-height: 1.4;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+    
+    .widget-spacebar .spacebar-item__desc {
+      font-size: 14px;
+      margin: 0;
+      line-height: 1.6;
+      opacity: 0.85;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+    
+    .widget-spacebar .widget-empty {
+      text-align: center;
+      padding: 40px 20px;
+    }
+    
+    .widget-spacebar .widget-empty p {
+      margin: 0;
+      font-size: 16px;
+      opacity: 0.6;
+    }
+    
+    /* Tablet (768px - 1024px) */
+    @media (max-width: 1024px) {
+      .widget-spacebar .spacebar-grid {
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: 20px;
+      }
+      
+      .widget-spacebar .spacebar-item {
+        padding: 18px;
+      }
+    }
+    
+    /* Mobile (481px - 768px) */
+    @media (max-width: 768px) {
+      .widget-spacebar {
+        padding: 24px 0;
+      }
+      
+      .widget-spacebar .spacebar-inner {
+        padding: 0 16px;
+      }
+      
+      .widget-spacebar .spacebar-grid {
+        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        gap: 16px;
+      }
+      
+      .widget-spacebar .spacebar-item {
+        gap: 14px;
+        padding: 16px;
+      }
+      
+      .widget-spacebar .spacebar-item__icon {
+        width: 64px;
+        height: 64px;
+      }
+      
+      .widget-spacebar .spacebar-item__icon--html {
+        font-size: 32px;
+      }
+      
+      .widget-spacebar .spacebar-item__icon--html svg {
+        width: 36px;
+        height: 36px;
+      }
+      
+      .widget-spacebar .spacebar-item__title {
+        font-size: 16px;
+      }
+      
+      .widget-spacebar .spacebar-item__desc {
+        font-size: 13px;
+      }
+    }
+    
+    /* Small Mobile (max 480px) */
+    @media (max-width: 480px) {
+      .widget-spacebar {
+        padding: 20px 0;
+      }
+      
+      .widget-spacebar .spacebar-inner {
+        padding: 0 12px;
+      }
+      
+      .widget-spacebar .spacebar-grid {
+        grid-template-columns: 1fr;
+        gap: 12px;
+      }
+      
+      .widget-spacebar .spacebar-item {
+        gap: 12px;
+        padding: 14px;
+      }
+      
+      .widget-spacebar .spacebar-item__icon {
+        width: 56px;
+        height: 56px;
+      }
+      
+      .widget-spacbar .spacebar-item__icon--html {
+        font-size: 28px;
+      }
+      
+      .widget-spacebar .spacebar-item__icon--html svg {
+        width: 32px;
+        height: 32px;
+      }
+      
+      .widget-spacebar .spacebar-item__title {
+        font-size: 15px;
+      }
+      
+      .widget-spacebar .spacebar-item__desc {
+        font-size: 13px;
+      }
+    }
+  </style>
+</section>

package/test-theme/widgets/splash.liquid

@@ -0,0 +1,378 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_data = widget.data
+  
+  comment
+    Static Widget: Content comes from widget_data.content (splash configuration)
+    Settings come from widget_settings
+  endcomment
+
+  assign content_data = widget_data.content | default: widget.content
+  if content_data.size > 0 and content_data.first.ImageUrl
+    assign splash_config = content_data.first
+  else
+    assign splash_config = content_data
+  endif
+
+  assign image_url = splash_config.ImageUrl | default: splash_config.imageUrl | default: splash_config.Image | default: splash_config.image
+  if image_url == 'null' or image_url == ''
+    assign image_url = nil
+  endif
+  
+  assign link_text = splash_config.LinkText | default: splash_config.linkText | default: splash_config.ButtonText | default: splash_config.buttonText
+  if link_text == 'null' or link_text == ''
+    assign link_text = nil
+  endif
+  
+  assign target_url = splash_config.TargetUrl | default: splash_config.targetUrl | default: splash_config.Link | default: splash_config.link
+  if target_url == 'null' or target_url == ''
+    assign target_url = nil
+  endif
+  
+  assign title = splash_config.Title | default: splash_config.title
+  if title == 'null' or title == ''
+    assign title = nil
+  endif
+  
+  assign description = splash_config.Description | default: splash_config.description
+  if description == 'null' or description == ''
+    assign description = nil
+  endif
+  
+  assign background_color = widget_settings.backgroundColor | default: splash_config.BackgroundColor | default: splash_config.backgroundColor
+  if background_color == 'null' or background_color == '' or background_color == nil
+    assign background_color = '#ffffff'
+  endif
+  
+  assign text_color = widget_settings.textColor | default: splash_config.TextColor | default: splash_config.textColor
+  if text_color == 'null' or text_color == '' or text_color == nil
+    assign text_color = '#111111'
+  endif
+  
+  assign delay_seconds = widget_settings.seconds | default: splash_config.Seconds | default: splash_config.seconds | default: splash_config.DelaySeconds | default: splash_config.delaySeconds
+  if delay_seconds == 'null' or delay_seconds == '' or delay_seconds == nil
+    assign delay_seconds = 1
+  endif
+  
+  assign show_once = widget_settings.showOnce | default: splash_config.ShowOnce | default: splash_config.showOnce | default: true
+  assign overlay_color = widget_settings.overlayColor | default: splash_config.OverlayColor | default: splash_config.overlayColor | default: 'rgba(0,0,0,0.6)'
+  assign event_type = widget_settings.eventType | default: splash_config.EventType | default: splash_config.eventType | default: 'Onload'
+%}
+
+{% assign splash_id = widget.id | default: widget._id | default: 'splash-default' %}
+
+<!-- DEBUG: Splash Widget Loaded - ID: {{ splash_id }}, Image: {{ image_url }}, Delay: {{ delay_seconds }} -->
+
+<div class="widget-splash-overlay" data-splash-widget data-widget-id="{{ splash_id }}" data-delay="{{ delay_seconds }}" data-show-once="false" data-event-type="{{ event_type }}">
+  <div class="widget-splash-modal" style="background-color: {{ background_color }};">
+    <!-- Close Button -->
+    <button type="button" class="splash-close" data-splash-close aria-label="Close">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+    
+    <div class="splash-content">
+      {% if image_url %}
+        <div class="splash-image">
+          {% if target_url %}
+            <a href="{{ target_url }}">
+              <img src="{{ image_url }}" alt="{{ title | default: 'Special Offer' }}" width="800" height="450" loading="lazy">
+            </a>
+          {% else %}
+            <img src="{{ image_url }}" alt="{{ title | default: 'Special Offer' }}" width="800" height="450" loading="lazy">
+          {% endif %}
+        </div>
+      {% endif %}
+      
+      {% if title or description or link_text %}
+        <div class="splash-body" style="color: {{ text_color }};">
+          {% if title %}
+            <h2 class="splash-title">{{ title }}</h2>
+          {% endif %}
+          
+          {% if description %}
+            <p class="splash-description">{{ description }}</p>
+          {% endif %}
+          
+          {% if link_text and target_url %}
+            <a href="{{ target_url }}" class="splash-cta">{{ link_text }}</a>
+          {% endif %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Splash Overlay */
+  .widget-splash-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: {{ overlay_color }};
+    z-index: 99999;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  
+  .widget-splash-overlay.active {
+    display: flex;
+  }
+  
+  .widget-splash-overlay.visible {
+    opacity: 1;
+  }
+  
+  /* Modal */
+  .widget-splash-modal {
+    position: relative;
+    max-width: 500px;
+    width: 100%;
+    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;
+  }
+  
+  .widget-splash-overlay.visible .widget-splash-modal {
+    transform: scale(1) translateY(0);
+  }
+  
+  /* Close Button */
+  .splash-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 36px;
+    height: 36px;
+    border: none;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333;
+    z-index: 10;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .splash-close:hover {
+    background: #fff;
+    transform: scale(1.1);
+  }
+  
+  /* Content */
+  .splash-content {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Image */
+  .splash-image {
+    width: 100%;
+    overflow: hidden;
+  }
+  
+  .splash-image img {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+  }
+  
+  .splash-image a {
+    display: block;
+  }
+  
+  /* Body */
+  .splash-body {
+    padding: 24px;
+    text-align: center;
+  }
+  
+  .splash-title {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 0 0 12px 0;
+    line-height: 1.3;
+  }
+  
+  .splash-description {
+    font-size: 15px;
+    line-height: 1.6;
+    margin: 0 0 20px 0;
+    opacity: 0.85;
+  }
+  
+  /* CTA Button */
+  .splash-cta {
+    display: inline-block;
+    padding: 14px 32px;
+    background: #111;
+    color: #fff !important;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 600;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
+  .splash-cta:hover {
+    background: #333;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  
+  /* Image Only Mode (no title/description) */
+  .splash-body:empty {
+    display: none;
+  }
+  
+  .splash-image + .splash-body:not(:has(.splash-title)):not(:has(.splash-description)):not(:has(.splash-cta)) {
+    display: none;
+  }
+  
+  /* Mobile */
+  @media (max-width: 576px) {
+    .widget-splash-overlay {
+      padding: 16px;
+    }
+    
+    .widget-splash-modal {
+      max-width: 100%;
+      border-radius: 12px;
+    }
+    
+    .splash-close {
+      top: 8px;
+      right: 8px;
+      width: 32px;
+      height: 32px;
+    }
+    
+    .splash-close svg {
+      width: 20px;
+      height: 20px;
+    }
+    
+    .splash-body {
+      padding: 20px 16px;
+    }
+    
+    .splash-title {
+      font-size: 20px;
+    }
+    
+    .splash-description {
+      font-size: 14px;
+    }
+    
+    .splash-cta {
+      padding: 12px 24px;
+      font-size: 13px;
+      width: 100%;
+      text-align: center;
+    }
+  }
+</style>
+
+<script>
+(function() {
+  console.log('[Splash] Script loaded for widget {{ splash_id }}');
+  
+  // Wait for DOM to be ready
+  function initSplash() {
+    console.log('[Splash] initSplash called');
+    
+    // Try multiple selectors
+    let splashWidget = document.querySelector('[data-splash-widget][data-widget-id="{{ splash_id }}"]');
+    if (!splashWidget) {
+      splashWidget = document.querySelector('[data-splash-widget]');
+    }
+    if (!splashWidget) {
+      splashWidget = document.querySelector('.widget-splash-overlay');
+    }
+    
+    if (!splashWidget) {
+      console.error('[Splash] Widget element NOT FOUND in DOM!');
+      console.log('[Splash] Looking for: [data-splash-widget][data-widget-id="{{ splash_id }}"]');
+      return;
+    }
+    
+    console.log('[Splash] Widget element FOUND:', splashWidget);
+    
+    const delaySeconds = parseInt(splashWidget.dataset.delay) || 1;
+    console.log('[Splash] Delay seconds:', delaySeconds);
+    
+    // Show splash after delay
+    console.log('[Splash] Setting timeout for', delaySeconds, 'second(s)...');
+    setTimeout(function() {
+      console.log('[Splash] TIMEOUT FIRED - Showing popup NOW!');
+      splashWidget.style.display = 'flex';
+      splashWidget.classList.add('active');
+      // Trigger animation after a frame
+      setTimeout(function() {
+        splashWidget.classList.add('visible');
+        console.log('[Splash] Added visible class');
+      }, 50);
+    }, delaySeconds * 1000);
+    
+    // Close function
+    function closeSplash() {
+      console.log('[Splash] Closing popup');
+      splashWidget.classList.remove('visible');
+      setTimeout(function() {
+        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) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeSplash();
+      });
+    }
+    
+    // Close on overlay click
+    splashWidget.addEventListener('click', function(e) {
+      if (e.target === splashWidget) {
+        closeSplash();
+      }
+    });
+    
+    // Close on Escape key
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && splashWidget.classList.contains('active')) {
+        closeSplash();
+      }
+    });
+  }
+  
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    console.log('[Splash] DOM still loading, waiting...');
+    document.addEventListener('DOMContentLoaded', initSplash);
+  } else {
+    console.log('[Splash] DOM ready, initializing in 100ms...');
+    setTimeout(initSplash, 100);
+  }
+})();
+</script>