Примеры возможностей модуля Супер хук(часть 3)

images

На этот раз я покажу как с помощью модуля Супер Хук и плагина jQuery Steps (https://github.com/rstaib/jquery-steps) Сделать табы на странице товаров на подобие как в стандартном шаблоне PrestaShop v. 1.5. Почему именно этот плагин? Да потому, что он лучше подходит к стилям дефолтного шаблона версии 1.6, легкий и поддерживает куки.
То есть мы из стандартного вида вкладок

beefore

сделаем вид

after

 

 

 

Табы для вкладок товара

 

План действий.

1. Подгонка шаблона под формат формирования табов плагном  jQuery Steps.

2. Оборачивание полученного блока в тег div с идентификатором для “стыковки” с плагином

3. Подключение плагина.

Для работы плагина необходимо подогнать шаблон будущих табов к виду как в примере http://www.jquery-steps.com/Examples#tabs. Если мы посмотрим с помощью инструмента разработчика в Мозиле шаблон вкладок для товара таких как характеристики, подробное описание и комментарии к товару то увидим, что заголовки вкладок с тегом h3 находятся внутри тегов section, а нам надо чтобы они были над блоком.

block

 

Давайте с помощью модуля супер хук перенесем заголовки h3 выше блока с селектором section. В примере у нас три вкладки и соответственно три блока с тегом section. Для каждого блока определяем пошагово родительский и дочерний блок. То есть, сначала для блока характеристик определяем уникальный селектор соответствующего блока section и заносим в настройках модуля в поле “селектор блока”.  Затем определяем уникальный селектор блока h3 и заносим его в поле модуля Селектор модуля или HTML код .  В поле ”Позиция по отношению к блоку” выставляем значение над блоком.

У меня получилось для характеристик

 

Селектор блока: section.page-product-box:nth-child(2)

Позиция по отношению к блоку:  Над блоком

Селектор модуля или HTML код: section.page-product-box:nth-child(2) > h3:nth-child(1)

Сохраняем. Обновляем страницу сайта и проделываем тоже самое со следующим элементом HTML с тегом section блока подробного описания товара.

Получаем

Селектор блока: section.page-product-box:nth-child(4)

Позиция по отношению к блоку:  Над блоком

Селектор модуля или HTML код: section.page-product-box:nth-child(4) > h3:nth-child(1)

Сохраняем и обновляем страницу. Для блока комментарии о товаре

Селектор блока: section.page-product-box:nth-child(6)

Позиция по отношению к блоку:  Над блоком

Селектор модуля или HTML код: h3.idTabHrefShort.page-product-heading

Тут одно замечание. При определении уникального селектора заголовка комментариев получается значение #\#idTab5  и в таком варианте скрипт не срабатывает, не переносить заголовок поверх элемента section. Тогда вручную копируем селектор класса, указанный выше.

Сохраняем и при просмотре HTML кода элемента получаем нужный результат-все заголовки наверху.

Переходим ко второму пункту плана.  В настройках модуля  создаем новую строку. Переходим на страницу товара и определяем уникальный селектор элемента верхней части страницы.

toppage

 

Он будет  .primary_block заносим его в поле модуля “Селектор блока”, в поле “Позиция по отношению к блоку” выбираем под блоком, а в поле Селектор модуля или HTML код создаем пустой элемент с тегом div и id=”wntags”. Теперь в поле “JS для контента” добавляем скрипт который “обернет” все нужные нам блоки в div с id=”wizard”

 
Сохраняем.
Заключительный пункт плана. Теперь нам известны два идентификатора, которые мы сами создали-это #wntags селектор к которому при привяжем будущие табы с селектором #wizard.
В настройках модуля создаем новую строку и заполняем следующие поля.
Селектор блока: #wntags

Позиция по отношению к блоку:  Под блоком

Селектор модуля или HTML код: #wizard
Закачиваем архив с файлами плагина jQuery steps. Распаковываем и по ftp закачиваем на сайт из папки js файл jquery.steps.js в папку js в корне сайта и соответственно файл jquery.steps.css в папку css сайта. Затем снова переходим в настройки модуля и дополняем поля

CSS для контента:

 

JS для контента:

 
Сохраняем.
Если все сделали правильно, то появятся табы как в изображении в начале статьи. Конечно пример не из простых, поэтому на этом статью завершу и в следующей покажу самые простые примеры возможностей модуля Супер хук Результат работы в данной статье можете посмотреть на тестовом сайте http://fb7914dx.bget.ru/ru/tshirts/1-faded-short-sleeve-tshirts.html

Comments (6)

Инга
01.04.2016 - 02:55 / Ответить

Что-то не выходит у меня “каменный цветок”), уже что только не перепробовала(
ошибок нет, но в html выходят только скрипты, не выводится содержимое(
названия над селектором
ошибок не выдает, но и вкладки тоже)
оставила пока без вывода, так что можете посмотреть. скрипты и стили пробовала как в корневые папки, так и в папки темы
krasotulecka.ru/%D1%83%D0%BA%D1%80%D0%B0%D1%88%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B4%D0%BB%D1%8F-%D0%B2%D0%BE%D0%BB%D0%BE%D1%81/%D1%80%D0%B5%D0%B7%D0%B8%D0%BD%D0%BA%D0%B8/%D1%80%D0%B5%D0%B7%D0%B8%D0%BD%D0%BA%D0%B0-%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D1%87%D0%B5%D0%BA#/26-размер_украшения-3/10-цвет-red

01.04.2016 - 10:37 / Ответить

Результата я так и не увидел, скорее всего отключили скрипт. Для начала не стоит все копировать из статьи. Это пример, у Вас могут быть другие селекторы. И что значит “в html выходят только скрипты” для меня не понятно выражение.

Инга
15.05.2016 - 02:05 / Ответить

сорри, не видела сообщения((
все получилось после некоторых мучений), сама ступила)

Инга
01.04.2016 - 02:55 / Ответить

судя по тому что получилось их ссылки, надо чпу переделывать)

01.04.2016 - 10:38 / Ответить

Что получилось?

Инга
15.05.2016 - 02:08 / Ответить

там единственное, что не продумано в этом примере, что если я хочу добавить что-то под таблицей, например стандартные “просмотренные товары”, то они автоматом на вкладку попадают, а не под таблицу… тк селекторы совпадают

Leave a Reply