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);
}
})
})
