{
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
const index = selectedFilters.indexOf($event.target.value);
const name = $event.target.name;
const value = $event.target.value;
if (index > -1) {
selectedFilters.splice(index, 1);
} else {
selectedFilters.push($event.target.value.trim())
}
if (!queryString.includes('availability')){
query = queryString + '&filter.v.availability=1'
} else {
query = queryString
}
loading = true;
localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
if (!selectedFilters.length){
query = ''
}
fetch(`/collections/womens-latest?` + query)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
const urlParams = new URLSearchParams(query);
const sorty_by_param = 'sort_by';
if (name == 'sort_by') {
const sort_by = html_div.querySelector(`[value=${value}]`);
sort_by.checked = true;
sort_by.setAttribute('checked','checked');
} else if (urlParams.has(`${sorty_by_param}`)) {
const sort_by_value = urlParams.get(`${sorty_by_param}`);
const sort_by = html_div.querySelector(`[value=${sort_by_value}]`);
sort_by.checked = true;
sort_by.setAttribute('checked','checked');
}
let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
document.querySelector('#ProductGridContainer').innerHTML = html_dom;
// update url without refreshing the page
history.pushState(null, null, '?' + query);
if ($event.target.checked){
currentColor.push($event.target.value)
} else {
const indexToRemove = currentColor.indexOf($event.target.value);
if (indexToRemove !== -1) currentColor.splice(indexToRemove, 1);
}
document.querySelectorAll('#product_grid details').forEach((details) => {
details.open = window.matchMedia('(min-width: 990px)').matches;
})
setTimeout(() => {
hideOutOfStockProducts(getSelectedSizes());
}, 100);
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach(element => {
const height = element.clientHeight;
if (height > maxHeight) maxHeight = height;
});
if (window.innerWidth <= 991){
elements.forEach(element => { element.style.minHeight = maxHeight + 'px' });
}
// === Infinite Scroll re-init (dedupe도 초기화) ===
window.__dedupeKeys = new Set();
collectUsedKeysFromDOM();
setupInfiniteScroll();
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
})
"
@filter-clear.window="
$nextTick(() => {
loading = true;
selectedFilters = [];
localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
fetch(`/collections/womens-latest`)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
html_div.querySelector(`[name='recommended']`).setAttribute('checked','checked');
let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
document.querySelector('#ProductGridContainer').innerHTML = html_dom;
// update url without refreshing the page
history.pushState(null, null, '/collections/womens-latest');
document.querySelectorAll('#product_grid details').forEach((details) => {
if (window.matchMedia('(min-width: 990px)').matches) details.open = true;
else details.open = false;
})
setTimeout(() => {
const productItems = document.querySelectorAll('.product-grid-item');
productItems.forEach(item => { item.style.display = '' });
}, 100);
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach(element => { maxHeight = Math.max(maxHeight, element.clientHeight) });
if (window.innerWidth <= 991){
elements.forEach(element => { element.style.minHeight = maxHeight + 'px' });
}
// === Infinite Scroll re-init (dedupe도 초기화) ===
window.__dedupeKeys = new Set();
collectUsedKeysFromDOM();
setupInfiniteScroll();
})
.catch(error => console.error('Error:', error))
.finally(() => {
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
query = queryString;
loading = false;
});
})
"
@filter-push.window="
$nextTick(() => {
loading = true;
const idx = selectedFilters.indexOf($event.target.getAttribute('data-selected-filter-value'));
if (idx > -1) selectedFilters.splice(idx, 1);
localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
let fetchUrl = ''
if (!selectedFilters.length){
fetchUrl = $event.detail.new_url.split('?').slice(0, -1)[0]
} else {
fetchUrl = $event.detail.new_url
}
fetch(fetchUrl)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
document.querySelector('#ProductGridContainer').innerHTML = html_dom;
// update url without refreshing the page
history.pushState(null, null, fetchUrl);
document.querySelectorAll('#product_grid details').forEach((details) => {
if (window.matchMedia('(min-width: 990px)').matches) details.open = true;
else details.open = false;
})
setTimeout(() => {
const productItems = document.querySelectorAll('.product-grid-item');
productItems.forEach(item => { item.style.display = '' });
}, 100);
setTimeout(() => {
hideOutOfStockProducts(getSelectedSizes());
}, 100);
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach(element => { maxHeight = Math.max(maxHeight, element.clientHeight) });
if (window.innerWidth <= 991){
elements.forEach(element => { element.style.minHeight = maxHeight + 'px' });
}
// === Infinite Scroll re-init (dedupe도 초기화) ===
window.__dedupeKeys = new Set();
collectUsedKeysFromDOM();
setupInfiniteScroll();
})
.catch(error => console.error('Error:', error))
.finally(() => {
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
query = queryString;
loading = false;
});
})
"
@filter-more.window="
$nextTick(() => {
// 무한 스크롤/수동 호출 공용
const url = $event.detail?.new_url;
loadMore(url);
})
"
@filter-apply.window="
$nextTick(() => {
let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
const index = selectedFilters.indexOf($event.target.value);
if (index > -1) {
selectedFilters.splice(index, 1);
} else {
selectedFilters.push($event.target.value.trim())
}
if (!queryString.includes('availability')){
query = queryString + '&filter.v.availability=1'
} else {
query = queryString
}
loading = true;
localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
if (!selectedFilters.length){
query = ''
}
fetch(`/collections/womens-latest?` + query)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
document.querySelector('#ProductGridContainer').innerHTML = html_dom;
// update url without refreshing the page
history.pushState(null, null, '?' + query);
if ($event.target.checked){
currentColor.push($event.target.value)
} else {
const indexToRemove = currentColor.indexOf($event.target.value);
if (indexToRemove !== -1) currentColor.splice(indexToRemove, 1);
}
document.querySelectorAll('#product_grid details').forEach((details) => {
details.open = window.matchMedia('(min-width: 990px)').matches;
})
setTimeout(() => {
hideOutOfStockProducts(getSelectedSizes());
}, 100);
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach(element => { maxHeight = Math.max(maxHeight, element.clientHeight) });
if (window.innerWidth <= 991){
elements.forEach(element => { element.style.minHeight = maxHeight + 'px' });
}
// === Infinite Scroll re-init (dedupe도 초기화) ===
window.__dedupeKeys = new Set();
collectUsedKeysFromDOM();
setupInfiniteScroll();
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
document.getElementById('facet-toggle').click();
})
"
>