@o2vend/theme-cli 1.0.32

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

@@ -0,0 +1,697 @@
+{% comment %}
+   Product Card Snippet - Simple Professional Design
+  
+  Parameters:
+  - product: Product object (required)
+  - loading: Image loading attribute (optional, default: "lazy")
+  
+  Usage:
+  {% include 'snippets/product-card', product: product %}
+{% endcomment %}
+
+{% assign image_loading = loading | default: "lazy" %}
+{% assign variants = product.variations | default: empty %}
+
+{% comment %}Calculate default variant for add-to-cart{% endcomment %}
+{% assign defaultVariantForCart = null %}
+{% assign defaultVariantProductId = product.productId %}
+{% if variants and variants.size > 0 %}
+  {% for variant in variants %}
+    {% assign isAvailable = variant.inStock | default: variant.available | default: true %}
+    {% if defaultVariantForCart == null and isAvailable %}
+      {% assign defaultVariantForCart = variant %}
+      {% assign defaultVariantProductId = variant.productId %}
+    {% endif %}
+  {% endfor %}
+  {% if defaultVariantForCart == null %}
+    {% assign defaultVariantForCart = variants.first %}
+    {% assign defaultVariantProductId = variants.first.productId %}
+  {% endif %}
+{% endif %}
+
+{% comment %}Image fallback logic{% endcomment %}
+{% assign product_image = nil %}
+{% assign product_image_alt = product.name | default: product.slug | default: product.id %}
+
+{% if product.thumbnailImage1 and product.thumbnailImage1.url %}
+  {% assign product_image = product.thumbnailImage1.url %}
+  {% assign product_image_alt = product.thumbnailImage1.altText | default: product_image_alt %}
+{% elsif product.ThumbnailImage1 and product.ThumbnailImage1.Url %}
+  {% assign product_image = product.ThumbnailImage1.Url %}
+  {% assign product_image_alt = product.ThumbnailImage1.AltText | default: product_image_alt %}
+{% elsif product.images and product.images.size > 0 %}
+  {% assign first_image = product.images | first %}
+  {% if first_image.url %}
+    {% assign product_image = first_image.url %}
+    {% assign product_image_alt = first_image.altText | default: product_image_alt %}
+  {% elsif first_image.Url %}
+    {% assign product_image = first_image.Url %}
+    {% assign product_image_alt = first_image.AltText | default: product_image_alt %}
+  {% endif %}
+{% elsif product.thumbnailImage and product.thumbnailImage.url %}
+  {% assign product_image = product.thumbnailImage.url %}
+  {% assign product_image_alt = product.thumbnailImage.altText | default: product_image_alt %}
+{% elsif product.ThumbnailImage and product.ThumbnailImage.Url %}
+  {% assign product_image = product.ThumbnailImage.Url %}
+  {% assign product_image_alt = product.ThumbnailImage.AltText | default: product_image_alt %}
+{% elsif product.imageUrl %}
+  {% assign product_image = product.imageUrl %}
+{% elsif product.ImageUrl %}
+  {% assign product_image = product.ImageUrl %}
+{% endif %}
+
+<div class="product-card" 
+     data-product-id="{{ product.productId }}"
+     data-price="{{ product.prices.price }}" 
+     data-name="{{ product.name | default: product.slug | default: product.id | downcase }}"
+     data-product-type="{{ product.productType | default: product.type | default: 0 }}"
+     data-variants-count="{% if variants and variants.size > 0 %}{{ variants.size }}{% else %}0{% endif %}"
+     data-availability="{% if product.stockQuantity > 0 %}in-stock{% else %}out-of-stock{% endif %}">
+  
+  <div class="product-card__image-wrapper">
+    {% hook 'product_card_image_before' %}
+    {% assign product_url = product.url | default: product.Url | default: product.link | default: product.Link %}
+    {% if product_url == blank %}
+      {% assign product_url = product.slug | default: product.id | default: '#' %}
+    {% endif %}
+    <a href="{{ product_url }}" class="product-card__link">
+      {% if product_image %}
+        <img src="{{ product_image }}" 
+             alt="{{ product_image_alt }}" 
+             class="product-card__image"
+             loading="{{ image_loading }}">
+      {% else %}
+        <div class="product-card__placeholder">
+          <svg class="product-card__placeholder-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <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>
+        </div>
+      {% endif %}
+    </a>
+    {% hook 'product_card_image_after' %}
+    
+    <!-- Product Badges -->
+    <div class="product-card__badges">
+      {% assign is_new = false %}
+      {% if product.newProductDisplayDays and product.createdOn %}
+        {% assign created_timestamp = product.createdOn | date: '%s' | plus: 0 %}
+        {% assign current_timestamp = 'now' | date: '%s' | plus: 0 %}
+        {% assign seconds_diff = current_timestamp | minus: created_timestamp %}
+        {% assign days_diff = seconds_diff | divided_by: 86400 %}
+        {% assign new_product_days = 30 %}
+        {% if days_diff >= 0 and days_diff <= new_product_days %}
+          {% assign is_new = true %}
+        {% endif %}
+      {% endif %}
+      {% if is_new %}
+        <span class="product-card__badge product-card__badge--new">New</span>
+      {% endif %}
+      
+      {% if product.prices.mrp and product.prices.mrp > product.prices.price %}
+        {% assign discount = product.prices.mrp | minus: product.prices.price | times: 100 | divided_by: product.prices.mrp | round %}
+        <span class="product-card__badge product-card__badge--sale">-{{ discount }}%</span>
+      {% endif %}
+      {% unless product.inStock or product.available %}
+        <span class="product-card__badge product-card__badge--sold-out">Sold Out</span>
+      {% endunless %}
+    </div>
+  </div>
+  
+  <div class="product-card__content">
+    {% hook 'product_card_title_before' %}
+    <h3 class="product-card__title">
+      <a href="{{ product_url }}" class="product-card__title-link">
+        {{ product.name | default: product.slug | default: product.id }}
+      </a>
+    </h3>
+    {% hook 'product_card_title_after' %}
+    
+    {% hook 'product_card_price_before' %}
+    <div class="product-card__price" data-product-card-price="{{ product.productId }}">
+      {% if variants and variants.size > 0 %}
+        {% assign defaultVariant = null %}
+        {% for variant in variants %}
+          {% assign isAvailable = variant.inStock | default: variant.available | default: true %}
+          {% if defaultVariant == null and isAvailable %}
+            {% assign defaultVariant = variant %}
+          {% endif %}
+        {% endfor %}
+        {% if defaultVariant == null %}
+          {% assign defaultVariant = variants.first %}
+        {% endif %}
+        {% assign defaultPrice = defaultVariant.prices.price | default: product.prices.price %}
+        {% assign defaultMrp = defaultVariant.prices.mrp | default: product.prices.mrp | default: 0 %}
+        <span class="product-card__price-current" data-price-current="{{ defaultPrice }}">{{ defaultPrice | money_with_settings: shop.settings }}</span>
+        {% if defaultMrp > defaultPrice %}
+          <span class="product-card__price-original" data-price-original="{{ defaultMrp }}">{{ defaultMrp | money_with_settings: shop.settings }}</span>
+        {% endif %}
+      {% else %}
+        <span class="product-card__price-current">{{ product.prices.price | money_with_settings: shop.settings }}</span>
+        {% if product.prices.mrp and product.prices.mrp > product.prices.price %}
+          <span class="product-card__price-original">{{ product.prices.mrp | money_with_settings: shop.settings }}</span>
+        {% endif %}
+      {% endif %}
+    </div>
+    {% hook 'product_card_price_after' %}
+    
+    <!-- Add to Cart Button -->
+    <button class="product-card__cart-btn add-to-cart-btn" 
+            data-product-id="{{ defaultVariantProductId }}"
+            data-base-product-id="{{ product.productId }}"
+            data-product-type="{{ product.productType | default: product.type | default: 0 }}"
+            {% if variants and variants.size > 0 %}
+              {% assign defaultAvailable = defaultVariantForCart.inStock | default: defaultVariantForCart.available | default: true %}
+              {% unless defaultAvailable %}disabled{% endunless %}
+            {% else %}
+              {% unless product.inStock or product.available %}disabled{% endunless %}
+            {% endif %}>
+      <svg class="product-card__cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="9" cy="21" r="1"></circle>
+        <circle cx="20" cy="21" r="1"></circle>
+        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+      </svg>
+      <span class="product-card__cart-text">
+        {% if variants and variants.size > 0 %}
+          {% assign defaultAvailable = defaultVariantForCart.inStock | default: defaultVariantForCart.available | default: true %}
+          {% if defaultAvailable %}Add to Cart{% else %}Out of Stock{% endif %}
+        {% else %}
+          {% if product.inStock or product.available %}Add to Cart{% else %}Out of Stock{% endif %}
+        {% endif %}
+      </span>
+    </button>
+  </div>
+</div>
+
+<style>
+/* Product Card Variables */
+:root {
+  --card-bg: #ffffff;
+  --card-border: #e5e7eb;
+  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --card-radius: 8px;
+  --card-padding: 16px;
+  --badge-radius: 4px;
+  --btn-radius: 6px;
+  --color-primary: #111827;
+  --color-secondary: #6b7280;
+  --color-sale: #ef4444;
+  --color-new: #10b981;
+  --color-text: #111827;
+  --color-text-muted: #6b7280;
+}
+
+/* Card Container */
+.product-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--card-bg);
+  overflow: hidden;
+  height: 100%;
+  box-shadow: var(--card-shadow);
+}
+
+/* Image Wrapper */
+.product-card__image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  background: #f9fafb;
+  border-radius: var(--border-radius-medium);
+}
+
+.product-card__link {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.product-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.product-card__placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f4f6;
+}
+
+.product-card__placeholder-icon {
+  width: 48px;
+  height: 48px;
+  color: #9ca3af;
+  opacity: 0.5;
+}
+
+/* Badges */
+.product-card__badges {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  z-index: 2;
+}
+
+.product-card__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.product-card__badge--new {
+  background: var(--color-new);
+  color: white;
+}
+
+.product-card__badge--sale {
+  background: var(--color-sale);
+  color: white;
+}
+
+.product-card__badge--sold-out {
+  background: var(--color-secondary);
+  color: white;
+}
+
+/* Content Area */
+.product-card__content {
+  padding: var(--card-padding);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+}
+
+.product-card__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.product-card__title-link {
+  color: var(--color-text);
+  text-decoration: none;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.product-card__price {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.product-card__price-current {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.product-card__price-original {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+}
+
+/* Add to Cart Button */
+.product-card__cart-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--color-primary);
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: auto;
+  border-radius: var(--border-radius-medium);
+  border: none;
+}
+
+.product-card__cart-btn:disabled {
+  background: var(--color-secondary);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.product-card__cart-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.product-card__cart-text {
+  font-weight: 500;
+}
+
+/* Tablet */
+@media screen and (max-width: 1024px) and (min-width: 769px) {
+  .product-card__content {
+    padding: 14px;
+    gap: 10px;
+  }
+  
+  .product-card__title {
+    font-size: 14px;
+  }
+  
+  .product-card__price-current {
+    font-size: 16px;
+  }
+  
+  .product-card__cart-btn {
+    padding: 10px 14px;
+    font-size: 13px;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 768px) {
+  :root {
+    --card-radius: 6px;
+    --card-padding: 10px;
+    --badge-radius: 3px;
+    --btn-radius: 5px;
+  }
+  
+  .product-card {
+    box-shadow: none;
+  }
+  
+  .product-card__content {
+    padding: var(--card-padding);
+    gap: 8px;
+  }
+  
+  .product-card__title {
+    font-size: 13px;
+  }
+  
+  .product-card__price {
+    gap: 6px;
+  }
+  
+  .product-card__price-current {
+    font-size: 15px;
+  }
+  
+  .product-card__price-original {
+    font-size: 12px;
+  }
+  
+  .product-card__badges {
+    top: 8px;
+    left: 8px;
+    gap: 4px;
+  }
+  
+  .product-card__badge {
+    padding: 3px 6px;
+    font-size: 9px;
+  }
+  
+  .product-card__cart-btn {
+    padding: 8px 12px;
+    font-size: 12px;
+    gap: 6px;
+  }
+  
+  .product-card__cart-icon {
+    width: 16px;
+    height: 16px;
+  }
+  
+  .product-card__placeholder-icon {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+/* Small Mobile */
+@media screen and (max-width: 480px) {
+  .product-card__content {
+    padding: 8px;
+    gap: 6px;
+  }
+  
+  .product-card__title {
+    font-size: 12px;
+  }
+  
+  .product-card__price-current {
+    font-size: 14px;
+  }
+  
+  .product-card__price-original {
+    font-size: 11px;
+  }
+  
+  .product-card__cart-btn {
+    padding: 7px 10px;
+    font-size: 11px;
+  }
+}
+</style>
+
+{% if variants and variants.size > 0 %}
+<script type="application/json" class="product-card-variant-data" data-product-id="{{ product.productId }}">
+{
+  "variants": [
+    {% for variant in variants %}
+      {
+        "productId": {{ variant.productId }},
+        "price": {{ variant.prices.price | default: product.prices.price }},
+        "mrp": {{ variant.prices.mrp | default: 0 }},
+        "inStock": {{ variant.inStock | default: variant.available | default: true }},
+        "available": {{ variant.available | default: variant.inStock | default: true }}
+      }{% unless forloop.last %},{% endunless %}
+    {% endfor %}
+  ],
+  "baseProductId": {{ product.productId }}
+}
+</script>
+{% endif %}
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const productCards = document.querySelectorAll('.product-card');
+    
+    productCards.forEach(card => {
+      initializeProductCard(card);
+    });
+    
+    function initializeProductCard(card) {
+      const cartBtn = card.querySelector('.product-card__cart-btn');
+      if (cartBtn) {
+        const productType = parseInt(card.dataset.productType || cartBtn.dataset.productType || '0', 10);
+        const variantsCount = parseInt(card.dataset.variantsCount || '0', 10);
+        
+        if (productType === 0 && variantsCount === 0) {
+          cartBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            handleAddToCart(this, card);
+          }, true);
+        }
+      }
+    }
+    
+    function handleAddToCart(button, card) {
+      if (button.disabled) return;
+      
+      const productId = button.getAttribute('data-product-id');
+      const originalText = button.querySelector('.product-card__cart-text')?.textContent || 'Add to Cart';
+      
+      if (button.querySelector('.product-card__cart-text')) {
+        button.querySelector('.product-card__cart-text').textContent = 'Adding...';
+      }
+      button.disabled = true;
+      
+      addToCartAPI(productId)
+        .then(response => {
+          if (button.querySelector('.product-card__cart-text')) {
+            button.querySelector('.product-card__cart-text').textContent = '✓ Added';
+          }
+          
+          updateHeaderCart();
+          
+          // Unified bottom-center toast confirmation
+          if (window.Theme && typeof window.Theme.showNotification === 'function') {
+            window.Theme.showNotification('Product added to cart!', 'success', 3000);
+          }
+          
+          setTimeout(() => {
+            if (button.querySelector('.product-card__cart-text')) {
+              button.querySelector('.product-card__cart-text').textContent = originalText;
+            }
+            button.disabled = false;
+          }, 2000);
+        })
+        .catch(error => {
+          console.error('Add to cart error:', error);
+          
+          // Check if error message indicates authentication is required
+          // This handles cases where the error object might have requiresAuth info
+          if (error.message && error.message.includes('Authentication required')) {
+            // Try to open login modal
+            if (window.Theme && window.Theme.openLoginModal) {
+              window.Theme.openLoginModal();
+            } else if (window.CartManager && window.CartManager.openLoginModal) {
+              window.CartManager.openLoginModal();
+            } else {
+              const loginTrigger = document.querySelector('[data-login-modal-trigger]');
+              if (loginTrigger) {
+                loginTrigger.click();
+              }
+            }
+          } else {
+            // Show error message
+            if (button.querySelector('.product-card__cart-text')) {
+              button.querySelector('.product-card__cart-text').textContent = 'Error';
+            }
+            // Unified error toast
+            if (window.Theme && typeof window.Theme.showNotification === 'function') {
+              window.Theme.showNotification('Failed to add product to cart. Please try again.', 'error', 3000);
+            }
+          }
+          
+          setTimeout(() => {
+            if (button.querySelector('.product-card__cart-text')) {
+              button.querySelector('.product-card__cart-text').textContent = originalText;
+            }
+            button.disabled = false;
+          }, 2000);
+        });
+    }
+    
+    function addToCartAPI(productId) {
+      return fetch('/webstoreapi/carts/add', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        body: JSON.stringify({
+          productId: productId,
+          quantity: 1
+        })
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          return data;
+        } else {
+          // Check if authentication is required
+          if (data.requiresAuth) {
+            // Try to open login modal from Theme instance
+            if (window.Theme && window.Theme.openLoginModal) {
+              window.Theme.openLoginModal();
+            } else if (window.CartManager && window.CartManager.openLoginModal) {
+              window.CartManager.openLoginModal();
+            } else {
+              // Fallback: trigger login modal via data attribute
+              const loginTrigger = document.querySelector('[data-login-modal-trigger]');
+              if (loginTrigger) {
+                loginTrigger.click();
+              }
+            }
+            throw new Error('Authentication required');
+          }
+          throw new Error(data.error || data.message || 'Failed to add to cart');
+        }
+      });
+    }
+    
+    function updateHeaderCart() {
+      if (window.CartManager && typeof window.CartManager.getCartCount === 'function') {
+        window.CartManager.getCartCount()
+          .then(count => {
+            updateCartBadge(count);
+          })
+          .catch(error => {
+            fetchCartFromAPI();
+          });
+      } else {
+        fetchCartFromAPI();
+      }
+      
+      function fetchCartFromAPI() {
+        fetch('/webstoreapi/cart', {
+          method: 'GET',
+          headers: {
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        })
+          .then(response => response.json())
+          .then(data => {
+            if (data.success && data.cart) {
+              const itemCount = data.cart.itemCount || data.cart.cartQuantity || (data.cart.items ? data.cart.items.length : 0) || 0;
+              updateCartBadge(itemCount);
+            } else {
+              updateCartBadge(0);
+            }
+          })
+          .catch(error => {
+            console.error('Error updating header cart:', error);
+            updateCartBadge(0);
+          });
+      }
+      
+      function updateCartBadge(count) {
+        const itemCount = parseInt(count, 10) || 0;
+        
+        const cartCountElements = document.querySelectorAll('.site-header__cart-count, [data-cart-count]');
+        cartCountElements.forEach(el => {
+          el.textContent = itemCount;
+          el.setAttribute('data-cart-count', itemCount.toString());
+          el.style.display = itemCount > 0 ? 'flex' : 'none';
+        });
+        
+        if (window.CartManager && typeof window.CartManager.updateCartBadge === 'function') {
+          window.CartManager.updateCartBadge(itemCount);
+        }
+        
+        const event = new CustomEvent('cart:updated', {
+          detail: { count: itemCount }
+        });
+        document.dispatchEvent(event);
+      }
+    }
+    
+    function initCartUpdate() {
+      setTimeout(() => {
+        updateHeaderCart();
+      }, 100);
+    }
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initCartUpdate);
+    } else {
+      initCartUpdate();
+    }
+  });
+</script>