Переключение вида товаров список/сетка

Question

Есть скрипт, который меняет переключение вида товаров в магазине на WooCommerce. Приложил картинку:

jQuery('.product-view-button .grid').click(function(){
    jQuery('.product-js').removeClass('product-box-flex');  
    jQuery('.product-js').addClass('product-box');
    jQuery('.product-view-button .list').removeClass('active');  
    jQuery(this).addClass('active');
    jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
    return false; 
});
jQuery('.product-view-button .list').click(function(){
    jQuery('.product-js').removeClass('product-box');  
    jQuery('.product-js').addClass('product-box-flex');
    jQuery('.product-view-button .grid').removeClass('active');     
    jQuery(this).addClass('active');
    jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    return false;
});

Но при переключении на следующую страницу в каталоге, вид сбрасывается. Как можно это исправить? Спасибо!

Answer 1

Попробуйте это:

jQuery('.product-view-button .grid').click(function(){
    jQuery('.product-js').removeClass('product-box-flex');  
    jQuery('.product-js').addClass('product-box');
    jQuery('.product-view-button .list').removeClass('active');  
    jQuery(this).addClass('active');
    jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
    localStorage.setItem("product-view-button", "grid"); // запоминаем состояние
    return false; 
});
jQuery('.product-view-button .list').click(function(){
    jQuery('.product-js').removeClass('product-box');  
    jQuery('.product-js').addClass('product-box-flex');
    jQuery('.product-view-button .grid').removeClass('active');     
    jQuery(this).addClass('active');
    jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    localStorage.setItem("product-view-button", "list"); // запоминаем состояние
    return false;
});
if(localStorage.getItem("product-view-button") == "list"){ // читаем состояние
    document.querySelector('.product-view-button .list').click();
}

БЛОГ НА HUSL

Переключение вида товаров список/сетка

Ответы (1 шт):