Заказ товара в один клик на сайт (jbOneClick)

Заказ товара в один клик на сайт (jbOneClick)

Скрипт для создания кнопки заказа в 1 клик на страницах интернет-магазинов. Увеличивает конверсию посетителей на сайте более чем на 30% в сочетании с обычными формами оформления заказа в корзине.

Позволяет совершить покупку в один клик любого товара на сайте. Настроить минимальный набор обязательных полей для формы заказа. Работает на абсолютно любой CMS cайта. Кнопка встраивается в нужное место на странице товара, форма открывается с эффектом всплывания .

Простой и бесплатный скрипт для организации покупки в один клик на любой странице сайта. Он был написал для тех, кому нужно организовать быстрый заказ товара. Тестирование показало, что для интернет-магазинов на движках Opencart, WebAsyst и Shop-Script добавление кнопки "Быстрый заказ" увеличило конверсию посетителей в покупки более чем на 50%.
Принцип работы довольно прост: пользователь заполняет и отправляет форму, а вам на почту приходит письмо с именем покупателя, его телефона, заказываемого товара и адреса доставки. В большинстве случаев этих данных достаточно. Всё равно в процессе формирования заказа, при условии, что оплата происходит в момент получения, клиенту будет сделан звонок с подтверждением.

Как показала практика, пользователи бросают до 50% начатых заказов. То есть человек добавляет в корзину товары, но из-за большого количества шагов он бросает заказ. В случае использования экспресс-заказов, пользователь в одном шаге от финиша. Как только форма будет отправлена, ваш менеджер может связаться с ним и в случае каких-либо сомнений раскрутить на покупку.

Расширенная версия Попробуйте расширенную версию с абонплатой 350 руб. в год. С ней вы получаете удобный конструктор, возможность использовать: sms-информирование о новом заказе, каптчу, отправку файлов, получать дополнительную информацию о пользователе (его город, профиль VK, IP и др.), работающую на абсолютно любом сайте.

Форма может быть всплывающей и статично выведенной в нужном месте страницы. Попробовать Мы даём месяц бесплатного пользования для тестирования системы. 350 руб. в Год, разве это дорого, за неограниченное количество форм для вашего сайта?

Установка

Вставьте в блок <head> страниц, на которых вы хотите появление формы, ссылки на подключаемые файлы плагина и стиля.

<script type="text/javascript" src="/путь_к/jquery.js"></script>
<script type="text/javascript" src="/путь_к/jquery.jboneclick.js"></script>
<link rel="stylesheet" type="text/css" href="/путь_к/jquery.jboneclick.css">

В корень сайта поместите файл postmaster.php из архива. По умолчанию он является обработчиком заказов и выполняет функцию отправки писем на вашу почту. Откройте его и укажите почтовые ящики с которыми будете работать.

Чтобы увидеть форму на сайте, достаточно вызывать функцию для html объекта.

Простой вызов

Для ссылки

<a class="buy_oneclick" data-product="iPhone 5">Заказать товар</a> 
$(function() {
    $('.buy_oneclick').jbOneClick();
});

Такая конструкция для вызовы формы заказа в один клик будет работать в режиме по-умолчанию. Также можно настроить дополнительные поля в форме для выбора характеристик товара или способа доставки. Поле с названием товара передаётся в невидимом поле. Помните, при добавлении полей в форму, их обработчик нужно также добавить и в postmaster.php, чтобы они отправлялись в сообщении.

Демонстрация

Обладателям сайта на Joomla следует заметить, что для корректной работы нужно использовать режим совместимости jQuery с другими js фреймворками, в частности с Mootools.

$.noConflict();
jQuery(document).ready(function($){
   $('.buy_oneclick').jbOneClick();
});

Добавление полей

$(function() {
    $('.callme_order_btn').jbOneClick({
        postfix: "express_oreder", 
        fields: {
            descr: {
                label: "Адрес",
                type: "textarea"
            },
            list: {
                placeholder: "Способ доставки",
                type: "select",
                options: [
                    "Самовывоз",
                    "Курьером по СПб (+500р)",
                    "DHL +800р"
                ]
            },            
            action: {
                type: "hidden",
                value: "express_oreder"
            }
        }
    });
});
Демонстрация

Расширенная настройка. Пример формы заказа

<a class="demo3_buy_oneclick" data-product="Apple iPhone 5">Apple iPhone 5</a> 
<a class="demo3_buy_oneclick" data-product="HTC One">HTC One</a> 
<a class="demo3_buy_oneclick" data-product="Samsung Galaxy S4">Samsung Galaxy S4</a> 
$(function() {
    $('.demo3_buy_oneclick').jbOneClick({
        postfix: 'product_order', // идентификатор окна
        title: "Экспресс заказ", // заголовок окна
        action_url: "/postmaster.php", // путь к обработчику запрсов
        success: "Спасибо за заказ. Мы свяжемся и уточним детали.", 
        fail: "Сообщение не доставлено. Извините за неудобство!",
        no_submit:true,
        fields: { // добавление полей 
            email: {
                required: true, // обязательное ли
                placeholder: "Ваш e-mail", 
                type: "email"
            },
            color: {
                placeholder: "Цвет",
                type: "select",
                options: [
                    "Белый",
                    "Черный"
                ]
            },
            count: {
                label: "Количество",
                value: "1",
                type: "text"
            },
            list: {
                placeholder: "Способ доставки",
                type: "select",
                options: [
                    "Самовывоз",
                    "Курьером по СПб (+500р)",
                    "DHL (+800р)"
                ]
            }, 
            descr: {
                label: "Адрес",
                type: "textarea"
            },
            action: { // невидимое поле, передющее тип формы
                type: "hidden",
                value: "product_order"
            },
            send: {
                type: "submit",
                value: "Купить"
            }
        }
    }); 
});
Apple iPhone 5 HTC One Samsung Galaxy S4

Часто задаваемые вопросы:

Не всплывает форма, что делать?
Проверить подключены ли файлы из инструкции, и правильно ли указан к ним путь. Нет ли конфликтов с другими библиотеками(см. $.noConflict();)? Убедиться, что метод jbOneClick() вызывается для существующего селектора, и что вы кликаете именно на этот объект, который подходит под селектор.
Всё время пишет "Заказ не принят". Что делать?
Проверить правильность пути к /postmaster.php. Убедиться, что хостер разрешает функцию mail(). Чтобы функция mail() работала, у вас, как минимум, должна быть установлена SMTP служба на сервере.
Пишет "Сообщение отправлено", но письмо не приходит. Что делать?
Если вы тестируете на локальном компьютере, то письма отправляться не будут, они складываются в спец. папку. Если на внешнем хостинге, то возможно хостер запрещает использовать сторонние почтовые домены, а может почтовый сервер фильтрует письма как спам, либо вообще отказывается принимать. Попробуйте указать почтовый ящик службы mail.ru в качестве e-mail на который будут приходить заявки.