easyorders 0.1.15 → 0.1.16

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

@@ -1,10 +1,26 @@
 <div class="ab-categories">
-  <div class="ab-categories-track">
+  <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">
-        <img src="{{ category.thumb }}" alt="{{ category.name }}" />
-        <span class="ab-cat-label">{{ category.name }}</span>
+        <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>
+</div>

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

@@ -1,4 +1,14 @@
-<section class="ab-featured-products">
+<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 %}
@@ -32,10 +42,52 @@
           {% 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>
+        {% 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">
@@ -43,26 +95,6 @@
             {% 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">
@@ -76,7 +108,6 @@
               {% endif %}
             </div>
 
-
             <div class="ab-featured-bottom-row">
               <div class="ab-featured-swatches">
                 {% if color_variation and color_variation.props %}
@@ -96,15 +127,17 @@
                 {% 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>
+              {% 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>
+</section>

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

@@ -42,5 +42,10 @@
     type="button"
     {% if disabled %}disabled{% endif %}
     onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('buy-now',{bubbles:true}));"
-  >{{ buy_now_text }}</button>
+  >
+  <span class="svg-wrapper add-to-cart-icon">
+        
+      </span>
+  <span class="btn-text">{{ buy_now_text }}</span>
+  </button>
 </div>

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

@@ -1,103 +1,100 @@
-
 <footer class="ab-footer">
   <div class="ab-footer-inner">
-    <div class="ab-footer-columns">
-      <div class="ab-footer-col ab-footer-brand">
-        <a href="/" class="ab-footer-logo">
-          {% if logo != "" %}
-            <img src="{{ logo }}" alt="{{ store_name }}" />
-          {% else %}
-            <span class="ab-footer-logo-text">{{ store_name }}</span>
-          {% endif %}
-        </a>
-        {% if has_contact %}
+
+    {% assign footer_subscribe_title = theme_data.footer_newsletter_title | default: subscribe_label %}
+    {% assign footer_subscribe_description = theme_data.footer_newsletter_description | strip %}
+    {% assign hide_newsletter_mobile = theme_data.hide_newsletter_mobile %}
+    <div class="ab-footer-subscribe-section{% if hide_newsletter_mobile == true or hide_newsletter_mobile == 'true' or hide_newsletter_mobile == 1 or hide_newsletter_mobile == '1' %} ab-footer-subscribe--hide-mobile{% endif %}"{% if theme_data.footer_newsletter_text_color and theme_data.footer_newsletter_text_color != "" %} style="--ab-footer-subscribe-color: {{ theme_data.footer_newsletter_text_color }};"{% endif %}>
+      <h4 class="ab-footer-heading ab-footer-subscribe-title">{{ footer_subscribe_title }}</h4>
+      {% if footer_subscribe_description != "" %}
+        <p class="ab-footer-subscribe-description">{{ footer_subscribe_description }}</p>
+      {% endif %}
+      <form class="ab-footer-subscribe-form" novalidate onsubmit="event.preventDefault(); var input = this.elements.email; var errorEl = this.querySelector('.ab-footer-email-error'); if (!input || !input.checkValidity()) { if (errorEl) { errorEl.textContent = 'email address'; errorEl.style.display = 'block'; } if (input) input.focus(); return; } if (errorEl) { errorEl.textContent = ''; errorEl.style.display = 'none'; } var email = input.value ? String(input.value).trim() : ''; this.dispatchEvent(new CustomEvent('footer-subscribe', { bubbles: true, detail: { email: email } })); this.reset();">
+        <div class="ab-footer-input-wrapper">
+          <input type="email" name="email" class="ab-footer-subscribe-input" placeholder="Email Address" required oninput="var e = this.form && this.form.querySelector('.ab-footer-email-error'); if (e) { e.textContent = ''; e.style.display = 'none'; }" />
+          <button type="submit" class="ab-footer-subscribe-btn">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <polyline points="12 8 16 12 12 16"/>
+  <line x1="8" y1="12" x2="16" y2="12"/>
+</svg>          </button>
+        </div>
+        <small class="ab-footer-email-error" aria-live="polite"></small>
+      </form>
+    </div>
+
+    <div class="ab-footer-accordions">
+      {% if categories.size > 0 %}
+        <details class="ab-footer-col ab-footer-details">
+          <summary class="ab-footer-heading">
+            <span>{{ shop_label }}</span>
+            <span class="ab-footer-chev" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+            </span>
+          </summary>
+          <ul class="ab-footer-links">
+            {% for cat in categories %}
+              <li><a href="/collections/{{ cat.slug }}">{{ cat.name }}</a></li>
+            {% endfor %}
+          </ul>
+        </details>
+      {% endif %}
+
+      {% if pages.size > 0 %}
+        <details class="ab-footer-col ab-footer-details">
+          <summary class="ab-footer-heading">
+            <span>{{ help_label }}</span>
+            <span class="ab-footer-chev" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+            </span>
+          </summary>
+          <ul class="ab-footer-links">
+            {% for page in pages %}
+              <li><a href="/pages/{{ page.slug }}">{{ page.title }}</a></li>
+            {% endfor %}
+          </ul>
+        </details>
+      {% endif %}
+
+      {% if has_contact %}
+        <details class="ab-footer-col ab-footer-details ab-footer-contact-info">
+          <summary class="ab-footer-heading">
+            <span class="ab-footer-contact-title">
+              <span class="ab-footer-contact-title__en">Contact</span>
+              <span class="ab-footer-contact-title__ar" lang="ar">تواصل معنا</span>
+            </span>
+            <span class="ab-footer-chev" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+            </span>
+          </summary>
           <address class="ab-footer-contact">
             {% if phone != "" %}
               <a href="tel:{{ phone }}" class="ab-footer-contact-item">
-                <span class="ab-footer-contact-icon ab-fci-phone" aria-hidden="true"></span>
+                <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
                 <span dir="ltr">{{ phone }}</span>
               </a>
             {% endif %}
+
             {% if email != "" %}
               <a href="mailto:{{ email }}" class="ab-footer-contact-item">
-                <span class="ab-footer-contact-icon ab-fci-email" aria-hidden="true"></span>
+                <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                 {{ email }}
               </a>
             {% endif %}
+
             {% if address != "" %}
               <span class="ab-footer-contact-item">
-                <span class="ab-footer-contact-icon ab-fci-address" aria-hidden="true"></span>
+                <svg class="contact-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                 {{ address }}
               </span>
             {% endif %}
           </address>
-        {% endif %}
-      </div>
-
-      {% if categories.size > 0 %}
-        <div class="ab-footer-col">
-          <h4 class="ab-footer-heading">{{ shop_label }}</h4>
-          <ul class="ab-footer-links">
-            {% for cat in categories %}
-              <li><a href="/collections/{{ cat.slug }}">{{ cat.name }}</a></li>
-            {% endfor %}
-          </ul>
-        </div>
-      {% endif %}
-
-      {% if pages.size > 0 %}
-        <div class="ab-footer-col">
-          <h4 class="ab-footer-heading">{{ help_label }}</h4>
-          <ul class="ab-footer-links">
-            {% for page in pages %}
-              <li><a href="/pages/{{ page.slug }}">{{ page.title }}</a></li>
-            {% endfor %}
-          </ul>
-        </div>
+        </details>
       {% endif %}
     </div>
 
-    <div class="ab-footer-right">
-      <div class="ab-footer-subscribe">
-        <h4 class="ab-footer-heading">{{ subscribe_label }}</h4>
-        <form
-          class="ab-footer-subscribe-form"
-          novalidate
-          onsubmit="
-            event.preventDefault();
-            if (!this.checkValidity()) {
-              this.reportValidity();
-              return;
-            }
-            var input = this.elements.email;
-            var email = input && input.value ? String(input.value).trim() : '';
-            this.dispatchEvent(
-              new CustomEvent('footer-subscribe', {
-                bubbles: true,
-                detail: { email: email }
-              })
-            );
-            this.reset()
-          "
-        >
-          <input
-            type="email"
-            name="email"
-            class="ab-footer-subscribe-input"
-            placeholder="{{ email_placeholder }}"
-            autocomplete="email"
-            inputmode="email"
-            maxlength="254"
-            pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
-            title="{{ email_placeholder }}"
-            required
-            aria-required="true"
-          />
-          <button type="submit" class="ab-footer-subscribe-btn" aria-label="Subscribe">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
-          </button>
-        </form>
-      </div>
+    <div class="ab-footer-social-row">
+       
 
       {% if social.size > 0 %}
         <div class="ab-footer-social">
@@ -112,18 +109,20 @@
         </div>
       {% endif %}
     </div>
-  </div>
 
-  <div class="ab-footer-bottom">
-          {% if payment_img != "" %}
-          <div class="ab-footer-payment">
-            <img src="{{ payment_img }}" alt="Accepted payment methods" />
-          </div>
-        {% endif %}
+    <div class="ab-footer-bottom">
+      <p class="ab-footer-copy">&copy; {{ year }} {{ store_name }}. {{ rights_label }}</p>
+
+      {% if show_powered %}
+        <p class="ab-footer-powered">Powered by <a href="https://www.easy-orders.net" target="_blank" rel="noreferrer">easyorders</a></p>
+      {% endif %}
+
+      {% if payment_img != "" and theme_data.show_payment_icons != false %}
+        <div class="ab-footer-payment">
+          <img src="{{ payment_img }}" alt="Accepted payment methods" />
+        </div>
+      {% endif %}
+    </div>
 
-    <p class="ab-footer-copy">&copy; {{ year }} {{ store_name }}. {{ rights_label }}</p>
-    {% if show_powered %}
-      <p class="ab-footer-powered">Powered by <a href="https://www.easy-orders.net" target="_blank" rel="noreferrer">easyorders</a></p>
-    {% endif %}
-  </div>  
-</footer>
+  </div>
+</footer>

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

@@ -1,45 +1,48 @@
 <div class="ab-gallery">
-  <div class="ab-gallery-main" data-gallery-open>
-    {% if mainImage contains '.mp4' %}
-      <video
-        src="{{ mainImage }}"
-        class="ab-gallery-main-media"
-        controls
-        playsinline
-        autoplay
-        muted
-        preload="metadata"
-      ></video>
-    {% else %}
-      <img
-        id="gallery-main-image"
-        src="{{ mainImage }}"
-        alt="{{ product_name }}"
-        class="ab-gallery-main-media"
-      />
-    {% endif %}
-    <button class="ab-gallery-zoom" type="button" aria-label="Zoom image" data-gallery-open>
-      <span>+</span>
-    </button>
-  </div>
-
-  {% if images.size > 1 %}
-  <div class="ab-gallery-thumbs">
+  {% assign gallery_main_image_id_set = false %}
+  <div class="ab-gallery-track" data-gallery-track>
     {% for image in images %}
-      <button
-        class="ab-gallery-thumb{% if image == mainImage %} ab-active{% endif %}"
+      <div
+        class="ab-gallery-slide"
+        data-slide-index="{{ forloop.index0 }}"
         data-src="{{ image }}"
-        type="button"
-        aria-label="View image {{ forloop.index }}"
       >
         {% if image contains '.mp4' %}
-          <video src="{{ image }}" muted playsinline preload="metadata"></video>
+          <video
+            src="{{ image }}"
+            class="ab-gallery-media"
+            playsinline
+            muted
+            preload="metadata"
+          ></video>
+          <span class="ab-gallery-play-overlay">
+            <svg viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="23" fill="rgba(0,0,0,0.45)"/><polygon points="19,14 19,34 36,24" fill="#fff"/></svg>
+          </span>
         {% else %}
-          <img src="{{ image }}" alt="{{ product_name }}" loading="lazy" />
+          <img
+            src="{{ image }}"
+            alt="{{ product_name }}"
+            class="ab-gallery-media"
+            loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"
+            {% unless gallery_main_image_id_set %}id="gallery-main-image"{% endunless %}
+          />
+          {% assign gallery_main_image_id_set = true %}
         {% endif %}
-      </button>
+      </div>
     {% endfor %}
   </div>
+
+  {% if images.size > 1 %}
+    <div class="ab-gallery-dots" data-gallery-dots>
+      {% for image in images %}
+        <button
+          class="ab-gallery-dot{% if forloop.first %} ab-active{% endif %}"
+          type="button"
+          data-dot-index="{{ forloop.index0 }}"
+          aria-label="View image {{ forloop.index }}"
+        ></button>
+      {% endfor %}
+    </div>
   {% endif %}
 
   <div class="ab-lightbox" data-lightbox>
@@ -56,6 +59,7 @@
     {% endif %}
     <div class="ab-lightbox-body">
       <img src="" alt="" class="ab-lightbox-img" data-lightbox-img />
+      <video class="ab-lightbox-video" data-lightbox-video playsinline muted controls preload="metadata"></video>
     </div>
   </div>
 </div>