375(33)640-98-68
375(29)935-83-38

Переключение видов товара в категории [Minishop2]

30.06.2019
Переключение видов товара в категории [Minishop2]

Переключение товара в категории табличный и альтернативный. В любом случаи даже подходит в любой системе cms, да и на любом дизайне.

Сами кнопки, ставим в удобное место:

<div class="product-view-button">
    <span>Вид: </span>
    <a href="#" class="grid active"><i class="fa fa-th-large"></i></a>
    <a href="#" class="list"><i class="fa fa-th-list"></i></a>
</div>

Потом нужен обработчик:

<script>
    var productView = localStorage.getItem('productView');
    if(productView == 'list'){
        jQuery('.product-view-button .grid').removeClass('active');
        jQuery('.product-view-button .list').addClass('active');
        jQuery('.items-groop .items-container').removeClass('grid-view').addClass('list-view');    
    }
    jQuery('.product-view-button .grid').click(function(){
        localStorage.removeItem('productView');
        localStorage.setItem('productView', 'grid');
        jQuery('.product-view-button .list').removeClass('active');
        jQuery(this).addClass('active');
        jQuery('.items-groop .items-container').removeClass('list-view').addClass('grid-view');
        return false;
    });
    jQuery('.product-view-button .list').click(function(){
        localStorage.removeItem('productView');
        localStorage.setItem('productView', 'list');
        jQuery('.product-view-button .grid').removeClass('active');
        jQuery(this).addClass('active');
        jQuery('.items-groop .items-container').removeClass('grid-view').addClass('list-view');
        return false;
    });
</script>

Тут стоит .items-groop .items-container — выставите свои классы для целевого контейнера.

Обверните каждый товар в div 

<div class="spacer">
......
</div>

Останется придумать стили и всё готово!

Рейтинг: 5/5 - 1 голосов

Комментарии (0)




Разрешённые теги: <b><i><br>Добавить новый комментарий:


Мы не пытаемся кричать что мы лучшие, просто делаем работу которая нравится.

X

КОНТАКТЫ:

+375(33)640-98-68

+375(29)935-83-38