@o2vend/theme-cli 1.0.32

package/test-theme/widgets/product-carousel.liquid

@@ -0,0 +1,502 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_data = widget.data
+
+  comment
+    Dynamic Widget: Products come from widget_data.products (enriched by WidgetService)
+    Settings come from widget_settings
+  endcomment
+  assign products = widget_data.products
+  assign heading = widget_settings.title
+  assign description = 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 background_color = widget_settings.backgroundColor
+%}
+
+<section class="widget widget-product-carousel" data-widget-id="{{ widget.id }}" data-carousel-widget{% if background_color and background_color != blank and background_color != 'null' %} style="background-color: {{ background_color }};"{% endif %}>
+  <div class="carousel-container">
+    {% if show_widget_title %}
+      {% if heading or description %}
+        <header class="carousel-header">
+          <div class="carousel-header__text" style="text-align: {{ widget_title_alignment }};">
+          {% if heading %}
+            <h2 class="carousel-title">{{ heading }}</h2>
+          {% endif %}
+          {% if description %}
+            <p class="carousel-subtitle">{{ description }}</p>
+          {% endif %}
+        </div>
+        {% if products and products.size > 0 %}
+          <div class="carousel-nav">
+            <button type="button" class="carousel-arrow 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="carousel-arrow 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 products and products.size > 0 %}
+      <div class="carousel-wrapper">
+        <!-- Side Navigation Arrows (Desktop) -->
+        <button type="button" class="carousel-side-arrow 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="carousel-track-wrapper" data-carousel-viewport>
+          <div class="carousel-track" data-carousel-track>
+            {% for product in products %}
+              <div class="carousel-slide" data-slide-index="{{ forloop.index0 }}">
+                {% render 'snippets/product-card', product: product, widget: widget %}
+              </div>
+            {% endfor %}
+          </div>
+        </div>
+        
+        <button type="button" class="carousel-side-arrow 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="carousel-dots" data-carousel-dots></div>
+    {% else %}
+      <div class="widget-empty">
+        <p>{{ widget_settings.empty_state | default: 'No products found.' }}</p>
+      </div>
+    {% endif %}
+  </div>
+
+  <style>
+    /* Product Carousel - True Carousel Behavior */
+    .widget-product-carousel {
+      padding: 48px 0;
+      overflow: hidden;
+    }
+    
+    .widget-product-carousel .carousel-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+    
+    /* Header */
+    .widget-product-carousel .carousel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 28px;
+      gap: 16px;
+      position: static;
+      z-index: auto;
+    }
+    
+    .widget-product-carousel .carousel-header__text {
+      flex: 1;
+    }
+    
+    .widget-product-carousel .carousel-title {
+      font-size: 1.4rem;
+      font-weight: 500;
+      line-height: 1.3;
+      color: #111;
+      margin: 0;
+      letter-spacing: -0.01em;
+    }
+    
+    .widget-product-carousel .carousel-subtitle {
+      font-size: 14px;
+      color: #6b7280;
+      margin: 6px 0 0 0;
+    }
+    
+    /* Header Nav Arrows */
+    .widget-product-carousel .carousel-nav {
+      display: flex;
+      gap: 8px;
+    }
+    
+    .widget-product-carousel .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-product-carousel .carousel-arrow:hover:not(:disabled) {
+      background: #111;
+      color: #fff;
+      border-color: #111;
+    }
+    
+    .widget-product-carousel .carousel-arrow:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    
+    /* Carousel Wrapper with Side Arrows */
+    .widget-product-carousel .carousel-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    /* Side Navigation Arrows */
+    .widget-product-carousel .carousel-side-arrow {
+      display: none; /* Hidden by default, shown on desktop */
+      width: 30px;
+      height: 30px;
+      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-product-carousel .carousel-side-arrow:hover:not(:disabled) {
+      background: #111;
+      color: #fff;
+      transform: scale(1.05);
+    }
+    
+    .widget-product-carousel .carousel-side-arrow:disabled {
+      opacity: 0;
+      pointer-events: none;
+    }
+    
+    /* Track Wrapper */
+    .widget-product-carousel .carousel-track-wrapper {
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+    }
+    
+    /* The Scrolling Track */
+    .widget-product-carousel .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-product-carousel .carousel-track::-webkit-scrollbar {
+      display: none;
+    }
+    
+    /* Individual Slides - Desktop: 4 items */
+    .widget-product-carousel .carousel-slide {
+      flex: 0 0 calc(25% - 15px) !important;
+      min-width: 0 !important;
+      max-width: calc(25% - 15px) !important;
+      scroll-snap-align: start;
+      scroll-snap-stop: normal;
+    }
+    
+    /* Override any product-card grid styles */
+    .widget-product-carousel .carousel-slide .product-card {
+      width: 100% !important;
+      max-width: 100% !important;
+      grid-column: unset !important;
+      grid-row: unset !important;
+    }
+    
+    /* Dot Indicators */
+    .widget-product-carousel .carousel-dots {
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 20px;
+    }
+    
+    .widget-product-carousel .carousel-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #d1d5db;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    
+    .widget-product-carousel .carousel-dot:hover {
+      background: #9ca3af;
+    }
+    
+    .widget-product-carousel .carousel-dot.active {
+      background: #111;
+      width: 24px;
+      border-radius: 4px;
+    }
+    
+    /* Desktop: Show side arrows, hide header arrows */
+    @media (min-width: 1025px) {
+      .widget-product-carousel .carousel-side-arrow {
+        display: flex;
+      }
+      .widget-product-carousel .carousel-nav {
+        display: none;
+      }
+    }
+    
+    /* Tablet: 3 items */
+    @media (max-width: 1024px) {
+      .widget-product-carousel .carousel-slide {
+        flex: 0 0 calc(33.333% - 14px) !important;
+        max-width: calc(33.333% - 14px) !important;
+      }
+      .widget-product-carousel .carousel-track {
+        gap: 20px;
+      }
+    }
+    
+    /* Mobile: 2 items */
+    @media (max-width: 768px) {
+      .widget-product-carousel {
+        padding: 36px 0;
+      }
+      .widget-product-carousel .carousel-container {
+        padding: 0 16px;
+      }
+      .widget-product-carousel .carousel-title {
+        font-size: 1.3rem;
+      }
+      .widget-product-carousel .carousel-track {
+        gap: 12px;
+        padding-left: 0;
+        padding-right: 0;
+      }
+      .widget-product-carousel .carousel-slide {
+        flex: 0 0 calc(50% - 6px) !important;
+        max-width: calc(50% - 6px) !important;
+      }
+      .widget-product-carousel .carousel-arrow {
+        width: 36px;
+        height: 36px;
+      }
+      .widget-product-carousel .carousel-dots {
+        margin-top: 16px;
+      }
+    }
+    
+    /* Small Mobile */
+    @media (max-width: 480px) {
+      .widget-product-carousel .carousel-container {
+        padding: 0 12px;
+      }
+      .widget-product-carousel .carousel-track {
+        gap: 10px;
+      }
+      .widget-product-carousel .carousel-slide {
+        flex: 0 0 calc(50% - 5px) !important;
+        max-width: calc(50% - 5px) !important;
+      }
+      .widget-product-carousel .carousel-title {
+        font-size: 1.2rem;
+      }
+    }
+  </style>
+
+  <script>
+  (function() {
+    // Wait for DOM
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initCarousel);
+    } else {
+      initCarousel();
+    }
+    
+    function initCarousel() {
+      const widget = document.querySelector('[data-widget-id="{{ widget.id }}"]');
+      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('.carousel-slide');
+      
+      if (!track || slides.length === 0) return;
+      
+      // Calculate items per view based on screen width
+      function getItemsPerView() {
+        const width = window.innerWidth;
+        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 = '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('.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 one page
+      function scrollByPage(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();
+          scrollByPage(-1);
+        });
+      });
+      
+      nextBtns.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.preventDefault();
+          scrollByPage(1);
+        });
+      });
+      
+      // Track scroll events
+      let scrollTimeout;
+      track.addEventListener('scroll', () => {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          updateDots();
+          updateArrows();
+        }, 50);
+      }, { passive: true });
+      
+      // Touch/swipe support is built-in via CSS scroll-snap
+      
+      // Handle resize
+      let resizeTimeout;
+      window.addEventListener('resize', () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          createDots();
+          updateArrows();
+        }, 200);
+      });
+      
+      // Initialize
+      createDots();
+      updateArrows();
+    }
+  })();
+  </script>
+</section>
+
+

package/test-theme/widgets/product.liquid

@@ -0,0 +1,45 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_content = widget.content
+  assign widget_data = widget.data
+
+  comment
+    Dynamic Widget: Products come from widget_data.products (enriched by WidgetService)
+    Settings come from widget_settings
+    This widget supports filtering by CategoryId, BrandId, OrderBy, IsFeatured, NumberOfProducts
+  endcomment
+  
+  assign products = widget_data.products
+  assign heading = widget_settings.title | default: widget.Title | default: widget.title
+  assign description = widget_settings.subtitle
+  assign columns = widget_settings.columns | default: 4
+  assign show_add_to_cart = widget_settings.show_add_to_cart | default: true
+  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
+%}
+
+{% render 'widgets/shared/product-grid',
+  widget: widget,
+  heading: heading,
+  description: description,
+  products: products,
+  columns: columns,
+  show_add_to_cart: show_add_to_cart,
+  show_widget_title: show_widget_title,
+  widget_title_alignment: widget_title_alignment %}
+

package/test-theme/widgets/recently-viewed.liquid

@@ -0,0 +1,26 @@
+{% liquid
+  assign widget_settings = widget.settings
+  assign widget_content = widget.content
+  assign widget_data = widget.data
+
+  assign products = widget_data.products | default: widget_content.products | default: widget_settings.products | default: cart.recentlyViewed
+  assign heading = widget_settings.title | default: widget_content.title | default: 'Recently viewed'
+  assign description = widget_settings.subtitle | default: widget_content.subtitle
+  assign columns = widget_settings.columns | default: widget_content.columns | default: 4
+  assign show_add_to_cart = widget_settings.show_add_to_cart
+  if show_add_to_cart == nil and widget_content and widget_content.show_add_to_cart != nil
+    assign show_add_to_cart = widget_content.show_add_to_cart
+  endif
+  if show_add_to_cart == nil
+    assign show_add_to_cart = false
+  endif
+%}
+
+{% render 'widgets/shared/product-grid',
+  widget: widget,
+  heading: heading,
+  description: description,
+  products: products,
+  columns: columns,
+  show_add_to_cart: show_add_to_cart %}
+