easyorders 0.1.14 → 0.1.16

package/dist/template/theme/home-sections/Tilted-Scrolling-Marque/template.liquid

@@ -0,0 +1,171 @@
+{% assign tilt_val = "0deg" %}
+{% if section_data.tilt_direction == "right" %}
+  {% assign tilt_val = "5deg" %} 
+{% elsif section_data.tilt_direction == "left" %}
+  {% assign tilt_val = "-5deg" %}
+{% endif %}
+{% assign first_msg = section_data.messages | first %}
+{% assign first_msg_text = "" %}
+{% if first_msg and first_msg.text %}
+  {% assign first_msg_text = first_msg.text %}
+{% endif %}
+{% assign marquee_is_arabic = false %}
+{% if section_data.text_language == "ar" %}
+  {% assign marquee_is_arabic = true %}
+{% elsif section_data.text_language == "auto" %}
+  {% if lang == "ar" or first_msg_text contains "ا" or first_msg_text contains "ب" or first_msg_text contains "ت" or first_msg_text contains "ث" or first_msg_text contains "ج" or first_msg_text contains "ح" or first_msg_text contains "خ" %}
+    {% assign marquee_is_arabic = true %}
+  {% endif %}
+{% endif %}
+{% assign marquee_repeat_count = 4 %}
+{% if section_data.messages.size <= 1 %}
+  {% assign marquee_repeat_count = 8 %}
+{% elsif section_data.messages.size == 2 %}
+  {% assign marquee_repeat_count = 6 %}
+{% endif %}
+
+<section
+  class="ab-marquee-section{% if marquee_is_arabic %} ab-marquee--arabic{% endif %}"
+  style="
+    --mq-bg: {{ section_data.bg_color | default: '#000' }};
+    --mq-color: {{ section_data.text_color | default: '#fff' }};
+    --mq-font-size-dt: {{ section_data.desktop_font_size | default: 48 }}px;
+    --mq-font-size-mb: {{ section_data.mobile_font_size | default: 24 }}px;
+    --mq-lh-dt: {{ section_data.desktop_line_height | default: 68 }}px;
+    --mq-lh-mb: {{ section_data.mobile_line_height | default: 48 }}px;
+    --mq-weight: {{ section_data.font_weight | default: '700' }};
+    --mq-letter-spacing: {{ section_data.letter_spacing | default: 2 }}px;
+    --mq-speed-dt: {{ section_data.desktop_speed | default: 20 }}s;
+    --mq-speed-mb: {{ section_data.mobile_speed | default: 10 }}s;
+    --mq-tilt: {{ tilt_val }};
+  "
+>
+  <div class="ab-marquee-clip">
+    <div class="ab-marquee-band">
+      <div class="ab-marquee-wrapper">
+        <div class="ab-marquee-track">
+          <div class="ab-marquee-content">
+            {% for repeat_index in (1..marquee_repeat_count) %}
+              {% for item in section_data.messages %}
+                <span class="ab-marquee-item">{{ item.text }}</span>
+              {% endfor %}
+            {% endfor %}
+          </div>
+
+          <div class="ab-marquee-content" aria-hidden="true">
+            {% for repeat_index in (1..marquee_repeat_count) %}
+              {% for item in section_data.messages %}
+                <span class="ab-marquee-item">{{ item.text }}</span>
+              {% endfor %}
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .ab-marquee-section {
+    margin: 20px 0;
+    overflow-x: clip;
+    overflow-y: visible;
+    position: relative;
+    margin-left: -10px;
+    margin-right: -10px;
+    background-color: transparent;  
+  }
+
+  .ab-marquee-clip {
+    width: 100%;
+   }
+
+  .ab-marquee-band {
+    transform: rotate(var(--mq-tilt));
+    transform-origin: center;
+    width: calc(100% + 160px);
+    margin-left: -80px;
+    background-color: transparent; /* خلفية الباند شفافة */
+  }
+
+  .ab-marquee-wrapper {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    direction: ltr;
+  }
+
+  .ab-marquee-track {
+    display: flex;
+    width: max-content;
+    animation: marquee-scroll var(--mq-speed-dt) linear infinite;
+    will-change: transform;
+    background-color: var(--mq-bg); /* لون الخلفية اتنقل هنا زي ما طلبت */
+  }
+
+  .ab-marquee-content {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .ab-marquee-item {
+    color: var(--mq-color);
+    font-size: var(--mq-font-size-dt);
+    font-weight: var(--mq-weight);
+    letter-spacing: var(--mq-letter-spacing); /* تحكم تباعد الحروف */
+    line-height: var(--mq-lh-dt); /* التحكم في الارتفاع للديسكتوب */
+    white-space: nowrap;
+    padding: 0 40px;
+    text-transform: uppercase;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .ab-marquee-item::after {
+    content: "•";
+    margin-inline-start: 80px;
+    opacity: 0.3;
+  }
+
+  .ab-marquee--arabic .ab-marquee-track {
+    animation-name: marquee-scroll-ar;
+  }
+  .ab-marquee--arabic .ab-marquee-item {
+    text-transform: none;
+    letter-spacing: 0;
+    direction: rtl;
+    unicode-bidi: plaintext;
+  }
+
+  @keyframes marquee-scroll {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+  }
+  @keyframes marquee-scroll-ar {
+    from { transform: translateX(-50%); }
+    to { transform: translateX(0); }
+  }
+
+  /* ريسبونسيف الموبايل */
+  @media (max-width: 768px) {
+    .ab-marquee-track {
+      animation-duration: var(--mq-speed-mb);
+    }
+    .ab-marquee-item {
+      font-size: var(--mq-font-size-mb);
+      line-height: var(--mq-lh-mb); /* التحكم في الارتفاع للموبايل */
+      padding: 0 20px;
+    }
+    .ab-marquee-item::after {
+      margin-inline-start: 40px;
+    }
+  }
+ 
+
+  {% if section_data.tilt_direction != 'straight' %}
+  .ab-marquee-section {
+    margin-block: 72px;
+  }
+  {% endif %}
+</style>

package/dist/template/theme/home-sections/category-mosaic/config.json

@@ -1,5 +1,5 @@
 {
-  "icon": "https://api.iconify.design/lucide:grid-3x3.svg",
+  "icon": "https://files.easy-orders.net/1778107568557501919.png",
   "label": "Category mosaic",
   "section_schema": [
     {
@@ -14,6 +14,66 @@
       "default": "Curated drops for work, weekend, and everything between.",
       "description": "Subheading under the title"
     },
+    {
+      "name": "heading_title_color",
+      "type": "color",
+      "default": "",
+      "group": "controls_title",
+      "description": "Heading title color (leave empty for default)"
+    },
+    {
+      "name": "heading_title_size",
+      "type": "number",
+      "group": "controls_title",
+      "default": 38,
+      "description": "Heading title size (px)"
+    },
+    {
+      "name": "heading_title_weight",
+      "type": "select",
+      "default": "500",
+      "group": "controls_title",
+      "description": "Heading title font weight",
+      "options": [
+        { "label": "Regular 400", "value": "400" },
+        { "label": "Medium 500", "value": "500" },
+        { "label": "SemiBold 600", "value": "600" },
+        { "label": "Bold 700", "value": "700" }
+      ]
+    },
+    {
+      "name": "heading_subtitle_color",
+      "type": "color",
+      "default": "",
+      "group": "controls_subtitle",
+      "description": "Subtitle color (leave empty for default)"
+    },
+    {
+      "name": "heading_subtitle_size",
+      "type": "number",
+      "group": "controls_subtitle",
+      "default": 16,
+      "description": "Subtitle size (px)"
+    },
+    {
+      "name": "heading_subtitle_weight",
+      "type": "select",
+      "default": "400",
+      "group": "controls_subtitle",
+      "description": "Subtitle font weight",
+      "options": [
+        { "label": "Regular 400", "value": "400" },
+        { "label": "Medium 500", "value": "500" },
+        { "label": "SemiBold 600", "value": "600" },
+        { "label": "Bold 700", "value": "700" }
+      ]
+    },
+    {
+      "name": "section_background",
+      "type": "color",
+      "default": "",
+      "description": "Section background color (leave empty for default white)"
+    },
     {
       "name": "columns",
       "type": "select",
@@ -32,9 +92,34 @@
       "description": "Use tighter spacing between tiles"
     },
     {
-      "name": "mosaic_category_ids",
-      "type": "category_multi_select",
-      "description": "Categories to show as tiles (search and reorder in the picker). Images and titles load from each category."
+      "name": "tiles",
+      "type": "object_array",
+      "description": "Category or collection tiles",
+      "fields": [
+        {
+          "name": "image",
+          "type": "image",
+          "default": "",
+          "description": "صورة القسم"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "Dresses",
+          "description": "اسم القسم على الصورة"
+        },
+        {
+          "name": "tagline",
+          "type": "string",
+          "default": "Fluid lines",
+          "description": "وصف قصير تحت الاسم"
+        },
+        {
+          "name": "category_id",
+          "type": "category_single_select",
+          "description": "اختيار القسم (اللينك يتجاب أوتوماتيك)"
+        }
+      ]
     }
   ]
 }

package/dist/template/theme/home-sections/category-mosaic/template.liquid

@@ -1,8 +1,15 @@
 <section
-  class="category-mosaic eo-hs{% if section_data.gap_tight %} category-mosaic--tight{% endif %}{% if section_data.mosaic_category_ids == blank or section_data.mosaic_category_ids.size == 0 %} eo-hs--empty{% endif %}"
-  style="--mosaic-cols: {{ section_data.columns | default: '3' }};"
-  data-eo-hs-entity="categories"
-  data-eo-hs-ids="{{ section_data.mosaic_category_ids | join: ',' | strip }}"
+  class="eo-home-section category-mosaic{% if section_data.gap_tight %} category-mosaic--tight{% endif %}"
+  style="
+    --mosaic-cols: {{ section_data.columns | default: '3' }};
+    {% if section_data.section_background != blank %}--mosaic-section-bg: {{ section_data.section_background }};{% endif %}
+    {% if section_data.heading_title_color != blank %}--mosaic-head-title-color: {{ section_data.heading_title_color }};{% endif %}
+    --mosaic-head-title-size: {{ section_data.heading_title_size | default: 38 }}px;
+    --mosaic-head-title-weight: {{ section_data.heading_title_weight | default: '500' }};
+    {% if section_data.heading_subtitle_color != blank %}--mosaic-head-subtitle-color: {{ section_data.heading_subtitle_color }};{% endif %}
+    --mosaic-head-subtitle-size: {{ section_data.heading_subtitle_size | default: 16 }}px;
+    --mosaic-head-subtitle-weight: {{ section_data.heading_subtitle_weight | default: '400' }};
+  "
 >
   <div class="category-mosaic__head">
     {% if section_data.title != blank %}
@@ -13,21 +20,51 @@
     {% endif %}
   </div>
 
-  <div class="category-mosaic__grid" data-eo-hs-mount>
-    {% if section_data.mosaic_category_ids and section_data.mosaic_category_ids.size > 0 %}
-      {% for id in section_data.mosaic_category_ids %}
-        <div class="eo-hs-skeleton eo-hs-skeleton--category" aria-hidden="true"></div>
+  {% if section_data.tiles and section_data.tiles.size > 0 %}
+    <div class="category-mosaic__grid">
+      {% for tile in section_data.tiles %}
+        <a
+          class="category-mosaic__tile"
+          href="#"
+          {% if tile.category_id != blank %}
+            data-eo-hs-cta="1"
+            data-eo-hs-cta-entity="categories"
+            data-eo-hs-cta-id="{{ tile.category_id }}"
+          {% endif %}
+        >
+          <div class="category-mosaic__visual">
+            {% if tile.image != blank %}
+              <img
+                class="category-mosaic__img"
+                src="{{ tile.image }}"
+                alt="{{ tile.label }}"
+                loading="lazy"
+                width="640"
+                height="800"
+              />
+            {% else %}
+              <div class="category-mosaic__img-fallback" aria-hidden="true"></div>
+            {% endif %}
+            <div class="category-mosaic__shade" aria-hidden="true"></div>
+          </div>
+          <div class="category-mosaic__meta">
+            {% if tile.label != blank %}
+              <span class="category-mosaic__label">{{ tile.label }}</span>
+            {% endif %}
+            {% if tile.tagline != blank %}
+              <span class="category-mosaic__tagline">{{ tile.tagline }}</span>
+            {% endif %}
+          </div>
+        </a>
       {% endfor %}
-    {% else %}
-      <p class="category-mosaic__placeholder">Choose categories in the section settings to build this mosaic.</p>
-    {% endif %}
-  </div>
+    </div>
+  {% endif %}
 </section>
 
 <style>
   .category-mosaic {
     padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 3rem;
-    background: #fff;
+    background: var(--mosaic-section-bg, #fff);
     color: #141218;
   }
   .category-mosaic--tight .category-mosaic__grid {
@@ -41,14 +78,16 @@
   .category-mosaic__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(--mosaic-head-title-weight, 500);
+    font-size: clamp(1.25rem, 3vw, var(--mosaic-head-title-size, 38px));
+    color: var(--mosaic-head-title-color, #141218);
   }
   .category-mosaic__subtitle {
     margin: 0;
-    font-size: 1rem;
+    font-size: var(--mosaic-head-subtitle-size, 16px);
     line-height: 1.6;
-    color: #5c5852;
+    font-weight: var(--mosaic-head-subtitle-weight, 400);
+    color: var(--mosaic-head-subtitle-color, #5c5852);
   }
   .category-mosaic__grid {
     max-width: 1200px;
@@ -57,9 +96,6 @@
     grid-template-columns: repeat(var(--mosaic-cols, 3), minmax(0, 1fr));
     gap: 1.25rem;
   }
-  .category-mosaic__grid.eo-hs-loading {
-    opacity: 0.85;
-  }
   @media (max-width: 899px) {
     .category-mosaic__grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -70,26 +106,7 @@
       grid-template-columns: 1fr;
     }
   }
-  .category-mosaic .eo-hs-skeleton--category {
-    aspect-ratio: 3 / 4;
-    border-radius: 6px;
-    background: linear-gradient(110deg, #ece8e2 8%, #f5f2ee 18%, #ece8e2 33%);
-    background-size: 200% 100%;
-    animation: category-mosaic-shimmer 1.2s ease-in-out infinite;
-  }
-  .category-mosaic__placeholder {
-    grid-column: 1 / -1;
-    margin: 0;
-    padding: 1.25rem;
-    text-align: center;
-    color: #7a7368;
-    font-size: 0.9rem;
-  }
-  .category-mosaic.eo-hs--empty .category-mosaic__grid {
-    display: flex;
-    justify-content: center;
-  }
-  .category-mosaic .eo-hs-card--category {
+  .category-mosaic__tile {
     position: relative;
     display: block;
     text-decoration: none;
@@ -99,57 +116,55 @@
     background: #ece8e1;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }
-  .category-mosaic .eo-hs-card--category:hover {
+  .category-mosaic__tile:hover {
     transform: translateY(-4px);
     box-shadow: 0 22px 50px rgba(20, 18, 24, 0.18);
   }
-  .category-mosaic .eo-hs-card--category .eo-hs-card__media {
-    display: block;
-    aspect-ratio: 3 / 4;
-    background: #ece8e2;
+  .category-mosaic__visual {
+    position: relative;
+    aspect-ratio: 1 / 1;
     overflow: hidden;
   }
-  .category-mosaic .eo-hs-card--category .eo-hs-card__media--empty {
-    min-height: 200px;
-  }
-  .category-mosaic .eo-hs-card--category .eo-hs-card__media img {
+  .category-mosaic__img,
+  .category-mosaic__img-fallback {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.45s ease;
   }
-  .category-mosaic .eo-hs-card--category:hover .eo-hs-card__media img {
+  .category-mosaic__img-fallback {
+    background: linear-gradient(160deg, #d4cec4, #a39a8f);
+  }
+  .category-mosaic__tile:hover .category-mosaic__img {
     transform: scale(1.04);
   }
-  .category-mosaic .eo-hs-card--category .eo-hs-card__body {
+  .category-mosaic__shade {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, rgba(12, 10, 14, 0.72), transparent 55%);
+    pointer-events: none;
+  }
+  .category-mosaic__meta {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 1.25rem 1.1rem 1.1rem;
-    background: linear-gradient(to top, rgba(12, 10, 14, 0.72), transparent 55%);
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    color: #fff;
   }
-  .category-mosaic .eo-hs-card--category .eo-hs-card__title {
+  .category-mosaic__label {
     font-size: 1.05rem;
     font-weight: 600;
     letter-spacing: 0.02em;
-    color: #fff;
-  }
-  .category-mosaic .eo-hs-error {
-    grid-column: 1 / -1;
-    margin: 0;
-    padding: 1rem;
-    text-align: center;
-    font-size: 0.88rem;
-    color: #8b3225;
   }
-  @keyframes category-mosaic-shimmer {
-    0% {
-      background-position: 100% 0;
-    }
-    100% {
-      background-position: -100% 0;
-    }
+  .category-mosaic__tagline {
+    font-size: 0.82rem;
+    opacity: 0.88;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
   }
 </style>