{
let columnsDesktop = $event.detail.colsDesktop;
let columnsMobile = $event.detail.colsMobile;
if(!columnsDesktop){
columnsDesktop = localStorage.getItem('columnsDesktop') || 4;
}
if(!columnsMobile){
columnsMobile = localStorage.getItem('columnsMobile') || 2;
}
if(window.matchMedia('(max-width: 768px)').matches){
document.querySelector('#product-grid').style.gridTemplateColumns=`repeat(${columnsMobile},minmax(0,1fr)`;
} else {
document.querySelector('#product-grid').style.gridTemplateColumns=`repeat(${columnsDesktop},minmax(0,1fr)`;
}
// Persist on local storage
localStorage.setItem('columnsDesktop', columnsDesktop);
localStorage.setItem('columnsMobile', columnsMobile);
// Fire event
const gridColumnsUpdatedEvent = new CustomEvent('gridColumnsUpdated', {
detail: {
colsDesktop: columnsDesktop,
colsMobile: columnsMobile
}
});
window.dispatchEvent(gridColumnsUpdatedEvent);
})
"
@resize.window="
() => {
$dispatch('manage-grid-columns')
}
"
>