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

Apps-preferences-plugin-script-icon

Как и обещал, на этот раз покажу довольно простые примеры работы с модулем Супер хук. На этот раз мы добавим кнопку наверх сайта без использования картинки и установим скрипт расчета  доставки для интернет магазина от  http://russianpostcalc.ru/devel-just-to-index.php. Помимо статьи планирую записать наглядное видео для этих примеров.

Кнопка-стрелка наверх сайта

Подобных скриптов можно найти массу на просторах интернета, но мой вариант отличается отсутствием картинки и заменой ей иконкой awesome. Отрываем настройку нового блока в модуле и заполняем поля.

Селектор блока: body (это селектор типа всей страницы сайта )

Позиция по отношению к блоку: можете выбрать любой вариант, разницы нет так как положение кнопки будет определяться задаваемыми стилями.

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

В блоке мы добавляем иконку-стрелку в тегах <code>< i ></code>

Изменяя класс-меняем нужную иконку выбирая из списка http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

Далее добавляем стили для кнопки


Для изменения цвета копки  замените color: red; на нужный вариант.

И добавляем скрипт . 


Сохраняем и ставим статус в положение да. Переходим на главную страницу сайта и прокручиваем страницу вниз и наблюдаем появление стрелки.

Калькулятор расчета стоимости и срока доставки

С помощью сервиса RussianPostCalc.ru установим калькулятор на странице оформления заказа. Весь нужный код вы увидите пройдя по ссылке указанной в начале статьи. Единственно я объясню как и куда нужно добавлять в настройках модуля. Открываем новый блок и заполняем следующие поля.

Блок с калькулятором я хочу разместить между блоками нового клиента и способы доставки на странице оформления заказа с установленной формой в один шаг. Для этого определим уникальный селектор блока нового клиента он будет #opc_new_account заносим его в селектор блока.

Добавляем HTML содержимое и в поле 

Во второй строчке нужно указать ваш индекс( я указал 690000 код Владивостока)

Добавляем стили .

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

В данном варианте я не подгружал стили из файла rpc_style.css , а скопировал его код и поправил  под стили нашего шаблона PrestaShop , что и рекомендуется на сервисе.

Сохраняем и ставим статус да.

calculyator

 

Резюме

Возможности модуля Супер хук огромные, это не только перемещение существующих блоков сайта, но и добавление своего контента. Для этого можно использовать виджеты разнообразных сервисов , находить и устанавливать интересные плагины помогающие не только украсить ваш магазин, но и добавить его функционал.  Можно отказаться от многих модулей и и использовать всего один Супер модуль. Удачи в бизнесе и до встречи на страницах webnewbie.ru

 

 

 

Leave a Reply