Примеры возможностей модуля Супер хук(часть 1)
Как и обещал буду выкладывать примеры дополнительных возможностей модуля Супер хук. По сути это универсальный модуль, с помощью которого на страницу сайта можно добавлять дополнительное содержание. Примеров будет достаточно и начну, пожалуй, с добавления популярных скриптов, скрипт buyme — кнопка заказа в один клик и скрипт модальное окно на странице товаров при нажатии кнопки.
Заказ в один клик скрипт Buyme.
Для начала объясню почему данный способ добавления этого скрипта лучше чем использования готовых модулей. Преимущества следующие:
-обновление скрипта происходит постоянно и обновить его на сайте вам будет проще и быстрее, чем дожидаться выхода обновленного модуля.
-расположить кнопку заказа товара можно в любом месте.
Итак, скачиваем свежую версию Buyme с сайта автора http://dedushka.org/kod/6755.html
Внизу страницы ссылка на архив и демо для тех кто еще не знаком со скриптом.
Распакуйте архив и в редакторе кода, например Notepad++ (не блокноте) откройте файл buyme/lib/send.php и укажите почту или несколько адресов почты, куда скрипт будет отправлять уведомления:
|
1
2
|
//адрес почты для отправки уведомления
$to = "yourMail"; //несколько ящиков могут перечисляться через запятую
|
Сохраните изменения и закачайте папку 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 код :
|
1
|
<p class="buttons_bottom_block no-print"><input type="button" class="b1c b1c-submit" value="Купить за 1 клик"></p>
|
CSS для контента:
|
1
2
3
4
5
6
|
<style>
.b1c-bg {
z-index: 9999 !important;}
.b1c-form{
z-index: 10000 !important;
</style>
|
поправил стили, чтобы окно скрипта и темный фон полностью перекрывали все блоки сайта.
Js для контента:
|
1
2
3
4
5
6
7
8
9
10
|
<script type="text/javascript" src="/buyme/js/buyme.js"></script>
<script>
$(document).ready(function(){
$("h1").addClass("b1c-name");
$("#primary_block").addClass("b1c-good");
$(".attribute_label").addClass("b1c-caption");
$(".attribute_select").addClass("b1c-option");
});
</script>
|
Здесь добавлен скрипт дополнения классов в нужных местах шаблона магазина.
Сохраняем и наблюдаем результат работы скрипта buyme
Всплывающее окно на странице товара по нажатию кнопки.
Для примера я воспользуюсь готовым решением https://github.com/vast-engineering/jquery-popup-overlay
Кнопку разместим на странице товара Blouse в кратком описании. Для этого отредактируем текст краткого описания и добавим следующую строку, в исходном коде(нажмите кнопку </> в редакторе TyniMCE)
|
1
|
<p id="idtest">Тест</p>
|
Сохраните изменения.
С помощью инструмента разработчика в Мозиле определяем уникальный селектор слова Тест
Переходим к настройкам модуля и заполняем поля.
Селектор блока:
|
1
|
#short_description_content > p:nth-child(2)
|
Позиция блока: 0
Позиция по отношению к блоку: Замена контента
Селектор модуля или HTML код :
|
1
|
<button class="my_popup_open">Open popup</button><div id="my_popup"> <h4>Заголовок</h4> <p>Попробуйте изменить ширину и высоту окна браузера, или повернуть устройство, а также попытаться перейти с клавишей<kbd>Tab</kbd> зажатой.</p> <p>Вы можете закрыть диалоговое окно, нажав <kbd>Esc</kbd> или нажав на фоне пределами области содержимого, или нажав на кнопку Закрыть.</p><button class="my_popup_close">Закрыть</button> </div>
|
Здесь вы можете изменить название кнопки вместо Open popup , свой заголовок и содержание.
CSS для контента:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<style type="text/css">
#my_popup {
max-width: 44em;
opacity: 1;
visibility: visible;
display: inline-block;
outline: none;
text-align: left;
position: relative;
vertical-align: middle;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
display: none;
margin: 1em;
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
z-index: 20001 !important;
}
#my_popup_wrapper {
z-index: 20001 !important;
}
#my_popup_background{
z-index: 20000 !important;
}
kbd {
padding: 2px 4px;
font-size: 90%;
color: #fff;
background-color: #333;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}
</style>
|
JS для контента:
|
1
2
3
4
5
6
7
8
9
10
|
<script src="http://www.jqueryscript.net/demo/Responsive-Accessible-jQuery-Modal-Plugin-Popup-Overlay/jquery.popupoverlay.js"></script>
<script>
$(document).ready(function() {
// Initialize the plugin
$('#my_popup').popup();
});
</script>
|
Сохраняем и наслаждаемся результатом
До встречи на webnewbie.ru
Leave a Reply