@o2vend/theme-cli 1.0.32

package/test-theme/widgets/category-list-carousel.liquid

@@ -0,0 +1,656 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_data = widget.data
+
+  comment
+    Dynamic Widget: Categories come from widget_data.categories (enriched by WidgetService)
+    Settings come from widget_settings
+  endcomment
+  assign categories = widget_data.categories | default: widget_data.Categories
+  assign heading = widget_settings.title
+  assign subtitle = widget_settings.subtitle
+  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: '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 show_counts = widget_settings.showProductCount | default: false
+  assign background_color = widget_settings.backgroundColor
+  assign text_color = widget_settings.textColor
+%}
+
+<section class="widget widget-category-carousel" data-widget-id="{{ widget.id }}" data-category-carousel{% if background_color and background_color != blank and background_color != 'null' %} style="background-color: {{ background_color }};"{% endif %}>
+  <div class="category-carousel-container">
+    {% if show_widget_title %}
+      {% if heading or subtitle %}
+      <header class="category-carousel-header">
+        <div class="category-carousel-header__text" style="text-align: {{ widget_title_alignment }};">
+          {% if heading %}
+            <h2 class="category-carousel-title"{% if text_color and text_color != 'null' %} style="color: {{ text_color }};"{% endif %}>{{ heading }}</h2>
+          {% endif %}
+          {% if subtitle %}
+            <p class="category-carousel-subtitle"{% if text_color and text_color != 'null' %} style="color: {{ text_color }};"{% endif %}>{{ subtitle }}</p>
+          {% endif %}
+        </div>
+        {% if categories and categories.size > 0 %}
+          <div class="category-carousel-nav">
+            <button type="button" class="category-carousel-arrow category-carousel-arrow--prev" data-carousel-prev aria-label="Previous">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="15 18 9 12 15 6"></polyline>
+              </svg>
+            </button>
+            <button type="button" class="category-carousel-arrow category-carousel-arrow--next" data-carousel-next aria-label="Next">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="9 18 15 12 9 6"></polyline>
+              </svg>
+            </button>
+          </div>
+        {% endif %}
+      </header>
+    {% endif %}
+    {% endif %}
+
+    {% if categories and categories.size > 0 %}
+      <div class="category-carousel-wrapper">
+        <!-- Side Navigation Arrows (Desktop) -->
+        <button type="button" class="category-carousel-side-arrow category-carousel-side-arrow--prev" data-carousel-prev aria-label="Previous">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+        </button>
+        
+        <div class="category-carousel-track-wrapper" data-carousel-viewport>
+          <div class="category-carousel-track" data-carousel-track>
+            {% for category in categories %}
+              {% comment %} Extract category data with fallbacks {% endcomment %}
+              {% assign cat_name = category.name | default: category.Name | default: category.title | default: category.Title %}
+              {% assign cat_slug = category.slug | default: category.Slug | default: category.handle | default: category.Handle %}
+              {% assign cat_id = category.id | default: category.Id | default: category.categoryId | default: category.CategoryId %}
+              {% assign cat_product_count = category.productCount | default: category.ProductCount %}
+              
+              {% comment %} Build category URL - slug is already a complete URL {% endcomment %}
+              {% assign cat_url = category.url | default: category.Url | default: category.link | default: category.Link %}
+              {% if cat_url == blank %}
+                {% if cat_slug and cat_slug != blank %}
+                  {% assign cat_url = cat_slug %}
+                {% else %}
+                  {% assign cat_url = '#' %}
+                {% endif %}
+              {% endif %}
+              
+              {% comment %} Get category image with fallbacks {% endcomment %}
+              {% assign cat_image = nil %}
+              {% if category.thumbnailImage and category.thumbnailImage.url %}
+                {% assign cat_image = category.thumbnailImage.url %}
+              {% elsif category.ThumbnailImage and category.ThumbnailImage.Url %}
+                {% assign cat_image = category.ThumbnailImage.Url %}
+              {% elsif category.bannerImage and category.bannerImage.url %}
+                {% assign cat_image = category.bannerImage.url %}
+              {% elsif category.BannerImage and category.BannerImage.Url %}
+                {% assign cat_image = category.BannerImage.Url %}
+              {% elsif category.thumbnailImage and category.thumbnailImage != blank %}
+                {% assign cat_image = category.thumbnailImage %}
+              {% elsif category.bannerImage and category.bannerImage != blank %}
+                {% assign cat_image = category.bannerImage %}
+              {% elsif category.image %}
+                {% assign cat_image = category.image %}
+              {% elsif category.Image %}
+                {% assign cat_image = category.Image %}
+              {% endif %}
+              
+              <div class="category-carousel-slide" data-slide-index="{{ forloop.index0 }}">
+                <a href="{{ cat_url }}" class="category-carousel-item">
+                  <div class="category-carousel-item__media">
+                    {% if cat_image != blank and cat_image != nil and cat_image != 'null' %}
+                      <img src="{{ cat_image }}" alt="{{ cat_name }}" width="300" height="300" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                      <span class="category-carousel-item__placeholder category-carousel-item__placeholder--fallback" style="display: none;">
+                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                          <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/>
+                        </svg>
+                      </span>
+                    {% else %}
+                      <span class="category-carousel-item__placeholder">
+                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                          <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/>
+                        </svg>
+                      </span>
+                    {% endif %}
+                  </div>
+                  <div class="category-carousel-item__content">
+                    <h3>{{ cat_name }}</h3>
+                    {% if show_counts and cat_product_count %}
+                      <p>{{ cat_product_count }} products</p>
+                    {% endif %}
+                  </div>
+                </a>
+              </div>
+            {% endfor %}
+          </div>
+        </div>
+        
+        <button type="button" class="category-carousel-side-arrow category-carousel-side-arrow--next" data-carousel-next aria-label="Next">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </button>
+      </div>
+      
+      <!-- Dot Indicators -->
+      <div class="category-carousel-dots" data-carousel-dots></div>
+    {% else %}
+      <div class="widget-empty">
+        <p>{{ widget_settings.empty_state | default: 'Categories will appear here soon.' }}</p>
+      </div>
+    {% endif %}
+  </div>
+
+  <style>
+    /* Category Carousel - True Carousel Behavior */
+    .widget-category-carousel {
+      padding: 48px 0;
+      overflow: hidden;
+    }
+    
+    .widget-category-carousel .category-carousel-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+    
+    /* Header */
+    .widget-category-carousel .category-carousel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 28px;
+      gap: 16px;
+    }
+    
+    .widget-category-carousel .category-carousel-header__text {
+      flex: 1;
+    }
+    
+    .widget-category-carousel .category-carousel-header {
+      position: static;
+      z-index: auto;
+    }
+    .widget-category-carousel .category-carousel-title {
+      font-size: 1.4rem;
+      font-weight: 500;
+      line-height: 1.3;
+      color: #111;
+      margin: 0;
+      letter-spacing: -0.01em;
+    }
+    
+    .widget-category-carousel .category-carousel-subtitle {
+      font-size: 14px;
+      color: #6b7280;
+      margin: 6px 0 0 0;
+    }
+    
+    /* Header Nav Arrows */
+    .widget-category-carousel .category-carousel-nav {
+      display: flex;
+      gap: 8px;
+    }
+    
+    .widget-category-carousel .category-carousel-arrow {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: 1px solid #e0e0e0;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: #333;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+    
+    .widget-category-carousel .category-carousel-arrow:hover:not(:disabled) {
+      background: #111;
+      color: #fff;
+      border-color: #111;
+    }
+    
+    .widget-category-carousel .category-carousel-arrow:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    
+    /* Carousel Wrapper with Side Arrows */
+    .widget-category-carousel .category-carousel-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    /* Side Navigation Arrows */
+    .widget-category-carousel .category-carousel-side-arrow {
+      display: none;
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      border: none;
+      background: #fff;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: #333;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      z-index: 10;
+    }
+    
+    .widget-category-carousel .category-carousel-side-arrow:hover:not(:disabled) {
+      background: #111;
+      color: #fff;
+      transform: scale(1.05);
+    }
+    
+    .widget-category-carousel .category-carousel-side-arrow:disabled {
+      opacity: 0;
+      pointer-events: none;
+    }
+    
+    /* Track Wrapper */
+    .widget-category-carousel .category-carousel-track-wrapper {
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+    }
+    
+    /* The Scrolling Track */
+    .widget-category-carousel .category-carousel-track {
+      display: flex !important;
+      gap: 20px;
+      overflow-x: auto !important;
+      overflow-y: hidden !important;
+      scroll-snap-type: x mandatory;
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      padding: 4px 0;
+    }
+    
+    .widget-category-carousel .category-carousel-track::-webkit-scrollbar {
+      display: none;
+    }
+    
+    /* Individual Slides - Desktop: 4 items */
+    .widget-category-carousel .category-carousel-slide {
+      flex: 0 0 calc(25% - 15px);
+      min-width: 0;
+      max-width: calc(25% - 15px);
+      scroll-snap-align: start;
+      scroll-snap-stop: normal;
+    }
+    
+    /* Category Item Card */
+    .widget-category-carousel .category-carousel-item {
+      display: block;
+      background: #fff;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+      text-decoration: none;
+      color: inherit;
+      transition: transform 0.25s ease, box-shadow 0.25s ease;
+    }
+    
+    .widget-category-carousel .category-carousel-item:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+    }
+    
+    .widget-category-carousel .category-carousel-item__media {
+      aspect-ratio: 4 / 3;
+      overflow: hidden;
+      position: relative;
+      background: #f5f5f5;
+    }
+    
+    .widget-category-carousel .category-carousel-item__media img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.3s ease;
+    }
+    
+    .widget-category-carousel .category-carousel-item:hover .category-carousel-item__media img {
+      transform: scale(1.05);
+    }
+    
+    .widget-category-carousel .category-carousel-item__placeholder {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
+      color: #9ca3af;
+    }
+    
+    .widget-category-carousel .category-carousel-item__placeholder--fallback {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    
+    .widget-category-carousel .category-carousel-item__content {
+      padding: 16px;
+    }
+    
+    .widget-category-carousel .category-carousel-item__content h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #111;
+      line-height: 1.3;
+    }
+    
+    .widget-category-carousel .category-carousel-item__content p {
+      margin: 6px 0 0;
+      color: #6b7280;
+      font-size: 13px;
+    }
+    
+    /* Dot Indicators */
+    .widget-category-carousel .category-carousel-dots {
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 20px;
+    }
+    
+    .widget-category-carousel .category-carousel-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #d1d5db;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    
+    .widget-category-carousel .category-carousel-dot:hover {
+      background: #9ca3af;
+    }
+    
+    .widget-category-carousel .category-carousel-dot.active {
+      background: #111;
+      width: 24px;
+      border-radius: 4px;
+    }
+    
+    .widget-category-carousel .widget-empty {
+      text-align: center;
+      padding: 60px 24px;
+      color: #6b7280;
+    }
+    
+    /* Desktop: Show side arrows, hide header arrows */
+    @media (min-width: 1025px) {
+      .widget-category-carousel .category-carousel-side-arrow {
+        display: flex;
+      }
+      .widget-category-carousel .category-carousel-nav {
+        display: none;
+      }
+    }
+    
+    /* Tablet: 3 items */
+    @media (max-width: 1024px) {
+      .widget-category-carousel .category-carousel-slide {
+        flex: 0 0 calc(33.333% - 14px);
+        max-width: calc(33.333% - 14px);
+      }
+      .widget-category-carousel .category-carousel-track {
+        gap: 20px;
+      }
+    }
+    
+    /* Small Tablet: 2.5 items */
+    @media (max-width: 768px) {
+      .widget-category-carousel {
+        padding: 36px 0;
+      }
+      .widget-category-carousel .category-carousel-container {
+        padding: 0 16px;
+      }
+      .widget-category-carousel .category-carousel-title {
+        font-size: 1.3rem;
+      }
+      .widget-category-carousel .category-carousel-track {
+        gap: 16px;
+      }
+      .widget-category-carousel .category-carousel-slide {
+        flex: 0 0 calc(50% - 8px);
+        max-width: calc(50% - 8px);
+      }
+      .widget-category-carousel .category-carousel-arrow {
+        width: 36px;
+        height: 36px;
+      }
+      .widget-category-carousel .category-carousel-dots {
+        margin-top: 16px;
+      }
+      .widget-category-carousel .category-carousel-item__content {
+        padding: 12px;
+      }
+      .widget-category-carousel .category-carousel-item__content h3 {
+        font-size: 14px;
+      }
+    }
+    
+    /* Mobile: 2 items */
+    @media (max-width: 480px) {
+      .widget-category-carousel .category-carousel-container {
+        padding: 0 12px;
+      }
+      .widget-category-carousel .category-carousel-track {
+        gap: 12px;
+      }
+      .widget-category-carousel .category-carousel-slide {
+        flex: 0 0 calc(50% - 6px);
+        max-width: calc(50% - 6px);
+      }
+      .widget-category-carousel .category-carousel-title {
+        font-size: 1.2rem;
+      }
+      .widget-category-carousel .category-carousel-item {
+        border-radius: 8px;
+      }
+      .widget-category-carousel .category-carousel-item__content {
+        padding: 10px;
+      }
+      .widget-category-carousel .category-carousel-item__content h3 {
+        font-size: 13px;
+      }
+      .widget-category-carousel .category-carousel-item__content p {
+        font-size: 12px;
+      }
+    }
+    
+    /* Extra small */
+    @media (max-width: 360px) {
+      .widget-category-carousel .category-carousel-track {
+        gap: 8px;
+      }
+      .widget-category-carousel .category-carousel-slide {
+        flex: 0 0 calc(50% - 4px);
+        max-width: calc(50% - 4px);
+      }
+    }
+  </style>
+
+  <script>
+  (function() {
+    // Wait for DOM
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initCategoryCarousel);
+    } else {
+      initCategoryCarousel();
+    }
+    
+    function initCategoryCarousel() {
+      const widget = document.querySelector('[data-widget-id="{{ widget.id }}"][data-category-carousel]');
+      if (!widget) return;
+      
+      const track = widget.querySelector('[data-carousel-track]');
+      const viewport = widget.querySelector('[data-carousel-viewport]');
+      const prevBtns = widget.querySelectorAll('[data-carousel-prev]');
+      const nextBtns = widget.querySelectorAll('[data-carousel-next]');
+      const dotsContainer = widget.querySelector('[data-carousel-dots]');
+      const slides = widget.querySelectorAll('.category-carousel-slide');
+      
+      if (!track || slides.length === 0) return;
+      
+      // Calculate items per view based on screen width
+      function getItemsPerView() {
+        const width = window.innerWidth;
+        if (width <= 360) return 2;
+        if (width <= 480) return 2;
+        if (width <= 768) return 2;
+        if (width <= 1024) return 3;
+        return 4;
+      }
+      
+      // Calculate number of pages
+      function getPageCount() {
+        const itemsPerView = getItemsPerView();
+        return Math.ceil(slides.length / itemsPerView);
+      }
+      
+      // Get current page based on scroll position
+      function getCurrentPage() {
+        if (!track.scrollWidth || track.scrollWidth <= viewport.clientWidth) return 0;
+        const scrollRatio = track.scrollLeft / (track.scrollWidth - viewport.clientWidth);
+        return Math.round(scrollRatio * (getPageCount() - 1));
+      }
+      
+      // Create dot indicators
+      function createDots() {
+        if (!dotsContainer) return;
+        dotsContainer.innerHTML = '';
+        const pageCount = getPageCount();
+        if (pageCount <= 1) return;
+        
+        for (let i = 0; i < pageCount; i++) {
+          const dot = document.createElement('button');
+          dot.className = 'category-carousel-dot' + (i === 0 ? ' active' : '');
+          dot.setAttribute('aria-label', 'Go to page ' + (i + 1));
+          dot.addEventListener('click', () => goToPage(i));
+          dotsContainer.appendChild(dot);
+        }
+      }
+      
+      // Update active dot
+      function updateDots() {
+        if (!dotsContainer) return;
+        const dots = dotsContainer.querySelectorAll('.category-carousel-dot');
+        const currentPage = getCurrentPage();
+        dots.forEach((dot, index) => {
+          dot.classList.toggle('active', index === currentPage);
+        });
+      }
+      
+      // Update arrow states
+      function updateArrows() {
+        const atStart = track.scrollLeft <= 5;
+        const atEnd = track.scrollLeft >= track.scrollWidth - viewport.clientWidth - 5;
+        
+        prevBtns.forEach(btn => {
+          btn.disabled = atStart;
+        });
+        nextBtns.forEach(btn => {
+          btn.disabled = atEnd;
+        });
+      }
+      
+      // Navigate to specific page
+      function goToPage(pageIndex) {
+        const itemsPerView = getItemsPerView();
+        const slide = slides[0];
+        if (!slide) return;
+        
+        const gap = parseFloat(getComputedStyle(track).gap) || 20;
+        const slideWidth = slide.offsetWidth + gap;
+        const scrollTo = pageIndex * itemsPerView * slideWidth;
+        
+        track.scrollTo({ left: scrollTo, behavior: 'smooth' });
+      }
+      
+      // Scroll by items
+      function scrollByItems(direction) {
+        const itemsPerView = getItemsPerView();
+        const slide = slides[0];
+        if (!slide) return;
+        
+        const gap = parseFloat(getComputedStyle(track).gap) || 20;
+        const scrollAmount = (slide.offsetWidth + gap) * Math.max(1, itemsPerView - 1);
+        
+        track.scrollBy({ left: direction * scrollAmount, behavior: 'smooth' });
+      }
+      
+      // Event listeners
+      prevBtns.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.preventDefault();
+          scrollByItems(-1);
+        });
+      });
+      
+      nextBtns.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.preventDefault();
+          scrollByItems(1);
+        });
+      });
+      
+      // Track scroll events
+      let scrollTimeout;
+      track.addEventListener('scroll', () => {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          updateDots();
+          updateArrows();
+        }, 50);
+      }, { passive: true });
+      
+      // Handle resize
+      let resizeTimeout;
+      window.addEventListener('resize', () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          createDots();
+          updateArrows();
+        }, 200);
+      });
+      
+      // Initialize
+      createDots();
+      updateArrows();
+    }
+  })();
+  </script>
+</section>