Переключатель внешнего вида?

Question

[Александр Ружевич]

Доброго времени суток. Требуется добавить переключатель для изменения внешнего вида вывода рубрики примерно как здесь tandoors.ca/product-tag/tandoor то есть менять вывод с плитки на строчки. Подтолкните пожалуйста на мысль как реализовать изменения вида.

Answer 1

[Александр Ружевич]

как и обещал выкладываю код, решение найдено в интернете с небольшими доработками, работает на бутстрап.
взято отсюда codepen.io/ajaypatelaj/pen/zIBjJ

разметка:

<div class="container">
    <div class="well well-sm">
        <strong>Display</strong>
        <div class="btn-group">
            <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
            </span>List</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span
                class="glyphicon glyphicon-th"></span>Grid</a>
        </div>
    </div>
    <div id="products" class="row list-group">
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

далее скрип который меняет классы и переключает с сетки на список и обратно. от себя добавил запись в куки при выборе пользователем отображения и проверку на php при последующих посещениях.

<script>
$(document).ready(function() {
	
	<?php 

	if (@$_COOKIE['cookie_list'] == 'list' ) {
		echo "$('#products .item').addClass('list-group-item');";
	
	}
	
	elseif (@$_COOKIE['cookie_list'] == 'grid') {
	echo "$('#products .item').addClass('grid-group-item');
		$('#products .item .thumbnail .caption').addClass('caption_none');";
	}
		else {
	echo "$('#products .item .thumbnail .caption').addClass('caption_none');";
}
	?>

    $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');
	$('#products .item .thumbnail .caption').removeClass('caption_none');
		$.cookie('cookie_list', 'list', {
		expires: 5,
		path: '/',
		});
	});
	
	
	
	
	
    $('#grid').click(function(event){
		event.preventDefault();
		$('#products .item').removeClass('list-group-item');
		$('#products .item').addClass('grid-group-item');
		$('#products .item .thumbnail .caption').addClass('caption_none');
			$.cookie('cookie_list', 'grid', {
		expires: 5,
		path: '/',
		});
		});
	
	
});

</script>

все протестировано и работает, будут вопросы - пишите

Answer 2

[Grigory S.]

Менять классы с разным оформлением по клику например.

Comments

[Александр Ружевич]

глянул реализацию вашей идеи, не уверен что он применима в моем случае, мне нужно что бы менялся класс с "col-sm-4" на "col-sm-12" а это затронет и остальную верстку, можно в принципе добавить им id и удалять или добавлять классы но это не есть практично

[Kovalsky]

Александр Ружевич: в вашем примере все как раз так и происходит, как советует Григорий, посмотрите код.

Просто меняется класс у контейнера, все нужные изменения в стилях есессно по этому классу происходят.

Вот например JS который это делает:

function listSwitcher() {
    var activeClass = 'switcher-active';
    var gridClass = 'products-grid';
    var listClass = 'products-list';
    jQuery('.switchToList').click(function(){
        if(!jQuery.cookie('products_page') || jQuery.cookie('products_page') == 'grid'){
            switchToList();
        }
    });
    jQuery('.switchToGrid').click(function(){
        if(!jQuery.cookie('products_page') || jQuery.cookie('products_page') == 'list'){
            switchToGrid();
        }
    });
    
    function switchToList(){
        jQuery('.switchToList').addClass(activeClass);
        jQuery('.switchToGrid').removeClass(activeClass);
        jQuery('.main-products-loop .products-loop').fadeOut(300,function(){
            jQuery(this).removeClass(gridClass).addClass(listClass).fadeIn(300);
            jQuery.cookie('products_page', 'list', { expires: 3, path: '/' });
        });
    }
    
    function switchToGrid(){
        jQuery('.switchToGrid').addClass(activeClass);
        jQuery('.switchToList').removeClass(activeClass);
        jQuery('.main-products-loop .products-loop').fadeOut(300,function(){
            jQuery(this).removeClass(listClass).addClass(gridClass).fadeIn(300);
            jQuery.cookie('products_page', 'grid', { expires: 3, path: '/' });
        }); 
    }
}

[Andrew Lewman]

Александр Ружевич: почему затронет, относительно родительского контейнера они могут занимать либо каждый 12 либо при переключении по 4 (или 3), и выше родительского ничего не изменится..

.row
  .col-sm-12 (товар)
  .col-sm-12 (товар)
  .col-sm-12 (товар)

После переключения они в одну строку:

.row
  .col-sm-4 (товар)
  .col-sm-4 (товар)
  .col-sm-4 (товар)

[Andrew Lewman]

Вы меняйте не все col-sm-12 на col-sm-4, а только товары, допишите им еще класс .tovar и меняйте. Если Jquery то

$('.tovar').removeClass('col-sm-12').addClass('col-sm-4')

[Александр Ружевич]

Andrew Lewman: спасибо за ответы, сейчас попробую отпишусь

[Александр Ружевич]

Andrew Lewman: получилось следующее:

<div class="row">
	<div class="list">list</div>
	
	<div class="grid">grid</div>

	<div class="col-sm-4  red"> 

<div id="c4" class="c4">44444444 </div>    <div id="c12" class="c12">1212121212 </div> 

        </div>

	<div class="col-sm-4  red"> 

<div id="c4" class="c4">44444444 </div>    <div id="c12" class="c12">1212121212 </div> 

        </div>

	<div class="col-sm-4  red"> 

<div id="c4" class="c4">44444444 </div>    <div id="c12" class="c12">1212121212 </div> 

        </div>

	<script>
	
 $(document).ready(function(){
	$('.list').click(function () {
		$('.red').removeClass('col-sm-4').addClass('col-sm-12');
		});
	});
	
	
	$(document).ready(function(){
	$('.grid').click(function () {
		$('.red').removeClass('col-sm-12').addClass('col-sm-4');
		});
	});
	</script>
</div>

в принципе работает, css добавлю для плавности переходов и все. остался вопрос как скрывать или показывать элементы в зависимости от выбранного класса, пробовал так

if ($(".red").hasClass("col-sm-4")) {
  document.getElementById("c12").style.display="none";
}
else if ($(".red").hasClass("col-sm-12")) {
	document.getElementById("c4").style.display="none";
}

но естественно он скрывает лишь первый ненужный блок и дальше не работает

[Александр Ружевич]

Andrew Lewman: нашел готовое решение codepen.io/ajaypatelaj/pen/zIBjJ еще додумать как скрывать ненужные блоки при разных "col"

[Александр Ружевич]

Andrew Lewman: сделал и это) осталось выбор пользователя в куки записать

[Andrew Lewman]

Александр Ружевич: извиняюсь за отсутствие, надеюсь помог

[Александр Ружевич]

Andrew Lewman: да, спасибо, немного разгребусь и выложу готовый код сюда, вдруг кому поможет