Skip to content

Commit 8db2021

Browse files
DrJulikDrJulik
committed
Update toolkit for Paper v7.2
1 parent f396d55 commit 8db2021

File tree

3 files changed

+89
-22
lines changed

3 files changed

+89
-22
lines changed

‎src/css/base/forms.css‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
textarea {
2222
@apply color__bg-overlay-1 animation-500 border__input--radius w-full appearance-none px-3 py-1.5 min-h-[44px] border__input;
2323
&::placeholder {
24-
@apply color__text opacity-50;
24+
@apply opacity-50 color__text;
2525
}
2626
&:hover {
2727
@apply border__input--hover;
@@ -31,9 +31,17 @@
3131
}
3232
}
3333

34+
/* Adding back the chevron */
35+
select {
36+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
37+
background-repeat: no-repeat !important;
38+
background-position-x: 98% !important;
39+
background-position-y: 50% !important;
40+
},
41+
3442
/* checkboxes and radios */
3543
input[type="checkbox"] {
36-
@apply color__link color__bg-overlay-1 border__input cursor-pointer;
44+
@apply cursor-pointer color__link color__bg-overlay-1 border__input;
3745
&:checked {
3846
@apply bg-current !important;
3947
}
@@ -45,7 +53,7 @@
4553
}
4654
}
4755
input[type="radio"] {
48-
@apply color__link color__bg-overlay-1 border__input rounded-full cursor-pointer;
56+
@apply rounded-full cursor-pointer color__link color__bg-overlay-1 border__input;
4957
&:checked {
5058
@apply bg-current !important;
5159
}

‎src/ts/products/products.ts‎

Lines changed: 75 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@ export const products = {
55
enableUrlParameters: boolean,
66
preselectedVariantId: number
77
) {
8-
8+
99
// Set variant based on what's passed to this function
1010
this.setOptionsFromPreselectedVariantId(preselectedVariantId);
1111

1212
// Find and set selectedVariant
1313
let selectedVariant = this.setSelectedVariant();
1414

15+
// Set options as unavailable
16+
this.setUnavailableOptions();
17+
1518
// Update display values based on selectedVariant
1619
this.setDefaultsFromSelectedVariant(selectedVariant);
1720

@@ -34,29 +37,71 @@ export const products = {
3437

3538
},
3639

40+
// Find options that are not available based on selected options
41+
setUnavailableOptions() {
42+
43+
// Dynamically find matching variants excluding the option being considered
44+
const findMatchingVariants = (excludeOptionIndex: number) => {
45+
return this.product.variants.filter(variant => {
46+
// Check if the variant is sold out
47+
if (variant.available) {
48+
return false;
49+
}
50+
51+
// Loop through and find matching variants
52+
for (let i = 1; i <= this.product.options.length; i++) {
53+
if (i === excludeOptionIndex) continue;
54+
const optionKey = `option${i}`;
55+
if (variant[optionKey].toLowerCase() !== this[`option${i}`].toLowerCase()) {
56+
return false;
57+
}
58+
}
59+
return true;
60+
});
61+
};
62+
63+
// Loop through options
64+
for (let i = 1; i <= this.product.options.length; i++) {
65+
const matchingVariants = findMatchingVariants(i);
66+
67+
// Initialize a set to hold unique sold-out options for each option
68+
const unavailableOptionsSet = new Set<string>();
69+
70+
// For each matching variant, add its options to the unavailableOptionsSet
71+
matchingVariants.forEach(variant => {
72+
const optionKey = `option${i}`;
73+
unavailableOptionsSet.add(this.handleize(variant[optionKey]));
74+
});
75+
76+
// Convert the set to an array and assign it to the corresponding global variable
77+
this[`unavailable_options${i}`] = Array.from(unavailableOptionsSet);
78+
}
79+
},
80+
3781
// Set selectedVariant based on selected options
3882
// This will find the selectedVariant based on selected options
3983
setSelectedVariant () {
4084
let optionsSize = this.product.options.length;
4185
let selectedVariant;
4286

87+
4388
switch (optionsSize) {
4489
case 1:
4590
selectedVariant = this.product.variants.find(variant =>
46-
(!this.option_1 || this.handleize(variant.option1) === this.option_1)
91+
(this.handleize(variant.option1) === this.handleize(this.option1))
4792
);
4893
break;
4994
case 2:
5095
selectedVariant = this.product.variants.find(variant =>
51-
(!this.option_1 || this.handleize(variant.option1) === this.option_1) &&
52-
(!this.option_2 || this.handleize(variant.option2) === this.option_2)
96+
(this.handleize(variant.option1) === this.handleize(this.option1)) &&
97+
(this.handleize(variant.option2) === this.handleize(this.option2))
5398
);
5499
break;
55100
case 3:
56101
selectedVariant = this.product.variants.find(variant =>
57-
(!this.option_1 || this.handleize(variant.option1) === this.option_1) &&
58-
(!this.option_2 || this.handleize(variant.option2) === this.option_2) &&
59-
(!this.option_3 || this.handleize(variant.option3) === this.option_3)
102+
(this.handleize(variant.option1) === this.handleize(this.option1)) &&
103+
(this.handleize(variant.option2) === this.handleize(this.option2)) &&
104+
(this.handleize(variant.option3) === this.handleize(this.option3))
60105
);
61106
break;
62107
}
@@ -83,16 +128,16 @@ export const products = {
83128
if (selectedVariant) {
84129
switch (optionsSize) {
85130
case 1:
86-
this.option_1 = this.handleize(selectedVariant.option1);
131+
this.option1 = this.handleize(selectedVariant.option1);
87132
break;
88133
case 2:
89-
this.option_1 = this.handleize(selectedVariant.option1);
90-
this.option_2 = this.handleize(selectedVariant.option2);
134+
this.option1 = this.handleize(selectedVariant.option1);
135+
this.option2 = this.handleize(selectedVariant.option2);
91136
break;
92137
case 3:
93-
this.option_1 = this.handleize(selectedVariant.option1);
94-
this.option_2 = this.handleize(selectedVariant.option2);
95-
this.option_3 = this.handleize(selectedVariant.option3);
138+
this.option1 = this.handleize(selectedVariant.option1);
139+
this.option2 = this.handleize(selectedVariant.option2);
140+
this.option3 = this.handleize(selectedVariant.option3);
96141
break;
97142
}
98143
}
@@ -131,6 +176,9 @@ export const products = {
131176

132177
// Set featured image id if available
133178
this.current_variant_featured_image_id = selectedVariant.featured_image ? selectedVariant.featured_image.id : null;
179+
180+
// Set featured media id if available
181+
this.current_variant_featured_media_id = selectedVariant.featured_media ? selectedVariant.featured_media.id : null;
134182

135183
// Update unit price
136184
if (selectedVariant.unit_price) {
@@ -240,9 +288,9 @@ export const products = {
240288
setallOptionsSelected () {
241289
let optionsSize = this.product.options.length;
242290
this.all_options_selected =
243-
(optionsSize === 1 && this.option_1) ||
244-
(optionsSize === 2 && this.option_1 && this.option_2) ||
245-
(optionsSize === 3 && this.option_1 && this.option_2 && this.option_3);
291+
(optionsSize === 1 && this.option1) ||
292+
(optionsSize === 2 && this.option1 && this.option2) ||
293+
(optionsSize === 3 && this.option1 && this.option2 && this.option3);
246294
if(optionsSize === 1) {
247295
this.all_options_selected = true;
248296
}
@@ -261,14 +309,24 @@ export const products = {
261309
}
262310

263311
// If store is not using enable_variant_images
264-
// Scroll to first featured image
265312
else {
266313
const featuredImages = formContainer.querySelectorAll('.js-' + this.current_variant_featured_media_id);
267314
if (featuredImages.length > 0) {
315+
316+
// Slide to featured image
268317
const slideIndex = featuredImages[0].getAttribute('data-slide');
269318
if (slideIndex) {
270319
this.galleryScrollToIndex(parseInt(slideIndex));
271320
}
321+
322+
// Reorder grid
323+
else {
324+
const parentElement = featuredImages[0].parentNode;
325+
if (parentElement) {
326+
parentElement.insertBefore(featuredImages[0], parentElement.firstChild);
327+
}
328+
}
329+
272330
}
273331
}
274332

‎src/ts/utils/utils.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,11 @@ export const utils = {
105105
// Match to liquid handle filter
106106
handleize (
107107
str: string
108-
) {
108+
) {
109109
return str
110110
.toLowerCase()
111-
.replace(/[^a-z0-9]+/g, '-')
111+
.normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Optional: Remove accents
112+
.replace(/[^a-z0-9\p{L}\p{N}]+/gu, '-') // Allow letters and numbers from any language
112113
.replace(/-+/g, '-')
113114
.replace(/^-+|-+$/g, '');
114115
},

0 commit comments

Comments
 (0)