Файлы

Наши разработки

Улучшаем таблицу сравнения материалов jbZoo

Улучшаем таблицу сравнения материалов jbZoo

Работая с jbZoo иногда на ум прям влазит фраза:

- Всем хорош запорожец, но пулемета нету!

Проще говоря - оно вроде норм и правильно, но вот зачастую самой очевидной вещи нет! То же самое можно сказать о таблице сравнения.

Вот есть переключатель со сравнения по столбцам на сравнение по строкам! Здорово, но только как на потыкаться больше ни на что не годен. 

Гораздо полезнее было бы иметь возможность на лету удалять из этого списка сравнения записи, которые клиент при этом самом сравнении отбрасывает как не подходящие.

Ведь в этом и есть вся фишка сравнения на мой взгляд. - Накидать кучку всего а потом оставить только самое подходящее.

Так же очень хотелось бы сделать возможность прокрутки по горизонтали табличку с элементами не влезшими на страницу.

Собственно говоря эту проблему и рашаем в данном патче.

Патч работает на версии JBZoo: 2.3.1 Pro rev3230. Имеются обращения в стилях к Bootstrap 3 и его шрифтам. В частности к иконкам.

опируем из архива файл _default.php на сервер по пути: Не забудьте при этом заменить ВАШ_ШАБЛОН на имя папки вашего собственно говоря шаблона. 

media/zoo/applications/jbuniversal/templates/ВАШ_ШАБЛОН/renderer/compare/

Так же можете добавить CSS. е факт правда, что они заработают нормально сразу у вас. Но запросто может статься так, что заработают. :)

/* compare */
table#comparetablewrapp>thead>tr>th {vertical-align: bottom;border: none;line-height:1.3em;overflow: hidden;text-align: center;}
table#comparetablewrapp>thead>tr {background: #202e51;color: #fff;}
table#comparetablewrapp>thead>tr a {color: #d5ac47;}
table#comparetablewrapp .jbcompare-wrapper {margin-right: 30px;}
table#comparetablewrapp .jsCompareTable {font-size: 12px;}
table#comparetablewrapp .scrollingcomp {width: 100%;overflow-x: scroll;}
table#comparetablewrapp td.jbcompare-names {width: 200px;}
table#comparetablewrapp th.jbcomparenames span {display:block;position: absolute;background: #d5ac47;z-index: 10;color: #fff;padding: 5px 10px;}
a.jbcompare-clear {font-size: 14px;color: #b11111;}
table#comparetablewrapp .glyphicon-stats:before {color: #f00;content: "\e014";}

Кнопки удаления - модифицированный CSS стилями элемент сравнения. Для отображения кнопок удаления элементов, просто добавьте в элементы для сравнения сам элемент сравнения. 

Принцип надеюсь понятен. В табличе сравнения будут выведены соответствующие элементы, стилизованы при помощи CSS. Вы просто удаляете итем из сравнения, а за пропадание его налету отвечает jquery. 

И будем верить, что заработает :)

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

Оставить комментарий

Вы комментируете как Гость.

Сказать спасибо!

Статус материала

  • jomla
  • jbzoo
  • css3
  • html5
  • Java script
  • jquery
  • bootstrap
Мы находимся в Минске
работаем по всей РБ
  • mts+375 29 779-72-95viber
  • vel+375 44 779-72-95
  • email: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
  • skype: tirby_kat
Индивидуальный предприниматель
Кулак Сергей Николаевич
УНП: 590816946
зарегистрирован Зельвенским районным исполнительным комитетом
от 01.06.2010
Свяжитесь со мной