easyorders 0.1.14 → 0.1.16

package/dist/template/theme/sections/breadcrumbs.liquid

@@ -1,17 +1,17 @@
-<nav class="ab-breadcrumbs" aria-label="Breadcrumb">
-  <ol class="ab-breadcrumbs-list">
-    <li class="ab-breadcrumbs-item">
-      <a href="/">{{ home_text }}</a>
-      <span class="ab-breadcrumbs-sep">/</span>
-    </li>
-    {% for crumb in categories %}
-      <li class="ab-breadcrumbs-item">
-        <a href="/collections/{{ crumb.slug }}">{{ crumb.name }}</a>
-        <span class="ab-breadcrumbs-sep">/</span>
-      </li>
-    {% endfor %}
-    <li class="ab-breadcrumbs-item ab-breadcrumbs-current" aria-current="page">
-      {{ product_name }}
-    </li>
-  </ol>
-</nav>
+<nav class="ab-breadcrumbs" aria-label="Breadcrumb">
+  <ol class="ab-breadcrumbs-list">
+    <li class="ab-breadcrumbs-item">
+      <a href="/">{{ home_text }}</a>
+      <span class="ab-breadcrumbs-sep">/</span>
+    </li>
+    {% for crumb in categories %}
+      <li class="ab-breadcrumbs-item">
+        <a href="/collections/{{ crumb.slug }}">{{ crumb.name }}</a>
+        <span class="ab-breadcrumbs-sep">/</span>
+      </li>
+    {% endfor %}
+    <li class="ab-breadcrumbs-item ab-breadcrumbs-current" aria-current="page">
+      {{ product_name }}
+    </li>
+  </ol>
+</nav>

package/dist/template/theme/sections/categories.liquid

@@ -1,10 +1,26 @@
-<div class="ab-categories">
-  <div class="ab-categories-track">
-    {% for category in categories %}
-      <a href="/collections/{{ category.slug }}" class="ab-cat-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
-        <img src="{{ category.thumb }}" alt="{{ category.name }}" />
-        <span class="ab-cat-label">{{ category.name }}</span>
-      </a>
-    {% endfor %}
-  </div>
-</div>
+<div class="ab-categories">
+  <div class="ab-categories-header">
+   {% if section_title %}
+    <h2 class="ab-categories-title ab-reveal">{{ section_title | default: 'Shop by collection' }}</h2>
+  {% endif %}  
+  </div>
+
+  {% assign cats_size = categories.size %}
+  <div
+    class="ab-categories-track ab-cat-slider {% if cats_size <= 5 %}ab-cat-track--grid{% else %}ab-cat-track--carousel{% endif %}"
+    style="--cat-cols: {{ cats_size }};"
+  >
+    {% for category in categories %}
+      <a href="/collections/{{ category.slug }}" class="ab-cat-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
+        <div class="ab-cat-media">
+          <img src="{{ category.thumb }}" alt="{{ category.name }}" loading="lazy" />
+        </div>
+        <div class="ab-cat-overlay"></div>
+        <div class="ab-cat-content">
+          <span class="ab-cat-label">{{ category.name }}</span>
+          
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+</div>

package/dist/template/theme/sections/fake-counter.liquid

@@ -1,27 +1,27 @@
-<div class="ab-fake-counter" data-product-id="{{ product_id }}" data-hours="{{ hours }}">
-  <div class="ab-fc-header">
-    <span class="ab-fc-icon" aria-hidden="true"></span>
-    <span class="ab-fc-title">{{ title }}</span>
-  </div>
-  <div class="ab-fc-digits" dir="ltr">
-    <div class="ab-fc-unit">
-      <span class="ab-fc-num" data-unit="days">00</span>
-      <span class="ab-fc-label">{{ label_days }}</span>
-    </div>
-    <span class="ab-fc-sep">:</span>
-    <div class="ab-fc-unit">
-      <span class="ab-fc-num" data-unit="hours">00</span>
-      <span class="ab-fc-label">{{ label_hours }}</span>
-    </div>
-    <span class="ab-fc-sep">:</span>
-    <div class="ab-fc-unit">
-      <span class="ab-fc-num" data-unit="minutes">00</span>
-      <span class="ab-fc-label">{{ label_minutes }}</span>
-    </div>
-    <span class="ab-fc-sep">:</span>
-    <div class="ab-fc-unit">
-      <span class="ab-fc-num" data-unit="seconds">00</span>
-      <span class="ab-fc-label">{{ label_seconds }}</span>
-    </div>
-  </div>
-</div>
+<div class="ab-fake-counter" data-product-id="{{ product_id }}" data-hours="{{ hours }}">
+  <div class="ab-fc-header">
+    <span class="ab-fc-icon" aria-hidden="true"></span>
+    <span class="ab-fc-title">{{ title }}</span>
+  </div>
+  <div class="ab-fc-digits" dir="ltr">
+    <div class="ab-fc-unit">
+      <span class="ab-fc-num" data-unit="days">00</span>
+      <span class="ab-fc-label">{{ label_days }}</span>
+    </div>
+    <span class="ab-fc-sep">:</span>
+    <div class="ab-fc-unit">
+      <span class="ab-fc-num" data-unit="hours">00</span>
+      <span class="ab-fc-label">{{ label_hours }}</span>
+    </div>
+    <span class="ab-fc-sep">:</span>
+    <div class="ab-fc-unit">
+      <span class="ab-fc-num" data-unit="minutes">00</span>
+      <span class="ab-fc-label">{{ label_minutes }}</span>
+    </div>
+    <span class="ab-fc-sep">:</span>
+    <div class="ab-fc-unit">
+      <span class="ab-fc-num" data-unit="seconds">00</span>
+      <span class="ab-fc-label">{{ label_seconds }}</span>
+    </div>
+  </div>
+</div>

package/dist/template/theme/sections/fake-stock.liquid

@@ -1,6 +1,6 @@
-<div class="ab-fake-stock">
-  <p class="ab-fs-text">{{ text }}</p>
-  <div class="ab-fs-bar">
-    <div class="ab-fs-fill"></div>
-  </div>
-</div>
+<div class="ab-fake-stock">
+  <p class="ab-fs-text">{{ text }}</p>
+  <div class="ab-fs-bar">
+    <div class="ab-fs-fill"></div>
+  </div>
+</div>

package/dist/template/theme/sections/fake-visitor.liquid

@@ -1,6 +1,6 @@
-<div class="ab-fake-visitor" data-min="{{ min }}" data-max="{{ max }}">
-  <span class="ab-fv-eye" aria-hidden="true"></span>
-  <p class="ab-fv-text">
-    <span class="ab-fv-count">{{ min }}</span> {{ watching_text }}
-  </p>
-</div>
+<div class="ab-fake-visitor" data-min="{{ min }}" data-max="{{ max }}">
+  <span class="ab-fv-eye" aria-hidden="true"></span>
+  <p class="ab-fv-text">
+    <span class="ab-fv-count">{{ min }}</span> {{ watching_text }}
+  </p>
+</div>

package/dist/template/theme/sections/featured-products.liquid

@@ -1,110 +1,143 @@
-<section class="ab-featured-products">
-  {% if section_title %}
-    <h2 class="ab-featured-section-title ab-reveal">{{ section_title }}</h2>
-  {% endif %}
-  <div class="ab-featured-layout">
-    <a
-      href="{% if category and category.slug %}/collections/{{ category.slug }}{% else %}#{% endif %}"
-      class="ab-featured-hero ab-reveal"
-    >
-      <img
-        src="{% if category and category.thumb %}{{ category.thumb }}{% elsif products and products[0] and products[0].thumb %}{{ products[0].thumb }}{% endif %}"
-        alt="{% if category and category.name %}{{ category.name }}{% else %}{{ section_title }}{% endif %}"
-        loading="lazy"
-      />
-      <span class="ab-featured-hero-overlay"></span>
-      <div class="ab-featured-hero-content">
-        {% if category and category.name %}
-          <p class="ab-featured-hero-subtitle">{{ category.name }}</p>
-        {% endif %}
-      </div>
-      {% unless hide_view_all %}<span class="ab-featured-hero-cta">{{shop_now}}</span>{% endunless %}
-    </a>
-
-    <div class="ab-featured-grid">
-      {% for product in products limit: 4 %}
-        {% assign color_variation = product.variations | where: "type", "color" | first %}
-        {% assign image_variation = product.variations | where: "type", "image" | first %}
-        {% assign swatch_total = 0 %}
-        {% if color_variation and color_variation.props %}
-          {% assign swatch_total = color_variation.props.size %}
-        {% elsif image_variation and image_variation.props %}
-          {% assign swatch_total = image_variation.props.size %}
-        {% endif %}
-
-        <a href="/products/{{ product.slug }}" class="ab-featured-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
-          {% if product.sale_price and product.sale_price < product.price %}
-            {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
-            <span class="ab-featured-badge ab-sale-badge">{{ sale }} -{{ discount }}%</span>
-          {% endif %}
-
-          <div class="ab-featured-media">
-            <img class="ab-featured-img-primary" src="{{ product.thumb }}" alt="{{ product.name }}" loading="lazy" />
-            {% if product.images[0] %}
-              <img class="ab-featured-img-hover" src="{{ product.images[0] }}" alt="{{ product.name }}" loading="lazy" />
-            {% endif %}
-            {% comment %} Wishlist & Compare action buttons — dispatch custom events caught by the storefront JS layer
-            <div class="ab-card-actions">
-              <button
-                class="ab-wishlist-btn"
-                type="button"
-                aria-label="Add to wishlist"
-                onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-wishlist',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
-              >
-                <svg 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"/></svg>
-              </button>
-              <button
-                class="ab-compare-btn"
-                type="button"
-                aria-label="Compare"
-                onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-compare',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
-              >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 8 16 13"/><line x1="21" y1="8" x2="9" y2="8"/><polyline points="8 21 3 16 8 11"/><line x1="3" y1="16" x2="15" y2="16"/></svg>
-              </button>
-            </div>
-            {% endcomment %}
-          </div>
-
-          <div class="ab-featured-info">
-            <p class="ab-featured-name">{{ product.name }}</p>
-            <div class="ab-featured-price-row">
-              {% if product.sale_price and product.sale_price < product.price %}
-                <span class="ab-price-old">{{ product.price }} {{ currency }}</span>
-                <span class="ab-featured-price ab-price-sale">{{ product.sale_price }} {{ currency }}</span>
-              {% else %}
-                <span class="ab-featured-price">{{ product.price }} {{ currency }}</span>
-              {% endif %}
-            </div>
-
-
-            <div class="ab-featured-bottom-row">
-              <div class="ab-featured-swatches">
-                {% if color_variation and color_variation.props %}
-                  {% for prop in color_variation.props limit: 4 %}
-                    <span class="ab-featured-swatch" style="background: {{ prop.value }}" title="{{ prop.name }}"></span>
-                  {% endfor %}
-                {% elsif image_variation and image_variation.props %}
-                  {% for prop in image_variation.props limit: 4 %}
-                    <span class="ab-featured-swatch ab-featured-swatch-image" title="{{ prop.name }}">
-                      <img src="{{ prop.value }}" alt="{{ prop.name }}" loading="lazy" />
-                    </span>
-                  {% endfor %}
-                {% endif %}
-
-                {% if swatch_total > 4 %}
-                  <span class="ab-featured-swatch-more">+{{ swatch_total | minus: 4 }}</span>
-                {% endif %}
-              </div>
-
-              <button
-                class="ab-featured-add-btn"
-                type="button"
-                onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
->{{add}}</button>
-            </div>
-          </div>
-        </a>
-      {% endfor %}
-    </div>
-  </div>
-</section>
+<section
+  class="ab-featured-products"
+  style="
+    --ab-sale-badge-bg: {{ theme_data.sale_badge_bg_color | default: '#c94a4a' }};
+    --ab-sale-badge-text: {{ theme_data.sale_badge_text_color | default: '#ffffff' }};
+    --ab-product-card-bg: {% if theme_data.card_background_product == 'transparent' %}transparent{% else %}{{ theme_data.card_background_product_color | default: '#f5f4f2' }}{% endif %};
+    --ab-featured-hero-subtitle-color: {{ theme_data.featured_hero_subtitle_text_color | default: '#ffffff' }};
+    --ab-featured-hero-cta-bg: {{ theme_data.featured_hero_cta_background_color | default: '#ffffff' }};
+    --ab-featured-hero-cta-text: {{ theme_data.featured_hero_cta_text_color | default: '#1f272b' }};
+  "
+>
+  {% if section_title %}
+    <h2 class="ab-featured-section-title ab-reveal">{{ section_title }}</h2>
+  {% endif %}
+  <div class="ab-featured-layout">
+    <a
+      href="{% if category and category.slug %}/collections/{{ category.slug }}{% else %}#{% endif %}"
+      class="ab-featured-hero ab-reveal"
+    >
+      <img
+        src="{% if category and category.thumb %}{{ category.thumb }}{% elsif products and products[0] and products[0].thumb %}{{ products[0].thumb }}{% endif %}"
+        alt="{% if category and category.name %}{{ category.name }}{% else %}{{ section_title }}{% endif %}"
+        loading="lazy"
+      />
+      <span class="ab-featured-hero-overlay"></span>
+      <div class="ab-featured-hero-content">
+        {% if category and category.name %}
+          <p class="ab-featured-hero-subtitle">{{ category.name }}</p>
+        {% endif %}
+      </div>
+      {% unless hide_view_all %}<span class="ab-featured-hero-cta">{{shop_now}}</span>{% endunless %}
+    </a>
+
+    <div class="ab-featured-grid">
+      {% for product in products limit: 4 %}
+        {% assign color_variation = product.variations | where: "type", "color" | first %}
+        {% assign image_variation = product.variations | where: "type", "image" | first %}
+        {% assign swatch_total = 0 %}
+        {% if color_variation and color_variation.props %}
+          {% assign swatch_total = color_variation.props.size %}
+        {% elsif image_variation and image_variation.props %}
+          {% assign swatch_total = image_variation.props.size %}
+        {% endif %}
+
+        {% assign pgrid_custom_badge = '' %}
+        {% if product.product_theme_data %}
+          {% assign pgrid_custom_badge = product.product_theme_data.custom_badge_title | strip %}
+        {% endif %}
+        {% assign pgrid_has_sale = false %}
+        {% if product.sale_price and product.sale_price < product.price and theme_data.show_sale_badge != false %}
+          {% assign pgrid_has_sale = true %}
+        {% endif %}
+        {% assign pgrid_has_variants = false %}
+        {% if product.variations and product.variations.size > 0 %}
+          {% assign pgrid_has_variants = true %}
+        {% endif %}
+        {% assign pgrid_disable_no_stock_str = product.disable_orders_for_no_stock | append: '' | downcase | strip %}
+        {% assign pgrid_disable_no_stock = false %}
+        {% if pgrid_disable_no_stock_str == 'true' or pgrid_disable_no_stock_str == '1' %}
+          {% assign pgrid_disable_no_stock = true %}
+        {% endif %}
+        {% assign pgrid_stock_flag_raw = product.in_stock | default: product.available %}
+        {% assign pgrid_stock_flag_str = pgrid_stock_flag_raw | append: '' | downcase | strip %}
+        {% assign pgrid_is_out_of_stock = false %}
+        {% if pgrid_stock_flag_str == 'false' or pgrid_stock_flag_str == '0' %}
+          {% assign pgrid_is_out_of_stock = true %}
+        {% elsif pgrid_stock_flag_str == 'true' or pgrid_stock_flag_str == '1' %}
+          {% assign pgrid_is_out_of_stock = false %}
+        {% else %}
+          {% assign pgrid_stock_qty = product.quantity | default: product.stock | default: product.total_quantity | default: 0 | plus: 0 %}
+          {% if pgrid_stock_qty <= 0 %}
+            {% assign pgrid_is_out_of_stock = true %}
+          {% endif %}
+        {% endif %}
+        {% assign pgrid_hide_add_btn = false %}
+        {% if pgrid_disable_no_stock and pgrid_has_variants == false and pgrid_is_out_of_stock %}
+          {% assign pgrid_hide_add_btn = true %}
+        {% endif %}
+
+        <a href="/products/{{ product.slug }}" class="ab-pgrid-card ab-featured-card ab-reveal ab-observed ab-visible" style="animation-delay: {{ forloop.index | times: 0.05 }}s">
+          {% if pgrid_has_sale or pgrid_custom_badge != '' %}
+            <div class="ab-pgrid-badge-stack">
+              {% if pgrid_has_sale %}
+                {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
+                <span class="ab-pgrid-badge ab-sale-badge">-{{ discount }}%</span>
+              {% endif %}
+              {% if pgrid_custom_badge != '' %}
+                <span class="ab-pgrid-badge ab-product-custom-badge">{{ pgrid_custom_badge }}</span>
+              {% endif %}
+            </div>
+          {% endif %}
+
+          <div class="ab-featured-media">
+            <img class="ab-featured-img-primary" src="{{ product.thumb }}" alt="{{ product.name }}" loading="lazy" />
+            {% if product.images[0] %}
+              <img class="ab-featured-img-hover" src="{{ product.images[0] }}" alt="{{ product.name }}" loading="lazy" />
+            {% endif %}
+          </div>
+
+          <div class="ab-featured-info">
+            <p class="ab-featured-name">{{ product.name }}</p>
+            <div class="ab-featured-price-row">
+              {% if product.sale_price and product.sale_price < product.price %}
+                <span class="ab-price-old">{{ product.price }} {{ currency }}</span>
+                <span class="ab-featured-price ab-price-sale">{{ product.sale_price }} {{ currency }}</span>
+              {% else %}
+                <span class="ab-featured-price">{{ product.price }} {{ currency }}</span>
+              {% endif %}
+            </div>
+
+            <div class="ab-featured-bottom-row">
+              <div class="ab-featured-swatches">
+                {% if color_variation and color_variation.props %}
+                  {% for prop in color_variation.props limit: 4 %}
+                    <span class="ab-featured-swatch" style="background: {{ prop.value }}" title="{{ prop.name }}"></span>
+                  {% endfor %}
+                {% elsif image_variation and image_variation.props %}
+                  {% for prop in image_variation.props limit: 4 %}
+                    <span class="ab-featured-swatch ab-featured-swatch-image" title="{{ prop.name }}">
+                      <img src="{{ prop.value }}" alt="{{ prop.name }}" loading="lazy" />
+                    </span>
+                  {% endfor %}
+                {% endif %}
+
+                {% if swatch_total > 4 %}
+                  <span class="ab-featured-swatch-more">+{{ swatch_total | minus: 4 }}</span>
+                {% endif %}
+              </div>
+
+              {% unless pgrid_hide_add_btn %}
+                <button
+                  class="ab-featured-add-btn"
+                  type="button"
+                  onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+                >{{add}}</button>
+              {% endunless %}
+            </div>
+          </div>
+        </a>
+      {% endfor %}
+    </div>
+  </div>
+</section>

package/dist/template/theme/sections/fixed-buy-button.liquid

@@ -1,46 +1,51 @@
-<div class="ab-fixed-buy">
-  {% if thumb and thumb != "" %}
-    <div class="ab-fixed-buy-preview">
-      <img class="ab-fixed-buy-thumb" src="{{ thumb }}" alt="{{ product_name }}" />
-      <div class="ab-fixed-buy-info">
-        <span class="ab-fixed-buy-name">{{ product_name }}</span>
-        <div class="ab-fixed-buy-price-row">
-          {% if sale_price and sale_price < price %}
-            <span class="ab-fixed-buy-price-old">{{ price }} {{ currency }}</span>
-            <span class="ab-fixed-buy-price ab-fixed-buy-price-sale">{{ sale_price }} {{ currency }}</span>
-          {% else %}
-            <span class="ab-fixed-buy-price">{{ price }} {{ currency }}</span>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  {% endif %}
-
-  {% unless hide_quantity %}
-    <div class="ab-fixed-buy-qty">
-      <button
-        class="ab-fixed-buy-qty-btn"
-        type="button"
-        onclick="this.dispatchEvent(new CustomEvent('increment-quantity',{bubbles:true}));"
-        {% if increase_disabled %}disabled{% endif %}
-      >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-      </button>
-      <span class="ab-fixed-buy-qty-value">{{ quantity }}</span>
-      <button
-        class="ab-fixed-buy-qty-btn"
-        type="button"
-        onclick="this.dispatchEvent(new CustomEvent('decrement-quantity',{bubbles:true}));"
-      >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
-      </button>
-    </div>
-  {% endunless %}
-
-  <button
-    class="ab-fixed-buy-btn"
-    type="button"
-    {% if disabled %}disabled{% endif %}
-    onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('buy-now',{bubbles:true}));"
-  >{{ buy_now_text }}</button>
-</div>
+<div class="ab-fixed-buy">
+  {% if thumb and thumb != "" %}
+    <div class="ab-fixed-buy-preview">
+      <img class="ab-fixed-buy-thumb" src="{{ thumb }}" alt="{{ product_name }}" />
+      <div class="ab-fixed-buy-info">
+        <span class="ab-fixed-buy-name">{{ product_name }}</span>
+        <div class="ab-fixed-buy-price-row">
+          {% if sale_price and sale_price < price %}
+            <span class="ab-fixed-buy-price-old">{{ price }} {{ currency }}</span>
+            <span class="ab-fixed-buy-price ab-fixed-buy-price-sale">{{ sale_price }} {{ currency }}</span>
+          {% else %}
+            <span class="ab-fixed-buy-price">{{ price }} {{ currency }}</span>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% unless hide_quantity %}
+    <div class="ab-fixed-buy-qty">
+      <button
+        class="ab-fixed-buy-qty-btn"
+        type="button"
+        onclick="this.dispatchEvent(new CustomEvent('increment-quantity',{bubbles:true}));"
+        {% if increase_disabled %}disabled{% endif %}
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+      </button>
+      <span class="ab-fixed-buy-qty-value">{{ quantity }}</span>
+      <button
+        class="ab-fixed-buy-qty-btn"
+        type="button"
+        onclick="this.dispatchEvent(new CustomEvent('decrement-quantity',{bubbles:true}));"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+      </button>
+    </div>
+  {% endunless %}
+
+  <button
+    class="ab-fixed-buy-btn"
+    type="button"
+    {% if disabled %}disabled{% endif %}
+    onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('buy-now',{bubbles:true}));"
+  >
+  <span class="svg-wrapper add-to-cart-icon">
+        
+      </span>
+  <span class="btn-text">{{ buy_now_text }}</span>
+  </button>
+</div>