easyorders 0.1.15 → 0.1.16

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

@@ -1,155 +1,170 @@
-<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 }}"
->
-  <div class="category-mosaic__head">
-    {% if section_data.title != blank %}
-      <h2 class="category-mosaic__title">{{ section_data.title }}</h2>
-    {% endif %}
-    {% if section_data.subtitle != blank %}
-      <p class="category-mosaic__subtitle">{{ section_data.subtitle }}</p>
-    {% 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>
-      {% endfor %}
-    {% else %}
-      <p class="category-mosaic__placeholder">Choose categories in the section settings to build this mosaic.</p>
-    {% endif %}
-  </div>
-</section>
-
-<style>
-  .category-mosaic {
-    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 3rem;
-    background: #fff;
-    color: #141218;
-  }
-  .category-mosaic--tight .category-mosaic__grid {
-    gap: 0.75rem;
-  }
-  .category-mosaic__head {
-    max-width: 720px;
-    margin: 0 auto 2rem;
-    text-align: center;
-  }
-  .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);
-  }
-  .category-mosaic__subtitle {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.6;
-    color: #5c5852;
-  }
-  .category-mosaic__grid {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: grid;
-    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));
-    }
-  }
-  @media (max-width: 520px) {
-    .category-mosaic__grid {
-      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 {
-    position: relative;
-    display: block;
-    text-decoration: none;
-    color: inherit;
-    border-radius: 6px;
-    overflow: hidden;
-    background: #ece8e1;
-    transition: transform 0.25s ease, box-shadow 0.25s ease;
-  }
-  .category-mosaic .eo-hs-card--category: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;
-    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 {
-    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 {
-    transform: scale(1.04);
-  }
-  .category-mosaic .eo-hs-card--category .eo-hs-card__body {
-    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%);
-  }
-  .category-mosaic .eo-hs-card--category .eo-hs-card__title {
-    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;
-    }
-  }
-</style>
+<section
+  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 %}
+      <h2 class="category-mosaic__title">{{ section_data.title }}</h2>
+    {% endif %}
+    {% if section_data.subtitle != blank %}
+      <p class="category-mosaic__subtitle">{{ section_data.subtitle }}</p>
+    {% endif %}
+  </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 %}
+    </div>
+  {% endif %}
+</section>
+
+<style>
+  .category-mosaic {
+    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 3rem;
+    background: var(--mosaic-section-bg, #fff);
+    color: #141218;
+  }
+  .category-mosaic--tight .category-mosaic__grid {
+    gap: 0.75rem;
+  }
+  .category-mosaic__head {
+    max-width: 720px;
+    margin: 0 auto 2rem;
+    text-align: center;
+  }
+  .category-mosaic__title {
+    margin: 0 0 0.5rem;
+    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+    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: var(--mosaic-head-subtitle-size, 16px);
+    line-height: 1.6;
+    font-weight: var(--mosaic-head-subtitle-weight, 400);
+    color: var(--mosaic-head-subtitle-color, #5c5852);
+  }
+  .category-mosaic__grid {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(var(--mosaic-cols, 3), minmax(0, 1fr));
+    gap: 1.25rem;
+  }
+  @media (max-width: 899px) {
+    .category-mosaic__grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @media (max-width: 520px) {
+    .category-mosaic__grid {
+      grid-template-columns: 1fr;
+    }
+  }
+  .category-mosaic__tile {
+    position: relative;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    border-radius: 6px;
+    overflow: hidden;
+    background: #ece8e1;
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+  }
+  .category-mosaic__tile:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 22px 50px rgba(20, 18, 24, 0.18);
+  }
+  .category-mosaic__visual {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+  }
+  .category-mosaic__img,
+  .category-mosaic__img-fallback {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.45s ease;
+  }
+  .category-mosaic__img-fallback {
+    background: linear-gradient(160deg, #d4cec4, #a39a8f);
+  }
+  .category-mosaic__tile:hover .category-mosaic__img {
+    transform: scale(1.04);
+  }
+  .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;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    color: #fff;
+  }
+  .category-mosaic__label {
+    font-size: 1.05rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+  .category-mosaic__tagline {
+    font-size: 0.82rem;
+    opacity: 0.88;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+</style>

package/dist/template/theme/home-sections/different-hero/config.json

@@ -0,0 +1,199 @@
+{
+    "icon": "https://files.easy-orders.net/1778106603822306532.png",
+    "label": "Hero (Full width)",
+    "section_schema": [
+      {
+        "name": "image_desktop",
+        "type": "image",
+        "default": "",
+        "description": "صورة الخلفية (ديسكتوب)"
+      },
+      {
+        "name": "image_mobile",
+        "type": "image",
+        "default": "",
+        "description": "صورة الخلفية (موبايل)"
+      },
+      {
+        "name": "overlay_strength",
+        "type": "number",
+        "default": 42,
+        "description": "قوة التعتيم (0 - 100)"
+      },
+      {
+        "name": "height_dt",
+        "type": "number",
+        "default": 70,
+        "description": "طول القسم للديسكتوب (svh) max:100 svh"
+      },
+      {
+        "name": "height_mb",
+        "type": "number",
+        "default": 70,
+        "description": "طول القسم للموبايل (svh) max:100 svh"
+      },
+      {
+        "name": "alignment",
+        "type": "select",
+        "default": "center",
+        "description": "محاذاة المحتوى",
+        "options": [
+          { "label": "في المنتصف", "value": "center" },
+          { "label": "لليسار", "value": "left" },
+          { "label": "لليمين", "value": "right" }
+        ]
+      },
+      {
+        "name": "gap_dt",
+        "type": "number",
+        "default": 24,
+        "description": "المسافة بين العناصر - ديسكتوب (px)"
+      },
+      {
+        "name": "gap_mb",
+        "type": "number",
+        "default": 16,
+        "description": "المسافة بين العناصر - موبايل (px)"
+      },
+      {
+        "name": "kicker",
+        "type": "string",
+        "default": "New season",
+        "description": "الكلمة الصغيرة فوق العنوان"
+      },
+      {
+        "name": "accent_color",
+        "type": "color",
+        "default": "#C9A962",
+        "description": "اللون المميز (للكلمة الصغيرة وخلفية الزرار)"
+      },
+      {
+        "name": "headline",
+        "type": "string",
+        "default": "The spring edit",
+        "description": "العنوان الرئيسي"
+      },
+      {
+        "name": "title_color",
+        "type": "color",
+        "default": "#FAF7F2",
+        "description": "لون العنوان"
+      },
+      {
+        "name": "title_size_dt",
+        "type": "number",
+        "default": 60,
+        "description": "حجم العنوان - ديسكتوب (px)"
+      },
+      {
+        "name": "title_size_mb",
+        "type": "number",
+        "default": 36,
+        "description": "حجم العنوان - موبايل (px)"
+      },
+      {
+        "name": "subheadline",
+        "type": "string",
+        "default": "Silhouettes, textures, and tones curated for everyday luxury.",
+        "description": "الوصف"
+      },
+      {
+        "name": "desc_color",
+        "type": "color",
+        "default": "#FAF7F2",
+        "description": "لون الوصف"
+      },
+      {
+        "name": "desc_size_dt",
+        "type": "number",
+        "default": 18,
+        "description": "حجم الوصف - ديسكتوب (px)"
+      },
+      {
+        "name": "desc_size_mb",
+        "type": "number",
+        "default": 15,
+        "description": "حجم الوصف - موبايل (px)"
+      },
+      {
+        "name": "primary_label",
+        "type": "string",
+        "default": "Shop collection",
+        "description": "نص الزرار"
+      },
+      {
+        "name": "cta_link_type",
+        "type": "select",
+        "default": "category",
+        "description": "نوع لينك الزرار مهم اختار اولا",
+        "options": [
+          { "label": "قسم (Category)", "value": "category" },
+          { "label": "منتج (Product)", "value": "product" }
+        ]
+      },
+      {
+        "name": "cta_category_id",
+        "type": "category_single_select",
+        "description": "اختيار القسم (لو نوع اللينك = قسم)"
+      },
+      {
+        "name": "cta_product_id",
+        "type": "product_single_select",
+        "description": "اختيار المنتج (لو نوع اللينك = منتج)"
+      },
+      {
+        "name": "btn_text_color",
+        "type": "color",
+        "default": "#141218",
+        "description": "لون نص الزرار"
+      },
+      {
+        "name": "btn_size_dt",
+        "type": "number",
+        "default": 14,
+        "description": "حجم خط الزرار - ديسكتوب (px)"
+      },
+      {
+        "name": "btn_size_mb",
+        "type": "number",
+        "default": 13,
+        "description": "حجم خط الزرار - موبايل (px)"
+      },
+      {
+        "name": "btn_show_border",
+        "type": "select",
+        "default": "none",
+        "description": "إظهار حدود للزرار؟",
+        "options": [
+          { "label": "بدون حدود (نص فقط)", "value": "none" },
+          { "label": "بحدود (Solid)", "value": "solid" }
+        ]
+      },
+      {
+        "name": "btn_radius",
+        "type": "number",
+        "default": 99,
+        "description": "استدارة حواف الزرار (px)"
+      },
+      {
+        "name": "enable_animation",
+        "type": "boolean",
+        "default": true,
+        "description": "تشغيل أنيميشن السكشن"
+      },
+      {
+        "name": "animation_style",
+        "type": "select",
+        "default": "fade-up",
+        "description": "شكل الأنيميشن",
+        "options": [
+          { "label": "Fade Up", "value": "fade-up" },
+          { "label": "Zoom In", "value": "zoom-in" },
+          { "label": "Blur Reveal", "value": "blur-reveal" },
+          { "label": "Slide Cascade", "value": "slide-cascade" },
+          { "label": "Fade Right", "value": "fade-right" },
+          { "label": "Flip Up", "value": "flip-up" }
+        ]
+      }
+    ]
+  }