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

miniature

Как и обещал буду выкладывать примеры дополнительных возможностей модуля Супер хук. По сути это универсальный модуль, с помощью которого на страницу сайта можно добавлять дополнительное содержание. Примеров будет достаточно и начну, пожалуй, с добавления популярных скриптов, скрипт buyme — кнопка заказа в один клик и скрипт модальное окно на странице товаров при нажатии кнопки.

Заказ в один клик скрипт Buyme.

Для начала объясню почему данный способ добавления этого скрипта лучше чем использования готовых модулей. Преимущества следующие:

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

-расположить кнопку заказа товара можно в любом месте.

Итак, скачиваем свежую версию Buyme с сайта автора http://dedushka.org/kod/6755.html

Внизу страницы ссылка на архив и демо для тех кто еще не знаком со скриптом.

Распакуйте архив и в редакторе кода, например Notepad++ (не блокноте) откройте файл buyme/lib/send.php и укажите почту или несколько адресов почты, куда скрипт будет отправлять уведомления:

 

Сохраните изменения и закачайте папку buyme в корень сайта по ftp.

Если вам понадобится настройка дополнительных функции почитайте об этом на странице инструкции http://dedushka.org/kod/5625.html

Переходим к настройкам скрипта в модуле Супер хук. Сначала определитесь с местоположением кнопки. Я в примере предлагаю разместить её под ценой товара. Все примеры будут показаны в стандартном шаблоне PrestaShop 1.6.x. Определяю селектор блока ценника товара с помощью инструмента разработчика в Mozilla FireFox(Мозила).

Как определять селекторы показано в видео-инструкции https://www.youtube.com/watch?v=xTSXTj0QM5E

Селектором класса будет «.content_prices»

Далее переходим в настройки модуля и начинаем заполнять поля:

Селектор блока: .content_prices (не забываем про точку перед селектором).

Позиция блока: 0 .

Позиция по отношению к блоку: Внутри блока снизу.

Селектор модуля или HTML код :

 

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

 
поправил стили, чтобы окно скрипта и темный фон полностью перекрывали все блоки сайта.
Js для контента:

 

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

Сохраняем и наблюдаем результат работы скрипта buyme

buyme1

Всплывающее окно на странице товара по нажатию кнопки.

Для примера я воспользуюсь готовым решением https://github.com/vast-engineering/jquery-popup-overlay

Кнопку разместим на странице товара Blouse в кратком описании. Для этого отредактируем текст краткого описания и добавим следующую строку, в исходном коде(нажмите кнопку </> в редакторе TyniMCE)

 

popupadmin

Сохраните изменения.

С помощью инструмента разработчика в Мозиле определяем уникальный селектор слова Тест

Переходим к настройкам модуля и заполняем поля.

Селектор блока:

 

Позиция блока: 0

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

Селектор модуля или HTML код :

 

Здесь вы можете изменить название кнопки вместо Open popup , свой заголовок и содержание.

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

 

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

 

Сохраняем и наслаждаемся результатом

popup1popup2

До встречи на webnewbie.ru 

Leave a Reply