Примеры возможностей модуля Супер хук(часть 2)
В этой статье я покажу как добавить альтернативную кнопку заказа в один клик с помощью скрипта jbOneClick, он имеет минимум полей для заполнения пользователей и покажу простой пример дополнения контента на страницу товара со стилями вашего шаблона. Как и в предыдущей статье все примеры будут показаны на стандартном шаблоне PrestaShop 1.6.x.
Заказ в один клик, скрипт jbOneClick
Сам скрипт можно скачать по адресу http://jetbit.ru/market/zakaz-tovara-v-odin-klik-na-sajt-jboneclick. Там же прочитать информацию о скрипте. Для настройки в вашем магазине выполните следующие действия. Скачайте архив и распакуйте его. Откройте файл postmaster.php с помощью редактора кода Notepad++(не блокнотом) и укажите почтовые ящики куда будут приходить письма с заказами
|
1
2
3
|
$FROM = '[email protected]'; // e-mail отправителя (иногда требуется указать разрешенный настройками e-mail)
|
Далее поместите в корень сайта файл postmaster.php , файл jquery.jboneclick.css в папку css, а файл jquery.jboneclick.js в папку js в корне сайта. Переходим к настройке модуля Супер хук. Как и обычно, определяемся с положением кнопки На этот раз я покажу её размещение под кнопкой в корзину и оформим кнопку соответственно со стилями кнопки в корзину. Хочу заметить, что при размещении кнопки в другом месте выглядеть она будет по другому. Определяем селектор кнопки в корзину с помощью инструмента разработчика мозилы, он будет #add_to_cart
В настройках модуля нажимаем плюсик-добавить новую запись и настраиваем поля следующим образом:
Селектор блока: #add_to_cart
Позиция бока: 0
Позиция по отношению к блоку: внутри блока снизу
Селектор модуля или HTML блок:
|
1
|
<a class="buy_oneclick" ><button type="submit" name="Submit" class="btn btn-default exclusive btn-twitter oneclick"> <span id="oneclickz"> Купить в 1 клик</span> </button></a>
|
CSS для контента:
|
1
2
3
4
5
6
7
|
<link rel="stylesheet" type="text/css" href="/css/jquery.jboneclick.css">
<style>
.oneclick{margin-top:20px;}
#oneclickz{font-size:13px;}
#jbOneClick_overlay{z-index:10000 !important;}
.jbOneClick{z-index:10001 !important;}
</style>
|
JS для контента:
|
1
2
3
4
5
6
7
8
|
</script>
<script type="text/javascript">
$( init );
function init() {
var name=( $('h1').html() );
$('.buy_oneclick').attr('data-product', name);
}
</script>
|
Сохраняем и любуемся результатом.
Добавление дополнительной вкладки для товара
Разместим дополнительную вкладку над характеристиками товара имеющую такой же стиль. Для этого наводим курсор мыши на заголовок характеристики и нажимаем правую кнопку мыши. В выпадающем списке выбираем исследовать элемент. Затем с помощью кнопки выбора элемента страницы выделяем блок с полным описанием товара. Кликаем на него.
В панели инструментов на выбранном блоке нажимаем снова правую кнопку мыши и в выпадающем списке выбираем копировать внешний HTML.
В настройках модуля сохраненный блок для редактирования вставляем в поле CSS для контента.
Изменяем заголовок в тегах h3 и ниже содержание. Получаем что то вроде
|
1
2
3
4
|
<section class="page-product-box">
<h3 class="page-product-heading">Эта вкладка сделана с помощью модуля супер хук</h3>
<div class="rte"><p>С помощью модуля Супер хук можно создавать и свой контент вписывающийся в стили вашего шаблона.</p></div>
</section>
|
Вырезаем полученный результат и вставляем в поле Селектор модуля или HTML блок. Затем на странице товара выявляем уникальный селектор блока характеристики он будет section.page-product-box:nth-child(2) и заносим его в поле селектор блока. В поле позиция по отношению к блоку ставим внутри блока сверху и сохраняем. Переходим во фронт офис и наблюдаем картину
Продолжение следует на webnewbie.ru
Leave a Reply