Модуль покупки за один клик

images

На этом сайте Вы можете найти несколько модулей позволяющих упростить заказ, самый свежий модуль Редактор страницы быстрого заказа, который позволяет убрать буквально все поля регистрации и адреса покупателя.

Доступный и легкий способ покупки в интернет-магазинах является одним из основных способов привлечения клиентов. Например, модуль быстрого заказа в корзине. Поэтому разработчики модулей и скриптов постоянно работают над данной задачей. Когда я написал модуль заказа обратного звонка, в котором был использован скрипт Callme Назара Токаря, ко мне стали обращаться с просьбами и пожеланиями сделать модуль покупки за один клик на основе скрипта Buyme. В ответ я обращал внимание моих читателей на уже существующий модуль-Быстрый заказ на e-mail от Ors. Но как оказалось пользователей не устраивал внешний вид и все ни как у скрипта Buyme. Я решил исправить ситуацию и показать как можно сделать всплывающую форму по клику на кнопку для модуля быстрого заказа совместимый с версией 1.5(для версии модуля совместимой с ПрестаШоп 1.4 все будет аналогично). И все это можно сделать штатными средствами ПрестаШоп.

Для изменения внешнего вида модуля будем править два файла модуля- файл extraRight.tpl, который находится в директории modules/fastorder/views/templates/hook/ и файл fastorder.css, который находится в папке css модуля.

Вот что у нас было и что должно получиться

bilostalo

Для отображения формы модальном окне будем использовать скрипт fancybox, поэтому открываем файл шаблона модуля extraRight.tpl текстовым редактором Notepad++ и с самого начала добавляем ссылку на скрипт

и добавляем стили для модального окна указав ссылку

теперь необходимо вызвать fancybox и указать объекты, на которые мы его повесим.

Затем добавляем ссылку используя class=”button” означающий, что это кнопка и стили будут автоматически браться из файла global.css темы вашего магазина, а еще этот класс у нас будет являться объектом для скрипта. Ссылка у нас будет указывать на идентификатор #fastorder, который в форме указан как id

Для того что бы форма у нас не отображалась вместе с кнопкой, спрячем ее в div со стилем display:none

В конце формы не забываем закрыть наш тег div

Сохранив все изменения, можете увидеть результат проделанной работы и нажав на кнопку убедиться, что форма у нас теперь в модальном окне и функционирует согласно настроек модуля.
modal
Код файла extraRight.tpl с изменениями.

 

Осталось только решить вопрос с расположением кнопки. Я решил ее поместить под основной кнопкой “Добавить в корзину” . Для этого я помещаю нашу кнопку между тегов div с классом but и задаю стили для нее в файле стилей модуля fastorder.css

Полный код стилей будет таким

Вот и все. А по поводу подключения скрипта Buyme хочу отметить, что данный скрипт без вмешательства в изменения контроллеров движка Престы установить сложно. Для любопытствующих оставлю ссылку с подробной инструкцией как это делается http://dedushka.org/kod/4199.html и конечно же вам решать самим что лучше. Многие скажут, что мол скрипт Buyme еще позволяет сделать подключение смс рассылок, на что заранее отвечаю во первых, это не критично, а во вторых, кто мешает подключить смс рассылку на почтовом ящике.
До встречи на webnewbie.ru/

Comments (57)

Anton
18.09.2015 - 00:51 / Ответить

Подскажите, пожалуйста. Преста 1.6 стоит. В мобильных версиях сайта (разрешение меньше 768 px) не открывается это окошко. На других разрешениях все работает. В чем может быть проблема?

18.09.2015 - 01:32 / Ответить

Если вопрос про модуль быстрого заказа на email, то скорее всего это связано с тем, что форма оформления заказа самого модуля не адаптивная. Статья была написана два года назад и я не знаю какая версия этого модуля сейчас и менялось ли что то с тех пор. Что бы окно открывалось на всех мобильных устройствах на версии 1.6 нужно изменить шаблон модуля и его стили по стандартам фреймворка bootstrap, который используется в этих версиях престы.

Антон
18.09.2015 - 02:11 / Ответить

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

18.09.2015 - 15:01 / Ответить

В исправлениях применяется только один штатный плагин fancybox и никаких других скриптов. Он прекрасно работает на мобильных устройствах, например, при просмотре увеличенного изображения товаров. Главное правильно указать пути к плагину. Следовательно, если встроенный плагин адаптивный, то неправильно настроены стили в форме модуля заказа на email.

Leave a Reply