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);
}
})
})
-
Sharp Turn Aviator Sunglasses
Sleek lines, zero effort required. These trendy aviator sunglasses bring a modern edge to everyday looks, with a bold frame that instantly pulls everything together—from casual errands to styled-up moments.
Fit & Features
- Sleek aviator silhouette
- Tinted lenses
- 100% UV protection
Style Number/Barcode: 07008-000127
Category Name: New Arrivals Accessories
Price: $11.90
Availability: Out of Stock
-
Bow Steals the Show Satin Wrap Shawl
All eyes, no effort. This satin statement bow wrap shawl with train ties the whole look together—perfect for elevated nights out, formal moments, or when the outfit needs a little drama without trying too hard.
Fit & Features
- Premium satin structured woven fabric
- Statement oversized bow
- Dramatic shawl design with flowing train
Style Number/Barcode: 05008-000001
Category Name: New Arrivals Accessories
Price: $79.90
Availability: In Stock
Available Color: BLACK
Available Size: S/M, M/L
