easyorders 0.1.16 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,170 +1,170 @@
1
- <section
2
- class="eo-home-section category-mosaic{% if section_data.gap_tight %} category-mosaic--tight{% endif %}"
3
- style="
4
- --mosaic-cols: {{ section_data.columns | default: '3' }};
5
- {% if section_data.section_background != blank %}--mosaic-section-bg: {{ section_data.section_background }};{% endif %}
6
- {% if section_data.heading_title_color != blank %}--mosaic-head-title-color: {{ section_data.heading_title_color }};{% endif %}
7
- --mosaic-head-title-size: {{ section_data.heading_title_size | default: 38 }}px;
8
- --mosaic-head-title-weight: {{ section_data.heading_title_weight | default: '500' }};
9
- {% if section_data.heading_subtitle_color != blank %}--mosaic-head-subtitle-color: {{ section_data.heading_subtitle_color }};{% endif %}
10
- --mosaic-head-subtitle-size: {{ section_data.heading_subtitle_size | default: 16 }}px;
11
- --mosaic-head-subtitle-weight: {{ section_data.heading_subtitle_weight | default: '400' }};
12
- "
13
- >
14
- <div class="category-mosaic__head">
15
- {% if section_data.title != blank %}
16
- <h2 class="category-mosaic__title">{{ section_data.title }}</h2>
17
- {% endif %}
18
- {% if section_data.subtitle != blank %}
19
- <p class="category-mosaic__subtitle">{{ section_data.subtitle }}</p>
20
- {% endif %}
21
- </div>
22
-
23
- {% if section_data.tiles and section_data.tiles.size > 0 %}
24
- <div class="category-mosaic__grid">
25
- {% for tile in section_data.tiles %}
26
- <a
27
- class="category-mosaic__tile"
28
- href="#"
29
- {% if tile.category_id != blank %}
30
- data-eo-hs-cta="1"
31
- data-eo-hs-cta-entity="categories"
32
- data-eo-hs-cta-id="{{ tile.category_id }}"
33
- {% endif %}
34
- >
35
- <div class="category-mosaic__visual">
36
- {% if tile.image != blank %}
37
- <img
38
- class="category-mosaic__img"
39
- src="{{ tile.image }}"
40
- alt="{{ tile.label }}"
41
- loading="lazy"
42
- width="640"
43
- height="800"
44
- />
45
- {% else %}
46
- <div class="category-mosaic__img-fallback" aria-hidden="true"></div>
47
- {% endif %}
48
- <div class="category-mosaic__shade" aria-hidden="true"></div>
49
- </div>
50
- <div class="category-mosaic__meta">
51
- {% if tile.label != blank %}
52
- <span class="category-mosaic__label">{{ tile.label }}</span>
53
- {% endif %}
54
- {% if tile.tagline != blank %}
55
- <span class="category-mosaic__tagline">{{ tile.tagline }}</span>
56
- {% endif %}
57
- </div>
58
- </a>
59
- {% endfor %}
60
- </div>
61
- {% endif %}
62
- </section>
63
-
64
- <style>
65
- .category-mosaic {
66
- padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 3rem;
67
- background: var(--mosaic-section-bg, #fff);
68
- color: #141218;
69
- }
70
- .category-mosaic--tight .category-mosaic__grid {
71
- gap: 0.75rem;
72
- }
73
- .category-mosaic__head {
74
- max-width: 720px;
75
- margin: 0 auto 2rem;
76
- text-align: center;
77
- }
78
- .category-mosaic__title {
79
- margin: 0 0 0.5rem;
80
- font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
81
- font-weight: var(--mosaic-head-title-weight, 500);
82
- font-size: clamp(1.25rem, 3vw, var(--mosaic-head-title-size, 38px));
83
- color: var(--mosaic-head-title-color, #141218);
84
- }
85
- .category-mosaic__subtitle {
86
- margin: 0;
87
- font-size: var(--mosaic-head-subtitle-size, 16px);
88
- line-height: 1.6;
89
- font-weight: var(--mosaic-head-subtitle-weight, 400);
90
- color: var(--mosaic-head-subtitle-color, #5c5852);
91
- }
92
- .category-mosaic__grid {
93
- max-width: 1200px;
94
- margin: 0 auto;
95
- display: grid;
96
- grid-template-columns: repeat(var(--mosaic-cols, 3), minmax(0, 1fr));
97
- gap: 1.25rem;
98
- }
99
- @media (max-width: 899px) {
100
- .category-mosaic__grid {
101
- grid-template-columns: repeat(2, minmax(0, 1fr));
102
- }
103
- }
104
- @media (max-width: 520px) {
105
- .category-mosaic__grid {
106
- grid-template-columns: 1fr;
107
- }
108
- }
109
- .category-mosaic__tile {
110
- position: relative;
111
- display: block;
112
- text-decoration: none;
113
- color: inherit;
114
- border-radius: 6px;
115
- overflow: hidden;
116
- background: #ece8e1;
117
- transition: transform 0.25s ease, box-shadow 0.25s ease;
118
- }
119
- .category-mosaic__tile:hover {
120
- transform: translateY(-4px);
121
- box-shadow: 0 22px 50px rgba(20, 18, 24, 0.18);
122
- }
123
- .category-mosaic__visual {
124
- position: relative;
125
- aspect-ratio: 1 / 1;
126
- overflow: hidden;
127
- }
128
- .category-mosaic__img,
129
- .category-mosaic__img-fallback {
130
- width: 100%;
131
- height: 100%;
132
- object-fit: cover;
133
- display: block;
134
- transition: transform 0.45s ease;
135
- }
136
- .category-mosaic__img-fallback {
137
- background: linear-gradient(160deg, #d4cec4, #a39a8f);
138
- }
139
- .category-mosaic__tile:hover .category-mosaic__img {
140
- transform: scale(1.04);
141
- }
142
- .category-mosaic__shade {
143
- position: absolute;
144
- inset: 0;
145
- background: linear-gradient(to top, rgba(12, 10, 14, 0.72), transparent 55%);
146
- pointer-events: none;
147
- }
148
- .category-mosaic__meta {
149
- position: absolute;
150
- left: 0;
151
- right: 0;
152
- bottom: 0;
153
- padding: 1.25rem 1.1rem 1.1rem;
154
- display: flex;
155
- flex-direction: column;
156
- gap: 0.2rem;
157
- color: #fff;
158
- }
159
- .category-mosaic__label {
160
- font-size: 1.05rem;
161
- font-weight: 600;
162
- letter-spacing: 0.02em;
163
- }
164
- .category-mosaic__tagline {
165
- font-size: 0.82rem;
166
- opacity: 0.88;
167
- letter-spacing: 0.04em;
168
- text-transform: uppercase;
169
- }
170
- </style>
1
+ <section
2
+ class="eo-home-section category-mosaic{% if section_data.gap_tight %} category-mosaic--tight{% endif %}"
3
+ style="
4
+ --mosaic-cols: {{ section_data.columns | default: '3' }};
5
+ {% if section_data.section_background != blank %}--mosaic-section-bg: {{ section_data.section_background }};{% endif %}
6
+ {% if section_data.heading_title_color != blank %}--mosaic-head-title-color: {{ section_data.heading_title_color }};{% endif %}
7
+ --mosaic-head-title-size: {{ section_data.heading_title_size | default: 38 }}px;
8
+ --mosaic-head-title-weight: {{ section_data.heading_title_weight | default: '500' }};
9
+ {% if section_data.heading_subtitle_color != blank %}--mosaic-head-subtitle-color: {{ section_data.heading_subtitle_color }};{% endif %}
10
+ --mosaic-head-subtitle-size: {{ section_data.heading_subtitle_size | default: 16 }}px;
11
+ --mosaic-head-subtitle-weight: {{ section_data.heading_subtitle_weight | default: '400' }};
12
+ "
13
+ >
14
+ <div class="category-mosaic__head">
15
+ {% if section_data.title != blank %}
16
+ <h2 class="category-mosaic__title">{{ section_data.title }}</h2>
17
+ {% endif %}
18
+ {% if section_data.subtitle != blank %}
19
+ <p class="category-mosaic__subtitle">{{ section_data.subtitle }}</p>
20
+ {% endif %}
21
+ </div>
22
+
23
+ {% if section_data.tiles and section_data.tiles.size > 0 %}
24
+ <div class="category-mosaic__grid">
25
+ {% for tile in section_data.tiles %}
26
+ <a
27
+ class="category-mosaic__tile"
28
+ href="#"
29
+ {% if tile.category_id != blank %}
30
+ data-eo-hs-cta="1"
31
+ data-eo-hs-cta-entity="categories"
32
+ data-eo-hs-cta-id="{{ tile.category_id }}"
33
+ {% endif %}
34
+ >
35
+ <div class="category-mosaic__visual">
36
+ {% if tile.image != blank %}
37
+ <img
38
+ class="category-mosaic__img"
39
+ src="{{ tile.image }}"
40
+ alt="{{ tile.label }}"
41
+ loading="lazy"
42
+ width="640"
43
+ height="800"
44
+ />
45
+ {% else %}
46
+ <div class="category-mosaic__img-fallback" aria-hidden="true"></div>
47
+ {% endif %}
48
+ <div class="category-mosaic__shade" aria-hidden="true"></div>
49
+ </div>
50
+ <div class="category-mosaic__meta">
51
+ {% if tile.label != blank %}
52
+ <span class="category-mosaic__label">{{ tile.label }}</span>
53
+ {% endif %}
54
+ {% if tile.tagline != blank %}
55
+ <span class="category-mosaic__tagline">{{ tile.tagline }}</span>
56
+ {% endif %}
57
+ </div>
58
+ </a>
59
+ {% endfor %}
60
+ </div>
61
+ {% endif %}
62
+ </section>
63
+
64
+ <style>
65
+ .category-mosaic {
66
+ padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 3rem;
67
+ background: var(--mosaic-section-bg, #fff);
68
+ color: #141218;
69
+ }
70
+ .category-mosaic--tight .category-mosaic__grid {
71
+ gap: 0.75rem;
72
+ }
73
+ .category-mosaic__head {
74
+ max-width: 720px;
75
+ margin: 0 auto 2rem;
76
+ text-align: center;
77
+ }
78
+ .category-mosaic__title {
79
+ margin: 0 0 0.5rem;
80
+ font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
81
+ font-weight: var(--mosaic-head-title-weight, 500);
82
+ font-size: clamp(1.25rem, 3vw, var(--mosaic-head-title-size, 38px));
83
+ color: var(--mosaic-head-title-color, #141218);
84
+ }
85
+ .category-mosaic__subtitle {
86
+ margin: 0;
87
+ font-size: var(--mosaic-head-subtitle-size, 16px);
88
+ line-height: 1.6;
89
+ font-weight: var(--mosaic-head-subtitle-weight, 400);
90
+ color: var(--mosaic-head-subtitle-color, #5c5852);
91
+ }
92
+ .category-mosaic__grid {
93
+ max-width: 1200px;
94
+ margin: 0 auto;
95
+ display: grid;
96
+ grid-template-columns: repeat(var(--mosaic-cols, 3), minmax(0, 1fr));
97
+ gap: 1.25rem;
98
+ }
99
+ @media (max-width: 899px) {
100
+ .category-mosaic__grid {
101
+ grid-template-columns: repeat(2, minmax(0, 1fr));
102
+ }
103
+ }
104
+ @media (max-width: 520px) {
105
+ .category-mosaic__grid {
106
+ grid-template-columns: 1fr;
107
+ }
108
+ }
109
+ .category-mosaic__tile {
110
+ position: relative;
111
+ display: block;
112
+ text-decoration: none;
113
+ color: inherit;
114
+ border-radius: 6px;
115
+ overflow: hidden;
116
+ background: #ece8e1;
117
+ transition: transform 0.25s ease, box-shadow 0.25s ease;
118
+ }
119
+ .category-mosaic__tile:hover {
120
+ transform: translateY(-4px);
121
+ box-shadow: 0 22px 50px rgba(20, 18, 24, 0.18);
122
+ }
123
+ .category-mosaic__visual {
124
+ position: relative;
125
+ aspect-ratio: 1 / 1;
126
+ overflow: hidden;
127
+ }
128
+ .category-mosaic__img,
129
+ .category-mosaic__img-fallback {
130
+ width: 100%;
131
+ height: 100%;
132
+ object-fit: cover;
133
+ display: block;
134
+ transition: transform 0.45s ease;
135
+ }
136
+ .category-mosaic__img-fallback {
137
+ background: linear-gradient(160deg, #d4cec4, #a39a8f);
138
+ }
139
+ .category-mosaic__tile:hover .category-mosaic__img {
140
+ transform: scale(1.04);
141
+ }
142
+ .category-mosaic__shade {
143
+ position: absolute;
144
+ inset: 0;
145
+ background: linear-gradient(to top, rgba(12, 10, 14, 0.72), transparent 55%);
146
+ pointer-events: none;
147
+ }
148
+ .category-mosaic__meta {
149
+ position: absolute;
150
+ left: 0;
151
+ right: 0;
152
+ bottom: 0;
153
+ padding: 1.25rem 1.1rem 1.1rem;
154
+ display: flex;
155
+ flex-direction: column;
156
+ gap: 0.2rem;
157
+ color: #fff;
158
+ }
159
+ .category-mosaic__label {
160
+ font-size: 1.05rem;
161
+ font-weight: 600;
162
+ letter-spacing: 0.02em;
163
+ }
164
+ .category-mosaic__tagline {
165
+ font-size: 0.82rem;
166
+ opacity: 0.88;
167
+ letter-spacing: 0.04em;
168
+ text-transform: uppercase;
169
+ }
170
+ </style>
@@ -1,93 +1,93 @@
1
- {
2
- "icon": "https://files.easy-orders.net/1778107613842485243.png",
3
- "label": "Editorial feature",
4
- "section_schema": [
5
- {
6
- "name": "image",
7
- "type": "image",
8
- "default": "",
9
- "description": "Feature image"
10
- },
11
- {
12
- "name": "eyebrow",
13
- "type": "string",
14
- "default": "Inside the atelier",
15
- "description": "Small label above the title"
16
- },
17
- {
18
- "name": "title",
19
- "type": "string",
20
- "default": "Tailoring that moves with you",
21
- "description": "Headline"
22
- },
23
- {
24
- "name": "body",
25
- "type": "string",
26
- "default": "Precision cuts and fluid fabrics—designed for city days and slow evenings. Discover the pieces our stylists reach for first.",
27
- "description": "Body copy"
28
- },
29
- {
30
- "name": "cta_label",
31
- "type": "string",
32
- "default": "Explore the story",
33
- "description": "Link label"
34
- },
35
- {
36
- "name": "cta_page_id",
37
- "type": "page_single_select",
38
- "description": "Simple page the CTA opens (link URL is resolved on the storefront)"
39
- },
40
- {
41
- "name": "image_position",
42
- "type": "select",
43
- "default": "left",
44
- "description": "Image side on desktop",
45
- "options": [
46
- { "label": "Image left", "value": "left" },
47
- { "label": "Image right", "value": "right" }
48
- ]
49
- },
50
- {
51
- "name": "surface",
52
- "type": "select",
53
- "default": "light",
54
- "description": "Color mood",
55
- "options": [
56
- { "label": "Light editorial", "value": "light" },
57
- { "label": "Dark editorial", "value": "dark" }
58
- ]
59
- },
60
- {
61
- "name": "section_background",
62
- "type": "color",
63
- "default": "",
64
- "description": "Section background override (leave empty to use mood preset)"
65
- },
66
- {
67
- "name": "accent_color",
68
- "type": "color",
69
- "default": "#8B7355",
70
- "description": "Eyebrow and link accent"
71
- },
72
- {
73
- "name": "enable_animation",
74
- "type": "boolean",
75
- "default": true,
76
- "description": "Enable section animation"
77
- },
78
- {
79
- "name": "animation_style",
80
- "type": "select",
81
- "default": "fade-up",
82
- "description": "Animation style",
83
- "options": [
84
- { "label": "Fade Up", "value": "fade-up" },
85
- { "label": "Zoom In", "value": "zoom-in" },
86
- { "label": "Blur Reveal", "value": "blur-reveal" },
87
- { "label": "Slide Cascade", "value": "slide-cascade" },
88
- { "label": "Fade Right", "value": "fade-right" },
89
- { "label": "Flip Up", "value": "flip-up" }
90
- ]
91
- }
92
- ]
93
- }
1
+ {
2
+ "icon": "https://files.easy-orders.net/1778107613842485243.png",
3
+ "label": "Editorial feature",
4
+ "section_schema": [
5
+ {
6
+ "name": "image",
7
+ "type": "image",
8
+ "default": "",
9
+ "description": "Feature image"
10
+ },
11
+ {
12
+ "name": "eyebrow",
13
+ "type": "string",
14
+ "default": "Inside the atelier",
15
+ "description": "Small label above the title"
16
+ },
17
+ {
18
+ "name": "title",
19
+ "type": "string",
20
+ "default": "Tailoring that moves with you",
21
+ "description": "Headline"
22
+ },
23
+ {
24
+ "name": "body",
25
+ "type": "string",
26
+ "default": "Precision cuts and fluid fabrics—designed for city days and slow evenings. Discover the pieces our stylists reach for first.",
27
+ "description": "Body copy"
28
+ },
29
+ {
30
+ "name": "cta_label",
31
+ "type": "string",
32
+ "default": "Explore the story",
33
+ "description": "Link label"
34
+ },
35
+ {
36
+ "name": "cta_page_id",
37
+ "type": "page_single_select",
38
+ "description": "Simple page the CTA opens (link URL is resolved on the storefront)"
39
+ },
40
+ {
41
+ "name": "image_position",
42
+ "type": "select",
43
+ "default": "left",
44
+ "description": "Image side on desktop",
45
+ "options": [
46
+ { "label": "Image left", "value": "left" },
47
+ { "label": "Image right", "value": "right" }
48
+ ]
49
+ },
50
+ {
51
+ "name": "surface",
52
+ "type": "select",
53
+ "default": "light",
54
+ "description": "Color mood",
55
+ "options": [
56
+ { "label": "Light editorial", "value": "light" },
57
+ { "label": "Dark editorial", "value": "dark" }
58
+ ]
59
+ },
60
+ {
61
+ "name": "section_background",
62
+ "type": "color",
63
+ "default": "",
64
+ "description": "Section background override (leave empty to use mood preset)"
65
+ },
66
+ {
67
+ "name": "accent_color",
68
+ "type": "color",
69
+ "default": "#8B7355",
70
+ "description": "Eyebrow and link accent"
71
+ },
72
+ {
73
+ "name": "enable_animation",
74
+ "type": "boolean",
75
+ "default": true,
76
+ "description": "Enable section animation"
77
+ },
78
+ {
79
+ "name": "animation_style",
80
+ "type": "select",
81
+ "default": "fade-up",
82
+ "description": "Animation style",
83
+ "options": [
84
+ { "label": "Fade Up", "value": "fade-up" },
85
+ { "label": "Zoom In", "value": "zoom-in" },
86
+ { "label": "Blur Reveal", "value": "blur-reveal" },
87
+ { "label": "Slide Cascade", "value": "slide-cascade" },
88
+ { "label": "Fade Right", "value": "fade-right" },
89
+ { "label": "Flip Up", "value": "flip-up" }
90
+ ]
91
+ }
92
+ ]
93
+ }