Active Build
Thin, weak, fragile nails? If your nails are soft, bend easily and split at the tips, the ACTIVE BUILD regime will help to strengthen your nails so that they grow longer and stronger.
{
const PageMediaQuery = window.matchMedia('(max-width: 990px)')
let queryString;
if(PageMediaQuery.matches) {
queryString = new URLSearchParams(new FormData($refs.mobile_form)).toString();
} else {
queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
}
const index = selectedFilters.indexOf($event.target.value);
if (index > -1) { // only splice array when item is found
selectedFilters.splice(index, 1); // 2nd parameter means remove one item only
}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/active-build-for-thin-weak-nails?` + 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;
let filter_html = html_div.querySelector('.mobile-filters__container').innerHTML;
document.querySelector('.mobile-filters__container').innerHTML = filter_html;
// 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;
})
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'
});
}
})
.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/active-build-for-thin-weak-nails`)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
let filter_html = html_div.querySelector('.mobile-filters__container').innerHTML;
document.querySelector('.mobile-filters__container').innerHTML = filter_html;
document.querySelector('#ProductGridContainer').innerHTML = html_dom;
// update url without refreshing the page
history.pushState(null, null, '/collections/active-build-for-thin-weak-nails');
document.querySelectorAll('#product_grid details').forEach((details) => {
if (window.matchMedia('(min-width: 990px)').matches) {
details.open = true
} else {
details.open = false
}
})
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'
});
}
})
.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 index = selectedFilters.indexOf($event.target.getAttribute('data-selected-filter-value'));
if (index > -1) { // only splice array when item is found
selectedFilters.splice(index, 1); // 2nd parameter means remove one item only
}
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;
let filter_html = html_div.querySelector('.mobile-filters__container').innerHTML;
document.querySelector('.mobile-filters__container').innerHTML = filter_html;
// 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
}
})
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'
});
}
})
.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(() => {
loading = true;
fetch($event.detail.new_url)
.then(response => response.text())
.then(data => {
let html_div = document.createElement('div');
html_div.innerHTML = data;
const button = document.querySelector('#product_pagination .button');
const href = button.getAttribute('href');
const url = new URL(href, window.location.origin);
const pageValue = url.searchParams.get('page');
if(pageValue && parseInt(pageValue) === parseInt(button.getAttribute('data-total-pages'))) {
document.querySelector('#product_pagination').style.display = 'none';
}
let html_dom = html_div.querySelector('#product_grid').innerHTML;
document.querySelector('#product_grid').innerHTML += html_dom;
showingProductsCount = document.querySelectorAll('.product-card').length
calculateProgressBarWidth(showingProductsCount)
//document.querySelector('#product_grid').innerHTML = html_dom;
if (html_div.querySelector('#product_pagination')){
let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
if(document.querySelector('#product_pagination')) {
document.querySelector('#product_pagination').innerHTML = pagination_dom;
}
}
document.querySelectorAll('#product_grid details').forEach((details) => {
if (window.matchMedia('(min-width: 990px)').matches) {
details.open = true
} else {
details.open = false
}
})
const elements = document.querySelectorAll('.product_card--content');
let maxHeight = 0;
elements.forEach(element => {
const height = element.clientHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
elements.forEach(element => {
element.style.minHeight = maxHeight + 'px'
});
})
.catch(error => console.error('Error:', error))
.finally(() => loading = false);
})
"
>