@o2vend/theme-cli 1.0.32

package/test-theme/widgets/header.liquid

@@ -0,0 +1,159 @@
+{% comment %}
+  Header Widget - HTML Content/Announcement Bar Only
+  This widget displays only the HTML content announcement bar.
+  The actual header menu (logo, navigation, search, cart) should be handled by HeaderMenuWidget.
+{% endcomment %}
+
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_data = widget.data
+
+  comment
+    Static Widget: Content comes from widget_data.content (header configuration)
+    Settings come from widget_settings
+  endcomment
+
+  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
+  endif
+  assign background_color = widget_settings.backgroundColor
+  if background_color == nil and header_config and header_config.BackgroundColor != nil
+    assign background_color = header_config.BackgroundColor
+  endif
+  assign text_color = widget_settings.textColor
+  if text_color == nil and header_config and header_config.TextColor != nil
+    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 %}
+    </div>
+  </div>
+{% endif %}
+
+<style>
+  /* Announcement Bar Styles */
+  .widget-header-announcement__bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    padding: 12px 24px;
+    background: #111;
+    color: #fff;
+    text-align: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .widget-header-announcement__bar.hidden {
+    display: none;
+  }
+
+  .widget-header-announcement__content {
+    flex: 1;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .widget-header-announcement__content p {
+    margin: 0;
+  }
+
+  .widget-header-announcement__content img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+  }
+
+  .widget-header-announcement__close {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+  }
+
+  .widget-header-announcement__close:hover {
+    opacity: 1;
+  }
+
+  .widget-header-announcement__close svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  @media (max-width: 768px) {
+    .widget-header-announcement__bar {
+      padding: 10px 40px 10px 16px;
+      font-size: 13px;
+    }
+
+    .widget-header-announcement__close {
+      right: 8px;
+    }
+  }
+</style>
+
+<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');
+        if (announcement) {
+          announcement.classList.add('hidden');
+          // Store in sessionStorage to remember it's closed for this session
+          const widgetId = announcement.closest('[data-widget-id]')?.getAttribute('data-widget-id');
+          if (widgetId) {
+            sessionStorage.setItem(`announcement-closed-${widgetId}`, 'true');
+          }
+        }
+      });
+
+      // Check if announcement was previously closed in this session
+      const widgetId = announcementCloseBtn.closest('[data-widget-id]')?.getAttribute('data-widget-id');
+      if (widgetId && sessionStorage.getItem(`announcement-closed-${widgetId}`) === 'true') {
+        const announcement = announcementCloseBtn.closest('.widget-header-announcement__bar');
+        if (announcement) {
+          announcement.classList.add('hidden');
+        }
+      }
+    }
+  })();
+</script>

package/test-theme/widgets/html.liquid

@@ -0,0 +1,214 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_content = widget.content
+  assign widget_data = widget.data
+
+  assign title = widget_content.Title | default: widget_content.title | default: widget_settings.title
+  
+  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
+  endcomment
+  
+  if widget.htmlContent
+    assign html_content = widget.htmlContent
+  elsif widget.HtmlContent
+    assign html_content = widget.HtmlContent
+  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 show_container = widget_content.ShowContainer | default: widget_settings.show_container | default: 'Yes'
+  assign show_widget_title_raw = widget_content.ShowWidgetTitle | default: widget_settings.show_widget_title | default: 'Yes'
+  
+  if show_widget_title_raw == null
+    assign show_widget_title = true
+  elsif show_widget_title_raw == blank
+    assign show_widget_title = true
+  elsif show_widget_title_raw == 'null'
+    assign show_widget_title = true
+  elsif 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 widget_title_alignment_raw = widget_content.WidgetTitleAlignment | default: widget_settings.widget_title_alignment | 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
+  assign background_color = widget_content.BackgroundColor | default: widget_settings.background_color
+  assign text_color = widget_content.TextColor | default: widget_settings.text_color
+  assign padding_top = widget_content.PaddingTop | default: widget_settings.padding_top
+  assign padding_bottom = widget_content.PaddingBottom | default: widget_settings.padding_bottom
+%}
+
+<section class="widget widget-html" 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-html__inner{% if show_container == 'No' %} widget-html__inner--full{% endif %}">
+    {% if show_widget_title %}
+      {% if title and title != blank %}
+        <h2 class="widget-title" style="text-align: {{ widget_title_alignment }};{% if text_color and text_color != blank %} color: {{ text_color }};{% endif %}">{{ title }}</h2>
+      {% endif %}
+    {% endif %}
+    
+    {% if html_content and html_content != blank %}
+      <div class="widget-html__content"{% if text_color and text_color != blank and text_color != 'null' %} style="color: {{ text_color }};"{% endif %}>
+        {{ html_content }}
+      </div>
+    {% endif %}
+  </div>
+
+  <style>
+    .widget-html {
+      padding: {{ padding_top | default: '40' }}px 0 {{ padding_bottom | default: '40' }}px;
+    }
+    .widget-html__inner {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+    .widget-html__inner--full {
+      max-width: none;
+      padding: 0;
+    }
+    .widget-html .widget-header {
+      position: static;
+      z-index: auto;
+    }
+    .widget-html .widget-title {
+      font-size: 1.4rem;
+      font-weight: 500;
+      line-height: 1.3;
+      color: #111;
+      margin: 0 0 8px 0;
+      letter-spacing: -0.01em;
+    }
+    .widget-html__content {
+      font-size: 16px;
+      line-height: 1.7;
+      color: #374151;
+    }
+    .widget-html__content :where(h1, h2, h3, h4, h5, h6) {
+      margin-top: 1.5em;
+      margin-bottom: 0.5em;
+      font-weight: 600;
+      line-height: 1.3;
+      color: #111;
+    }
+    .widget-html__content h1 { font-size: 2em; }
+    .widget-html__content h2 { font-size: 1.5em; }
+    .widget-html__content h3 { font-size: 1.25em; }
+    .widget-html__content h4 { font-size: 1.1em; }
+    .widget-html__content p {
+      margin-bottom: 1em;
+    }
+    .widget-html__content ul,
+    .widget-html__content ol {
+      margin: 1em 0;
+      padding-left: 1.5em;
+    }
+    .widget-html__content li {
+      margin-bottom: 0.5em;
+    }
+    .widget-html__content a {
+      color: #2563eb;
+      text-decoration: underline;
+    }
+    .widget-html__content a:hover {
+      color: #1d4ed8;
+    }
+    .widget-html__content img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+    }
+    .widget-html__content table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1em 0;
+    }
+    .widget-html__content th,
+    .widget-html__content td {
+      padding: 12px;
+      border: 1px solid #e5e7eb;
+      text-align: left;
+    }
+    .widget-html__content th {
+      background: #f9fafb;
+      font-weight: 600;
+    }
+    .widget-html__content blockquote {
+      margin: 1.5em 0;
+      padding: 1em 1.5em;
+      border-left: 4px solid #e5e7eb;
+      background: #f9fafb;
+      font-style: italic;
+    }
+    .widget-html__content pre,
+    .widget-html__content code {
+      font-family: 'Monaco', 'Consolas', monospace;
+      font-size: 0.9em;
+    }
+    .widget-html__content pre {
+      background: #1f2937;
+      color: #f9fafb;
+      padding: 1em;
+      border-radius: 8px;
+      overflow-x: auto;
+    }
+    .widget-html__content code {
+      background: #f3f4f6;
+      padding: 0.2em 0.4em;
+      border-radius: 4px;
+    }
+    .widget-html__content pre code {
+      background: none;
+      padding: 0;
+    }
+    
+    /* Mobile */
+    @media (max-width: 768px) {
+      .widget-html {
+        padding: 32px 0;
+      }
+      .widget-html__inner {
+        padding: 0 16px;
+      }
+      .widget-html .widget-title {
+        font-size: 1.3rem;
+      }
+      .widget-html__content {
+        font-size: 15px;
+      }
+    }
+  </style>
+</section>
+

package/test-theme/widgets/news.liquid

@@ -0,0 +1,217 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_content = widget.content
+  assign widget_data = widget.data
+
+  comment
+    Dynamic Widget: News items come from widget_data.products (enriched by WidgetService)
+    Settings come from widget_settings
+  endcomment
+  assign news_items = widget_data.products | default: widget_data.items | default: widget_data.newsItems
+  assign heading = widget_settings.title | default: widget.Title | default: widget_content.ProductName
+  
+  assign show_container = widget_content.ShowContainer | default: widget_settings.showContainer | default: 'Default'
+  assign show_widget_title_raw = widget_content.ShowWidgetTitle | default: widget_settings.showWidgetTitle | default: 'Default'
+  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 == 'Default'
+    assign show_widget_title = true
+  else
+    assign show_widget_title = false
+  endif
+  
+  assign widget_title_alignment_raw = widget_content.WidgetTitleAlignment | default: widget_settings.widgetTitleAlignment | default: 'Default'
+  assign alignment = 'center'
+  if widget_title_alignment_raw == 'Left' or widget_title_alignment_raw == 'left'
+    assign alignment = 'left'
+  elsif widget_title_alignment_raw == 'Right' or widget_title_alignment_raw == 'right'
+    assign alignment = 'right'
+  elsif widget_title_alignment_raw == 'Center' or widget_title_alignment_raw == 'Center' or widget_title_alignment_raw == 'Default' or widget_title_alignment_raw == 'default'
+    assign alignment = 'center'
+  endif
+  
+  assign background_color = widget_content.BackgroundColor | default: widget_settings.backgroundColor
+  assign text_color = widget_content.TextColor | default: widget_settings.textColor
+  assign show_grid_view = widget_content.ShowGridView | default: widget_settings.showGridView | default: true
+  
+  comment
+    Container logic based on section and ShowContainer:
+    - section == "hero" + ShowContainer == "No" or ("Default"/null in hero) → no container
+    - section != "hero" + ShowContainer == ("Default"/null) or ShowContainer == "Yes" → with container
+    - ShowContainer == "No" → no container
+    - ShowContainer == "Yes" → with container
+  endcomment
+  assign widget_section = widget.section | default: 'content'
+  assign use_container = true
+  
+  if show_container == 'No'
+    assign use_container = false
+  elsif show_container == 'Yes'
+    assign use_container = true
+  else
+    if widget_section == 'hero'
+      if show_container == 'Default' or show_container == null or show_container == 'null' or show_container == blank
+        assign use_container = false
+      else
+        assign use_container = true
+      endif
+    else
+      assign use_container = true
+    endif
+  endif
+%}
+
+{% if news_items and news_items.size > 0 %}
+  {% if use_container %}
+    <section class="widget widget-news" data-widget-id="{{ widget.id }}"{% if background_color and background_color != 'null' and background_color != blank %} style="background-color: {{ background_color }}; color: {{ text_color }};"{% endif %}>
+      <div class="container">
+        {% if show_widget_title and heading and heading != blank %}
+          <h2 class="widget-news__title" style="text-align: {{ alignment }}; color: {{ text_color }}; padding-top: 2%;">{{ heading }}</h2>
+        {% endif %}
+        
+        <div class="row product-list widget-news__list">
+          {% for item in news_items %}
+            {% if show_grid_view %}
+              <div class="col-6 col-md-3 p-b-35 p-l-5 p-r-5">
+                {% render 'snippets/news-thumbnail', news_item: item %}
+              </div>
+            {% else %}
+              <div class="col-md-3 p-b-35 p-l-5 p-r-5">
+                {% render 'snippets/news-thumbnail', news_item: item %}
+              </div>
+            {% endif %}
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+  {% else %}
+    <div class="widget widget-news" data-widget-id="{{ widget.id }}"{% if background_color and background_color != 'null' and background_color != blank %} style="background-color: {{ background_color }}; color: {{ text_color }};"{% endif %}>
+      {% if show_widget_title and heading and heading != blank %}
+        <h2 class="widget-news__title" style="text-align: {{ alignment }}; color: {{ text_color }}; padding-top: 2%;">{{ heading }}</h2>
+      {% endif %}
+      
+      <div class="row product-list widget-news__list">
+        {% for item in news_items %}
+          {% if show_grid_view %}
+            <div class="col-6 col-md-3 p-b-35 p-l-5 p-r-5">
+              {% render 'snippets/news-thumbnail', news_item: item %}
+            </div>
+          {% else %}
+            <div class="col-md-3 p-b-35 p-l-5 p-r-5">
+              {% render 'snippets/news-thumbnail', news_item: item %}
+            </div>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+{% else %}
+  <section class="widget widget-news widget-news--empty" data-widget-id="{{ widget.id }}">
+    <div class="widget-empty">
+      <p>No news items available.</p>
+    </div>
+  </section>
+{% endif %}
+
+<style>
+  .widget-news {
+    padding: 40px 0;
+  }
+
+  .widget-news__title {
+    font-size: 1.4rem;
+    font-weight: 500;
+    line-height: 1.3;
+    margin: 0 0 32px 0;
+  }
+
+  .widget-news__list {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -5px;
+  }
+
+  .widget-news .row {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -5px;
+  }
+
+  .widget-news .col-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+    padding: 0 5px;
+  }
+
+  .widget-news .col-md-3 {
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding: 0 5px;
+  }
+
+  @media (min-width: 768px) {
+    .widget-news .col-md-3 {
+      flex: 0 0 25%;
+      max-width: 25%;
+    }
+  }
+
+  .widget-news .p-b-35 {
+    padding-bottom: 35px;
+  }
+
+  .widget-news .p-l-5 {
+    padding-left: 5px;
+  }
+
+  .widget-news .p-r-5 {
+    padding-right: 5px;
+  }
+
+  .widget-news .container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 24px;
+  }
+
+  .widget-empty {
+    padding: 60px 24px;
+    text-align: center;
+    color: #6b7280;
+  }
+
+  .widget-empty p {
+    margin: 0;
+    font-size: 14px;
+  }
+
+  @media (max-width: 768px) {
+    .widget-news {
+      padding: 32px 0;
+    }
+
+    .widget-news__title {
+      font-size: 1.3rem;
+      margin-bottom: 24px;
+    }
+
+    .widget-news .container {
+      padding: 0 16px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .widget-news {
+      padding: 24px 0;
+    }
+
+    .widget-news__title {
+      font-size: 1.2rem;
+      margin-bottom: 20px;
+    }
+
+    .widget-news .container {
+      padding: 0 12px;
+    }
+  }
+</style>