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);
}
})
})
-
Pearl Glow Mesh Ruffle Mini Dress
All eyes on you—this tube mini dress brings the sparkle with faux pearls, rhinestone accents, and flirty ruffle sides. The bodycon fit hugs you just right, making it your new go-to for nights that call for drama and shine.
Fit & Features
- Faux pearl, rhinestone embellishments
- Mesh-lined fabric with stretch
- Tube neckline
- Open back with adjustable straps
- Bodycon fit, side ruffled sash
- Mini-length hem
- Runs true to size
Style Number/Barcode: 05101-000542
Category Name: Bestselling Dresses
Price: $59.90
Availability: In Stock
Available Color: BLACK
Available Size: S
-
Fierce Instinct Lace-Up Romper
Unleash your wild side—this lace-up romper stuns with its bold animal print and flirty tiered skirt. The fitted bodice and strappy details keep the look daring, playful, and perfect for a night out.
Fit & Features
- Animal print, knit fabric
- Sweetheart neckline with lace-up front
- Adjustable spaghetti straps
- Tiered mini skirt with flared hem
- Shorts lining
- Runs true to size
Style Number/Barcode: 06503-000201
Category Name: Bestselling Dresses
Price: $49.90
Availability: In Stock
Available Color: BROWN
Available Size: S, M, L
-
Angeline Corset Satin Mini Dress
Special Occasion
Designed for the spotlight, the Angeline satin mini dress sculpts in a sleek bodycon fit while the sequin beaded embroidery corset bodice adds a touch of couture allure. Finished with a subtle front slit, it’s made for the kind of entrance that lingers.
Fit & Features
- Stretch satin fabric, knit lining
- Scoop neckline, padded bra cups
- Adjustable spaghetti straps
- Corset applique bodice, sequins, beading, embroidery
- Flexible boning, back zipper and hook-eye closure
- Bodycon silhouette, front slit, mini-length hem
- Runs true to size
Where to Wear:
Homecoming, weddings, cocktail parties, date nights, birthdays, bachelorettes, milestone celebrations
Style Number/Barcode: 05001-000100
Category Name: Bestselling Dresses
Price: $99.90
Availability: In Stock
Available Color: PLUM, HUNTER
Available Size: XS, S, M, L, XL