@o2vend/theme-cli 1.0.32

package/test-theme/widgets/category.liquid

@@ -0,0 +1,475 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_data = widget.data
+
+  comment
+    Category data is enriched by WidgetService using getCategoryById API
+    Based on widget.content.CategoryId
+  endcomment
+  assign category = widget_data.category
+  
+  comment
+    Dynamic Widget: Category comes from widget_data.category (enriched by WidgetService)
+    Settings come from widget_settings
+  endcomment
+  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 category_slug = category.slug | default: category.Slug | default: category.handle
+  assign category_id = category.id | default: category.Id | default: category.categoryId
+  assign category_url = category.url | default: category.Url | default: category.link | default: category.Link
+  
+  if category_url == blank
+    if category_slug and category_slug != blank
+      assign category_url = category_slug
+    else
+      assign category_url = '#'
+    endif
+  endif
+  
+  assign category_image = nil
+  if category.bannerImage and category.bannerImage.url
+    assign category_image = category.bannerImage.url
+  elsif category.BannerImage and category.BannerImage.Url
+    assign category_image = category.BannerImage.Url
+  elsif category.BannerImage and category.BannerImage.url
+    assign category_image = category.BannerImage.url
+  elsif category.bannerImage and category.bannerImage != blank
+    assign category_image = category.bannerImage
+  elsif category.BannerImage and category.BannerImage != blank
+    assign category_image = category.BannerImage
+  elsif category.thumbnailImage and category.thumbnailImage.url
+    assign category_image = category.thumbnailImage.url
+  elsif category.ThumbnailImage and category.ThumbnailImage.Url
+    assign category_image = category.ThumbnailImage.Url
+  elsif category.thumbnailImage and category.thumbnailImage != blank
+    assign category_image = category.thumbnailImage
+  elsif category.image
+    assign category_image = category.image
+  elsif category.Image
+    assign category_image = category.Image
+  endif
+  
+  assign category_name = category.name | default: category.Name | default: category.title
+  assign category_description = category.description | default: category.Description
+%}
+
+{% if category %}
+  <section class="widget widget-category-banner" data-widget-id="{{ widget.id }}">
+    <a href="{{ category_url }}" class="category-banner{% unless category_image %} category-banner--no-image{% endunless %}">
+      
+      {% if category_image %}
+        <!-- With Image: Full-width banner with overlay -->
+        <div class="category-banner__bg">
+          <img src="{{ category_image }}" 
+               alt="{{ category_name }}" 
+               width="1400" 
+               height="400" 
+               loading="lazy"
+               onerror="this.style.display='none';">
+        </div>
+        <div class="category-banner__overlay"></div>
+        <div class="category-banner__content category-banner__content--overlay">
+          <h2 class="category-banner__title">{{ category_name }}</h2>
+          {% if category_description and category_description != blank %}
+            <p class="category-banner__description">{{ category_description | truncatewords: 30 }}</p>
+          {% endif %}
+          <span class="category-banner__cta">
+            Shop Now
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+              <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+          </span>
+        </div>
+      {% else %}
+        <!-- No Image: Clean card-style layout -->
+        <div class="category-banner__card">
+          <div class="category-banner__icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <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>
+          </div>
+          <div class="category-banner__text">
+            <h2 class="category-banner__title">{{ category_name }}</h2>
+            {% if category_description and category_description != blank %}
+              <p class="category-banner__description">{{ category_description | truncatewords: 40 }}</p>
+            {% endif %}
+          </div>
+          <span class="category-banner__cta category-banner__cta--solid">
+            Shop Now
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+              <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+          </span>
+        </div>
+      {% endif %}
+      
+    </a>
+
+    <style>
+      .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;
+        {% else %}
+          margin-bottom: {{ settings.spacing_component }}px;
+        {% endif %}
+      }
+      
+      /* ===== WITH IMAGE: Full Banner ===== */
+      .category-banner {
+        display: block;
+        position: relative;
+        width: 100%;
+        max-width: {{ settings.container_width }}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;
+        border-radius: var(--border-radius-medium);
+      }
+      
+      .category-banner:hover {
+        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
+        transform: translateY(-2px);
+      }
+      
+      .category-banner__bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        
+      }
+      
+      .category-banner__bg img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        transition: transform 0.6s ease;
+      }
+      
+      {% comment %} 
+       .category-banner:hover .category-banner__bg img {
+        transform: scale(1.05);
+      } 
+      {% endcomment %}
+      
+      .category-banner__overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+      }
+      
+      .category-banner__content--overlay {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        height: 280px;
+        padding: 40px 56px;
+        max-width: 650px;
+      }
+      
+      .category-banner__content--overlay .category-banner__title {
+        font-size: 40px;
+        font-weight: 700;
+        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;
+      }
+      
+      .category-banner__content--overlay .category-banner__description {
+        font-size: 17px;
+        line-height: 1.65;
+        margin: 0 0 28px 0;
+        opacity: 0.95;
+        max-width: 500px;
+        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
+        color: #fff;
+      }
+      
+      .category-banner__cta {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 14px;
+        font-weight: 600;
+        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);
+        border-radius: var(--border-radius-medium);
+      }
+      
+      .category-banner:hover .category-banner__cta {
+        background: {{ settings.color_text }};
+        color: {{ settings.color_background }};
+      }
+      
+      .category-banner__cta svg {
+        transition: transform 0.3s ease;
+      }
+      
+      .category-banner:hover .category-banner__cta svg {
+        transform: translateX(5px);
+      }
+      
+      /* ===== NO IMAGE: Card Style ===== */
+      .category-banner--no-image {
+        min-height: auto;
+      }
+      
+      .category-banner__card {
+        display: flex;
+        align-items: center;
+        gap: 32px;
+        padding: 40px 48px;
+      }
+      
+      .category-banner__icon {
+        flex-shrink: 0;
+        width: 80px;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.2);
+        color: #fff;
+      }
+      
+      .category-banner__text {
+        flex: 1;
+        min-width: 0;
+      }
+      
+      .category-banner__card .category-banner__title {
+        font-size: 28px;
+        font-weight: 700;
+        margin: 0 0 8px 0;
+        line-height: 1.2;
+        color: #fff;
+      }
+      
+      .category-banner__card .category-banner__description {
+        font-size: 15px;
+        line-height: 1.6;
+        margin: 0;
+        color: rgba(255, 255, 255, 0.9);
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      
+      .category-banner__cta--solid {
+        flex-shrink: 0;
+        background: #fff;
+        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;
+      }
+      
+      /* ===== Tablet ===== */
+      @media (max-width: 1024px) {
+        .widget-category-banner {
+          padding: 0 20px;
+        }
+        
+        .category-banner {
+          height: 240px;
+        }
+        
+        .category-banner__content--overlay {
+          height: 240px;
+          padding: 32px 40px;
+        }
+        
+        .category-banner__content--overlay .category-banner__title {
+          font-size: 32px;
+        }
+        
+        .category-banner__content--overlay .category-banner__description {
+          font-size: 15px;
+        }
+        
+        .category-banner__card {
+          padding: 32px 36px;
+          gap: 24px;
+        }
+        
+        .category-banner__icon {
+          width: 64px;
+          height: 64px;
+        }
+        
+        .category-banner__icon svg {
+          width: 36px;
+          height: 36px;
+        }
+        
+        .category-banner__card .category-banner__title {
+          font-size: 24px;
+        }
+      }
+      
+      /* ===== Mobile ===== */
+      @media (max-width: 768px) {
+        .widget-category-banner {
+          padding: 0 16px;
+        }
+        
+        .category-banner {
+          height: 200px;
+        }
+        
+        
+        }
+        
+        .category-banner__content--overlay {
+          height: 200px;
+          padding: 24px;
+          justify-content: flex-end;
+          max-width: 100%;
+        }
+        
+        .category-banner__content--overlay .category-banner__title {
+          font-size: 22px;
+          margin-bottom: 12px;
+        }
+        
+        .category-banner__content--overlay .category-banner__description {
+          display: none;
+        }
+        
+        .category-banner__cta {
+          font-size: 12px;
+          padding: 12px 24px;
+        }
+        
+        /* Card style mobile */
+        .category-banner--no-image {
+          height: auto;
+        }
+        
+        .category-banner__card {
+          flex-direction: column;
+          text-align: center;
+          padding: 32px 24px;
+          gap: 20px;
+        }
+        
+        .category-banner__card .category-banner__title {
+          font-size: 22px;
+        }
+        
+        .category-banner__card .category-banner__description {
+          -webkit-line-clamp: 3;
+        }
+      }
+      
+      /* ===== Small Mobile ===== */
+      @media (max-width: 480px) {
+        .widget-category-banner {
+          padding: 0 12px;
+        }
+        
+        .category-banner {
+          height: 180px;
+        }
+        
+        .category-banner__content--overlay {
+          height: 180px;
+          padding: 20px;
+        }
+        
+        .category-banner__content--overlay .category-banner__title {
+          font-size: 20px;
+        }
+        
+        .category-banner__cta {
+          font-size: 11px;
+          padding: 10px 20px;
+          gap: 8px;
+        }
+        
+        .category-banner__cta svg {
+          width: 14px;
+          height: 14px;
+        }
+        
+        /* Card style small mobile */
+        .category-banner__card {
+          padding: 24px 20px;
+          gap: 16px;
+        }
+        
+        .category-banner__icon {
+          width: 56px;
+          height: 56px;
+        }
+        
+        .category-banner__icon svg {
+          width: 28px;
+          height: 28px;
+        }
+        
+        .category-banner__card .category-banner__title {
+          font-size: 18px;
+        }
+        
+        .category-banner__card .category-banner__description {
+          font-size: 13px;
+          -webkit-line-clamp: 2;
+        }
+      }
+    </style>
+  </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;">
+          <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>
+      </div>
+    </div>
+  </section>
+{% endif %}
+

package/test-theme/widgets/discount-time.liquid

@@ -0,0 +1,176 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_content = widget.content
+  assign widget_data = widget.data
+
+  assign heading = widget_settings.title | default: widget_content.title | default: 'Limited time offer'
+  assign subheading = widget_settings.subtitle | default: widget_content.subtitle
+  assign end_time = widget_settings.ends_at | default: widget_content.ends_at | default: widget_data.ends_at
+  assign highlight_text = widget_settings.highlight | default: widget_content.highlight
+  assign background_image = widget_settings.background_image | default: widget_content.background_image
+%}
+
+<section class="widget widget-discount-time" data-widget-id="{{ widget.id }}" data-countdown="{{ end_time }}">
+  <div class="widget-discount-time__background" {% if background_image %}style="background-image: url('{{ background_image }}');"{% endif %}></div>
+  <div class="widget-discount-time__overlay"></div>
+  <div class="widget-discount-time__content">
+    <h2>{{ heading }}</h2>
+    {% if subheading %}
+      <p>{{ subheading }}</p>
+    {% endif %}
+    {% if highlight_text %}
+      <span class="widget-discount-time__highlight">{{ highlight_text }}</span>
+    {% endif %}
+    {% if end_time %}
+      <div class="widget-discount-time__countdown" data-countdown-display>
+        <div><strong data-countdown-days>00</strong><span>Days</span></div>
+        <div><strong data-countdown-hours>00</strong><span>Hours</span></div>
+        <div><strong data-countdown-minutes>00</strong><span>Minutes</span></div>
+        <div><strong data-countdown-seconds>00</strong><span>Seconds</span></div>
+      </div>
+    {% endif %}
+    {% if widget_settings.cta_label %}
+      <a href="{{ widget_settings.cta_link | default: '#' }}" class="widget-discount-time__cta">
+        {{ widget_settings.cta_label }}
+      </a>
+    {% endif %}
+  </div>
+
+  <style>
+    .widget-discount-time {
+      position: relative;
+      padding: 4rem 1rem;
+      color: {{ widget_settings.text_color | default: '#ffffff' }};
+      overflow: hidden;
+      border-radius: var(--border-radius-medium);
+      margin: 2rem auto;
+      max-width: {{ settings.container_width }}px;
+    }
+    .widget-discount-time__background {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, {{ widget_settings.background_from | default: '#1f2937' }}, {{ widget_settings.background_to | default: '#2563eb' }});
+      background-size: cover;
+      background-position: center;
+      filter: saturate(1.1);
+    }
+    .widget-discount-time__overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(15, 23, 42, 0.4);
+    }
+    .widget-discount-time__content {
+      position: relative;
+      z-index: 2;
+      text-align: center;
+      max-width: 640px;
+      margin: 0 auto;
+    }
+    .widget-discount-time h2 {
+      font-size: clamp(2rem, 4vw, 2.8rem);
+      margin: 0 0 1rem;
+    }
+    .widget-discount-time p {
+      margin: 0 0 1.5rem;
+      font-size: 1.1rem;
+      opacity: 0.9;
+    }
+    .widget-discount-time__highlight {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.15);
+      font-weight: 600;
+      margin-bottom: 2rem;
+    }
+    .widget-discount-time__countdown {
+      display: inline-flex;
+      gap: 1rem;
+      margin: 2.5rem 0;
+      padding: 0.5rem 1rem;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(8px);
+    }
+    .widget-discount-time__countdown div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 70px;
+    }
+    .widget-discount-time__countdown strong {
+      font-size: 1.75rem;
+      font-weight: 700;
+    }
+    .widget-discount-time__countdown span {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+    .widget-discount-time__cta {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.85rem 1.75rem;
+      border-radius: 999px;
+      background: {{ widget_settings.cta_background | default: '#ffffff' }};
+      color: {{ widget_settings.cta_text | default: '#111827' }};
+      text-decoration: none;
+      font-weight: 600;
+    }
+    @media (max-width: 640px) {
+      .widget-discount-time__countdown {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.75rem;
+      }
+      .widget-discount-time__countdown div {
+        min-width: 60px;
+      }
+    }
+  </style>
+
+  {% if end_time %}
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const widget = document.querySelector('[data-widget-id="{{ widget.id }}"]');
+        if (!widget) return;
+
+        const targetDate = new Date(widget.dataset.countdown);
+        if (!targetDate.getTime()) return;
+
+        const parts = {
+          days: widget.querySelector('[data-countdown-days]'),
+          hours: widget.querySelector('[data-countdown-hours]'),
+          minutes: widget.querySelector('[data-countdown-minutes]'),
+          seconds: widget.querySelector('[data-countdown-seconds]')
+        };
+
+        const tick = () => {
+          const now = new Date();
+          let diff = targetDate - now;
+          if (diff <= 0) {
+            diff = 0;
+            clearInterval(timer);
+            widget.classList.add('widget-discount-time--expired');
+          }
+          const seconds = Math.floor((diff / 1000) % 60);
+          const minutes = Math.floor((diff / (1000 * 60)) % 60);
+          const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
+          const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+          if (parts.days) parts.days.textContent = String(days).padStart(2, '0');
+          if (parts.hours) parts.hours.textContent = String(hours).padStart(2, '0');
+          if (parts.minutes) parts.minutes.textContent = String(minutes).padStart(2, '0');
+          if (parts.seconds) parts.seconds.textContent = String(seconds).padStart(2, '0');
+        };
+
+        tick();
+        const timer = setInterval(tick, 1000);
+      });
+    </script>
+  {% endif %}
+</section>
+