Skip to content

Commit

Permalink
Update toolkit for Paper v7.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@DrJulik
DrJulik committed Apr 2, 2024
1 parent f396d55 commit 8db2021
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 22 deletions.
14 changes: 11 additions & 3 deletions src/css/base/forms.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
textarea {
@apply color__bg-overlay-1 animation-500 border__input--radius w-full appearance-none px-3 py-1.5 min-h-[44px] border__input;
&::placeholder {
@apply color__text opacity-50;
@apply opacity-50 color__text;
}
&:hover {
@apply border__input--hover;
Expand All @@ -31,9 +31,17 @@
}
}

/* Adding back the chevron */
select {
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;
background-repeat: no-repeat !important;
background-position-x: 98% !important;
background-position-y: 50% !important;
},

/* checkboxes and radios */
input[type="checkbox"] {
@apply color__link color__bg-overlay-1 border__input cursor-pointer;
@apply cursor-pointer color__link color__bg-overlay-1 border__input;
&:checked {
@apply bg-current !important;
}
Expand All @@ -45,7 +53,7 @@
}
}
input[type="radio"] {
@apply color__link color__bg-overlay-1 border__input rounded-full cursor-pointer;
@apply rounded-full cursor-pointer color__link color__bg-overlay-1 border__input;
&:checked {
@apply bg-current !important;
}
Expand Down
92 changes: 75 additions & 17 deletions src/ts/products/products.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@ export const products = {
enableUrlParameters: boolean,
preselectedVariantId: number
) {

// Set variant based on what's passed to this function
this.setOptionsFromPreselectedVariantId(preselectedVariantId);

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

// Set options as unavailable
this.setUnavailableOptions();

// Update display values based on selectedVariant
this.setDefaultsFromSelectedVariant(selectedVariant);

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

},

// Find options that are not available based on selected options
setUnavailableOptions() {

// Dynamically find matching variants excluding the option being considered
const findMatchingVariants = (excludeOptionIndex: number) => {
return this.product.variants.filter(variant => {
// Check if the variant is sold out
if (variant.available) {
return false;
}

// Loop through and find matching variants
for (let i = 1; i <= this.product.options.length; i++) {
if (i === excludeOptionIndex) continue;
const optionKey = `option${i}`;
if (variant[optionKey].toLowerCase() !== this[`option${i}`].toLowerCase()) {
return false;
}
}
return true;
});
};

// Loop through options
for (let i = 1; i <= this.product.options.length; i++) {
const matchingVariants = findMatchingVariants(i);

// Initialize a set to hold unique sold-out options for each option
const unavailableOptionsSet = new Set<string>();

// For each matching variant, add its options to the unavailableOptionsSet
matchingVariants.forEach(variant => {
const optionKey = `option${i}`;
unavailableOptionsSet.add(this.handleize(variant[optionKey]));
});

// Convert the set to an array and assign it to the corresponding global variable
this[`unavailable_options${i}`] = Array.from(unavailableOptionsSet);
}
},

// Set selectedVariant based on selected options
// This will find the selectedVariant based on selected options
setSelectedVariant () {
let optionsSize = this.product.options.length;
let selectedVariant;


switch (optionsSize) {
case 1:
selectedVariant = this.product.variants.find(variant =>
(!this.option_1 || this.handleize(variant.option1) === this.option_1)
(this.handleize(variant.option1) === this.handleize(this.option1))
);
break;
case 2:
selectedVariant = this.product.variants.find(variant =>
(!this.option_1 || this.handleize(variant.option1) === this.option_1) &&
(!this.option_2 || this.handleize(variant.option2) === this.option_2)
(this.handleize(variant.option1) === this.handleize(this.option1)) &&
(this.handleize(variant.option2) === this.handleize(this.option2))
);
break;
case 3:
selectedVariant = this.product.variants.find(variant =>
(!this.option_1 || this.handleize(variant.option1) === this.option_1) &&
(!this.option_2 || this.handleize(variant.option2) === this.option_2) &&
(!this.option_3 || this.handleize(variant.option3) === this.option_3)
(this.handleize(variant.option1) === this.handleize(this.option1)) &&
(this.handleize(variant.option2) === this.handleize(this.option2)) &&
(this.handleize(variant.option3) === this.handleize(this.option3))
);
break;
}
Expand All @@ -83,16 +128,16 @@ export const products = {
if (selectedVariant) {
switch (optionsSize) {
case 1:
this.option_1 = this.handleize(selectedVariant.option1);
this.option1 = this.handleize(selectedVariant.option1);
break;
case 2:
this.option_1 = this.handleize(selectedVariant.option1);
this.option_2 = this.handleize(selectedVariant.option2);
this.option1 = this.handleize(selectedVariant.option1);
this.option2 = this.handleize(selectedVariant.option2);
break;
case 3:
this.option_1 = this.handleize(selectedVariant.option1);
this.option_2 = this.handleize(selectedVariant.option2);
this.option_3 = this.handleize(selectedVariant.option3);
this.option1 = this.handleize(selectedVariant.option1);
this.option2 = this.handleize(selectedVariant.option2);
this.option3 = this.handleize(selectedVariant.option3);
break;
}
}
Expand Down Expand Up @@ -131,6 +176,9 @@ export const products = {

// Set featured image id if available
this.current_variant_featured_image_id = selectedVariant.featured_image ? selectedVariant.featured_image.id : null;

// Set featured media id if available
this.current_variant_featured_media_id = selectedVariant.featured_media ? selectedVariant.featured_media.id : null;

// Update unit price
if (selectedVariant.unit_price) {
Expand Down Expand Up @@ -240,9 +288,9 @@ export const products = {
setallOptionsSelected () {
let optionsSize = this.product.options.length;
this.all_options_selected =
(optionsSize === 1 && this.option_1) ||
(optionsSize === 2 && this.option_1 && this.option_2) ||
(optionsSize === 3 && this.option_1 && this.option_2 && this.option_3);
(optionsSize === 1 && this.option1) ||
(optionsSize === 2 && this.option1 && this.option2) ||
(optionsSize === 3 && this.option1 && this.option2 && this.option3);
if(optionsSize === 1) {
this.all_options_selected = true;
}
Expand All @@ -261,14 +309,24 @@ export const products = {
}

// If store is not using enable_variant_images
// Scroll to first featured image
else {
const featuredImages = formContainer.querySelectorAll('.js-' + this.current_variant_featured_media_id);
if (featuredImages.length > 0) {

// Slide to featured image
const slideIndex = featuredImages[0].getAttribute('data-slide');
if (slideIndex) {
this.galleryScrollToIndex(parseInt(slideIndex));
}

// Reorder grid
else {
const parentElement = featuredImages[0].parentNode;
if (parentElement) {
parentElement.insertBefore(featuredImages[0], parentElement.firstChild);
}
}

}
}

Expand Down
5 changes: 3 additions & 2 deletions src/ts/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,11 @@ export const utils = {
// Match to liquid handle filter
handleize (
str: string
) {
) {
return str
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Optional: Remove accents
.replace(/[^a-z0-9\p{L}\p{N}]+/gu, '-') // Allow letters and numbers from any language
.replace(/-+/g, '-')
.replace(/^-+|-+$/g, '');
},
Expand Down

0 comments on commit 8db2021

Please sign in to comment.