Файлы

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

Улучшаем таблицу сравнения материалов 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
    Мы находимся в Минске
    работаем по всей РБ