tag of the document. This will help to improve the load of the images
// during color swatches interaction on PLP
const preloadBackground = (entries, observer) => {
entries.forEach(async (entry) => {
if (entry.isIntersecting) {
const swatch = entry.target;
const images = swatch.dataset.varimg.split(',');
images.forEach((img, index) => {
// preload image
const link = document.createElement('link');
link.href = buildSrc(img);
link.imagesrcset = getSrcset(img);
link.imagesizes = cssImageMediaCondition;
link.rel = 'preload';
link.as = 'image';
document.getElementsByTagName('head')[0].appendChild(link);
});
swatch.removeAttribute('data-varimg');
switchObserver.unobserve(swatch);
}
});
};
const switchObserver = new IntersectionObserver(preloadBackground, {
root: null, // Default is the viewport
rootMargin: '30px',
threshold: 0.05, // Load image when 10% of the div is visible
});
// Sort options
function getPageParam() {
const urlParams = new URLSearchParams(window.location.search);
const pageParam = urlParams.get('page');
return pageParam ? parseInt(pageParam, 10) : 1;
}
domLoadedPage = getPageParam();
setupSortDropdown('.fs_sort_by_wrap_desktop', '.fs_sort_by_options_desktop', '.fs_sort_by_select_desktop');
const sortBySelect = document.getElementById('sortByDesktop');
let sortByValue = getSortBy(); // call the function and store the returned value
sortBySelect.value = sortByValue; // update the desktop dropdown value on page load
// update sort mobile dropdown value on page load
const validSortOptions = ['price_min_to_max', 'price_max_to_min', 'creation_date', 'relevency'];
sortByValue = validSortOptions.includes(sortByValue) ? sortByValue : 'relevency';
const inputField = document.querySelector(`form [data-value="${sortByValue}"]`);
if (inputField) {
inputField.checked = true; // update the value of the option
} else {
console.error(`No radio button found with data-value="${sortByValue}"`);
}
const form = document.getElementById('sortForm');
if (form) {
form.addEventListener('change', (event) => {
if (event.target.name === 'sort') {
const selectedValue = event.target.getAttribute('data-value');
if (selectedValue && validSortOptions.includes(selectedValue)) {
setUrlParam('sortBy', selectedValue, true);
resetPageAndScroll();
updateOtherDropdown(selectedValue);
}
}
});
}
updateOtherDropdown(getSortBy());
if (sortBySelect) {
sortBySelect.addEventListener('change', function () {
if (sortBySelect.value && validSortOptions.includes(sortBySelect.value)) {
setUrlParam('sortBy', sortBySelect.value, true);
}
});
}
// Description 'read more'
function toggleReadMore(button) {
const container = button.parentNode;
const isExpanded = container.getAttribute('aria-expanded') === 'true';
container.setAttribute('aria-expanded', !isExpanded);
if (isExpanded) {
button.querySelector('.button-text').textContent = 'more';
} else {
button.querySelector('.button-text').textContent = 'Show less';
}
}
function visibleReadMore() {
const toggleButtons = document.querySelectorAll('.fs_collection_top_toggle');
toggleButtons.forEach(button => {
const description_children = button.previousElementSibling.children;
let description_scroll_width = 0;
let description_client_width = 0;
for(const child of description_children) {
description_scroll_width += child.scrollWidth;
description_client_width += child.clientWidth;
};
button.style.display = (description_scroll_width > description_client_width) ? 'block' : 'none';
});
}
window.addEventListener('DOMContentLoaded', visibleReadMore);
// category pills GTM
const categories = document.querySelectorAll('.category-pills__pill');
let category;
let categoryHandle;
let categoryId;
const pushCategoryPills = (category, categoryHandle, categoryId, typeCategory) => {
if (category && categoryHandle && categoryId && typeCategory) {
const categoryPills = {
event: `categoryPills`,
category: category,
categoryHandle: categoryHandle,
categoryId: categoryId,
typeCategory: typeCategory
};
window.dataLayer.push(categoryPills);
}
}
categories?.forEach(category => {
category.addEventListener('click', function(e) {
try {
category = e.currentTarget.getAttribute('data-category');
categoryHandle = e.currentTarget.getAttribute('data-collection-handle');
categoryId = e.currentTarget.getAttribute('data-collection-id');
typeCategory = e.currentTarget.getAttribute('data-type-category');
pushCategoryPills(category, categoryHandle, categoryId, typeCategory);
} catch (error) {
console.error('Error in category click event:', error);
}
})
})
-
White Peony And Citrus Perfume
Like petals drifting through golden hour, this scent blends delicate florals with bright citrus—sophisticated, sheer, and impossible to forget. It lingers like a perfect moment, long after it’s gone.
Fit & Features
- Notes: Bergamot, rose, peony, white musk
- Size: 3.2 oz / 95 mL
Style Number/Barcode: 07307-000013
Category Name: Perfume
Price: $18.90
Availability: In Stock
Available Color: CLEAR
Available Size: NS
-
Vanilla And Bourbon Perfume
For the ones who love a little mystery with their sweetness. This scent blends creamy vanilla with smooth bourbon and soft florals for a vibe that’s equal parts cozy and captivating. It’s the kind of fragrance that lingers—just enough to make them wonder.
Fit & Features
- Notes: Lavender, vanilla, lily, jasmine, amber, musk
- Size: 3.2 oz / 95 mL
Style Number/Barcode: 07307-000011
Category Name: Perfume
Price: $18.90
Availability: In Stock
Available Color: BURGUNDY
Available Size: NS
-
Bergamot And Musk Perfume
Like the kind of confidence that speaks without volume, this scent feels clean, modern, and effortlessly cool. Crisp bright citrus meets cozy depth for the perfect everyday signature.
Fit & Features
- Notes: Bergamot, tea, hinoki, grapefruit, cedarwood, amber, musk
- Size: 3.2 oz / 95 mL
Style Number/Barcode: 07307-000012
Category Name: Perfume
Price: $18.90
Availability: In Stock
Available Color: SAGE
Available Size: NS
-
Blush And Rose Perfume
Fresh blooms meet quiet luxury. This fragrance is a soft, romantic scent that feels like freshly cut petals and golden-hour calm. It’s bright, feminine, and just the right amount of dreamy.
Fit & Features
- Notes: Bergamot, grapefruit, osmanthus, rose, freesia, vanilla
- Size: 3.2 oz / 95 mL
Style Number/Barcode: 07307-000014
Category Name: Perfume
Price: $18.90
Availability: In Stock
Available Color: BLUSH
Available Size: NS