@o2vend/theme-cli 1.0.32

package/test-theme/snippets/news-thumbnail.liquid

@@ -0,0 +1,187 @@
+{% comment %}
+  News Thumbnail Snippet
+  
+  Parameters:
+  - news_item: News item object (required)
+  - loading: Image loading attribute (optional, default: "lazy")
+  
+  Usage:
+  {% render 'snippets/news-thumbnail', news_item: news_item %}
+{% endcomment %}
+
+{% assign image_loading = loading | default: "lazy" %}
+{% comment %} Get title - API client normalizes to camelCase, so check camelCase first, then PascalCase {% endcomment %}
+{% assign news_title = news_item.title | default: news_item.Title | default: news_item.name | default: news_item.Name | default: news_item.slug | default: news_item.Slug | default: news_item.id | default: news_item.Id %}
+{% comment %} Get slug - check camelCase first {% endcomment %}
+{% assign news_slug = news_item.slug | default: news_item.Slug | default: news_item.id | default: news_item.Id %}
+{% comment %} Get excerpt - check camelCase first {% endcomment %}
+{% assign news_excerpt = news_item.excerpt | default: news_item.Excerpt | default: news_item.content | default: news_item.Content | truncate: 150 %}
+{% comment %} Handle ThumbnailImage object - API client normalizes to camelCase (thumbnailImage) {% endcomment %}
+{% assign thumbnail_image = news_item.thumbnailImage | default: news_item.ThumbnailImage %}
+{% if thumbnail_image %}
+  {% comment %} Check camelCase first (url, altText), then PascalCase (Url, AltText) {% endcomment %}
+  {% assign news_image = thumbnail_image.url | default: thumbnail_image.Url %}
+  {% assign news_image_alt = thumbnail_image.altText | default: thumbnail_image.AltText | default: news_title %}
+{% else %}
+  {% comment %} Fallback to Image field if ThumbnailImage is not available {% endcomment %}
+  {% assign news_image = news_item.image | default: news_item.Image %}
+  {% assign news_image_alt = news_title %}
+{% endif %}
+{% comment %} Get published date - check camelCase first {% endcomment %}
+{% assign news_published = news_item.publishedAt | default: news_item.PublishedAt | default: news_item.published_at %}
+{% comment %} Get category - check camelCase first {% endcomment %}
+{% assign news_category = news_item.category | default: news_item.Category %}
+
+<div class="news-thumbnail">
+  <a href="/news/{{ news_slug }}" class="news-thumbnail__link">
+    {% if news_image and news_image != blank %}
+      <div class="news-thumbnail__image">
+        {% if news_image contains 'http://' or news_image contains 'https://' %}
+          {% assign image_src = news_image %}
+        {% else %}
+          {% assign image_src = news_image | asset_url %}
+        {% endif %}
+        <img src="{{ image_src }}" alt="{{ news_image_alt }}" width="400" height="220" loading="{{ image_loading }}">
+      </div>
+    {% else %}
+      <div class="news-thumbnail__placeholder">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <path d="M8 8h8M8 12h8M8 16h5"></path>
+        </svg>
+      </div>
+    {% endif %}
+    
+    <div class="news-thumbnail__content">
+      {% if news_category %}
+        {% assign category_name = news_category.Name | default: news_category.name %}
+        {% if category_name and category_name != blank %}
+          <div class="news-thumbnail__category">{{ category_name }}</div>
+        {% endif %}
+      {% endif %}
+      
+      <h3 class="news-thumbnail__title">{{ news_title }}</h3>
+      
+      {% if news_excerpt and news_excerpt != blank %}
+        <p class="news-thumbnail__excerpt">{{ news_excerpt }}</p>
+      {% endif %}
+      
+      {% if news_published %}
+        <div class="news-thumbnail__date">
+          {{ news_published | date: '%b %d, %Y' }}
+        </div>
+      {% endif %}
+    </div>
+  </a>
+</div>
+
+<style>
+  .news-thumbnail {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .news-thumbnail:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  }
+
+  .news-thumbnail__link {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .news-thumbnail__image {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    background: #f5f5f5;
+  }
+
+  .news-thumbnail__image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .news-thumbnail__placeholder {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f5f5f5;
+    color: #999;
+  }
+
+  .news-thumbnail__content {
+    padding: 16px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .news-thumbnail__category {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #666;
+  }
+
+  .news-thumbnail__title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.4;
+    margin: 0;
+    color: #111;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .news-thumbnail__excerpt {
+    font-size: 14px;
+    line-height: 1.6;
+    color: #666;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    flex: 1;
+  }
+
+  .news-thumbnail__date {
+    font-size: 12px;
+    color: #999;
+    margin-top: auto;
+  }
+
+  @media (max-width: 768px) {
+    .news-thumbnail__content {
+      padding: 12px;
+    }
+
+    .news-thumbnail__title {
+      font-size: 14px;
+    }
+
+    .news-thumbnail__excerpt {
+      font-size: 13px;
+      -webkit-line-clamp: 2;
+    }
+  }
+</style>
+

package/test-theme/snippets/pagination.liquid

@@ -0,0 +1,120 @@
+{% comment %}
+  Pagination Component
+  
+  Usage:
+    {% include 'snippets/pagination', pagination: pagination %}
+  
+  Requires:
+    - pagination.currentPage: Current page number
+    - pagination.totalPages: Total number of pages
+    - pagination.hasNext: Boolean for next page availability
+    - pagination.hasPrevious: Boolean for previous page availability
+{% endcomment %}
+
+{% if pagination.totalPages > 1 %}
+  <div class="pagination" id="pagination-container">
+    <!-- Previous Button -->
+    {% if pagination.hasPrevious %}
+      <a href="?page={{ pagination.currentPage | minus: 1 }}" class="pagination-item pagination-prev" data-page="{{ pagination.currentPage | minus: 1 }}">
+        {% raw %}<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="15,18 9,12 15,6"></polyline>
+        </svg>{% endraw %}
+        Previous
+      </a>
+    {% else %}
+      <span class="pagination-item disabled">
+        {% raw %}<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="15,18 9,12 15,6"></polyline>
+        </svg>{% endraw %}
+        Previous
+      </span>
+    {% endif %}
+    
+    <!-- Page Numbers -->
+    <div class="pagination-pages">
+      {% assign startPage = pagination.currentPage | minus: 2 %}
+      {% if startPage < 1 %}
+        {% assign startPage = 1 %}
+      {% endif %}
+      
+      {% assign endPage = pagination.currentPage | plus: 2 %}
+      {% if endPage > pagination.totalPages %}
+        {% assign endPage = pagination.totalPages %}
+      {% endif %}
+      
+      <!-- First page -->
+      {% if startPage > 1 %}
+        <a href="?page=1" class="pagination-item pagination-link" data-page="1">1</a>
+        {% if startPage > 2 %}
+          <span class="pagination-ellipsis">...</span>
+        {% endif %}
+      {% endif %}
+      
+      <!-- Page range -->
+      {% for i in (startPage..endPage) %}
+        {% if i == pagination.currentPage %}
+          <span class="pagination-item active">{{ i }}</span>
+        {% else %}
+          <a href="?page={{ i }}" class="pagination-item pagination-link" data-page="{{ i }}">{{ i }}</a>
+        {% endif %}
+      {% endfor %}
+      
+      <!-- Last page -->
+      {% if endPage < pagination.totalPages %}
+        {% if endPage < pagination.totalPages | minus: 1 %}
+          <span class="pagination-ellipsis">...</span>
+        {% endif %}
+        <a href="?page={{ pagination.totalPages }}" class="pagination-item pagination-link" data-page="{{ pagination.totalPages }}">{{ pagination.totalPages }}</a>
+      {% endif %}
+    </div>
+    
+    <!-- Next Button -->
+    {% if pagination.hasNext %}
+      <a href="?page={{ pagination.currentPage | plus: 1 }}" class="pagination-item pagination-next" data-page="{{ pagination.currentPage | plus: 1 }}">
+        Next
+        {% raw %}<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="9,18 15,12 9,6"></polyline>
+        </svg>{% endraw %}
+      </a>
+    {% else %}
+      <span class="pagination-item disabled">
+        Next
+        {% raw %}<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="9,18 15,12 9,6"></polyline>
+        </svg>{% endraw %}
+      </span>
+    {% endif %}
+  </div>
+  
+  <script>
+  // Preserve URL parameters when navigating pagination
+  (function() {
+    'use strict';
+    
+    const paginationContainer = document.getElementById('pagination-container');
+    if (!paginationContainer) return;
+    
+    // Get all pagination links
+    const paginationLinks = paginationContainer.querySelectorAll('.pagination-link, .pagination-prev, .pagination-next');
+    
+    // Get current URL parameters
+    const currentParams = new URLSearchParams(window.location.search);
+    
+    // Update each link to preserve all parameters except page
+    paginationLinks.forEach(link => {
+      const page = link.getAttribute('data-page');
+      if (!page) return;
+      
+      // Clone current parameters
+      const newParams = new URLSearchParams(currentParams);
+      
+      // Update page parameter
+      newParams.set('page', page);
+      
+      // Update link href
+      link.href = `${window.location.pathname}?${newParams.toString()}`;
+    });
+  })();
+  </script>
+{% endif %}
+

package/test-theme/snippets/price.liquid

@@ -0,0 +1,92 @@
+{% comment %}
+  Price Display Snippet
+  
+  Displays product price with currency formatting and sale price support.
+  Usage: {% render 'snippets/price', product: product %}
+{% endcomment %}
+
+{% liquid
+  assign product = product | default: null
+  assign price_string = price | default: product.prices.priceString
+  assign price_value = price | default: product.prices.price
+  assign compare_at_price_string = compare_at_price | default: product.compareAtPrice | default: product.prices.mrpString
+  assign compare_at_price_value = compare_at_price | default: product.compareAtPrice | default: product.prices.mrp
+  assign show_compare = show_compare | default: true
+  assign currency_symbol = currency_symbol | default: shop.settings.currencySymbol | default: shop.currency | default: '$'
+  assign currency_code = currency_code | default: shop.currency | default: 'USD'
+  
+  if price_string == null or price_string == empty
+    if price_value == null or price_value == empty
+      assign price_string = currency_symbol | append: '0.00'
+      assign price_value = 0
+    else
+      assign price_formatted = price_value  | round: 2
+      assign price_string = currency_symbol | append: price_formatted
+    endif
+  endif
+  
+  if compare_at_price_string == null or compare_at_price_string == empty
+    if compare_at_price_value == null or compare_at_price_value == empty
+      assign compare_at_price_string = ''
+      assign compare_at_price_value = 0
+    else
+      assign compare_at_price_formatted = compare_at_price_value  | round: 2
+      assign compare_at_price_string = currency_symbol | append: compare_at_price_formatted
+    endif
+  endif
+  
+  assign is_on_sale = compare_at_price_value > price_value and compare_at_price_value > 0
+%}
+
+<div class="price" data-price>
+  {% if is_on_sale and show_compare %}
+    <span class="price-compare" data-price-compare>
+      {{ compare_at_price_string }}
+    </span>
+    <span class="price-sale" data-price-sale>
+      {{ price_string }}
+    </span>
+  {% else %}
+    <span class="price-regular" data-price-regular>
+      {{ price_string }}
+    </span>
+  {% endif %}
+  
+  {% if currency_code != 'USD' %}
+    <span class="price-currency" data-price-currency>{{ currency_code }}</span>
+  {% endif %}
+</div>
+
+<style>
+  .price {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .price-compare {
+    text-decoration: line-through;
+    color: {{ settings.color_text_light }};
+    font-size: 0.875rem;
+  }
+
+  .price-sale {
+    color: #dc2626;
+    font-weight: 600;
+    font-size: 1.125rem;
+  }
+
+  .price-regular {
+    color: {{ settings.color_text }};
+    font-weight: 600;
+    font-size: 1.125rem;
+  }
+
+  .price-currency {
+    font-size: 0.75rem;
+    color: {{ settings.color_text_light }};
+    text-transform: uppercase;
+  }
+</style>
+

package/test-theme/snippets/product-card-related.liquid

@@ -0,0 +1,78 @@
+{% comment %}
+  Related Product Card Snippet (for Product Recommendations)
+  
+  Parameters:
+  - product: Product object (required)
+  
+  Usage:
+  {% include 'snippets/product-card-related', product: related %}
+{% endcomment %}
+
+<div class="product-card">
+  <div class="product-card-image">
+    <a href="/{{ product.slug | default: product.id }}">
+      {% if product.thumbnailImage %}
+        <img src="{{ product.thumbnailImage }}" alt="{{ product.name | default: product.title }}" loading="lazy">
+      {% elsif product.images and product.images.first %}
+        <img src="{{ product.images.first }}" alt="{{ product.name | default: product.title }}" loading="lazy">
+      {% else %}
+        <div class="product-placeholder">
+          {% raw %}<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+            <circle cx="8.5" cy="8.5" r="1.5"></circle>
+            <polyline points="21,15 16,10 5,21"></polyline>
+          </svg>{% endraw %}
+        </div>
+      {% endif %}
+    </a>
+    
+    <div class="product-card-badges">
+      {% assign showSale = false %}
+      {% if product.onSale %}
+        {% assign showSale = true %}
+      {% elsif product.prices.mrp and product.prices.price %}
+        {% if product.prices.mrp > product.prices.price %}
+          {% assign showSale = true %}
+        {% endif %}
+      {% endif %}
+      {% if showSale %}
+        <span class="badge badge-sale">Sale</span>
+      {% endif %}
+    </div>
+    
+    <div class="product-card-actions">
+      <button class="action-btn wishlist-btn" data-product-id="{{ product.productId }}" aria-label="Add to wishlist">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
+        </svg>
+      </button>
+      <button class="action-btn quick-view-btn" data-product-id="{{ product.productId }}" aria-label="Quick view">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>
+      </button>
+    </div>
+  </div>
+  
+  <div class="product-card-content">
+    {% if product.vendor or product.brand %}
+      <div class="product-card-vendor">{{ product.vendor | default: product.brand }}</div>
+    {% endif %}
+    <h3 class="product-card-title">
+      <a href="/{{ product.slug | default: product.id }}">
+        {{ product.name | default: product.title }}
+      </a>
+    </h3>
+    <div class="product-card-price">
+      <span class="price-current">{{ product.prices.priceString | default: product.prices.price | money_with_settings: shop.settings }}</span>
+      {% if product.prices.mrp and product.prices.mrp > product.prices.price %}
+        <span class="price-compare">{{ product.prices.mrpString | default: product.prices.mrp | money_with_settings: shop.settings }}</span>
+      {% endif %}
+    </div>
+    <button class="btn btn-primary btn-sm add-to-cart-quick" data-product-id="{{ product.productId }}">
+      Quick Add
+    </button>
+  </div>
+</div>
+

package/test-theme/snippets/product-card-simple.liquid

@@ -0,0 +1,41 @@
+{% comment %}
+  Simple Product Card Snippet (for Search Results)
+  
+  Parameters:
+  - product: Product object (required)
+  
+  Usage:
+  {% include 'snippets/product-card-simple', product: product %}
+{% endcomment %}
+
+<div class="product-card">
+  <a href="/{{ product.slug }}" class="product-link">
+    <div class="product-image">
+      {% if product.images and product.images[0] %}
+        <img src="{{ product.images[0] }}" 
+             alt="{{ product.title }}" 
+             loading="lazy">
+      {% else %}
+        <img src="/assets/placeholder-product.jpg" 
+             alt="{{ product.title }}" 
+             loading="lazy">
+      {% endif %}
+    </div>
+    <div class="product-info">
+      <h3 class="product-title">{{ product.title }}</h3>
+      <p class="product-description">{{ product.description | truncate: 100 }}</p>
+      <div class="product-price">
+        <span class="price">{{ product.prices.priceString | default: product.prices.price | money }}</span>
+        <span class="currency">{{ shop.currency }}</span>
+      </div>
+    </div>
+  </a>
+  <div class="product-actions">
+    <button class="btn btn-secondary add-to-cart" 
+            data-product-id="{{ product.productId }}" 
+            data-variant-id="{{ product.variants[0].id }}">
+      Add to Cart
+    </button>
+  </div>
+</div>
+