0 Пользователей и 1 Гость просматривают эту тему.
  • 36 Ответов
  • 4962 Просмотров
*

koshsh

  • Давно я тут
  • 278
  • 8
Здравствуйте, ниже выкладываю готовое решение как сделать смену отображения товаров в категории различными стилями, такими как список или столбик или еще как нибудь. Преимущество этого способа - переключение видов без перезагрузки страницы, а также легкая настройка.

Мне нужно было сделать только два стиля отображения товаров, для этого создал дополнительный файл green.css в котором прописал нужные стили для второго варианта,  и вставил в шаблон таким образом:
Код
<link rel="alternate stylesheet" type="text/css" href=/ПутьДоФайла/green.css" title="green" />

Rel alternate - это альтернативная CSS, которая будет “включаться” по клику пользователя и заменять стили которые прописаны для первого варианта.

Разумеется можно подключить столько дополнительных стилей сколько душе угодно.

Теперь подключаем скрипт, который собственно и будет "включать" дополнительные таблицы стилей и записывать в cookies информацию о том, какая таблица стилей "включена", а при следующей загрузке страницы он проверяет cookies на наличие "включенной" таблицы стилей, и если такая имеется, то она становится активной.

Сам скрипт:
Спойлер
[свернуть]

Сохраняем и подключаем скрипт в любом месте страницы:
Код
<script type="text/javascript" src="/ПутьДоСкрипта/styleswitcher.js"></script>
 

Далее прописываем кнопки для переключения:

Код
<a href="#" class="setka" onclick="setActiveStyleSheet('style'); return false;">Сетка</a>  
<a href="#" class="spisok" onclick="setActiveStyleSheet('green'); return false;">Таблица</a>

Подробнее об этом скрипте можно почитать тут
Пример реализации этого способа в JS тут
« Последнее редактирование: 17.09.2014, 08:41:56 от koshsh »
*

Protoss

  • Захожу иногда
  • 23
  • 0
  • А как попроще
Удачно реализовал, но заметил одну мелочь в эксплоэре и Chrome, после включения альтернативного стиля
картинка на переключателе не меняется пока не обновить страничку.

А у автора везде отрабатывает!


В основном файле стиля:
Код
.spisok { background: url(../images/list.png) no-repeat scroll bottom; }
.spisok:hover { background-position: top; }

В подключаемом файле стиля:
Код
.spisok { background-position: top; }
*

koshsh

  • Давно я тут
  • 278
  • 8
Сложно что-то посоветовать когда не видешь сайта, выложите ссылку посмотрим
*

ussr983

  • Захожу иногда
  • 20
  • 0
Прошу извинения, а суто для тупых написать в каких конкретно файлах Вы это делали нельзя?
*

koshsh

  • Давно я тут
  • 278
  • 8
Прошу извинения, а суто для тупых написать в каких конкретно файлах Вы это делали нельзя?
Я все прописывал в шаблоне JS /components/com_jshopping/templates/default_div/list_products/form_filters.php
*

shurakana

  • Завсегдатай
  • 793
  • 43
Пробовал на подобии, при ctrl+f5 вроде задержка отображения происходит, изза дополнительного CSS..(не могу проверить ссылка не робит) Да и вообще это как бы не совсем правильно грузить доп файлы.
Поэтому сделал, сохранение класса в кукис..
Эта подпись отображается внизу каждого Моего сообщения. Я также могу использовать BB код и смайлы.
*

koshsh

  • Давно я тут
  • 278
  • 8
Поправил ссылку, никаких задержек/торможений нет, тк дополнительный CSS грузится одновременно с основным
*

shurakana

  • Завсегдатай
  • 793
  • 43
Да, правда нормально..)
Эта подпись отображается внизу каждого Моего сообщения. Я также могу использовать BB код и смайлы.
*

semak85

  • Захожу иногда
  • 23
  • 2
Всё получилось, огромное Вам спасибо!
*

-sdr-

  • Осваиваюсь на форуме
  • 38
  • 0
А где сам green.css? Без него не работает. Понятно, что стили надо самому делать, но для примера....
*

-sdr-

  • Осваиваюсь на форуме
  • 38
  • 0
Мой сайт http://test.portal-avto.ru
В самое начало файла form_filters.php вставил
Код
<link rel="alternate stylesheet" type="text/css" href="/components/com_jshopping/css/green.css" title="green" />
<script type="text/javascript" src="/components/com_jshopping/templates/default_div/product/styleswitcher.js"></script>
<a href="#" class="setka" onclick="setActiveStyleSheet('style'); return false;">Сетка</a> 
<a href="#" class="spisok" onclick="setActiveStyleSheet('green'); return false;">Таблица</a>
Вот мой green.css
Код
.green div{
display:inline;
background:#F81A1D;
color:#EF0A0E;
font-style:italic;
}

.green{
display:inline;
background:#F81A1D;
color:#EF0A0E;
font-style:italic;
}

.style{
display:inline;
background:#F81A1D;
color:#EF0A0E;
font-style:italic;
}
Что я сделал неправильно?
*

Biss

  • Завсегдатай
  • 767
  • 79
Цитировать
Что я сделал неправильно?
Так самых стилей для товаров списка вы не прописали. Что должно поменяться ?
*

-sdr-

  • Осваиваюсь на форуме
  • 38
  • 0
Тыкните носом, пожалуйста. Что и куда прописать.
*

Biss

  • Завсегдатай
  • 767
  • 79
Стили для товаров писать в green.css
*

-sdr-

  • Осваиваюсь на форуме
  • 38
  • 0
так я там и написал эти стили .green{...} .style{}
а они почему то не работают
*

Biss

  • Завсегдатай
  • 767
  • 79
так я там и написал эти стили .green{...} .style{}
а они почему то не работают

Я же написал, стили для товаров, зачит в грин CSS надо писать, если это вывод сеткой, наследовать из дефолт CSS но писать уже другой стиль

.jshop_list_product .block_product {новый стиль}

.jshop_list_product .product .image{ картинка справа / слева}

и так далее
*

-sdr-

  • Осваиваюсь на форуме
  • 38
  • 0
Спасибо. с этим разобрался немного. Записал в грин следующий стиль
Код
.jshop_list_product .block_product .spisok{
display:inline;
font-style:italic;
}
Скрипт работает, шрифт становится курсивом, но вот в списком товары не стали.
*

Mister Shadow

  • Осваиваюсь на форуме
  • 46
  • 1
Всем привет! Может кто знает, как можно реализовать отображение хитов о каждом товаре в списке товаров? В карточке товаров это хорошо, но в списке товаров было бы полезней. :(
Использую самые свежие версии Joomla и JS
*

kit2m2

  • Живу я здесь
  • 1137
  • 103
  • Разработчик расширений Joomla. Этот статус присваивается, если пользователь разработал не менее 5 расширений для Joomla.
Всем привет! Может кто знает, как можно реализовать отображение хитов о каждом товаре в списке товаров? В карточке товаров это хорошо, но в списке товаров было бы полезней. :(
Использую самые свежие версии Joomla и JS

Не понял каким боком ваше сообщение относиться к данной теме. Создайте новую или поищите старую тему для вашего вопроса.
Бесплатные расширения для Joomla и JoomShopping | Вкладки Bootstrap на странице товара БОЛЬШАЯ ПРОСЬБА кто использует мои расширения - писать отзывы в темах расширений, которые были Вам полезны или на сайте разработчика.
*

Mister Shadow

  • Осваиваюсь на форуме
  • 46
  • 1
Не понял каким боком ваше сообщение относиться к данной теме. Создайте новую или поищите старую тему для вашего вопроса.
Тема называется так: "Отображение товаров в категории разными"
Мне нужно изменить отображение товаров в категории, т.е. добавить информацию о хитах. Что тут непонятного? Тем различных по редактированию итак миллионы и очень часто за создание новой темы даже наказывают, если такая имеется... лучше бы с ответом помогли, чем флудить в этой теме. Как ваш ответ относится к данной теме?
*

kit2m2

  • Живу я здесь
  • 1137
  • 103
  • Разработчик расширений Joomla. Этот статус присваивается, если пользователь разработал не менее 5 расширений для Joomla.
Mister Shadow, хиты о каждом товаре - это в вашем понимании что? Просмотры страницы товара?
Бесплатные расширения для Joomla и JoomShopping | Вкладки Bootstrap на странице товара БОЛЬШАЯ ПРОСЬБА кто использует мои расширения - писать отзывы в темах расширений, которые были Вам полезны или на сайте разработчика.
*

kit2m2

  • Живу я здесь
  • 1137
  • 103
  • Разработчик расширений Joomla. Этот статус присваивается, если пользователь разработал не менее 5 расширений для Joomla.
Всем привет! Может кто знает, как можно реализовать отображение хитов о каждом товаре в списке товаров? В карточке товаров это хорошо, но в списке товаров было бы полезней. :(
Использую самые свежие версии Joomla и JS

Не дождался ваших пожеланий... Написал плагин - Инфоблок товара в списке товаров [Скачать]
Бесплатные расширения для Joomla и JoomShopping | Вкладки Bootstrap на странице товара БОЛЬШАЯ ПРОСЬБА кто использует мои расширения - писать отзывы в темах расширений, которые были Вам полезны или на сайте разработчика.
*

Mister Shadow

  • Осваиваюсь на форуме
  • 46
  • 1
Не дождался ваших пожеланий... Написал плагин - Инфоблок товара в списке товаров [Скачать]
Я рассчитывал, что в теме еще кто-то ответит на мой вопрос. Не ожидал, что вы сможете так быстро оказать мне помощь.
Думаю, что плагин ваш будет востребован, т.к. мне к примеру легче анализировать популярность товаров глядя на хиты в списке товаров, чем залазить в метрику и смотреть карту кликов или заглядывать в карточку каждого товара. Таким образом я могу делать упор на разновидность того товара, которым чаще всего интересуются. В ближайшее время обязательно протестирую ваш плагин и отпишусь о его работе. Доступный в JS рейтинг мало кто пользует, т.к. люди ленивые, а вот кликнуть на товаре, чтобы глянуть подробности им легко делать. :)
*

Biss

  • Завсегдатай
  • 767
  • 79
Цитировать
Тыкните носом, пожалуйста. Что и куда прописать.

Попробуйте плагин. Установка через Joomla.

Я собрал его (плагин) из первого поста. Если есть у кого замечания или рекомендации по улучшению скрипта - доработаю и включу в плагин
*

uniontrade

  • Захожу иногда
  • 14
  • 1
для универсальности не хватает выбора шаблона JS
с JS 4.14.2 работает только на дефолтном шаблоне
*

Biss

  • Завсегдатай
  • 767
  • 79
Не совсем понимаю. Если вы имеете ввиду выбор шаблона плагином -то да такого не делал.
Шаблон выбирается в настройках магазина, плагин может работать с любым при условии если классы в CSS совпадают
*

jurnuser

  • Новичок
  • 6
  • 0
Попробуйте плагин. Установка через Joomla.

Я собрал его (плагин) из первого поста. Если есть у кого замечания или рекомендации по улучшению скрипта - доработаю и включу в плагин

Здравствуйте!
Установил Ваш плагин, всё работает. А что можно из него убрать, чтобы отображался товар только списоком и убрать текст Вид на странице?
Благодарю за ответ.
*

Biss

  • Завсегдатай
  • 767
  • 79
Список отображается при подключении второго CSS. Если вы хотите чтобы список был всегда то может проще совсем без плагина. Прописать стили в default как нужно и все.
*

jurnuser

  • Новичок
  • 6
  • 0
Список отображается при подключении второго CSS. Если вы хотите чтобы список был всегда то может проще совсем без плагина. Прописать стили в default как нужно и все.

Спасибо, так и сделал, только теперь расстояние между блоками с товаром увеличилось. :(((
*

Biss

  • Завсегдатай
  • 767
  • 79
без ссылки ничего не подскажу
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Непонятки с фото в JoomShopping

Автор Firsoff

Ответов: 55
Просмотров: 16787
Последний ответ 17.05.2017, 23:48:27
от nevigen
Разные шаблоны категорий JS 4

Автор zahar_92

Ответов: 11
Просмотров: 610
Последний ответ 23.06.2016, 20:12:41
от zahar_92
Отображение товаров на сайте

Автор maxoh

Ответов: 3
Просмотров: 416
Последний ответ 20.12.2015, 13:38:14
от dmitry_stas
Вопросы по IceTheme TheShop (относительно шаблона и моду

Автор nevigen

Ответов: 250
Просмотров: 42455
Последний ответ 18.04.2015, 23:34:37
от janja
Неверное отображение русских имён

Автор Mesk911

Ответов: 2
Просмотров: 412
Последний ответ 21.11.2014, 20:50:35
от Mesk911