Вид сетка, список

[Tom]

Добрый день. Вопрос может у кого есть готовое решение. Нужно сделать на сайте вид товаров сетка и списком подскажите как реализовать? Заранее спасибо

[Noxter]

На форуме когда-то давным давно выкладывали решение и автор его кажись Mart (текущий simplashop).

[mishanya]

тыц

[Tom]

тыц

Спасибо Так и сделал, данное решение понравилось так как не нужно было файлы править только шаблона, а нельзя его допилить чтобы без перезагрузки страницы.?

[mishanya]

можно делать это на js. 

 

вот часть кода, которая делает это у меня

	// переключатель вида категории */
	var $gw = $('.grid-view');
	$gw.find('.grid-2').click(function(){
		$('body').removeClass('type_a').addClass('type_b');
	});
	$gw.find('.grid-1').click(function(){
		$('body').removeClass('type_b').addClass('type_a');
	});
	// cookie для вида категории */
	var blockStateCookie = $.cookie('grid_view');
	// проверям их, если нет, создаем 1 - классический вид */
	if (blockStateCookie == undefined) {
		$.cookie('grid_view', '1', { expires: 3 });
	}
	// записываем куки */
	$gw.find('.grid-1').click(function(){
		$.cookie('grid_view', '1', { expires: 3 });
	});
	$gw.find('.grid-2').click(function(){
		$.cookie('grid_view', '2', { expires: 3 });
	});
	// куки записаны, добавим класс для body */
	if (blockStateCookie == '1') $('body').removeClass().addClass('type_a');
	if (blockStateCookie == '2') $('body').removeClass().addClass('type_b');

нужно подключить скрипт кукис, потом в стилях просто прописать для блоков body.type_a .products, body.type_b .products стили, чтобы один был display:none; при другом. естественно первое решение что по ссылке можно удалить, т.к. оно будет не нужно

 

.grid-view - контейнер где находятся кнопки переключения

<div class="grid-view">
	<span class="grid-1"></span>
	<span class="grid-2"></span>
</div>

 

стили можно сделать так

.type_a .products_grid {display:none;}
.type_a .products_list {display:block;}

.type_b .products_grid {display:block;}
.type_b .products_list {display:none;}

Изменено 2 декабря, 2015 пользователем mishanya

[Tom]

Спасибо

[Tom]

Спасибо

[Evgen13]

Здравствуйте! Подскажите, как сделать отображение товара в каталоге крупными картинками и не списком, а по 4 шт в горизонт, вот ссылка на то, что сейчас у меня http://festival.in.ua/catalog/zhenskaya-odezhda 

Благодарю за помощь!

[Noxter]

Как, как.. Версткой обыкновенной это делается.

Изменено 4 декабря, 2015 пользователем Noxter

[Evgen13]

Есть мануал? как это сделать в домашних условиях ? )

[Noxter]

Есть мануал? как это сделать в домашних условиях ? )

Точно так же как и в рабочих условиях.

Читайте и учите мануал http://htmlbook.ru/ (бесплатно по крайней мере), а если готовы оплачивать за работу то пишите в скайп simplacms обсудим.

[Shopdk]

 

можно делать это на js. 

 

вот часть кода, которая делает это у меня

	// переключатель вида категории */
	var $gw = $('.grid-view');
	$gw.find('.grid-2').click(function(){
		$('body').removeClass('type_a').addClass('type_b');
	});
	$gw.find('.grid-1').click(function(){
		$('body').removeClass('type_b').addClass('type_a');
	});
	// cookie для вида категории */
	var blockStateCookie = $.cookie('grid_view');
	// проверям их, если нет, создаем 1 - классический вид */
	if (blockStateCookie == undefined) {
		$.cookie('grid_view', '1', { expires: 3 });
	}
	// записываем куки */
	$gw.find('.grid-1').click(function(){
		$.cookie('grid_view', '1', { expires: 3 });
	});
	$gw.find('.grid-2').click(function(){
		$.cookie('grid_view', '2', { expires: 3 });
	});
	// куки записаны, добавим класс для body */
	if (blockStateCookie == '1') $('body').removeClass().addClass('type_a');
	if (blockStateCookie == '2') $('body').removeClass().addClass('type_b');

нужно подключить скрипт кукис, потом в стилях просто прописать для блоков body.type_a .products, body.type_b .products стили, чтобы один был display:none; при другом. естественно первое решение что по ссылке можно удалить, т.к. оно будет не нужно

 

.grid-view - контейнер где находятся кнопки переключения

<div class="grid-view">
	<span class="grid-1"></span>
	<span class="grid-2"></span>
</div>

 

стили можно сделать так

.type_a .products_grid {display:none;}
.type_a .products_list {display:block;}

.type_b .products_grid {display:block;}
.type_b .products_list {display:none;}

Добрый день. 

Подскажите делаю все вроде по инструкции но не совсем понял куда и как прописать стили body.type_a .products, body.type_b .products стили, чтобы один был display:none; при другом. 

Не записывает в куку в консоли ошибка TypeError: $.cookie is not a function

В строке // cookie для вида категории */

    var blockStateCookie = $.cookie('grid_view');

Можете написать как правильно дописать.

[Shopdk]

<div class="grid-view">
    <span class="grid-1"></span>
    <span class="grid-2"></span>
</div>

 

код

 

<div class='type_a products products_grid'>

2222

</div>

 

<div class='type_b products products_list'>

3333

</div>

[mishanya]

 

Добрый день. 

Подскажите делаю все вроде по инструкции но не совсем понял куда и как прописать стили body.type_a .products, body.type_b .products стили, чтобы один был display:none; при другом. 

Не записывает в куку в консоли ошибка TypeError: $.cookie is not a function

В строке // cookie для вида категории */

    var blockStateCookie = $.cookie('grid_view');

Можете написать как правильно дописать.

 

стили пишите в style.css или что там у вас за файл стилей.

попробуйте скачать и подключить следующий файл чтобы не выдавало ошибку кукис

[Shopdk]

стили пишите в style.css или что там у вас за файл стилей.

попробуйте скачать и подключить следующий файл чтобы не выдавало ошибку кукис

Да файлик помог так читал на форме что нужен куки файл.,

 

Скажите еще а можно дописать в этот код чтобы сделать три вида или 4 ?

[mishanya]

Да файлик помог так читал на форме что нужен куки файл.,

 

Скажите еще а можно дописать в этот код чтобы сделать три вида или 4 ?

 

можно и 3 и 4 по аналогии. 

[Shopdk]

можно и 3 и 4 по аналогии. 

Это понятно но что то не получилось я и js дописала типа type_c type_b, grid-3 grid-4 не получается. Можете подсказать

[mishanya]

Это понятно но что то не получилось я и js дописала типа type_c type_b, grid-3 grid-4 не получается. Можете подсказать

 

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