easyorders 0.1.14 → 0.1.16

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

@@ -1,129 +1,128 @@
-
-<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 %}
-          <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>
-                <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>
-                {{ email }}
-              </a>
-            {% endif %}
-            {% if address != "" %}
-              <span class="ab-footer-contact-item">
-                <span class="ab-footer-contact-icon ab-fci-address" aria-hidden="true"></span>
-                {{ 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>
-      {% 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>
-
-      {% if social.size > 0 %}
-        <div class="ab-footer-social">
-          <p class="ab-footer-social-label">{{ follow_label }}</p>
-          <div class="ab-footer-social-icons">
-            {% for item in social %}
-              <a href="{{ item.url }}" target="_blank" rel="noreferrer" aria-label="{{ item.label }}">
-                <span class="ab-footer-social-img" style="-webkit-mask-image:url({{ item.icon }});mask-image:url({{ item.icon }})"></span>
-              </a>
-            {% endfor %}
-          </div>
-        </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 %}
-
-    <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>
+<footer class="ab-footer">
+  <div class="ab-footer-inner">
+
+    {% 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">
+                <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">
+                <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">
+                <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>
+        </details>
+      {% endif %}
+    </div>
+
+    <div class="ab-footer-social-row">
+       
+
+      {% if social.size > 0 %}
+        <div class="ab-footer-social">
+          <p class="ab-footer-social-label">{{ follow_label }}</p>
+          <div class="ab-footer-social-icons">
+            {% for item in social %}
+              <a href="{{ item.url }}" target="_blank" rel="noreferrer" aria-label="{{ item.label }}">
+                <span class="ab-footer-social-img" style="-webkit-mask-image:url({{ item.icon }});mask-image:url({{ item.icon }})"></span>
+              </a>
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+    </div>
+
+    <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>
+
+  </div>
+</footer>

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

@@ -1,61 +1,65 @@
-<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">
-    {% for image in images %}
-      <button
-        class="ab-gallery-thumb{% if image == mainImage %} ab-active{% endif %}"
-        data-src="{{ image }}"
-        type="button"
-        aria-label="View image {{ forloop.index }}"
-      >
-        {% if image contains '.mp4' %}
-          <video src="{{ image }}" muted playsinline preload="metadata"></video>
-        {% else %}
-          <img src="{{ image }}" alt="{{ product_name }}" loading="lazy" />
-        {% endif %}
-      </button>
-    {% endfor %}
-  </div>
-  {% endif %}
-
-  <div class="ab-lightbox" data-lightbox>
-    <div class="ab-lightbox-backdrop" data-lightbox-close></div>
-    <button class="ab-lightbox-close" data-lightbox-close aria-label="Close">&times;</button>
-    {% if images.size > 1 %}
-      <button class="ab-lightbox-arrow ab-lightbox-prev" data-lightbox-prev aria-label="Previous">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
-      </button>
-      <button class="ab-lightbox-arrow ab-lightbox-next" data-lightbox-next aria-label="Next">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
-      </button>
-      <div class="ab-lightbox-counter" data-lightbox-counter></div>
-    {% endif %}
-    <div class="ab-lightbox-body">
-      <img src="" alt="" class="ab-lightbox-img" data-lightbox-img />
-    </div>
-  </div>
-</div>
+<div class="ab-gallery">
+  {% assign gallery_main_image_id_set = false %}
+  <div class="ab-gallery-track" data-gallery-track>
+    {% for image in images %}
+      <div
+        class="ab-gallery-slide"
+        data-slide-index="{{ forloop.index0 }}"
+        data-src="{{ image }}"
+      >
+        {% if image contains '.mp4' %}
+          <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 }}"
+            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 %}
+      </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>
+    <div class="ab-lightbox-backdrop" data-lightbox-close></div>
+    <button class="ab-lightbox-close" data-lightbox-close aria-label="Close">&times;</button>
+    {% if images.size > 1 %}
+      <button class="ab-lightbox-arrow ab-lightbox-prev" data-lightbox-prev aria-label="Previous">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+      </button>
+      <button class="ab-lightbox-arrow ab-lightbox-next" data-lightbox-next aria-label="Next">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+      </button>
+      <div class="ab-lightbox-counter" data-lightbox-counter></div>
+    {% 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>