@pradip1995/segment-powerhouse-shop 0.1.2 → 0.1.3
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/package.json +1 -1
- package/src/product-card.tsx +79 -43
- package/src/shop.css +161 -30
- package/src/shop.tsx +18 -11
package/package.json
CHANGED
package/src/product-card.tsx
CHANGED
|
@@ -22,9 +22,11 @@ function snippet(value?: string | null, length = 140) {
|
|
|
22
22
|
export default function ShopProductCard({
|
|
23
23
|
product,
|
|
24
24
|
countryCode,
|
|
25
|
+
layout = "grid",
|
|
25
26
|
}: {
|
|
26
27
|
product: HttpTypes.StoreProduct
|
|
27
28
|
countryCode: string
|
|
29
|
+
layout?: "grid" | "list"
|
|
28
30
|
}) {
|
|
29
31
|
const router = useRouter()
|
|
30
32
|
const [adding, setAdding] = useState(false)
|
|
@@ -43,7 +45,8 @@ export default function ShopProductCard({
|
|
|
43
45
|
const lowStock = inventory != null && inventory > 0 && inventory <= 5
|
|
44
46
|
const href = `/products/${product.handle}`
|
|
45
47
|
const hasOptions = variants.length > 1
|
|
46
|
-
const copy = snippet(product.description)
|
|
48
|
+
const copy = snippet(product.description, layout === "list" ? 220 : 140)
|
|
49
|
+
const isList = layout === "list"
|
|
47
50
|
|
|
48
51
|
const handleAdd = async (event: MouseEvent) => {
|
|
49
52
|
event.preventDefault()
|
|
@@ -67,8 +70,46 @@ export default function ShopProductCard({
|
|
|
67
70
|
}
|
|
68
71
|
}
|
|
69
72
|
|
|
73
|
+
const priceBlock =
|
|
74
|
+
price != null ? (
|
|
75
|
+
<div className="powerhouse-shop__price">
|
|
76
|
+
{onSale && originalPrice != null ? (
|
|
77
|
+
<span className="powerhouse-shop__compare">{formatPrice(originalPrice, currency)}</span>
|
|
78
|
+
) : null}
|
|
79
|
+
<span className="powerhouse-shop__current">{formatPrice(price, currency)}</span>
|
|
80
|
+
</div>
|
|
81
|
+
) : null
|
|
82
|
+
|
|
83
|
+
const actionBlock = (
|
|
84
|
+
<div className="powerhouse-shop__actions">
|
|
85
|
+
{inStock ? (
|
|
86
|
+
<LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__quickshop">
|
|
87
|
+
Quick shop
|
|
88
|
+
</LocalizedLink>
|
|
89
|
+
) : null}
|
|
90
|
+
{!inStock ? (
|
|
91
|
+
<button type="button" className="powerhouse-shop__atc" disabled>
|
|
92
|
+
Sold out
|
|
93
|
+
</button>
|
|
94
|
+
) : hasOptions ? (
|
|
95
|
+
<LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__atc">
|
|
96
|
+
Choose options
|
|
97
|
+
</LocalizedLink>
|
|
98
|
+
) : (
|
|
99
|
+
<button
|
|
100
|
+
type="button"
|
|
101
|
+
className="powerhouse-shop__atc"
|
|
102
|
+
onClick={handleAdd}
|
|
103
|
+
disabled={adding || !variant?.id}
|
|
104
|
+
>
|
|
105
|
+
{adding ? "Adding…" : "Add to cart"}
|
|
106
|
+
</button>
|
|
107
|
+
)}
|
|
108
|
+
</div>
|
|
109
|
+
)
|
|
110
|
+
|
|
70
111
|
return (
|
|
71
|
-
<article className={`powerhouse-shop__card${onSale ? " is-sale" : ""}`}>
|
|
112
|
+
<article className={`powerhouse-shop__card${onSale ? " is-sale" : ""}${isList ? " is-list-card" : ""}`}>
|
|
72
113
|
<LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__media" tabIndex={-1}>
|
|
73
114
|
{product.thumbnail?.trim() ? (
|
|
74
115
|
<img src={product.thumbnail.trim()} alt={product.title || ""} />
|
|
@@ -78,55 +119,50 @@ export default function ShopProductCard({
|
|
|
78
119
|
{onSale && saved != null ? (
|
|
79
120
|
<span className="powerhouse-shop__badge">Save {formatPrice(saved, currency)}</span>
|
|
80
121
|
) : null}
|
|
81
|
-
{!inStock ? <span className="powerhouse-shop__sold">Sold out</span> : null}
|
|
122
|
+
{!inStock && !isList ? <span className="powerhouse-shop__sold">Sold out</span> : null}
|
|
82
123
|
</LocalizedLink>
|
|
83
124
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<div className="powerhouse-
|
|
87
|
-
|
|
88
|
-
<
|
|
125
|
+
{isList ? (
|
|
126
|
+
<>
|
|
127
|
+
<div className="powerhouse-shop__copy">
|
|
128
|
+
<h2 className="powerhouse-shop__name">
|
|
129
|
+
<LocalizedLink href={href} countryCode={countryCode}>
|
|
130
|
+
{product.title}
|
|
131
|
+
</LocalizedLink>
|
|
132
|
+
</h2>
|
|
133
|
+
{lowStock ? (
|
|
134
|
+
<p className="powerhouse-shop__stock">Only {inventory} left!</p>
|
|
135
|
+
) : !inStock ? (
|
|
136
|
+
<p className="powerhouse-shop__stock is-out">Out of stock</p>
|
|
89
137
|
) : null}
|
|
90
|
-
<
|
|
138
|
+
{copy ? <p className="powerhouse-shop__excerpt">{copy}</p> : null}
|
|
139
|
+
<LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__details-link">
|
|
140
|
+
View full details
|
|
141
|
+
</LocalizedLink>
|
|
91
142
|
</div>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<p className="powerhouse-shop__stock is-ok">in stock</p>
|
|
104
|
-
) : (
|
|
105
|
-
<p className="powerhouse-shop__stock is-out">Out of stock</p>
|
|
106
|
-
)}
|
|
107
|
-
|
|
108
|
-
{copy ? <p className="powerhouse-shop__excerpt">{copy}</p> : null}
|
|
109
|
-
|
|
110
|
-
<div className="powerhouse-shop__actions">
|
|
111
|
-
<LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__quickshop">
|
|
112
|
-
Quick shop
|
|
113
|
-
</LocalizedLink>
|
|
114
|
-
{hasOptions ? (
|
|
115
|
-
<LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__atc">
|
|
116
|
-
Choose options
|
|
143
|
+
<div className="powerhouse-shop__aside">
|
|
144
|
+
{priceBlock}
|
|
145
|
+
{actionBlock}
|
|
146
|
+
</div>
|
|
147
|
+
</>
|
|
148
|
+
) : (
|
|
149
|
+
<div className="powerhouse-shop__info">
|
|
150
|
+
{priceBlock}
|
|
151
|
+
<h2 className="powerhouse-shop__name">
|
|
152
|
+
<LocalizedLink href={href} countryCode={countryCode}>
|
|
153
|
+
{product.title}
|
|
117
154
|
</LocalizedLink>
|
|
155
|
+
</h2>
|
|
156
|
+
{lowStock ? (
|
|
157
|
+
<p className="powerhouse-shop__stock">Only {inventory} left!</p>
|
|
158
|
+
) : inStock ? (
|
|
159
|
+
<p className="powerhouse-shop__stock is-ok">in stock</p>
|
|
118
160
|
) : (
|
|
119
|
-
<
|
|
120
|
-
type="button"
|
|
121
|
-
className="powerhouse-shop__atc"
|
|
122
|
-
onClick={handleAdd}
|
|
123
|
-
disabled={adding || !variant?.id || !inStock}
|
|
124
|
-
>
|
|
125
|
-
{adding ? "Adding…" : !inStock ? "Sold out" : "Add to cart"}
|
|
126
|
-
</button>
|
|
161
|
+
<p className="powerhouse-shop__stock is-out">Out of stock</p>
|
|
127
162
|
)}
|
|
163
|
+
{actionBlock}
|
|
128
164
|
</div>
|
|
129
|
-
|
|
165
|
+
)}
|
|
130
166
|
</article>
|
|
131
167
|
)
|
|
132
168
|
}
|
package/src/shop.css
CHANGED
|
@@ -313,13 +313,53 @@ html.powerhouse-filters-open body {
|
|
|
313
313
|
min-width: 0;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
+
.powerhouse-shop__sort-control {
|
|
317
|
+
position: relative;
|
|
318
|
+
display: inline-flex;
|
|
319
|
+
align-items: center;
|
|
320
|
+
min-width: 10.75rem;
|
|
321
|
+
max-width: 100%;
|
|
322
|
+
min-height: 2.5rem;
|
|
323
|
+
padding: 0 2.15rem 0 0.9rem;
|
|
324
|
+
border: 1px solid #d4d4d4;
|
|
325
|
+
border-radius: 2px;
|
|
326
|
+
background: #fff;
|
|
327
|
+
box-shadow: 0 1px 0 rgba(29, 29, 29, 0.04);
|
|
328
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.powerhouse-shop__sort-value {
|
|
332
|
+
min-width: 0;
|
|
333
|
+
overflow: hidden;
|
|
334
|
+
text-overflow: ellipsis;
|
|
335
|
+
white-space: nowrap;
|
|
336
|
+
font-size: 0.9375rem;
|
|
337
|
+
line-height: 1.2;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.powerhouse-shop__sort-caret {
|
|
341
|
+
position: absolute;
|
|
342
|
+
right: 0.8rem;
|
|
343
|
+
top: 50%;
|
|
344
|
+
color: #1d1d1d;
|
|
345
|
+
pointer-events: none;
|
|
346
|
+
transform: translateY(-50%);
|
|
347
|
+
}
|
|
348
|
+
|
|
316
349
|
.powerhouse-shop__sort select {
|
|
317
350
|
position: absolute;
|
|
318
351
|
inset: 0;
|
|
319
352
|
width: 100%;
|
|
320
|
-
|
|
353
|
+
height: 100%;
|
|
321
354
|
opacity: 0;
|
|
322
355
|
cursor: pointer;
|
|
356
|
+
font-size: 1rem;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.powerhouse-shop__sort:hover .powerhouse-shop__sort-control,
|
|
360
|
+
.powerhouse-shop__sort:focus-within .powerhouse-shop__sort-control {
|
|
361
|
+
border-color: #1d1d1d;
|
|
362
|
+
box-shadow: 0 0 0 1px #1d1d1d;
|
|
323
363
|
}
|
|
324
364
|
|
|
325
365
|
.powerhouse-shop__utils-label {
|
|
@@ -404,22 +444,26 @@ html.powerhouse-filters-open body {
|
|
|
404
444
|
|
|
405
445
|
.powerhouse-shop__grid.is-list {
|
|
406
446
|
grid-template-columns: 1fr;
|
|
407
|
-
gap:
|
|
447
|
+
gap: 1rem;
|
|
408
448
|
}
|
|
409
449
|
|
|
410
|
-
.powerhouse-shop__grid.is-list .powerhouse-shop__card
|
|
450
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__card,
|
|
451
|
+
.powerhouse-shop__card.is-list-card {
|
|
411
452
|
display: grid;
|
|
412
|
-
grid-template-columns: 7.
|
|
453
|
+
grid-template-columns: 7.25rem minmax(0, 1fr);
|
|
413
454
|
align-items: start;
|
|
414
455
|
height: auto;
|
|
415
|
-
gap: 1rem;
|
|
416
|
-
padding:
|
|
417
|
-
border
|
|
456
|
+
gap: 0.9rem 1rem;
|
|
457
|
+
padding: 1rem;
|
|
458
|
+
border: 1px solid #dddddd;
|
|
418
459
|
}
|
|
419
460
|
|
|
420
|
-
.powerhouse-shop__grid.is-list .powerhouse-
|
|
421
|
-
|
|
422
|
-
|
|
461
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__media {
|
|
462
|
+
grid-row: 1 / 3;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.powerhouse-shop__copy {
|
|
466
|
+
min-width: 0;
|
|
423
467
|
}
|
|
424
468
|
|
|
425
469
|
.powerhouse-shop__grid.is-list .powerhouse-shop__name {
|
|
@@ -427,26 +471,70 @@ html.powerhouse-filters-open body {
|
|
|
427
471
|
-webkit-line-clamp: unset;
|
|
428
472
|
overflow: visible;
|
|
429
473
|
min-height: 0;
|
|
474
|
+
font-weight: 700;
|
|
475
|
+
font-size: 1.0625rem;
|
|
476
|
+
line-height: 1.3;
|
|
430
477
|
}
|
|
431
478
|
|
|
432
|
-
.powerhouse-shop__grid.is-list .powerhouse-
|
|
433
|
-
|
|
479
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__stock {
|
|
480
|
+
margin-top: 0.25rem;
|
|
434
481
|
}
|
|
435
482
|
|
|
436
|
-
.powerhouse-shop__grid.is-list .powerhouse-
|
|
437
|
-
|
|
438
|
-
display: flex;
|
|
483
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__stock.is-out {
|
|
484
|
+
color: #1d1d1d;
|
|
439
485
|
}
|
|
440
486
|
|
|
441
487
|
.powerhouse-shop__grid.is-list .powerhouse-shop__excerpt {
|
|
442
488
|
display: block;
|
|
489
|
+
margin-top: 0.65rem;
|
|
490
|
+
color: #4d4d4d;
|
|
491
|
+
font-size: 0.9375rem;
|
|
492
|
+
line-height: 1.55;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.powerhouse-shop__details-link {
|
|
496
|
+
display: inline-block;
|
|
497
|
+
margin-top: 0.7rem;
|
|
498
|
+
color: #1d1d1d;
|
|
499
|
+
font-size: 0.9375rem;
|
|
500
|
+
text-decoration: underline;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.powerhouse-shop__details-link:hover {
|
|
504
|
+
text-decoration: underline;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.powerhouse-shop__aside {
|
|
508
|
+
display: flex;
|
|
509
|
+
flex-direction: column;
|
|
510
|
+
align-items: stretch;
|
|
511
|
+
justify-content: space-between;
|
|
512
|
+
gap: 1rem;
|
|
513
|
+
min-width: 0;
|
|
514
|
+
grid-column: 2;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__price {
|
|
518
|
+
margin: 0;
|
|
519
|
+
min-height: 0;
|
|
443
520
|
}
|
|
444
521
|
|
|
445
522
|
.powerhouse-shop__grid.is-list .powerhouse-shop__actions {
|
|
523
|
+
display: flex;
|
|
524
|
+
flex-direction: column;
|
|
525
|
+
width: 100%;
|
|
526
|
+
margin-top: 0;
|
|
527
|
+
padding-top: 0;
|
|
446
528
|
opacity: 1;
|
|
447
529
|
pointer-events: auto;
|
|
448
530
|
}
|
|
449
531
|
|
|
532
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__quickshop,
|
|
533
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__atc {
|
|
534
|
+
flex: none;
|
|
535
|
+
width: 100%;
|
|
536
|
+
}
|
|
537
|
+
|
|
450
538
|
.powerhouse-shop__grid {
|
|
451
539
|
display: grid;
|
|
452
540
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
@@ -577,7 +665,7 @@ html.powerhouse-filters-open body {
|
|
|
577
665
|
display: flex;
|
|
578
666
|
flex-direction: column;
|
|
579
667
|
flex-wrap: nowrap;
|
|
580
|
-
gap: 0.
|
|
668
|
+
gap: 0.4rem;
|
|
581
669
|
margin-top: auto;
|
|
582
670
|
padding-top: 0.75rem;
|
|
583
671
|
}
|
|
@@ -589,13 +677,15 @@ html.powerhouse-filters-open body {
|
|
|
589
677
|
justify-content: center;
|
|
590
678
|
width: 100%;
|
|
591
679
|
min-height: 2.5rem;
|
|
592
|
-
padding: 0.5rem 0.
|
|
680
|
+
padding: 0.5rem 0.45rem;
|
|
593
681
|
border-radius: 2px;
|
|
594
682
|
box-sizing: border-box;
|
|
595
683
|
font-family: var(--font-sans, inherit);
|
|
596
|
-
font-size: 0.
|
|
684
|
+
font-size: 0.8125rem;
|
|
597
685
|
font-weight: 600;
|
|
598
686
|
text-decoration: none;
|
|
687
|
+
text-align: center;
|
|
688
|
+
white-space: nowrap;
|
|
599
689
|
cursor: pointer;
|
|
600
690
|
}
|
|
601
691
|
|
|
@@ -750,19 +840,38 @@ html.powerhouse-filters-open body {
|
|
|
750
840
|
|
|
751
841
|
.powerhouse-shop__grid.is-list {
|
|
752
842
|
grid-template-columns: 1fr;
|
|
843
|
+
gap: 1.25rem;
|
|
753
844
|
}
|
|
754
845
|
|
|
755
|
-
.powerhouse-shop__grid.is-list .powerhouse-shop__card
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
846
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__card,
|
|
847
|
+
.powerhouse-shop__card.is-list-card {
|
|
848
|
+
grid-template-columns: 11.5rem minmax(0, 1fr) 11.25rem;
|
|
849
|
+
align-items: stretch;
|
|
850
|
+
gap: 1.25rem 1.5rem;
|
|
851
|
+
padding: 1.25rem;
|
|
759
852
|
}
|
|
760
853
|
|
|
761
|
-
.powerhouse-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
854
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__media {
|
|
855
|
+
grid-row: auto;
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
.powerhouse-shop__aside {
|
|
859
|
+
grid-column: auto;
|
|
860
|
+
align-items: flex-end;
|
|
861
|
+
min-width: 11.25rem;
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__price {
|
|
865
|
+
text-align: right;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__actions {
|
|
869
|
+
width: 11.25rem;
|
|
870
|
+
padding-top: 1.5rem;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
.powerhouse-shop__sort-control {
|
|
874
|
+
min-width: 12.5rem;
|
|
766
875
|
}
|
|
767
876
|
}
|
|
768
877
|
|
|
@@ -819,18 +928,40 @@ html.powerhouse-filters-open body {
|
|
|
819
928
|
grid-template-columns: 1fr;
|
|
820
929
|
}
|
|
821
930
|
|
|
822
|
-
.powerhouse-shop__grid.is-list .powerhouse-shop__card
|
|
823
|
-
|
|
824
|
-
|
|
931
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__card,
|
|
932
|
+
.powerhouse-shop__card.is-list-card {
|
|
933
|
+
grid-template-columns: 14rem minmax(0, 1fr) 11.5rem;
|
|
934
|
+
gap: 1.5rem 2rem;
|
|
935
|
+
padding: 1.35rem 1.5rem;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__actions {
|
|
939
|
+
flex-direction: column;
|
|
940
|
+
width: 11.5rem;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__quickshop,
|
|
944
|
+
.powerhouse-shop__grid.is-list .powerhouse-shop__atc {
|
|
945
|
+
flex: none;
|
|
946
|
+
width: 100%;
|
|
825
947
|
}
|
|
826
948
|
|
|
827
949
|
.powerhouse-shop__actions {
|
|
950
|
+
flex-direction: row;
|
|
828
951
|
opacity: 0;
|
|
829
952
|
pointer-events: none;
|
|
830
953
|
transition: opacity 0.2s ease;
|
|
831
954
|
}
|
|
832
955
|
|
|
956
|
+
.powerhouse-shop__quickshop,
|
|
957
|
+
.powerhouse-shop__atc {
|
|
958
|
+
flex: 1 1 0;
|
|
959
|
+
width: auto;
|
|
960
|
+
min-width: 0;
|
|
961
|
+
}
|
|
962
|
+
|
|
833
963
|
.powerhouse-shop__card:hover .powerhouse-shop__actions,
|
|
964
|
+
.powerhouse-shop__card:focus-within .powerhouse-shop__actions,
|
|
834
965
|
.powerhouse-shop__grid.is-list .powerhouse-shop__actions {
|
|
835
966
|
opacity: 1;
|
|
836
967
|
pointer-events: auto;
|
package/src/shop.tsx
CHANGED
|
@@ -95,10 +95,11 @@ function FilterIcon() {
|
|
|
95
95
|
)
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
function
|
|
98
|
+
function SortCaret() {
|
|
99
99
|
return (
|
|
100
|
-
<svg width="
|
|
101
|
-
<path d="
|
|
100
|
+
<svg className="powerhouse-shop__sort-caret" width="10" height="6" viewBox="0 0 8 6" fill="none" aria-hidden>
|
|
101
|
+
<path d="M4 4.5L7 1.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="square" />
|
|
102
|
+
<path d="M4 4.5L1 1.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="square" />
|
|
102
103
|
</svg>
|
|
103
104
|
)
|
|
104
105
|
}
|
|
@@ -568,15 +569,20 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
|
|
|
568
569
|
{applied.length ? `Filters (${applied.length})` : "Filters"}
|
|
569
570
|
</button>
|
|
570
571
|
<label className="powerhouse-shop__sort">
|
|
571
|
-
<SortIcon />
|
|
572
572
|
<span className="powerhouse-shop__utils-label">Sort by</span>
|
|
573
|
-
<
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
))}
|
|
579
|
-
|
|
573
|
+
<span className="powerhouse-shop__sort-control">
|
|
574
|
+
<span className="powerhouse-shop__sort-value">
|
|
575
|
+
{SORT_OPTIONS.find((option) => option.value === sortBy)?.label || "Featured"}
|
|
576
|
+
</span>
|
|
577
|
+
<SortCaret />
|
|
578
|
+
<select value={sortBy} onChange={(event) => handleSort(event.target.value)} aria-label="Sort products">
|
|
579
|
+
{SORT_OPTIONS.map((option) => (
|
|
580
|
+
<option key={option.value} value={option.value}>
|
|
581
|
+
{option.label}
|
|
582
|
+
</option>
|
|
583
|
+
))}
|
|
584
|
+
</select>
|
|
585
|
+
</span>
|
|
580
586
|
</label>
|
|
581
587
|
</div>
|
|
582
588
|
<div className="powerhouse-shop__view" role="group" aria-label="View as">
|
|
@@ -613,6 +619,7 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
|
|
|
613
619
|
key={product.id ?? product.handle ?? `product-${index}`}
|
|
614
620
|
product={product}
|
|
615
621
|
countryCode={countryCode}
|
|
622
|
+
layout={view}
|
|
616
623
|
/>
|
|
617
624
|
))}
|
|
618
625
|
</div>
|