@o2vend/theme-cli 1.0.37 → 1.0.38

package/test-theme/snippets/price.liquid

@@ -58,34 +58,125 @@
 </div>
 
 <style>
+:root {
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-text-muted: {{ settings.color_text_muted | default: '#666666' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-white: #ffffff;
+  --color-black: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-gray-25: {{ settings.color_background | default: '#ffffff' }};
+  --color-gray-50: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-100: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-200: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-300: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-400: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-500: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-600: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-700: {{ settings.color_text | default: '#000000' }};
+  --color-gray-800: {{ settings.color_text | default: '#000000' }};
+  --color-gray-900: {{ settings.color_text | default: '#000000' }};
+  /* Shadow variables - mapped from settings */
+  --shadow-opacity: {{ settings.shadow_opacity | default: 0.1 }};
+  --shadow-blur: {{ settings.shadow_blur | default: 8 }}px;
+  --shadow-spread: {{ settings.shadow_spread | default: 0 }}px;
+  
+  /* Border radius - mapped from settings */
+  --radius-sm: {{ settings.border_radius_small | default: 6 }}px;
+  --radius-md: {{ settings.border_radius_medium | default: 10 }}px;
+  --radius-lg: {{ settings.border_radius_large | default: 16 }}px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
+  --radius-full: 9999px;
+  
+  /* Spacing - mapped from settings */
+  --spacing-xs: {{ settings.spacing_xsmall | default: 4 }}px;
+  --spacing-sm: {{ settings.spacing_small | default: 8 }}px;
+  --spacing-md: {{ settings.spacing_element | default: 16 }}px;
+  --spacing-lg: {{ settings.spacing_component | default: 24 }}px;
+  --spacing-xl: {{ settings.spacing_large | default: 32 }}px;
+  
+  /* Typography - mapped from settings */
+  --font-primary: {{ settings.font_primary | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-heading: {{ settings.font_heading | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-display: {{ settings.font_display | default: '' }}, 'Georgia', 'Times New Roman', serif;
+  --font-body: {{ settings.font_body | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-weight-bold: {{ settings.font_weight_bold | default: 700 }};
+  --font-weight-medium: {{ settings.font_weight_medium | default: 500 }};
+  --line-height-heading: {{ settings.line_height_heading | default: 1.2 }};
+  
+  /* Text sizes - based on font_size_base from settings */
+  --text-xs: 12px;
+  --text-sm: {{ settings.font_size_base | default: 14 }}px;
+  --text-base: {{ settings.font_size_base | default: 14 }}px;
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 21px;
+  
+  /* Transitions - mapped from settings */
+  --transition-fast: 133ms cubic-bezier(0, 0, 0.2, 1);
+  --transition: {{ settings.button_transition_speed | default: 200 }}ms cubic-bezier(0, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0, 0, 0.2, 1);
+  --duration-150: 150ms;
+  --duration-300: 300ms;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Z-index values */
+  --z-10: 10;
+  --z-modal: 1050;
+  --z-dropdown: 1000;
+  
+  /* Line heights - mapped from settings */
+  --leading-none: 1;
+  --leading-normal: {{ settings.line_height_base | default: 1.6 }};
+  --leading-snug: 1.375;
+  
+  /* Letter spacing - mapped from settings */
+  --tracking-wider: {{ settings.letter_spacing_uppercase | default: 0.05 }}em;
+}
+
   .price {
     display: flex;
     align-items: baseline;
-    gap: 0.5rem;
+    gap: var(--space-2);
     flex-wrap: wrap;
   }
 
   .price-compare {
     text-decoration: line-through;
-    color: {{ settings.color_text_light }};
-    font-size: 0.875rem;
+    color: var(--color-text-light);
+    font-size: var(--text-sm);
   }
 
   .price-sale {
-    color: #dc2626;
+    color: var(--color-error);
     font-weight: 600;
-    font-size: 1.125rem;
+    font-size: var(--text-lg);
   }
 
   .price-regular {
-    color: {{ settings.color_text }};
+    color: var(--color-text);
     font-weight: 600;
-    font-size: 1.125rem;
+    font-size: var(--text-lg);
   }
 
   .price-currency {
-    font-size: 0.75rem;
-    color: {{ settings.color_text_light }};
+    font-size: var(--text-xs);
+    color: var(--color-text-light);
     text-transform: uppercase;
   }
 </style>

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

@@ -8,7 +8,25 @@
   {% include 'snippets/product-card-related', product: related %}
 {% endcomment %}
 
-<div class="product-card">
+{% assign related_variants = product.variations | default: product.variants | default: empty %}
+{% assign related_product_url = product.url | default: product.Url | default: product.slug | default: product.id %}
+{% assign related_image = product.thumbnailImage | default: product.imageUrl %}
+{% if related_image == blank and product.images and product.images.first %}
+  {% assign related_image = product.images.first %}
+{% endif %}
+
+<div class="product-card"
+     data-product-id="{{ product.productId | default: product.id }}"
+     data-base-product-id="{{ product.productId | default: product.id }}"
+     data-price="{{ product.prices.price | default: 0 }}"
+     data-price-string="{{ product.prices.priceString | default: product.prices.price | money_with_settings: shop.settings }}"
+     data-name="{{ product.name | default: product.title | downcase }}"
+     data-title="{{ product.name | default: product.title }}"
+     data-product-url="{{ related_product_url }}"
+     {% if related_image %}data-image="{{ related_image }}"{% endif %}
+     data-product-type="{{ product.productType | default: product.type | default: 0 }}"
+     data-variants-count="{% if related_variants and related_variants.size > 0 %}{{ related_variants.size }}{% else %}0{% endif %}"
+     data-availability="{% if product.stockQuantity > 0 or product.inStock or product.available %}in-stock{% else %}out-of-stock{% endif %}">
   <div class="product-card-image">
     <a href="/{{ product.slug | default: product.id }}">
       {% if product.thumbnailImage %}
@@ -41,12 +59,12 @@
     </div>
     
     <div class="product-card-actions">
-      <button class="action-btn wishlist-btn" data-product-id="{{ product.productId }}" aria-label="Add to wishlist">
+      <button class="action-btn wishlist-btn" data-product-id="{{ product.productId | default: product.id }}" 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">
+      <button class="action-btn quick-view-btn" data-product-id="{{ product.productId | default: product.id }}" 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>
@@ -70,7 +88,7 @@
         <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 }}">
+    <button class="btn btn-primary btn-sm add-to-cart-quick" data-product-id="{{ product.productId | default: product.id }}">
       Quick Add
     </button>
   </div>