easyorders 0.1.14 → 0.1.16

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

@@ -1,152 +1,232 @@
-
-<div class="ab-theme" >
-{% if announcement_config and announcement_config.text.size > 0 %}
-<div class="ab-announce" data-ann-type="{{ announcement_config.type }}">
-  {% if announcement_config.type == "marquee" %}
-    <div class="ab-ann-marquee">
-      <div class="ab-ann-marquee-track">
-        {% for item in announcement_config.text %}
-          <span class="ab-ann-marquee-item">{{ item }}</span>
-        {% endfor %}
-      </div>
-    </div>
-  {% elsif announcement_config.type == "slider" %}
-    <div class="ab-ann-slider">
-      {% for item in announcement_config.text %}
-        <div class="ab-ann-slide{% if forloop.first %} ab-active{% endif %}">{{ item }}</div>
-      {% endfor %}
-    </div>
-  {% else %}
-    <div class="ab-ann-simple">
-      {% for item in announcement_config.text %}
-        <span>{{ item }}</span>
-        {% unless forloop.last %}<span class="ab-ann-sep">&mdash;</span>{% endunless %}
-      {% endfor %}
-    </div>
-  {% endif %}
-</div>
-{% elsif announcement_text and announcement_text != "" %}
-<div class="ab-announce">
-  {{ announcement_text }}
-</div>
-{% endif %}
-
-<header id="eo-header" class="ab-header">
-  <div class="ab-header-inner">
-    <div style="display:flex;align-items:center;">
-      <button id="eo-menu-btn" class="ab-hamburger" aria-label="Menu"></button>
-      <a href="/" class="ab-logo">
-        {% if logo %}
-          <img src="{{ logo }}" alt="{{ store_name }}" />
-        {% else %}
-          <span class="ab-logo-text">{{ store_name }}</span>
-        {% endif %}
-      </a>
-    </div>
-
-    <nav class="ab-nav">
-      {% for category in categories %}
-        {% if category.children.size > 0 %}
-          <div class="ab-dropdown">
-            <a href="{{ category.url }}" class="ab-dropdown-trigger">{{ category.name }}</a>
-            <div class="ab-dropdown-panel">
-              {% for child in category.children %}
-                <a href="{{ child.url }}">{{ child.name }}</a>
-              {% endfor %}
-            </div>
-          </div>
-        {% else %}
-          <a href="{{ category.url }}">{{ category.name }}</a>
-        {% endif %}
-      {% endfor %}
-    </nav>
-
-    <div class="ab-right">
-      <a href="/search" class="ab-icon-btn search-btn" aria-label="Search"></a>
-
-      {% if is_register_active %}
-      <button type="button" id="header-register" class="ab-icon-btn register-btn" aria-label="Register" onclick="this.dispatchEvent(new CustomEvent('register-click',{bubbles:true}))"></button>
-      {% endif %}
-
-      <button type="button" id="header-lang-btn" class="ab-icon-btn lang-btn" aria-label="Change Language" hidden onclick="this.dispatchEvent(new CustomEvent('lang-click',{bubbles:true}))"></button>
-
-      {% comment %} Desktop header: Wishlist link with live count badge & Compare button — dispatches compare-click event; count badges updated by JS
-      <a href="/wishlist" class="ab-icon-btn wishlist-btn" aria-label="Wishlist">
-        <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>
-        <span id="header-wishlist-count" class="ab-wishlist-count" hidden>{{ wishlist_count }}</span>
-      </a>
-
-      <button type="button" class="ab-icon-btn compare-btn" aria-label="Compare" onclick="this.dispatchEvent(new CustomEvent('compare-click',{bubbles:true}))">
-        <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>
-        <span id="header-compare-count" class="ab-compare-count" hidden>{{ compare_count }}</span>
-      </button>
-      {% endcomment %}
-
-      <button type="button" class="ab-icon-btn cart-btn" aria-label="Cart" onclick="this.dispatchEvent(new CustomEvent('cart-click',{bubbles:true}))">
-        <span id="header-cart-count" class="ab-cart-count" hidden>{{ cart_count }}</span>
-      </button>
-    </div>
-  </div>
-</header>
-
-<div id="eo-mobile-overlay" class="ab-mobile-overlay"></div>
-<div id="eo-mobile-menu" class="ab-mobile-menu">
-  <div class="ab-mobile-menu-header">
-    <button id="eo-mobile-close" class="ab-mobile-close" aria-label="Close menu"></button>
-    <a href="/" class="ab-logo">
-      {% if logo %}
-        <img src="{{ logo }}" alt="{{ store_name }}" />
-      {% else %}
-        <span class="ab-logo-text">{{ store_name }}</span>
-      {% endif %}
-    </a>
-  </div>
-  <nav class="ab-mobile-nav">
-    {% for category in categories %}
-      {% if category.children.size > 0 %}
-        <div class="ab-mobile-accordion">
-          <button class="ab-mobile-accordion-trigger">
-            <span>{{ category.name }}</span>
-            <svg class="ab-accordion-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
-          </button>
-          <div class="ab-mobile-accordion-panel">
-            <a href="{{ category.url }}">All {{ category.name }}</a>
-            {% for child in category.children %}
-              <a href="{{ child.url }}">{{ child.name }}</a>
-            {% endfor %}
-          </div>
-        </div>
-      {% else %}
-        <a href="{{ category.url }}">
-          <span>{{ category.name }}</span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M10 8l4 4-4 4"/></svg>
-        </a>
-      {% endif %}
-    {% endfor %}
-    <a href="/search">
-      <span>Search</span>
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-    </a>
-    {% if is_register_active %}
-    <button type="button" id="header-register-mobile" class="register-btn" aria-label="Register" onclick="this.dispatchEvent(new CustomEvent('register-click',{bubbles:true}))">
-      <span>Register</span>
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
-    </button>
-    {% endif %}
-    <button id="header-lang-mobile" class="lang-btn" hidden onclick="this.dispatchEvent(new CustomEvent('lang-click',{bubbles:true}));return false;">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M10 8l4 4-4 4"/></svg>
-    </button>
-    {% comment %} Mobile nav: Wishlist & Compare entries added alongside existing nav items
-    <a href="/wishlist" class="wishlist-btn">
-      <span>Wishlist</span>
-      <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>
-    </a>
-    <button type="button" class="compare-btn" onclick="this.dispatchEvent(new CustomEvent('compare-click',{bubbles:true}))">
-      <span>Compare</span>
-      <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>
-    {% endcomment %}
-  </nav>
-</div>
-
-</div>
+<style>
+  :root {
+    --ab-main-container-top-padding: {{ theme_data.main_container_padding_top | default: 40 }}px;
+  }
+</style>
+<div
+  class="ab-theme"
+  style="
+    --ab-logo-height-desktop: {{ theme_data.logo_height_desktop | default: 47 }}px;
+    --ab-logo-height-mobile: {{ theme_data.logo_height_mobile | default: 20 }}px;
+    --ab-main-container-top-padding: {{ theme_data.main_container_padding_top | default: 40 }}px;
+    --ab-header-category-bg: {{ theme_data.header_category_strip_bg_color | default: '#e1dbd1' }};
+    --ab-header-category-text: {{ theme_data.header_category_strip_text_color | default: '#212a2f' }};
+  "
+>
+{% if announcement_config and announcement_config.text.size > 0 %}
+{% assign first_announce_text = announcement_config.text | first | default: "" %}
+{% assign announce_is_arabic = false %}
+{% if lang == "ar" or first_announce_text contains "ا" or first_announce_text contains "ب" or first_announce_text contains "ت" or first_announce_text contains "ث" or first_announce_text contains "ج" or first_announce_text contains "ح" or first_announce_text contains "خ" %}
+  {% assign announce_is_arabic = true %}
+{% endif %}
+{% assign ann_repeat_count = 4 %}
+{% if announcement_config.text.size <= 1 %}
+  {% assign ann_repeat_count = 8 %}
+{% elsif announcement_config.text.size == 2 %}
+  {% assign ann_repeat_count = 6 %}
+{% endif %}
+<div class="ab-announce{% if announce_is_arabic %} ab-announce--arabic{% endif %}" data-ann-type="{{ announcement_config.type }}">
+  {% if announcement_config.type == "marquee" %}
+    <div class="ab-ann-marquee">
+      <div class="ab-ann-marquee-track">
+        {% for repeat_index in (1..ann_repeat_count) %}
+          {% for item in announcement_config.text %}
+            <span class="ab-ann-marquee-item">{{ item }}</span>
+          {% endfor %}
+        {% endfor %}
+      </div>
+    </div>
+  {% elsif announcement_config.type == "slider" %}
+    <div class="ab-ann-slider">
+      {% for item in announcement_config.text %}
+        <div class="ab-ann-slide{% if forloop.first %} ab-active{% endif %}">{{ item }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    <div class="ab-ann-simple">
+      {% for item in announcement_config.text %}
+        <span>{{ item }}</span>
+        {% unless forloop.last %}<span class="ab-ann-sep">&mdash;</span>{% endunless %}
+      {% endfor %}
+    </div>
+  {% endif %}
+</div>
+{% elsif announcement_text and announcement_text != "" %}
+<div class="ab-announce">
+  {{ announcement_text }}
+</div>
+{% endif %}
+
+<header id="eo-header" class="ab-header">
+  <div class="ab-header-inner">
+    <div style="display:flex;align-items:center;">
+      <button id="eo-menu-btn" class="ab-hamburger" aria-label="Menu">
+        <svg class="ab-hamburger-icon size-6" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <line stroke="currentColor" stroke-width="1.5" x1="6.65" y1="7.5" x2="18.35" y2="7.5"></line>
+          <line stroke="currentColor" stroke-width="1.5" x1="6.65" y1="12" x2="18.35" y2="12"></line>
+          <line stroke="currentColor" stroke-width="1.5" x1="6.65" y1="16.5" x2="13.85" y2="16.5"></line>
+        </svg>
+      </button>
+      <a href="/" class="ab-logo">
+        {% if logo %}
+          <img src="{{ logo }}" alt="{{ store_name }}" />
+        {% else %}
+          <span class="ab-logo-text">{{ store_name }}</span>
+        {% endif %}
+      </a>
+    </div>
+
+    <nav class="ab-nav">
+      {% for category in categories %}
+        {% if category.children.size > 0 %}
+          <div class="ab-dropdown">
+            <a href="{{ category.url }}" class="ab-dropdown-trigger">{{ category.name }}</a>
+            <div class="ab-dropdown-panel">
+              {% for child in category.children %}
+                <a href="{{ child.url }}">{{ child.name }}</a>
+              {% endfor %}
+            </div>
+          </div>
+        {% else %}
+          <a href="{{ category.url }}">{{ category.name }}</a>
+        {% endif %}
+      {% endfor %}
+    </nav>
+
+    <div class="ab-right">
+     <button type="button" id="header-lang-btn" class="ab-icon-btn lang-btn" aria-label="Change Language" hidden onclick="this.dispatchEvent(new CustomEvent('lang-click',{bubbles:true}))"></button>
+
+      <a href="/search" class="ab-icon-btn search-btn" aria-label="Search"></a>
+
+      {% if is_register_active %}
+      <button type="button" id="header-register" class="ab-icon-btn register-btn" aria-label="Register" onclick="this.dispatchEvent(new CustomEvent('register-click',{bubbles:true}))"></button>
+      {% endif %}
+
+      {% comment %} Desktop header: Wishlist link with live count badge & Compare button — dispatches compare-click event; count badges updated by JS
+      <a href="/wishlist" class="ab-icon-btn wishlist-btn" aria-label="Wishlist">
+        <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>
+        <span id="header-wishlist-count" class="ab-wishlist-count" hidden>{{ wishlist_count }}</span>
+      </a>
+
+      <button type="button" class="ab-icon-btn compare-btn" aria-label="Compare" onclick="this.dispatchEvent(new CustomEvent('compare-click',{bubbles:true}))">
+        <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>
+        <span id="header-compare-count" class="ab-compare-count" hidden>{{ compare_count }}</span>
+      </button>
+      {% endcomment %}
+
+      <button type="button" class="ab-icon-btn cart-btn" aria-label="Cart" onclick="this.dispatchEvent(new CustomEvent('cart-click',{bubbles:true}))">
+        <span id="header-cart-count" class="ab-cart-count" hidden>{{ cart_count }}</span>
+      </button>
+    </div>
+  </div>
+
+  <div class="ab-header-category">
+    {% for category in categories %}
+      <a href="{{ category.url }}">{{ category.name }}</a>
+    {% endfor %}
+  </div>
+</header>
+
+<div id="eo-mobile-overlay" class="ab-mobile-overlay"></div>
+  <div id="eo-mobile-menu" class="ab-mobile-menu">
+    <div class="ab-mobile-menu-header">
+      <button id="eo-mobile-close" class="ab-mobile-close" aria-label="Close menu"></button>
+      <a href="/" class="ab-logo">
+        {% if logo %}
+          <img src="{{ logo }}" alt="{{ store_name }}" />
+        {% else %}
+          <span class="ab-logo-text">{{ store_name }}</span>
+        {% endif %}
+      </a>
+    </div>
+  <nav class="ab-mobile-nav">
+    {% for category in categories %}
+      {% if category.children.size > 0 %}
+        <div class="ab-mobile-accordion">
+          <button class="ab-mobile-accordion-trigger">
+            <span>{{ category.name }}</span>
+            <svg class="ab-accordion-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+          </button>
+          <div class="ab-mobile-accordion-panel">
+            <a href="{{ category.url }}">All {{ category.name }}</a>
+            {% for child in category.children %}
+              <a href="{{ child.url }}">{{ child.name }}</a>
+            {% endfor %}
+          </div>
+        </div>
+      {% else %}
+        <a href="{{ category.url }}">
+          <span>{{ category.name }}</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+             <circle cx="12" cy="12" r="9" />
+            <path d="M11 9l3 3-3 3" />
+          </svg>       </a>
+      {% endif %}
+    {% endfor %}
+     
+    {% if is_register_active %}
+    <button type="button" id="header-register-mobile" class="register-btn" aria-label="Register" onclick="this.dispatchEvent(new CustomEvent('register-click',{bubbles:true}))">
+      <span>Register</span>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
+    </button>
+    {% endif %}
+    <button id="header-lang-mobile" class="lang-btn" hidden onclick="this.dispatchEvent(new CustomEvent('lang-click',{bubbles:true}));return false;">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M10 8l4 4-4 4"/></svg>
+    </button>
+    {% comment %} Mobile nav: Wishlist & Compare entries added alongside existing nav items
+    <a href="/wishlist" class="wishlist-btn">
+      <span>Wishlist</span>
+      <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>
+    </a>
+    <button type="button" class="compare-btn" onclick="this.dispatchEvent(new CustomEvent('compare-click',{bubbles:true}))">
+      <span>Compare</span>
+      <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>
+    {% endcomment %}
+  </nav>
+  {% assign mobile_menu_social = social %}
+  {% assign mobile_menu_pages = pages %}
+  {% if mobile_menu_social == blank and footer and footer.social %}
+    {% assign mobile_menu_social = footer.social %}
+  {% endif %}
+  {% if mobile_menu_pages == blank and footer and footer.pages %}
+    {% assign mobile_menu_pages = footer.pages %}
+  {% endif %}
+
+  {% if mobile_menu_social.size > 0 or mobile_menu_pages.size > 0 %}
+    <div class="ab-mobile-menu-footer">
+      {% if mobile_menu_social.size > 0 %}
+        <div class="ab-mobile-menu-footer-social ab-footer-social-icons">
+          {% for item in mobile_menu_social %}
+            {% assign social_label = item.label | default: item.type | default: "social" %}
+            <a href="{{ item.url }}" target="_blank" rel="noreferrer" aria-label="{{ social_label }}">
+              {% if item.icon %}
+                <span class="ab-footer-social-img" style="-webkit-mask-image:url({{ item.icon }});mask-image:url({{ item.icon }})"></span>
+              {% else %}
+                <span class="ab-mobile-menu-footer-social-fallback">{{ social_label | slice: 0, 1 | upcase }}</span>
+              {% endif %}
+            </a>
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      {% if mobile_menu_pages.size > 0 %}
+        <div class="ab-mobile-menu-footer-pages">
+          {% for page in mobile_menu_pages %}
+            {% if page.url %}
+              {% assign page_href = page.url %}
+            {% else %}
+              {% assign page_href = "/pages/" | append: page.slug %}
+            {% endif %}
+            <a href="{{ page_href }}">{{ page.title | default: page.name }}</a>
+            {% unless forloop.last %}
+              <span class="ab-mobile-menu-footer-sep" aria-hidden="true">&middot;</span>
+            {% endunless %}
+          {% endfor %}
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
+</div>
+
+</div>