@o2vend/theme-cli 1.0.36 → 1.0.38
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.
- package/README.md +4 -0
- package/lib/lib/dev-server.js +344 -48
- package/lib/lib/liquid-engine.js +3 -1
- package/lib/lib/mock-data.js +473 -119
- package/lib/lib/widget-service.js +12 -4
- package/package.json +2 -2
- package/test-theme/assets/async-sections.js +32 -24
- package/test-theme/assets/cart-drawer.js +20 -22
- package/test-theme/assets/cart-manager.js +1 -15
- package/test-theme/assets/checkout-price-handler.js +12 -11
- package/test-theme/assets/checkout.css +1415 -0
- package/test-theme/assets/checkout.js +3174 -0
- package/test-theme/assets/components.css +178 -29
- package/test-theme/assets/delivery-zone.js +1 -1
- package/test-theme/assets/product-detail.css +1050 -0
- package/test-theme/assets/product-detail.js +2940 -0
- package/test-theme/assets/theme.css +95 -120
- package/test-theme/assets/theme.js +781 -186
- package/test-theme/layout/theme.liquid +91 -17
- package/test-theme/sections/content.liquid +64 -57
- package/test-theme/sections/footer-fallback.liquid +57 -7
- package/test-theme/sections/footer.liquid +63 -12
- package/test-theme/sections/header-fallback.liquid +41 -41
- package/test-theme/sections/header.liquid +41 -51
- package/test-theme/sections/hero-fallback.liquid +1 -1
- package/test-theme/sections/hero.liquid +159 -136
- package/test-theme/snippets/account-sidebar.liquid +121 -29
- package/test-theme/snippets/add-to-cart-modal.liquid +258 -206
- package/test-theme/snippets/breadcrumbs.liquid +98 -11
- package/test-theme/snippets/cart-drawer.liquid +93 -0
- package/test-theme/snippets/delivery-zone-city-selector.liquid +101 -15
- package/test-theme/snippets/delivery-zone-modal.liquid +529 -84
- package/test-theme/snippets/delivery-zone-search.liquid +104 -18
- package/test-theme/snippets/login-modal.liquid +269 -82
- package/test-theme/snippets/mega-menu.liquid +130 -43
- package/test-theme/snippets/news-thumbnail.liquid +120 -28
- package/test-theme/snippets/pagination.liquid +1 -1
- package/test-theme/snippets/price.liquid +100 -9
- package/test-theme/snippets/product-card-related.liquid +22 -4
- package/test-theme/snippets/product-card-simple.liquid +521 -25
- package/test-theme/snippets/product-card.liquid +145 -232
- package/test-theme/snippets/rating.liquid +100 -9
- package/test-theme/snippets/skeleton-collection-grid.liquid +94 -8
- package/test-theme/snippets/skeleton-product-card.liquid +102 -16
- package/test-theme/snippets/skeleton-product-grid.liquid +87 -1
- package/test-theme/snippets/social-sharing.liquid +133 -32
- package/test-theme/templates/account/dashboard.liquid +30 -0
- package/test-theme/templates/account/loyalty-redemption.liquid +29 -28
- package/test-theme/templates/account/loyalty.liquid +45 -43
- package/test-theme/templates/account/order-detail.liquid +15 -8
- package/test-theme/templates/account/orders.liquid +189 -35
- package/test-theme/templates/account/profile.liquid +509 -114
- package/test-theme/templates/account/register.liquid +18 -8
- package/test-theme/templates/account/return-orders.liquid +31 -30
- package/test-theme/templates/account/store-credit.liquid +27 -26
- package/test-theme/templates/account/subscriptions.liquid +22 -5
- package/test-theme/templates/account/wishlist.liquid +88 -19
- package/test-theme/templates/address-book.liquid +166 -69
- package/test-theme/templates/categories.liquid +90 -30
- package/test-theme/templates/checkout.liquid +137 -3834
- package/test-theme/templates/error.liquid +23 -21
- package/test-theme/templates/index.liquid +29 -0
- package/test-theme/templates/login.liquid +33 -6
- package/test-theme/templates/order-confirmation.liquid +67 -9
- package/test-theme/templates/page.liquid +418 -206
- package/test-theme/templates/product-detail.liquid +124 -3878
- package/test-theme/templates/products.liquid +155 -30
- package/test-theme/templates/search.liquid +739 -225
- package/test-theme/widgets/brand-carousel.liquid +102 -82
- package/test-theme/widgets/brand.liquid +78 -50
- package/test-theme/widgets/carousel.liquid +253 -121
- package/test-theme/widgets/category-list-carousel.liquid +32 -8
- package/test-theme/widgets/category-list.liquid +21 -6
- package/test-theme/widgets/category.liquid +104 -37
- package/test-theme/widgets/discount-time.liquid +326 -119
- package/test-theme/widgets/footer-menu.liquid +115 -23
- package/test-theme/widgets/footer.liquid +118 -5
- package/test-theme/widgets/gallery.liquid +29 -5
- package/test-theme/widgets/header-menu.liquid +25 -13
- package/test-theme/widgets/header.liquid +64 -26
- package/test-theme/widgets/html.liquid +29 -6
- package/test-theme/widgets/news.liquid +6 -0
- package/test-theme/widgets/product-canvas.liquid +20 -12
- package/test-theme/widgets/product-carousel.liquid +118 -56
- package/test-theme/widgets/shared/product-grid.liquid +12 -0
- package/test-theme/widgets/single-product.liquid +688 -250
- package/test-theme/widgets/spacebar-carousel.liquid +39 -10
- package/test-theme/widgets/spacebar.liquid +77 -6
- package/test-theme/widgets/splash.liquid +40 -30
- package/test-theme/widgets/testimonial-carousel.liquid +111 -67
|
@@ -216,13 +216,13 @@
|
|
|
216
216
|
|
|
217
217
|
<style>
|
|
218
218
|
.site-header__fallback {
|
|
219
|
-
background: var(--color-background, {{ settings.color_background }});
|
|
219
|
+
background: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
|
|
220
220
|
border-bottom: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
|
|
221
221
|
position: relative;
|
|
222
222
|
overflow: visible;
|
|
223
223
|
}
|
|
224
224
|
.site-header__fallback-inner {
|
|
225
|
-
max-width: var(--container-width, {{ settings.container_width }}px);
|
|
225
|
+
max-width: var(--container-width, {{ settings.container_width | default: 1200 }}px);
|
|
226
226
|
margin: 0 auto;
|
|
227
227
|
padding: var(--spacing-element, 0.85rem) var(--spacing-component, 1.25rem);
|
|
228
228
|
display: flex;
|
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
.site-header__actions a,
|
|
242
242
|
.site-header__actions button {
|
|
243
243
|
text-decoration: none;
|
|
244
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
244
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
245
245
|
font-weight: var(--font-weight-normal, 400);
|
|
246
246
|
background: none;
|
|
247
247
|
border: none;
|
|
@@ -276,8 +276,8 @@
|
|
|
276
276
|
min-width: 18px;
|
|
277
277
|
height: 18px;
|
|
278
278
|
padding: 0 var(--spacing-element, 5px);
|
|
279
|
-
background: var(--color-text, {{ settings.color_text }});
|
|
280
|
-
color: var(--color-background, {{ settings.color_background }});
|
|
279
|
+
background: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
280
|
+
color: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
|
|
281
281
|
border-radius: var(--border-radius-medium, 9px);
|
|
282
282
|
font-size: var(--text-xs, 0.75rem);
|
|
283
283
|
font-weight: var(--font-weight-bold, 600);
|
|
@@ -315,7 +315,7 @@
|
|
|
315
315
|
.site-header__logo-text {
|
|
316
316
|
font-size: var(--text-xl, 1.25rem);
|
|
317
317
|
font-weight: var(--font-weight-bold, 600);
|
|
318
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
318
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
319
319
|
}
|
|
320
320
|
|
|
321
321
|
/* Desktop Search Container */
|
|
@@ -341,7 +341,7 @@
|
|
|
341
341
|
.site-header__search-icon {
|
|
342
342
|
position: absolute;
|
|
343
343
|
left: 1rem;
|
|
344
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
344
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
345
345
|
opacity: 0.5;
|
|
346
346
|
pointer-events: none;
|
|
347
347
|
z-index: 1;
|
|
@@ -353,8 +353,8 @@
|
|
|
353
353
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
354
354
|
border-radius: 8px;
|
|
355
355
|
font-size: 1rem;
|
|
356
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
357
|
-
background: var(--color-background, {{ settings.color_background }});
|
|
356
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
357
|
+
background: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
|
|
358
358
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
359
359
|
font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
360
360
|
}
|
|
@@ -379,7 +379,7 @@
|
|
|
379
379
|
justify-content: center;
|
|
380
380
|
border: none;
|
|
381
381
|
background: transparent;
|
|
382
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
382
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
383
383
|
opacity: 0.5;
|
|
384
384
|
cursor: pointer;
|
|
385
385
|
padding: 0;
|
|
@@ -430,7 +430,7 @@
|
|
|
430
430
|
justify-content: center;
|
|
431
431
|
gap: 0.75rem;
|
|
432
432
|
padding: 2rem;
|
|
433
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
433
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
434
434
|
opacity: 0.6;
|
|
435
435
|
}
|
|
436
436
|
|
|
@@ -457,7 +457,7 @@
|
|
|
457
457
|
gap: 1rem;
|
|
458
458
|
padding: 0.75rem 1rem;
|
|
459
459
|
text-decoration: none;
|
|
460
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
460
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
461
461
|
transition: background-color 0.2s ease;
|
|
462
462
|
cursor: pointer;
|
|
463
463
|
}
|
|
@@ -484,7 +484,7 @@
|
|
|
484
484
|
font-weight: 600;
|
|
485
485
|
font-size: 0.9375rem;
|
|
486
486
|
margin: 0 0 0.25rem 0;
|
|
487
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
487
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
488
488
|
white-space: nowrap;
|
|
489
489
|
overflow: hidden;
|
|
490
490
|
text-overflow: ellipsis;
|
|
@@ -560,7 +560,7 @@
|
|
|
560
560
|
gap: var(--spacing-element, 0.375rem);
|
|
561
561
|
padding: var(--spacing-element, 0.75rem) var(--spacing-element, 1rem);
|
|
562
562
|
text-decoration: none;
|
|
563
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
563
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
564
564
|
font-weight: var(--font-weight-normal, 400);
|
|
565
565
|
font-size: var(--text-xl, 2rem);
|
|
566
566
|
letter-spacing: var(--letter-spacing-heading, 0);
|
|
@@ -592,7 +592,7 @@
|
|
|
592
592
|
|
|
593
593
|
.mobile-header-wrapper {
|
|
594
594
|
display: block;
|
|
595
|
-
background: var(--color-background, {{ settings.color_background }});
|
|
595
|
+
background: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
|
|
596
596
|
border-bottom: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
|
|
597
597
|
}
|
|
598
598
|
|
|
@@ -614,7 +614,7 @@
|
|
|
614
614
|
border: none;
|
|
615
615
|
cursor: pointer;
|
|
616
616
|
padding: 0;
|
|
617
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
617
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
618
618
|
border-radius: var(--border-radius-small, 0);
|
|
619
619
|
transition: background-color var(--transition-fast, 0.2s) var(--ease-out, ease);
|
|
620
620
|
flex-shrink: 0;
|
|
@@ -676,7 +676,7 @@
|
|
|
676
676
|
.mobile-header__logo-text {
|
|
677
677
|
font-size: var(--text-lg, 1.125rem);
|
|
678
678
|
font-weight: var(--font-weight-bold, 600);
|
|
679
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
679
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
680
680
|
white-space: nowrap;
|
|
681
681
|
overflow: hidden;
|
|
682
682
|
text-overflow: ellipsis;
|
|
@@ -699,7 +699,7 @@
|
|
|
699
699
|
border: none;
|
|
700
700
|
cursor: pointer;
|
|
701
701
|
padding: 0;
|
|
702
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
702
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
703
703
|
border-radius: var(--border-radius-small, 0);
|
|
704
704
|
transition: background-color var(--transition-fast, 0.2s) var(--ease-out, ease);
|
|
705
705
|
}
|
|
@@ -723,8 +723,8 @@
|
|
|
723
723
|
min-width: 18px;
|
|
724
724
|
height: 18px;
|
|
725
725
|
padding: 0 var(--spacing-element, 5px);
|
|
726
|
-
background: var(--color-text, {{ settings.color_text }});
|
|
727
|
-
color: var(--color-background, {{ settings.color_background }});
|
|
726
|
+
background: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
727
|
+
color: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
|
|
728
728
|
border-radius: var(--border-radius-medium, 9px);
|
|
729
729
|
font-size: var(--text-xs, 0.75rem);
|
|
730
730
|
font-weight: var(--font-weight-bold, 600);
|
|
@@ -770,8 +770,8 @@
|
|
|
770
770
|
border-radius: var(--border-radius-medium, 8px);
|
|
771
771
|
font-size: var(--text-base, 0.875rem);
|
|
772
772
|
font-family: var(--font-primary, var(--font-body));
|
|
773
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
774
|
-
background-color: var(--color-background, {{ settings.color_background }});
|
|
773
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
774
|
+
background-color: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
|
|
775
775
|
min-height: 44px;
|
|
776
776
|
transition: border-color var(--transition-fast, 0.2s) var(--ease-out, ease);
|
|
777
777
|
}
|
|
@@ -813,7 +813,7 @@
|
|
|
813
813
|
max-width: 85vw;
|
|
814
814
|
height: 100vh;
|
|
815
815
|
max-height: 100vh;
|
|
816
|
-
background-color: var(--color-background, {{ settings.color_background }});
|
|
816
|
+
background-color: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
|
|
817
817
|
padding: var(--spacing-component, 1.5rem);
|
|
818
818
|
overflow-y: auto;
|
|
819
819
|
overflow-x: hidden;
|
|
@@ -843,7 +843,7 @@
|
|
|
843
843
|
.mobile-nav-drawer-title {
|
|
844
844
|
font-size: var(--text-lg, 1.125rem);
|
|
845
845
|
font-weight: var(--font-weight-bold, 600);
|
|
846
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
846
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
847
847
|
margin: 0;
|
|
848
848
|
}
|
|
849
849
|
|
|
@@ -855,7 +855,7 @@
|
|
|
855
855
|
height: 40px;
|
|
856
856
|
background: none;
|
|
857
857
|
border: none;
|
|
858
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
858
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
859
859
|
cursor: pointer;
|
|
860
860
|
border-radius: var(--border-radius-small, 0);
|
|
861
861
|
transition: background-color var(--transition-fast, 0.2s) var(--ease-out, ease);
|
|
@@ -885,7 +885,7 @@
|
|
|
885
885
|
.mobile-nav-drawer-link {
|
|
886
886
|
display: block;
|
|
887
887
|
padding: var(--spacing-component, 1rem) 0;
|
|
888
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
888
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
889
889
|
text-decoration: none;
|
|
890
890
|
font-weight: var(--font-weight-medium, 500);
|
|
891
891
|
font-size: var(--text-base, 1rem);
|
|
@@ -935,7 +935,7 @@
|
|
|
935
935
|
.mobile-nav-drawer-nav .site-header__menu-link {
|
|
936
936
|
display: block;
|
|
937
937
|
padding: var(--spacing-component, 1rem) 0;
|
|
938
|
-
color: var(--color-text, {{ settings.color_text }});
|
|
938
|
+
color: var(--color-text, {{ settings.color_text | default: '#000000' }});
|
|
939
939
|
text-decoration: none;
|
|
940
940
|
font-weight: var(--font-weight-medium, 500);
|
|
941
941
|
font-size: var(--text-base, 1rem);
|
|
@@ -1267,7 +1267,7 @@
|
|
|
1267
1267
|
</div>
|
|
1268
1268
|
|
|
1269
1269
|
<script>
|
|
1270
|
-
document.addEventListener('DOMContentLoaded',
|
|
1270
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
1271
1271
|
const menuToggle = document.querySelector('[data-mobile-menu-toggle]');
|
|
1272
1272
|
const menuClose = document.querySelector('[data-mobile-menu-close]');
|
|
1273
1273
|
const drawer = document.getElementById('mobile-nav-drawer');
|
|
@@ -1294,7 +1294,7 @@
|
|
|
1294
1294
|
}
|
|
1295
1295
|
|
|
1296
1296
|
if (menuToggle) {
|
|
1297
|
-
menuToggle.addEventListener('click',
|
|
1297
|
+
menuToggle.addEventListener('click', (e) => {
|
|
1298
1298
|
e.preventDefault();
|
|
1299
1299
|
e.stopPropagation();
|
|
1300
1300
|
if (drawer && drawer.classList.contains('active')) {
|
|
@@ -1306,7 +1306,7 @@
|
|
|
1306
1306
|
}
|
|
1307
1307
|
|
|
1308
1308
|
if (menuClose) {
|
|
1309
|
-
menuClose.addEventListener('click',
|
|
1309
|
+
menuClose.addEventListener('click', (e) => {
|
|
1310
1310
|
e.preventDefault();
|
|
1311
1311
|
e.stopPropagation();
|
|
1312
1312
|
closeMenu();
|
|
@@ -1314,13 +1314,13 @@
|
|
|
1314
1314
|
}
|
|
1315
1315
|
|
|
1316
1316
|
if (drawer) {
|
|
1317
|
-
drawer.addEventListener('click',
|
|
1317
|
+
drawer.addEventListener('click', (e) => {
|
|
1318
1318
|
if (e.target === drawer) {
|
|
1319
1319
|
closeMenu();
|
|
1320
1320
|
}
|
|
1321
1321
|
});
|
|
1322
1322
|
|
|
1323
|
-
document.addEventListener('keydown',
|
|
1323
|
+
document.addEventListener('keydown', (e) => {
|
|
1324
1324
|
if (e.key === 'Escape' && drawer.classList.contains('active')) {
|
|
1325
1325
|
closeMenu();
|
|
1326
1326
|
}
|
|
@@ -1481,21 +1481,21 @@
|
|
|
1481
1481
|
}
|
|
1482
1482
|
|
|
1483
1483
|
if (searchToggle) {
|
|
1484
|
-
searchToggle.addEventListener('click',
|
|
1484
|
+
searchToggle.addEventListener('click', (e) => {
|
|
1485
1485
|
e.preventDefault();
|
|
1486
1486
|
openSearch();
|
|
1487
1487
|
});
|
|
1488
1488
|
}
|
|
1489
1489
|
|
|
1490
1490
|
if (searchClose) {
|
|
1491
|
-
searchClose.addEventListener('click',
|
|
1491
|
+
searchClose.addEventListener('click', (e) => {
|
|
1492
1492
|
e.preventDefault();
|
|
1493
1493
|
closeSearch();
|
|
1494
1494
|
});
|
|
1495
1495
|
}
|
|
1496
1496
|
|
|
1497
1497
|
if (searchOverlay) {
|
|
1498
|
-
searchOverlay.addEventListener('click',
|
|
1498
|
+
searchOverlay.addEventListener('click', (e) => {
|
|
1499
1499
|
if (e.target === searchOverlay) {
|
|
1500
1500
|
closeSearch();
|
|
1501
1501
|
}
|
|
@@ -1503,7 +1503,7 @@
|
|
|
1503
1503
|
}
|
|
1504
1504
|
|
|
1505
1505
|
if (searchInput) {
|
|
1506
|
-
searchInput.addEventListener('input',
|
|
1506
|
+
searchInput.addEventListener('input', (e) => {
|
|
1507
1507
|
const query = e.target.value.trim();
|
|
1508
1508
|
clearTimeout(searchTimeout);
|
|
1509
1509
|
searchTimeout = setTimeout(() => {
|
|
@@ -1511,7 +1511,7 @@
|
|
|
1511
1511
|
}, 300);
|
|
1512
1512
|
});
|
|
1513
1513
|
|
|
1514
|
-
searchInput.addEventListener('keydown',
|
|
1514
|
+
searchInput.addEventListener('keydown', (e) => {
|
|
1515
1515
|
if (e.key === 'Escape') {
|
|
1516
1516
|
closeSearch();
|
|
1517
1517
|
}
|
|
@@ -1519,7 +1519,7 @@
|
|
|
1519
1519
|
}
|
|
1520
1520
|
|
|
1521
1521
|
if (mobileSearchInput) {
|
|
1522
|
-
mobileSearchInput.addEventListener('input',
|
|
1522
|
+
mobileSearchInput.addEventListener('input', (e) => {
|
|
1523
1523
|
const query = e.target.value.trim();
|
|
1524
1524
|
if (query.length > 0 && searchOverlay && !searchOverlay.classList.contains('active')) {
|
|
1525
1525
|
openSearch();
|
|
@@ -1540,7 +1540,7 @@
|
|
|
1540
1540
|
|
|
1541
1541
|
if (searchForms && searchForms.length > 0) {
|
|
1542
1542
|
searchForms.forEach(form => {
|
|
1543
|
-
form.addEventListener('submit',
|
|
1543
|
+
form.addEventListener('submit', (e) => {
|
|
1544
1544
|
e.preventDefault();
|
|
1545
1545
|
const input = form.querySelector('[data-search-input], input[type="search"], input[name="q"]');
|
|
1546
1546
|
if (input && input.value.trim()) {
|
|
@@ -1554,7 +1554,7 @@
|
|
|
1554
1554
|
});
|
|
1555
1555
|
}
|
|
1556
1556
|
|
|
1557
|
-
document.addEventListener('keydown',
|
|
1557
|
+
document.addEventListener('keydown', (e) => {
|
|
1558
1558
|
if (e.key === 'Escape' && searchOverlay && searchOverlay.classList.contains('active')) {
|
|
1559
1559
|
closeSearch();
|
|
1560
1560
|
}
|
|
@@ -1577,7 +1577,7 @@
|
|
|
1577
1577
|
|
|
1578
1578
|
// Debounce function
|
|
1579
1579
|
function debounce(func, wait) {
|
|
1580
|
-
return
|
|
1580
|
+
return (...args) => {
|
|
1581
1581
|
clearTimeout(searchTimeout);
|
|
1582
1582
|
searchTimeout = setTimeout(() => func.apply(this, args), wait);
|
|
1583
1583
|
};
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
{% liquid
|
|
25
25
|
assign widget_settings = header_menu_widget.settings | default: section.settings
|
|
26
26
|
assign widget_data = header_menu_widget.data | default: null
|
|
27
|
-
|
|
27
|
+
|
|
28
28
|
assign content_data = widget_data.content | default: null
|
|
29
29
|
if content_data and content_data.size > 0
|
|
30
30
|
assign header_config = content_data.first
|
|
@@ -33,7 +33,9 @@
|
|
|
33
33
|
endif
|
|
34
34
|
|
|
35
35
|
assign logo_url = nil
|
|
36
|
-
if
|
|
36
|
+
if settings.logo and settings.logo != blank
|
|
37
|
+
assign logo_url = settings.logo
|
|
38
|
+
elsif widget_settings.logo and widget_settings.logo != blank
|
|
37
39
|
assign logo_url = widget_settings.logo
|
|
38
40
|
elsif shop.logo and shop.logo != blank
|
|
39
41
|
assign logo_url = shop.logo
|
|
@@ -59,13 +61,7 @@
|
|
|
59
61
|
assign show_cart = true
|
|
60
62
|
endif
|
|
61
63
|
|
|
62
|
-
assign show_account =
|
|
63
|
-
if show_account == nil and header_config and header_config.ShowAccount != nil
|
|
64
|
-
assign show_account = header_config.ShowAccount
|
|
65
|
-
endif
|
|
66
|
-
if show_account == nil
|
|
67
|
-
assign show_account = true
|
|
68
|
-
endif
|
|
64
|
+
assign show_account = true
|
|
69
65
|
%}
|
|
70
66
|
|
|
71
67
|
<header class="site-header" data-section-id="{{ section.id }}">
|
|
@@ -81,7 +77,7 @@
|
|
|
81
77
|
data-widget-type="{{ widget.type }}"
|
|
82
78
|
data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
|
|
83
79
|
{% if widget and widget.template_path %}
|
|
84
|
-
{% render widget.template_path, widget: widget, settings: settings %}
|
|
80
|
+
{% render widget.template_path, widget: widget, settings: settings, shop: shop %}
|
|
85
81
|
{% else %}
|
|
86
82
|
<div class="widget-error" data-widget-error>
|
|
87
83
|
<p>Widget template not found: {{ widget.template_path | default: 'unknown' }}</p>
|
|
@@ -117,7 +113,7 @@
|
|
|
117
113
|
<div class="site-header__search-container" data-search-container>
|
|
118
114
|
<form class="site-header__search-form" action="/search" method="get" role="search">
|
|
119
115
|
<div class="site-header__search-input-wrapper">
|
|
120
|
-
<svg class="site-header__search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
116
|
+
<svg class="site-header__search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
121
117
|
<circle cx="11" cy="11" r="8"></circle>
|
|
122
118
|
<path d="m21 21-4.35-4.35"></path>
|
|
123
119
|
</svg>
|
|
@@ -130,7 +126,7 @@
|
|
|
130
126
|
autocomplete="off"
|
|
131
127
|
data-search-input>
|
|
132
128
|
<button type="button" class="site-header__search-clear" aria-label="Clear search" data-search-clear style="display: none;">
|
|
133
|
-
<svg class="site-header__search-clear-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
129
|
+
<svg class="site-header__search-clear-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
134
130
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
135
131
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
136
132
|
</svg>
|
|
@@ -152,37 +148,29 @@
|
|
|
152
148
|
</div>
|
|
153
149
|
|
|
154
150
|
<div class="site-header__actions">
|
|
155
|
-
{% if show_account %}
|
|
156
|
-
|
|
151
|
+
{% if show_account == true %}
|
|
152
|
+
<a href="/account" class="site-header__action site-header__action--account" aria-label="Account">
|
|
153
|
+
<svg class="site-header__account-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
154
|
+
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
155
|
+
<circle cx="12" cy="7" r="4"></circle>
|
|
156
|
+
</svg>
|
|
157
|
+
</a>
|
|
157
158
|
{% if customer and customer.isAuthenticated %}
|
|
158
|
-
<a href="/account" class="site-header__action site-header__action--account" aria-label="Account">
|
|
159
|
-
<svg class="site-header__account-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
160
|
-
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
161
|
-
<circle cx="12" cy="7" r="4"></circle>
|
|
162
|
-
</svg>
|
|
163
|
-
</a>
|
|
164
159
|
<form method="post" action="/webstoreapi/customer/logout" class="site-header__logout-form">
|
|
165
160
|
<button type="submit" class="site-header__action site-header__action--logout" aria-label="Logout">
|
|
166
|
-
<svg class="site-header__logout-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
161
|
+
<svg class="site-header__logout-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
167
162
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
|
168
163
|
<polyline points="16 17 21 12 16 7"></polyline>
|
|
169
164
|
<line x1="21" y1="12" x2="9" y2="12"></line>
|
|
170
165
|
</svg>
|
|
171
166
|
</button>
|
|
172
167
|
</form>
|
|
173
|
-
{% else %}
|
|
174
|
-
<a href="#" class="site-header__action site-header__action--login" aria-label="Login" data-login-modal-trigger>
|
|
175
|
-
<svg class="site-header__login-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
176
|
-
<circle cx="12" cy="8" r="4"></circle>
|
|
177
|
-
<path d="M6 20a6 6 0 0 1 12 0"></path>
|
|
178
|
-
</svg>
|
|
179
|
-
</a>
|
|
180
168
|
{% endif %}
|
|
181
169
|
{% endif %}
|
|
182
170
|
|
|
183
171
|
{% if show_cart %}
|
|
184
172
|
<button class="site-header__action site-header__action--cart" aria-label="Shopping cart" data-cart-toggle type="button">
|
|
185
|
-
<svg class="site-header__cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
173
|
+
<svg class="site-header__cart-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
186
174
|
<circle cx="9" cy="21" r="1"></circle>
|
|
187
175
|
<circle cx="20" cy="21" r="1"></circle>
|
|
188
176
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
@@ -200,7 +188,7 @@
|
|
|
200
188
|
<div class="site-header__mobile-search">
|
|
201
189
|
<form class="site-header__mobile-search-form" action="/search" method="get" role="search">
|
|
202
190
|
<div class="site-header__mobile-search-input-wrapper">
|
|
203
|
-
<svg class="site-header__mobile-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
191
|
+
<svg class="site-header__mobile-search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
204
192
|
<circle cx="11" cy="11" r="8"></circle>
|
|
205
193
|
<path d="m21 21-4.35-4.35"></path>
|
|
206
194
|
</svg>
|
|
@@ -235,7 +223,7 @@
|
|
|
235
223
|
data-widget-id="{{ header_menu_widget.id }}"
|
|
236
224
|
data-widget-type="{{ header_menu_widget.type }}">
|
|
237
225
|
{% if header_menu_widget and header_menu_widget.template_path %}
|
|
238
|
-
{% render header_menu_widget.template_path, widget: header_menu_widget, settings: settings %}
|
|
226
|
+
{% render header_menu_widget.template_path, widget: header_menu_widget, settings: settings, shop: shop %}
|
|
239
227
|
{% else %}
|
|
240
228
|
<div class="widget-error">
|
|
241
229
|
<p>Widget template not found</p>
|
|
@@ -791,7 +779,7 @@
|
|
|
791
779
|
</style>
|
|
792
780
|
|
|
793
781
|
<script>
|
|
794
|
-
document.addEventListener('DOMContentLoaded',
|
|
782
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
795
783
|
// Desktop Search
|
|
796
784
|
const searchContainer = document.querySelector('[data-search-container]');
|
|
797
785
|
if (searchContainer) {
|
|
@@ -805,8 +793,8 @@
|
|
|
805
793
|
let searchTimeout;
|
|
806
794
|
|
|
807
795
|
if (searchInput) {
|
|
808
|
-
searchInput.addEventListener('input',
|
|
809
|
-
const query =
|
|
796
|
+
searchInput.addEventListener('input', () => {
|
|
797
|
+
const query = searchInput.value.trim();
|
|
810
798
|
|
|
811
799
|
if (searchClear) {
|
|
812
800
|
searchClear.style.display = query ? 'flex' : 'none';
|
|
@@ -822,7 +810,7 @@
|
|
|
822
810
|
}
|
|
823
811
|
|
|
824
812
|
if (searchClear) {
|
|
825
|
-
searchClear.addEventListener('click',
|
|
813
|
+
searchClear.addEventListener('click', () => {
|
|
826
814
|
searchInput.value = '';
|
|
827
815
|
searchClear.style.display = 'none';
|
|
828
816
|
searchDropdown.style.display = 'none';
|
|
@@ -884,7 +872,7 @@
|
|
|
884
872
|
return div.innerHTML;
|
|
885
873
|
}
|
|
886
874
|
|
|
887
|
-
document.addEventListener('click',
|
|
875
|
+
document.addEventListener('click', (e) => {
|
|
888
876
|
if (searchContainer && !searchContainer.contains(e.target)) {
|
|
889
877
|
searchDropdown.style.display = 'none';
|
|
890
878
|
}
|
|
@@ -904,8 +892,8 @@
|
|
|
904
892
|
let mobileSearchTimeout;
|
|
905
893
|
|
|
906
894
|
if (mobileSearchInput) {
|
|
907
|
-
mobileSearchInput.addEventListener('input',
|
|
908
|
-
const query =
|
|
895
|
+
mobileSearchInput.addEventListener('input', () => {
|
|
896
|
+
const query = mobileSearchInput.value.trim();
|
|
909
897
|
|
|
910
898
|
if (query.length >= 2) {
|
|
911
899
|
clearTimeout(mobileSearchTimeout);
|
|
@@ -917,7 +905,7 @@
|
|
|
917
905
|
}
|
|
918
906
|
|
|
919
907
|
if (mobileSearchForm) {
|
|
920
|
-
mobileSearchForm.addEventListener('submit',
|
|
908
|
+
mobileSearchForm.addEventListener('submit', (e) => {
|
|
921
909
|
const query = mobileSearchInput.value.trim();
|
|
922
910
|
if (!query || query.length < 2) {
|
|
923
911
|
e.preventDefault();
|
|
@@ -979,7 +967,7 @@
|
|
|
979
967
|
return div.innerHTML;
|
|
980
968
|
}
|
|
981
969
|
|
|
982
|
-
document.addEventListener('click',
|
|
970
|
+
document.addEventListener('click', (e) => {
|
|
983
971
|
if (mobileSearch && !mobileSearch.contains(e.target)) {
|
|
984
972
|
mobileSearchDropdown.style.display = 'none';
|
|
985
973
|
}
|
|
@@ -1006,6 +994,11 @@
|
|
|
1006
994
|
const logoutForm = document.querySelector('.site-header__logout-form');
|
|
1007
995
|
const loginIcon = document.querySelector('.site-header__action--login');
|
|
1008
996
|
|
|
997
|
+
// Keep account icon visible in all states; unauthenticated clicks open login modal.
|
|
998
|
+
if (accountIcon) {
|
|
999
|
+
accountIcon.style.display = '';
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1009
1002
|
if (authenticated) {
|
|
1010
1003
|
// User is authenticated - show account and logout icons
|
|
1011
1004
|
// Create account icon if it doesn't exist
|
|
@@ -1015,7 +1008,7 @@
|
|
|
1015
1008
|
accountLink.href = '/account';
|
|
1016
1009
|
accountLink.className = 'site-header__action site-header__action--account';
|
|
1017
1010
|
accountLink.setAttribute('aria-label', 'Account');
|
|
1018
|
-
accountLink.innerHTML = '<svg class="site-header__account-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>';
|
|
1011
|
+
accountLink.innerHTML = '<svg class="site-header__account-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>';
|
|
1019
1012
|
actionsContainer.insertBefore(accountLink, actionsContainer.firstChild);
|
|
1020
1013
|
}
|
|
1021
1014
|
|
|
@@ -1026,7 +1019,7 @@
|
|
|
1026
1019
|
logoutFormEl.method = 'post';
|
|
1027
1020
|
logoutFormEl.action = '/webstoreapi/customer/logout';
|
|
1028
1021
|
logoutFormEl.className = 'site-header__logout-form';
|
|
1029
|
-
logoutFormEl.innerHTML = '<button type="submit" class="site-header__action site-header__action--logout" aria-label="Logout"><svg class="site-header__logout-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg></button>';
|
|
1022
|
+
logoutFormEl.innerHTML = '<button type="submit" class="site-header__action site-header__action--logout" aria-label="Logout"><svg class="site-header__logout-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg></button>';
|
|
1030
1023
|
const accountIconEl = document.querySelector('.site-header__action--account');
|
|
1031
1024
|
if (accountIconEl) {
|
|
1032
1025
|
accountIconEl.parentNode.insertBefore(logoutFormEl, accountIconEl.nextSibling);
|
|
@@ -1048,10 +1041,7 @@
|
|
|
1048
1041
|
loginIcon.style.display = 'none';
|
|
1049
1042
|
}
|
|
1050
1043
|
} else {
|
|
1051
|
-
// User is not authenticated -
|
|
1052
|
-
if (accountIcon && accountIcon.offsetParent !== null) {
|
|
1053
|
-
accountIcon.style.display = 'none';
|
|
1054
|
-
}
|
|
1044
|
+
// User is not authenticated - keep account icon visible, hide logout icon
|
|
1055
1045
|
if (logoutForm && logoutForm.offsetParent !== null) {
|
|
1056
1046
|
logoutForm.style.display = 'none';
|
|
1057
1047
|
}
|
|
@@ -1066,12 +1056,12 @@
|
|
|
1066
1056
|
|
|
1067
1057
|
// Also listen for login success events and update UI immediately
|
|
1068
1058
|
// This handles cases where login happens without page refresh
|
|
1069
|
-
document.addEventListener('loginSuccess',
|
|
1059
|
+
document.addEventListener('loginSuccess', () => {
|
|
1070
1060
|
setTimeout(updateAuthUI, 200);
|
|
1071
1061
|
});
|
|
1072
1062
|
|
|
1073
1063
|
// Monitor for login modal success view being shown
|
|
1074
|
-
const observer = new MutationObserver(
|
|
1064
|
+
const observer = new MutationObserver((mutations) => {
|
|
1075
1065
|
const successView = document.querySelector('[data-login-view="success"]');
|
|
1076
1066
|
if (successView && !successView.hidden) {
|
|
1077
1067
|
// Login success detected - update UI
|
|
@@ -1091,7 +1081,7 @@
|
|
|
1091
1081
|
|
|
1092
1082
|
// Also check periodically (every 2 seconds) if user becomes authenticated
|
|
1093
1083
|
// This handles cases where cookies are set but UI hasn't updated
|
|
1094
|
-
setInterval(
|
|
1084
|
+
setInterval(() => {
|
|
1095
1085
|
const authenticated = isAuthenticated();
|
|
1096
1086
|
const accountIcon = document.querySelector('.site-header__action--account');
|
|
1097
1087
|
const logoutForm = document.querySelector('.site-header__logout-form');
|
|
@@ -1105,7 +1095,7 @@
|
|
|
1105
1095
|
// Handle account icon click - check authentication and open login modal if needed
|
|
1106
1096
|
const accountIcon = document.querySelector('.site-header__action--account');
|
|
1107
1097
|
if (accountIcon) {
|
|
1108
|
-
accountIcon.addEventListener('click',
|
|
1098
|
+
accountIcon.addEventListener('click', (e) => {
|
|
1109
1099
|
// If not authenticated, prevent navigation and open login modal
|
|
1110
1100
|
if (!isAuthenticated()) {
|
|
1111
1101
|
e.preventDefault();
|
|
@@ -1142,4 +1132,4 @@
|
|
|
1142
1132
|
}
|
|
1143
1133
|
]
|
|
1144
1134
|
}
|
|
1145
|
-
{% endschema %}
|
|
1135
|
+
{% endschema %}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% assign hero_title = section.settings.hero_title | default: shop.name %}
|
|
8
8
|
{% assign hero_subtitle = section.settings.hero_subtitle | default: 'Discover our curated collection' %}
|
|
9
9
|
{% assign hero_button_text = section.settings.hero_button_text | default: 'Shop Now' %}
|
|
10
|
-
{% assign hero_button_url = section.settings.hero_button_url | default: '/
|
|
10
|
+
{% assign hero_button_url = section.settings.hero_button_url | default: '/categories' %}
|
|
11
11
|
{% assign hero_button_2_text = section.settings.hero_button_2_text %}
|
|
12
12
|
{% assign hero_button_2_url = section.settings.hero_button_2_url %}
|
|
13
13
|
{% assign hero_text_position = section.settings.text_position | default: 'center' %}
|