Инструкция для начинающих в помощь для использования модуля Супер хук.

superhook

Хочу сразу оговориться, что статья  написана для веб-новичков, поэтому будет содержать ошибки терминологии, так как буду стараться описывать все простым языком.

Краткое описание Блока HTML

Веб-страница представляет собой систему блоков элементов HTML  со своим контентом(содержанием) в каждом блоке,  например,
<div id=’cena’>
                     Цена: 20 руб.
<div>
<span class=’nazvanie_tovara’>
                     Модуль Супер хук
</span>
В примере представлены два блока, выделенные разными цветами зеленым и оранжевым. Каждый блок помимо содержания внутри (Цена: 20 руб. и Модуль Супер хук) обрамляется так называемыми тегами. Первый тег открывающий блок, второй с черточкой закрывающий, в нашем случае это <div></div> и <span></span>, которые в свою очередь имеют свой идентификатор (id) и класс(class). Предназначены они для визуального оформления(стилизации) страницы сайта с помощью технологии CSS, где их  называют селектор id и селектор класса.
Для того чтобы различать в CSS их обозначают с помощью знаков. Для id это решетка #, а для class точка. Например, в нашем примере   id=’cena’ будет обозначаться как
#cena
,а class=’nazvanie_tovara’ будет обозначаться как
. nazvanie_tovara.
Так же эти селекторы используются в JavaScript и jQuery для того, чтобы привязать работу скрипта к определенному блоку.
Кроме этого в CSS используют селекторы типа. Это части тега. В нашем случае это селектор типа div и селектор типа span.

Определение селектора с помощью браузера Mozilla FireFox

Самый простой способ определить селектор с помощью Мозилы. Покажу как это делается. Открываем страницу с товаром и на этот раз перенесем модуль дополнительной информации, который сейчас находиться под кнопкой в корзину, выше ценника товара. То есть нам нужно определить селектор блока с ценой товара как родительского блока и селектор модуля, как дочернего блока. Открытие дополнительной панели в FireFox такое же как и в Хроме, сочетание клавиш Ctrl+Shift+I. Затем в меню дополнительного поля слева находим стрелочку(выбрать элемент страницы) и нажимаем её. Теперь проводя курсором по странице сайта мы видим выделения блоков. Наводим курсор на блок с ценником и при  выделении этого блока кликаем на него. Теперь в дополнительном поле выделиться начало html блока
<div>
Кликаем по нему правой кнопкой мыши и в появившемся окошке выбираем пункт «копировать уникальный селектор».
 16
Копируем  и в настройках модуля Супер хук вставляем в поле Селектор блока. Селектором является
.content_prices
 Тоже самое проделываем модулем Дополнительная информация
 15
в поле настроек модуля Селектор модуля или HTML код  заносим дочерний селектор           .block_wnd
 Позицию по отношению к блоку выбираем «Внутри блока снизу» И сохраняем результат.
  17
Было                                                                                   Стало
было                     стало
       Видео инструкция: https://www.youtube.com/watch?v=xTSXTj0QM5E

Определение селекторов с помощью браузера Google Chrome

В модуле Супер хук требуется указать селектор блока(родительский блок), к которому мы хотим привязать блок модуля (дочерний блок). Эти селекторы очень легко определить с помощью браузера Google Chrome(Гугл Хром). Для этого нужно открыть инструмент разработчика в браузере с помощью комбинации клавиш Ctrl+Shift+I  или просто навести курсор мыши на страницу сайта и нажать правую кнопку мыши. И в выпадающем меню выбрать Просмотр кода элемента.  Откроется дополнительное окно с отображением html кода и небольшого окошка справа с CSS кодом. Окно имеет меню с изображением лупы     мобильного телефона и название вкладок начиная с Elements.
 1
 Теперь нажмите на лупу и поводите курсором мышки по окну сайта и увидите как начинают выделятся блоки с помощью визуального затемнения. Давайте остановим курсор мыши на кратком описании товара.
4
 Внизу выделенного поля мы видим сноску с необходимыми нам селекторами для настройки модуля. На картинке указан селектор типа div, id селектор
                                                                                                #short_description_content
, далее указаны селекторы класса через точку, но они нас не интересуют. Нам интересен только основной селектор id. Он и будет нужен как указатель родительского блока. В настройках модуля в поле Селектор блока записываем этот идентификатор блока
                                                                                               #short_description_content
Теперь давайте прикрепим к этому блоку модуль логотипы оплаты, который сейчас находится под кнопкой в корзину. Для этого нам нужно определить селектор блока логотипов.
И я покажу второй способ определения. Переключим в нижнем окне в меню инструментов разработчика в положение Elements. И наведем курсор мышки на модуль логотипов оплаты. Кликните правой кнопкой мыши. В выпадающем списке выберите нижний вкладку Просмотр кода элемента. В окне разработчика в HTML коде ведите курсор мыши пока блок модуля логотипов не выделиться в синий оттенок и увидите открывающий тег div с id=’product_payment_logos’. Это и есть дочерний идентификатор. Запишем его в настройках модуля в поле «Селектор модуля или HTML код « как селектор
                                                                                                  #product_payment_logos
Выберем позицию по отношению к блоку в настройках  со значением «Под блоком» и сохраним результат.
 6
 Переходим на страницу сайта и наблюдаем результат
 7
Видео инструкция: https://www.youtube.com/watch?v=c5UafCGsr-U
Таким образом мы можем переместить блок модуля, и не только модуля, в любое место страницы сайта. Перенос ограничен только пределами самой страницы. Перенос на другую страницу не возможен.

Дополнительные возможности модуля

Как видно на странице настроек есть еще несколько полей которые мы не заполняли. Опишу для чего они используя пример. Модуль позволяет помимо переноса блоков дополнять станицу своим содержимым используя технологии HTML, JS и CSS. Например добавим  виджет группа вконтакте для начала на боковую панель сайта.
Итак, определим родительский селектор. Для примера я предлагаю модуль категорий в боковой панели.
8
Селектор определен    #categories_block_left   . Записываем его в поле «Селектор блока» модуля. Затем заходим на страницу инструкции  по добавлению виджета  по ссылке https://vk.com/dev/widget_community, в которой указан html код и js.
Копируем Html код

 

и вставляем его в поле «Селектор модуля или HTML блок»
Копируем JS код

 

И вставляем его в поле «JS для HTML кода»
В поле позиция по отношению к блоку выбираем «внутри блока снизу» и сохраняем результат. Но тут не совсем все хорошо со стилями. Ширина виджета слишком мала. И чтобы сравнять её с шириной боковой колонки определим эту ширину с помощью инструмента разработчика.  Прокрутим в окошке стилей, в том что правее окна html, скрол в самый низ и увидим ширину и высоту боковой колонки.
9
Как видно ширина равна 270 px. Исправим в скрипте виджета данные
                                           width: “270″
Помимо добавления содержимого модуль позволяет сделать замену содержимого блока. Например, тот же блок вконтакте давайте поместим в футере магазина с заменой блока с информацией аккаунта «My accaunt»
 10
Определяем его Селектор одним из способов и выясняем, что блок имеет класс
class=”footer-block col-xs-12 col-sm-4″
То есть его селектор будет .footer-block   берется только первый класс до пробела и селектор в этом случае записывается с точкой спереди. Копируем и записываем его в поле «Селектор блока» а в поле «Позиция по отношению к блоку» выбираем «замена контента» . Остальные поля мы уже заполняли, поэтому сохраняем результат и что же видим? У нас перезаписался не блок «My account», а блок «Categories». А все потому, что все три блока: Categories, Information и My account имеют одинаковый класс. И для того чтобы нам заменить нужный блок воспользуемся изменением значения поля «Позиция блока» в настройках модуля. Значение для первого блока Categories равно нулю, для второго- Information равно 1, а для третьего My account
равно 2. Ставим цифру 2 и блок становится в нужное место.
 12
Таким образом я показал все возможности модуля. Попробуйте все очень просто. А самое главное модуль не меняет код магазина и поэтому все ваши эксперименты будут безопасны.
Автор: Dulco        Ресурс: http://webnewbie.ru/

Leave a Reply