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

mini

В этой статье я покажу как добавить альтернативную кнопку заказа в один клик  с помощью скрипта jbOneClick, он имеет минимум полей для заполнения пользователей и покажу простой пример дополнения контента на страницу товара со стилями вашего шаблона. Как и в предыдущей статье все примеры будут показаны на стандартном шаблоне PrestaShop 1.6.x.

Заказ в один клик, скрипт jbOneClick

Сам скрипт можно скачать по адресу http://jetbit.ru/market/zakaz-tovara-v-odin-klik-na-sajt-jboneclick. Там же прочитать информацию о скрипте. Для настройки в вашем магазине выполните следующие действия. Скачайте архив и распакуйте его. Откройте файл postmaster.php с помощью редактора кода Notepad++(не блокнотом) и укажите почтовые ящики куда будут приходить письма с заказами

 

Далее поместите в корень сайта файл postmaster.php , файл  jquery.jboneclick.css в папку css, а файл  jquery.jboneclick.js в папку js в корне сайта. Переходим к настройке модуля Супер хук. Как и обычно, определяемся с положением кнопки На этот раз я покажу её размещение под кнопкой в корзину и оформим кнопку соответственно со стилями кнопки в корзину. Хочу заметить, что при размещении кнопки в другом месте выглядеть она будет по другому. Определяем селектор кнопки в корзину с помощью инструмента разработчика мозилы, он будет #add_to_cart

В настройках модуля нажимаем плюсик-добавить новую запись и настраиваем поля следующим образом:

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

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

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

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

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

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

 
Сохраняем и любуемся результатом.

1

Добавление дополнительной вкладки для товара

Разместим дополнительную вкладку над характеристиками товара имеющую такой же стиль. Для этого наводим курсор мыши на заголовок характеристики и нажимаем правую кнопку мыши. В выпадающем списке выбираем исследовать элемент. Затем с помощью кнопки выбора элемента страницы выделяем блок с полным описанием товара. Кликаем на него.
2
В панели инструментов на выбранном блоке нажимаем снова правую кнопку мыши и в выпадающем списке выбираем копировать внешний HTML.
3
В настройках модуля сохраненный блок для редактирования вставляем в поле CSS для контента.
4
Изменяем заголовок в тегах h3 и ниже содержание. Получаем что то вроде

 
Вырезаем полученный результат и вставляем в поле Селектор модуля или HTML блок. Затем на странице товара выявляем уникальный селектор блока характеристики он будет section.page-product-box:nth-child(2) и заносим его в поле селектор блока. В поле позиция по отношению к блоку ставим внутри блока сверху и сохраняем. Переходим во фронт офис и наблюдаем картину
5
Продолжение следует на webnewbie.ru

Leave a Reply