Переключение между табличным и колоночным дизайном в листинге товаров

[vitosbaltos 0]

Уважаемые форумчане! Подскажите каким образом можно реализовать переключение между табличным и колоночным дизайном в листинге товаров?

[support 447]

По умолчанию такого нет.

Можно с помощью jQuery кода сделать переключение css стилей.

В гугле с яндексом можно найти готовые примеры, например по ключевым словам типа jquery theme change или jquery css change on the fly

[vitosbaltos 0]

Я имел в виду переключение между данными файлами product_listing_columns.html и product_listing_list.html. Не подскажите код?

[support 447]

Нет, такого нет по умолчанию в VamShop.

[KoVaLsKy 59]

сделайте на jQuery/

там по идее надо то добавлять 1 класс и все может меняться.

а если ну очень нужно перключаться между файлами то

а) придется писать условие вывода на основе GET['listint_template']  например

б) писать ajax файл и запросы, если хотите сделать без перезагрузки страницы 

 

П.С  пункт (б) у меня есть

[eugenem 11]

Делаем так:
1. Скачиваем styleswitch.js , ложим в папку шаблона

2. В шаблоне листинга подключаем скрипт и два файла со стилями для табличного и списочного вывода.
 

<link href="{php} echo 'templates/'.CURRENT_TEMPLATE.'/css/list.css'; {/php}" rel="stylesheet" type="text/css">
<link href="{php} echo 'templates/'.CURRENT_TEMPLATE.'/css/column.css'; {/php}" rel="alternate stylesheet" type="text/css" title="alternate">
<script type="text/javascript" src="{php} echo 'templates/'.CURRENT_TEMPLATE.'/javascript/styleswitch.js'; {/php}"></script>

3. Еще добавляем кнопки для переключения
 

<a href="javascript:chooseStyle('none', 60)" class="styleswitch style-list"><i class="fa fa-list"></i></a>
<a href="javascript:chooseStyle('alternate', 60)" class="styleswitch style-th"><i class="fa fa-th"></i></a>

Переключение происходит не шаблонов, а разных стилей.

[YuraS 4]

list.css
column.css

Евгений, а это кто писать будет? ;)

[eugenem 11]

Я дал достаточно для толчка в нужном направлении. В принципе, ничего нового тут нет. Вот тут Саша уже писал в блоге -  http://blog.vamshop.ru/2010/04/18/переключение-css-стилей-оформления-на-л/ . Единственно, что нужно под новую версию JQuery кнопки-ссылки по-другому прописывать.

[vitosbaltos 0]

Не работает. Что необходимо прописывать в файлах list.css и column.css? Хотя бы для примера подскажите?

[eugenem 11]

Один файл для табличного дизайна, второй - для вывода списком.
Например, в column.css блок товара присываем вот так:
 

.ProductsListList {width:249px;min-height:280px;display: -moz-inline-stack;display: inline-block;vertical-align: top;padding: 24px 20px 19px;margin:-1px -3px 0 0;zoom:1;*display:inline;_height:280px;line-height:normal;position:relative;border-right: 1px solid #dcdcdc;border-top: 1px solid #dcdcdc;}
* html .ProductsListList, * + html .ProductsListList {margin:-1px 0 0 0;}
.ProductsListList:first-child {margin:-1px -3px 0 0;}

В list.css вот так:
 

.ProductsListList {width:auto;display:block;padding:20px 20px 10px;margin:20px 0;border-top: 1px solid #dcdcdc;min-height:0;}
* html .ProductsListList {margin:20px 0;}
* + html .ProductsListList {margin:20px 0;}
.ProductsListList:first-child {margin:0 0 20px;}

Это я выдернул из шаблона, который сейчас заканчиваю. У Вас может быть, и должно быть, по-другому.
P.S. Я не буду прописывать до последней запятой в коде. Для человека, который мало-мальски разбирается в html и css, этого должно быть достаточно с лихвой. Если Вы что-то тут не поняли или у Вас не получается - обратитесь на платной основе. Не реклама, не обязательно ко мне, к любому разработчику тут на форуме, код ни разу не сложный, Вам сделают за полчаса-час от силы.

[YuraS 4]

большое человеческое спасибо, Евгений!

[vitosbaltos 0]

Спасибо за подробности. Скажите, а данный код необходимо прописать в product_listing_columns.html?

<link href="{php} echo 'templates/'.CURRENT_TEMPLATE.'/css/list.css'; {/php}" rel="stylesheet" type="text/css">
<link href="{php} echo 'templates/'.CURRENT_TEMPLATE.'/css/column.css'; {/php}" rel="alternate stylesheet" type="text/css" title="alternate">
<script type="text/javascript" src="{php} echo 'templates/'.CURRENT_TEMPLATE.'/javascript/styleswitch.js'; {/php}"></script>

[eugenem 11]

да, и обратите внимание на пути, где должны лежать стили и скрипт

[vitosbaltos 0]

Ура! Заработало. Спасибо за помощь!

[YuraS 4]

3 часа назад, vitosbaltos сказал:

Ура! Заработало. Спасибо за помощь!

если не секрет, покажите, плиз, как все выглядит.

[eugenem 11]

например,  вот http://tdvorontsov.ru/mebel_dlya_vanny.html 

[YuraS 4]

13 часа назад, eugenem сказал:

например,  вот http://tdvorontsov.ru/mebel_dlya_vanny.html 

классно!

[support 447]

Да, неплохо выглядит.

Единственное, когда купить нажимаешь и поднимается к корзине, есть смысл корзину открывать автоматически, как в VamShop 2 - http://demo2.vamshop.ru

Так нагляднее, видно, что товар в корзине и видна сразу кнопка оформить заказ.

[KoVaLsKy 59]

Зачем грузить целый скрипт и еще запоминать в куках вывод, если можно сделать (стилями) всего 2мя строчками кода.

Засунуть весь листинг в див, на js добавлять\убирать у него класс и опираться на этот селектор

1 час назад, VaM сказал:

Да, нерлохо выглядит.

Единственное, когда купить нажимаешь и поднимается к корзине, есть смысл корзину открываться автоматически, как в VamShop 2 - http://demo2.vamshop.ru

Так нагляднее, видно, что товар в корзине и видна сразу кнопка купить.

а это нужно ajax обработчик дописываться. в success добавить смену стиля блока 

$(\'#divShoppingPullCart .cart-dropdown\').css(\"display\",\"block\");

что то на подобие этого

[support 447]

Через jQuery можно ведь и клики делать, например в VamShop 2 сделано через клик открытие корзины, т.е. сразу после прокрутки к корзине добавить jQuery код типа:

 

$("#divShippingPullCart").click();

 

[pal-palich 6]

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

[eugenem 11]

Указывать первыми стили для строчного вывода

[support 447]

или можно jQuery.cookie использовать.

Что б выбор посетителя запоминался.