easyorders 0.1.15 → 0.1.17

package/dist/template/theme/home-sections/shop-the-look/template.liquid

@@ -1,8 +1,21 @@
 <section
-  class="shop-the-look shop-the-look--{{ section_data.surface | default: 'cream' }}"
-  style="--stl-accent: {{ section_data.accent_color | default: '#C9A962' }};"
+  class="eo-home-section shop-the-look shop-the-look--{{ section_data.surface | default: 'cream' }}"
+  {% if section_data.enable_animation != false %}data-section-anim="{{ section_data.animation_style | default: 'fade-up' }}"{% endif %}
+  style="
+    --stl-accent: {{ section_data.accent_color | default: '#C9A962' }};
+    --stl-card-bg: {{ section_data.card_bg_color | default: '' }};
+    --stl-card-title: {{ section_data.card_title_color | default: '' }};
+    --stl-card-price: {{ section_data.card_price_color | default: '' }};
+    --stl-card-old-price: {{ section_data.card_old_price_color | default: '' }};
+    {% if section_data.heading_title_color != blank %}--stl-head-title-color: {{ section_data.heading_title_color }};{% endif %}
+    --stl-head-title-size: {{ section_data.heading_title_size | default: 38 }}px;
+    --stl-head-title-weight: {{ section_data.heading_title_weight | default: '500' }};
+    {% if section_data.heading_subtitle_color != blank %}--stl-head-subtitle-color: {{ section_data.heading_subtitle_color }};--stl-head-subtitle-opacity: 1;{% endif %}
+    --stl-head-subtitle-size: {{ section_data.heading_subtitle_size | default: 16 }}px;
+    --stl-head-subtitle-weight: {{ section_data.heading_subtitle_weight | default: '400' }};
+  "
 >
-  <header class="shop-the-look__head">
+  <header class="shop-the-look__head ab-anim-el">
     {% if section_data.eyebrow != blank %}
       <p class="shop-the-look__eyebrow">{{ section_data.eyebrow }}</p>
     {% endif %}
@@ -15,7 +28,7 @@
   </header>
 
   <div class="shop-the-look__layout">
-    <a class="shop-the-look__hero" href="{{ section_data.look_url | default: '/products' }}">
+    <a class="shop-the-look__hero ab-anim-el" href="{{ section_data.look_url | default: '/products' }}">
       <div class="shop-the-look__hero-visual">
         {% if section_data.look_image != blank %}
           <img
@@ -45,9 +58,10 @@
     </a>
 
     <div
-      class="shop-the-look__picks eo-hs{% if section_data.pick_product_ids == blank or section_data.pick_product_ids.size == 0 %} eo-hs--empty{% endif %}"
+      class="shop-the-look__picks eo-hs ab-anim-el{% if section_data.pick_product_ids == blank or section_data.pick_product_ids.size == 0 %} eo-hs--empty{% endif %}"
       data-eo-hs-entity="products"
       data-eo-hs-ids="{{ section_data.pick_product_ids | join: ',' | strip }}"
+      data-eo-hs-currency="{{ currency }}"
     >
       <div class="shop-the-look__picks-inner" data-eo-hs-mount>
         {% if section_data.pick_product_ids and section_data.pick_product_ids.size > 0 %}
@@ -68,6 +82,7 @@
   }
   .shop-the-look--cream {
     background: #f3efe8;
+    margin-block: 15px;
     color: #1c1a17;
   }
   .shop-the-look--charcoal {
@@ -75,8 +90,8 @@
     color: #f4eee6;
   }
   .shop-the-look__head {
-    max-width: 40rem;
-    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
+        max-width: 1160px;
+    margin: 0 auto 30px;
   }
   .shop-the-look__eyebrow {
     margin: 0 0 0.4rem;
@@ -89,15 +104,18 @@
   .shop-the-look__title {
     margin: 0 0 0.5rem;
     font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-    font-weight: 500;
-    font-size: clamp(1.75rem, 4vw, 2.35rem);
+    font-weight: var(--stl-head-title-weight, 500);
+    font-size: clamp(1.25rem, 3vw, var(--stl-head-title-size, 38px));
     line-height: 1.15;
+    color: var(--stl-head-title-color, inherit);
   }
   .shop-the-look__subtitle {
     margin: 0;
-    font-size: 1rem;
+    font-size: var(--stl-head-subtitle-size, 16px);
+    font-weight: var(--stl-head-subtitle-weight, 400);
     line-height: 1.65;
-    opacity: 0.82;
+    opacity: var(--stl-head-subtitle-opacity, 0.82);
+    color: var(--stl-head-subtitle-color, inherit);
   }
   .shop-the-look__layout {
     max-width: 1160px;
@@ -118,9 +136,8 @@
     overflow: hidden;
     text-decoration: none;
     color: inherit;
-    min-height: clamp(300px, 52vh, 540px);
-    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
-    transition: transform 0.25s ease, box-shadow 0.25s ease;
+    min-height: clamp(300px, 60vh, 540px);
+     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }
   .shop-the-look--charcoal .shop-the-look__hero {
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
@@ -208,14 +225,13 @@
   }
   @media (max-width: 959px) {
     .shop-the-look__picks-inner {
-      flex-flow: row nowrap;
-      overflow-x: auto;
+       overflow-x: auto;
       padding-bottom: 0.35rem;
       scroll-snap-type: x mandatory;
       -webkit-overflow-scrolling: touch;
     }
     .shop-the-look__picks-inner .eo-hs-card--product {
-      flex: 0 0 min(220px, 72vw);
+      flex: 0 0 min(140px, 72vw);
       scroll-snap-align: start;
     }
   }
@@ -239,7 +255,7 @@
     color: inherit;
     padding: 0.65rem;
     border-radius: 8px;
-    background: rgba(255, 255, 255, 0.55);
+    background: var(--stl-card-bg, rgba(255, 255, 255, 0.55));
     border: 1px solid rgba(28, 26, 23, 0.06);
     transition: background 0.2s ease, transform 0.2s ease;
   }
@@ -280,11 +296,17 @@
     font-size: 0.9rem;
     font-weight: 600;
     line-height: 1.35;
+    color: var(--stl-card-title, inherit);
   }
   .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__meta {
     font-size: 0.82rem;
-    opacity: 0.75;
     letter-spacing: 0.03em;
+    color: var(--stl-card-price, inherit);
+    opacity: 0.85;DISPLAY: flex;
+    GAP: 8PX;
+  }
+  .shop-the-look__picks-inner .eo-hs-card--product .eo-hs-card__meta del {
+    color: var(--stl-card-old-price, inherit);
   }
   .shop-the-look__picks .eo-hs-error {
     margin: 0;

package/dist/template/theme/home-sections/slider-before-after/config.json

@@ -0,0 +1,213 @@
+{
+    "icon": "https://files.easy-orders.net/1778106742691912104.png",
+    "label": "Before/After Slider",
+    "section_schema": [
+      {
+        "name": "bg_color",
+        "type": "color",
+        "default": "#f9f9f9",
+        "description": "خلفية السيكشن"
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "default": "See the Transformation",
+        "description": "عنوان القسم"
+      },
+      {
+        "name": "title_color",
+        "type": "color",
+        "default": "#1a1a1a",
+        "description": "لون العنوان"
+      },
+      {
+        "name": "description",
+        "type": "string",
+        "default": "",
+        "description": "وصف تحت العنوان"
+      },
+      {
+        "name": "description_color",
+        "type": "color",
+        "default": "#555555",
+        "description": "لون الوصف"
+      },
+      {
+        "name": "description_size",
+        "type": "number",
+        "default": 16,
+        "description": "حجم الوصف (px)"
+      },
+      {
+        "name": "image_before",
+        "type": "image",
+        "default": "",
+        "description": "صورة «قبل» (رفع)"
+      },
+      {
+        "name": "image_after",
+        "type": "image",
+        "default": "",
+        "description": "صورة «بعد» (رفع)"
+      },
+      {
+        "name": "before_label",
+        "type": "string",
+        "default": "Before",
+        "description": "النص أعلى صورة الشمال"
+      },
+      {
+        "name": "after_label",
+        "type": "string",
+        "default": "After",
+        "description": "النص أعلى صورة اليمين"
+      },
+      {
+        "name": "before_product_label",
+        "type": "string",
+        "default": "",
+        "description": "نص زر المنتج على صورة «قبل» (فارغ = إخفاء الزر)"
+      },
+      {
+        "name": "before_product_id",
+        "type": "product_single_select",
+        "description": "منتج صورة «قبل» (الرابط تلقائي)"
+      },
+      {
+        "name": "after_product_label",
+        "type": "string",
+        "default": "",
+        "description": "نص زر المنتج على صورة «بعد» (فارغ = إخفاء الزر)"
+      },
+      {
+        "name": "after_product_id",
+        "type": "product_single_select",
+        "description": "منتج صورة «بعد» (الرابط تلقائي)"
+      },
+      {
+        "name": "label_color",
+        "type": "color",
+        "default": "#ffffff",
+        "description": "لون النص"
+      },
+      {
+        "name": "label_size",
+        "type": "number",
+        "default": 18,
+        "description": "حجم النص (px)"
+      },
+      {
+        "name": "label_weight",
+        "type": "select",
+        "default": "700",
+        "description": "وزن الخط",
+        "options": [
+          { "label": "Normal 400", "value": "400" },
+          { "label": "Medium 500", "value": "500" },
+          { "label": "SemiBold 600", "value": "600" },
+          { "label": "Bold 700", "value": "700" },
+          { "label": "ExtraBold 800", "value": "800" }
+        ]
+      },
+      {
+        "name": "show_label_border",
+        "type": "boolean",
+        "default": false,
+        "description": "إظهار بوردر حول النص"
+      },
+      {
+        "name": "label_border_color",
+        "type": "color",
+        "default": "#ffffff",
+        "description": "لون البوردر"
+      },
+      {
+        "name": "shape",
+        "type": "select",
+        "default": "square",
+        "description": "شكل الحاوية",
+        "options": [
+          { "label": "مربع / مستطيل", "value": "square" },
+          { "label": "دائري", "value": "circle" }
+        ]
+      },
+      {
+        "name": "max_width",
+        "type": "number",
+        "default": 800,
+        "description": "أقصى عرض للصور (px)"
+      },
+      {
+        "name": "product_cta_text_color",
+        "type": "color",
+        "default": "#ffffff",
+        "description": "لون نص الزرار"
+      },
+      {
+        "name": "product_cta_font_size",
+        "type": "number",
+        "default": 14,
+        "description": "حجم خط الزرار (px)"
+      },
+      {
+        "name": "product_cta_font_weight",
+        "type": "select",
+        "default": "600",
+        "description": "وزن خط الزرار",
+        "options": [
+          { "label": "Normal 400", "value": "400" },
+          { "label": "Medium 500", "value": "500" },
+          { "label": "SemiBold 600", "value": "600" },
+          { "label": "Bold 700", "value": "700" }
+        ]
+      },
+      {
+        "name": "product_cta_letter_spacing",
+        "type": "number",
+        "default": 0.06,
+        "description": "تباعد الحروف (em)"
+      },
+      {
+        "name": "product_cta_text_transform",
+        "type": "select",
+        "default": "uppercase",
+        "description": "تحويل النص",
+        "options": [
+          { "label": "بدون", "value": "none" },
+          { "label": "UPPERCASE", "value": "uppercase" },
+          { "label": "lowercase", "value": "lowercase" },
+          { "label": "Capitalize", "value": "capitalize" }
+        ]
+      },
+      {
+        "name": "product_cta_border_width",
+        "type": "number",
+        "default": 0,
+        "description": "عرض إطار الزرار (px، 0 = بدون)"
+      },
+      {
+        "name": "product_cta_border_color",
+        "type": "color",
+        "default": "#1a1a1a",
+        "description": "لون إطار الزرار"
+      },
+      {
+        "name": "product_cta_radius",
+        "type": "number",
+        "default": 999,
+        "description": "استدارة حواف الزرار (px)"
+      },
+      {
+        "name": "product_cta_padding_x",
+        "type": "number",
+        "default": 22,
+        "description": "مسافة أفقية للزرار (px)"
+      },
+      {
+        "name": "product_cta_padding_y",
+        "type": "number",
+        "default": 12,
+        "description": "مسافة رأسية للزرار (px)"
+      }
+    ]
+  }

package/dist/template/theme/home-sections/slider-before-after/template.liquid

@@ -0,0 +1,336 @@
+<section 
+  class="eo-home-section ab-comparison-section ab-comparison--{{ section_data.shape | default: 'square' }}" 
+  style="
+    --comp-bg: {{ section_data.bg_color | default: '#f9f9f9' }};
+    --comp-title-color: {{ section_data.title_color | default: '#1a1a1a' }};
+    --comp-max-width: {{ section_data.max_width | default: 800 }}px;
+    --comp-label-color: {{ section_data.label_color | default: '#ffffff' }};
+    --comp-label-size: {{ section_data.label_size | default: 18 }}px;
+    --comp-label-weight: {{ section_data.label_weight | default: 700 }};
+    --comp-label-border-color: {{ section_data.label_border_color | default: '#ffffff' }};
+    --comp-label-border-width: {% if section_data.show_label_border %}1px{% else %}0px{% endif %};
+    --comp-desc-color: {{ section_data.description_color | default: '#555555' }};
+    --comp-desc-size: {{ section_data.description_size | default: 16 }}px;
+    --comp-cta-bg: {{ section_data.product_cta_bg | default: '#1a1a1a' }};
+    --comp-cta-color: {{ section_data.product_cta_text_color | default: '#ffffff' }};
+    --comp-cta-fs: {{ section_data.product_cta_font_size | default: 14 }}px;
+    --comp-cta-fw: {{ section_data.product_cta_font_weight | default: '600' }};
+    --comp-cta-ls: {{ section_data.product_cta_letter_spacing | default: 0.06 }}em;
+    --comp-cta-tt: {{ section_data.product_cta_text_transform | default: 'uppercase' }};
+    --comp-cta-border-w: {{ section_data.product_cta_border_width | default: 0 }}px;
+    --comp-cta-border-c: {{ section_data.product_cta_border_color | default: '#1a1a1a' }};
+    --comp-cta-rad: {{ section_data.product_cta_radius | default: 999 }}px;
+    --comp-cta-px: {{ section_data.product_cta_padding_x | default: 22 }}px;
+    --comp-cta-py: {{ section_data.product_cta_padding_y | default: 12 }}px;
+  "
+>
+  <div class="ab-comparison-container">
+    {% if section_data.title != blank %}
+      <h2 class="ab-comparison-title">{{ section_data.title }}</h2>
+    {% endif %}
+    {% if section_data.description != blank %}
+      <p class="ab-comparison-desc">{{ section_data.description }}</p>
+    {% endif %}
+
+    <div class="ab-comparison-slider-wrap">
+    <div class="ab-comparison-slider ab-orientation-horizontal" id="comparison-{{ section_id }}">
+      
+      <div class="ab-comp-image ab-after-image">
+        {% if section_data.image_after != blank %}
+          <img src="{{ section_data.image_after }}" alt="After" draggable="false">
+        {% else %}
+          <div class="ab-comp-placeholder">After Image Placeholder</div>
+        {% endif %}
+        {% if section_data.after_label != blank %}
+          <span class="ab-comp-image-label ab-comp-image-label--right">{{ section_data.after_label }}</span>
+        {% endif %}
+        {% if section_data.after_product_label != blank %}
+          {% if section_data.after_product_id != blank %}
+            <a
+              class="ab-comp-product-cta ab-comp-product-cta--after"
+              href="#"
+              data-eo-hs-cta="1"
+              data-eo-hs-cta-entity="products"
+              data-eo-hs-cta-id="{{ section_data.after_product_id }}"
+            >{{ section_data.after_product_label }}</a>
+          {% else %}
+            <a class="ab-comp-product-cta ab-comp-product-cta--after" href="/products">{{ section_data.after_product_label }}</a>
+          {% endif %}
+        {% endif %}
+      </div>
+
+      <div class="ab-comp-image ab-before-image" id="before-img-{{ section_id }}">
+        {% if section_data.image_before != blank %}
+          <img src="{{ section_data.image_before }}" alt="Before" draggable="false">
+        {% else %}
+          <div class="ab-comp-placeholder" style="background: #eee;">Before Image Placeholder</div>
+        {% endif %}
+        {% if section_data.before_label != blank %}
+          <span class="ab-comp-image-label ab-comp-image-label--left">{{ section_data.before_label }}</span>
+        {% endif %}
+        {% if section_data.before_product_label != blank %}
+          {% if section_data.before_product_id != blank %}
+            <a
+              class="ab-comp-product-cta ab-comp-product-cta--before"
+              href="#"
+              data-eo-hs-cta="1"
+              data-eo-hs-cta-entity="products"
+              data-eo-hs-cta-id="{{ section_data.before_product_id }}"
+            >{{ section_data.before_product_label }}</a>
+          {% else %}
+            <a class="ab-comp-product-cta ab-comp-product-cta--before" href="/products">{{ section_data.before_product_label }}</a>
+          {% endif %}
+        {% endif %}
+      </div>
+
+      <div class="ab-comp-handle" id="handle-{{ section_id }}">
+        <div class="ab-comp-handle-circle">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="10 7 5 12 10 17"/><polyline points="14 7 19 12 14 17"/>
+            </svg>
+        </div>
+      </div>
+
+      <input type="range" min="0" max="100" value="50" class="ab-comp-range" id="range-{{ section_id }}" aria-label="Comparison slider">
+    </div>
+
+    </div>
+  </div>
+</section>
+
+<style>
+  .ab-comparison-section {
+    background-color: var(--comp-bg);
+    padding: 20px 0px;
+    display: flex;    direction: ltr;
+    justify-content: center;
+  }
+
+  .ab-comparison-container {
+    width: 100%;
+    max-width: var(--comp-max-width);
+    text-align: center;
+  }
+
+  .ab-comparison-slider-wrap {
+    width: 100%;
+    text-align: initial;
+  }
+
+  .ab-comp-product-cta {
+    position: absolute;
+    z-index: 4;text-decoration-line: underline;
+    text-underline-offset: 5px;
+    pointer-events: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+     
+    box-sizing: border-box;
+    background: transparent;
+    color: var(--comp-cta-color, #fff);
+    font-size: var(--comp-cta-fs, 14px);
+    font-weight: var(--comp-cta-fw, 600);
+    letter-spacing: var(--comp-cta-ls, 0.06em);
+    text-transform: var(--comp-cta-tt, uppercase);
+    border: var(--comp-cta-border-w, 0px) solid var(--comp-cta-border-c, #1a1a1a);
+    border-radius: var(--comp-cta-rad, 999px);
+    padding: var(--comp-cta-py, 12px) var(--comp-cta-px, 22px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    max-width: min(92%, 320px);
+    text-align: center;
+    line-height: 1.2;
+  }
+
+  .ab-orientation-horizontal .ab-comp-product-cta--before {
+    bottom: 14px;
+    left: 14px;
+    top: auto;
+    right: auto;
+  }
+
+  .ab-orientation-horizontal .ab-comp-product-cta--after {
+    bottom: 14px;
+    right: 14px;
+    top: auto;
+    left: auto;
+  }
+
+  .ab-comp-product-cta:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+  }
+
+  .ab-comp-product-cta:focus-visible {
+    outline: 2px solid var(--comp-cta-border-c, #1a1a1a);
+    outline-offset: 2px;
+  }
+
+  .ab-comparison-title {
+    color: var(--comp-title-color);
+    font-size: clamp(1.5rem, 4vw, 2.2rem);
+    margin-bottom: 8px;
+    font-weight: 600;
+  }
+
+  .ab-comparison-desc {
+    color: var(--comp-desc-color);
+    font-size: var(--comp-desc-size);
+    margin: 0 auto 25px;
+    max-width: 600px;
+    line-height: 1.6;
+  }
+
+  .ab-comparison-title:last-child {
+    margin-bottom: 40px;
+  }
+
+  .ab-comparison-slider {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9; /* مقاس مستطيل افتراضي للديسكتوب */
+    overflow: hidden;
+    user-select: none;
+    touch-action: pan-y;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    cursor: default;
+  }
+
+  /* شكل الحاوية */
+  .ab-comparison--circle .ab-comparison-slider {
+    border-radius: 50%;
+    aspect-ratio: 1 / 1; /* دائرة مثالية */
+  }
+   
+
+  .ab-comp-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .ab-comp-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    user-select: none;
+    -webkit-user-drag: none;
+    pointer-events: none;
+  }
+
+  .ab-comp-image-label {
+    position: absolute;
+    top: 14px;
+    z-index: 2;
+    pointer-events: none;
+    color: var(--comp-label-color);
+    font-size: var(--comp-label-size);
+    font-weight: var(--comp-label-weight);
+    line-height: 1;
+    border: var(--comp-label-border-width) solid var(--comp-label-border-color);
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: transparent;
+  }
+
+  .ab-comp-image-label--left {
+    left: 14px;
+  }
+
+  .ab-comp-image-label--right {
+    right: 14px;
+  }
+
+  .ab-comp-placeholder {
+    width: 100%;
+    height: 100%;
+    background: #ddd;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: #666;
+  }
+
+  /* تحت: صورة «بعد» كاملة العرض */
+  .ab-after-image {
+    z-index: 0;
+    clip-path: none;
+  }
+
+  /* فوق: صورة «قبل» تُقصّ بالسلايدر */
+  .ab-before-image {
+    z-index: 1;
+    overflow: hidden;
+    clip-path: inset(0 50% 0 0);
+  }
+
+  /* حقل النطاق للوصول من لوحة المفاتيح فقط — السحب من المقبض (script.js) */
+  .ab-comp-range {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    opacity: 0;
+    cursor: inherit;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* المقبض — السحب يبدأ هنا فقط (script.js) */
+  .ab-comp-handle {
+    position: absolute;
+    z-index: 8;
+    pointer-events: auto;
+    cursor: ew-resize;
+    touch-action: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ab-orientation-horizontal .ab-comp-handle {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 2px;
+    background: white;
+    transform: translateX(-50%);
+  }
+
+  /* الدايرة اللي في نص المقبض */
+  .ab-comp-handle-circle {
+    min-width: 44px;
+    height: 44px;
+    background: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+    color: #333;
+  }
+
+  .ab-comp-handle-circle svg {
+    width: 24px;
+    height: 24px;
+  }
+  
+  /* تعديل مقاس المستطيل للموبايل */
+  @media (max-width: 768px) {
+     .ab-comparison-slider{
+
+        aspect-ratio: 5 / 4; 
+     }
+    .ab-comparison--circle .ab-comparison-slider {
+      aspect-ratio: 1 / 1; 
+    }
+  }
+</style>
+
+