Модуль купить в один клик для товаров в opencart v2.x с библиотекой jQuery

Часто клиент просит настроить покупку товара в 1 клик на opencart совместно с корзиной покупателя. Сама функциональность покупки в 1 клик заключается в том, чтобы отправить администратору сайта контактные данные покупателя и товар, который он выбрал. В нашем случае я покажу именно такой способ. Он не требует администрирования в админке. Клиент кликает на кнопку заказа, появляется всплывающая форма, в которой заполняются обязательные поля и отправляются администратору магазина на почту. Т.е. я расскажу о самом простом способе.

Для начала нужно подключить библиотеку jquery, скачайте последнюю версию с оф сайта.

подключить можно так:

<script src="https://code.jquery.com/jquery-3.0.0.js" type="text/javascript"></script>

А можно скачать и подключить локально, кому как удобно.

Потом нужно подключить библиотеку fancybox, обычно я ее использую во всех проектах.

Примерно так:

<script src="fancybox/jquery.fancybox.js" type="text/javascript"></script>

<script src="fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>

<link href="fancybox/jquery.fancybox.css" rel="stylesheet">

Следующим шагом создадим html код, который будет выполнять функции отправки формы и используем его структуру для генерации в модальном окне.

Этот куд ни куда не вставляется, просто на основе его делается генерация средствами jquery

<!-- shablon-form-click-->

<div class="form-product-basket">

<div class="image"></div>

<div class="contact">

<div class="title"></div>

<div class="param"></div>

<div class="data">

<input type="text" name="name" placeholder="Ваше имя*">

<input type="text" name="email" placeholder="Ваше email*">

<button class="buttons basket-click">Отправить</button>

</div>

</div>

</div>

<!-- end shablon-form-click-->

Этот шаблон будет создаваться средствами jquery для любого товара с подстановкой нужных данных о товаре.

Теперь в шаблон вызова товаров в категории вместо кнопки заказать поставим другую или изменим существующую

<button class="buttons basket" data-item="<?php echo $product['product_id']; ?>"><?php echo $button_cart; ?></button>

в скрипте common.js создадим функцию обработчик из выше описанного html шаблона,, я его сделал на чистом jquery, чтобы не кешировались данные:

$('.basket').click(function(){

$.fancybox( $('<form/>').attr({'method':'post','enctype':'multipart/form-data','id':'unic_'+$(this).data('item')})

.append( $('<div/>').attr({'id':'cartform'}).addClass('form-product-basket')

.append( $('<div/>').addClass('image')

.append( $('<img/>').attr({'src':$(this).data('image'),'width':'150'}) )

.append( $('<div/>').html('Цена: ').append( $(this).data('price') ) )

)

.append( $('<div/>').addClass('contact')

.append( $('<div/>').addClass('title') )

.append( $('<div/>').addClass('param')

.append( $('<input/>').attr({'type':'hidden','name':'title','value':$(this).data('title')}) )

.append( $('<input/>').attr({'type':'hidden','name':'price','value':$(this).data('price')}) )

.append( $('<input/>').attr({'type':'hidden','name':'url','value':$(this).data('url')}) )

.append( $('<input/>').attr({'type':'hidden','name':'src','value':$(this).data('image')}) )

.append( $('<input/>').attr({'type':'hidden','name':'freeze','value':$(this).data('freeze')}) )

)

.append( $('<div/>').addClass('data')

.append( $('<input/>').attr({'type':'text','name':'name','placeholder':'Ваше имя*'})

.after( $('<div/>').addClass('text-danger error_name') ) )

.append( $('<input/>').attr({'type':'text','name':'email','placeholder':'Ваш email*'})

.after( $('<div/>').addClass('text-danger error_email') ) )

.append( $('<input/>').attr({'type':'text','name':'phone','placeholder':'Ваш телефон','id':'phone'}) )

.append( $('<button/>').addClass('buttons basket-click').html('Отправить').data('id',$(this).data('item')) )

)

)

)

)

})

При клике на кнопку "заказать товар" в списке товаров (в категории) библиотека fancybox будет поднимать шаблон, который расположен в футере и все нужные блоки будут заполняться данными конкретного товара.

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

После нажатия на кнопку "Отправить" будет посылаться запрос на сервер, обрабатываться (проверка валидности заполненных обязательных полей)

Ну и, наконец, функция, которая будет отправлять все данные и закрывать окно:

$(document).on('click','.basket-click',function(){

$.ajax({

                //отправляем в обработчик

url: 'index.php?route=product/product/onlinecart',

type: 'post',

                //данные должны получить в формате json

dataType: 'json',

                //серриализуем данные формы

data: $('#unic_'+$(this).data('id')).serialize(),

success: function(u){

if(u.error){

                                //если найдены ошибки, выводим их

$.each(u.error,function(i,m){

$('.error_'+m.name).html(m.text)

})

}

else{

                                //если все ок, удаляем форму и вставляем текст завершения

$('#unic_'+$(this).data('id')).remove().after('Ваш заказ отправлен и будет обработан в ближайшее время!')

                                //закрываем окно через 3 сек

setTimeout(function(){

$.fancybox.close();

},3000)

}

}

})

        //запретим выполнение функции дальше

return false;

})

В обработчике получаем данные, валидируем и дальше уже отправляем на почту данные о заказе, сохраняем в базу данные о заказе и т.д.

Комментарии к статье
Защита от роботов

jquery, корзина