Opencart, Заказ в 1 клик
Сегодня мы за 5 минут внедрим в наш интерне-магазин кнопку "Заказ в 1 клик". Для начала, давайте разберём способы заказа в интернет-магазине:
Стандартная кнопка "Добавить в корзину", после клика на неё человек продолжает просматривать магазин и сам переходит к оформлению заказа.
Кнопка "Быстрый заказ", по нажатию на которую всплывает форма, в которой нужно заполнить имя и телефон, чтобы оператор мог перезвонить.
Кнопка "Заказать и оформить", по нажатию на которую товар добавляется в корзину и пользователь перенаправляется на страницу оформления заказа.
Первый вариант реализован в стандартном функционале. Второй вариант, на мой взгляд, бесполезен, потому что дублирует модуль "Перезвоните мне", да и диктовать свои реквизиты по телефону+ ждать звонка оператора ещё то удовольствие. По этому реализовывать будем третий вариант.
Открываем шаблон товара: /catalog/view/theme/default/template/product/product.tpl Находим строчку с заголовком товара:
<h1><?php echo $heading_title; ?></h1>
И выше неё вставляем кнопку:
<input type="button" class="btn btn-primary btn-lg btn-block" value="Купить и оформить" id="oneclickbuy">
Далее, переходим вниз, к секции с яваскриптом и выше функции:
$('#button-cart').on('click', function() {
Вставляем следующий код:
$('#oneclickbuy').click(function()
{
$('#button-cart').trigger('click');
setTimeout(function()
{
if($("div").is(".alert-success"))
{
location='/index.php?route=checkout/checkout';
}
}, 1000);
});
Всё, готово.
Работает это следующим образом:
При клике на кнопку "Купить и оформить" вызывается событие "click" для стандартной кнопки "Добавить в корзину".
Ждём 1 секунду, чтобы отработал ajax запрос.
Проверяем, появилось ли сообщение об успешном добавлении товара в корзину, и, если появилось, перенаправляем пользователя на страницу оформления заказа.
Пример, как обычно, можно посмотреть на тестовом магазине: opencart.allwebstuff.info
Комментариев(12)
Все таки заказ в 1 клик это как раз попап форма в которой надо ввести имя и тел с отправкой менеджеру по нажатию кнопки отправить. На форме должно быть указано название товара. Потому как зачастую людям лень заполнять какие то поля в корзине ... из практики такие заказы прилетают почти каждый день
Спасибо! Полезная статья! У меня к вам вопрос близкий к теме) У нас опенкарт 2.0.2.0 , перенесли на новый домен и хостинг. Все гуд, все работает. Но появилась такая проблема - при нажатии на кнопку "Подтвердить заказ" в оформлении заказа, в кнопке остается текст "Loading..." и через 5-8 сек заказ оформляется (а должен почти моментально, как работало на старом хостинге). На новом хостинге техподдержка ответила таким образом:
"Здравствуйте, у вас при нажатии кнопки создаётся несколько процессов которые блокируют друг друга. Один из них следит за завершением двух уже созданных и продолжается лишь когда они завершаться. Но при этом, судя по всему, проверяет он это только раз в несколько секунд. В итоге он ждёт очень долго.
Точно затрудняюсь сказать с чем связано такое поведение, так как отследить одновременно несколько процессов порожденных друг другом не получается, т.к. факт слежения за ними блокирует их и не даёт продолжить выполнение.
В данном случае вам следует обратится к разработчику с просьбой исправить поведение сайта таким образом, чтобы основной процесс продолжался не ожидая других, тогда должно работать корректно."
Может быть вы что-то подскажете где и что посмотреть?)
Пока не посмотрю сам сайт- помочь точно не смогу. Нетронутый opencart, при оформлении заказа, отправляет всего 2 запроса на /index.php?route=payment/cod/confirm и на /index.php?route=checkout/success. Так что скорее всего у Вас стоит какой-то модуль оформления заказа и соответственно он поломался...
Спасибо, за ваши советы. Возникли вопросы по этой статье. Как сделать чтобы кнопка "Заказать и оформить" была в стиле шаблона? Сейчас это обычная серая кнопка. И как ее правильно спозиционировать? Хотелось бы ее прижать к правому краю контейнера. И главное, функция полностью не отрабатыватеся, т.е. кнопка просто добавляет товар в корзину.
Спасибо за полезную статью. А как сделать, чтобы ещё перенаправление на страницу оформления заказа шло?
Ринат, Если шаблон свёрстан правильно, то кнопка должна автоматически принимать стиль шаблона. В противном случае, придётся стилизовать кнопку вручную. Тоже самое и с позиционированием.
Анастасия, Если Вы всё сделали правильно, то редирект должен быть автоматический.
$('#oneclickbuy').click(function()
{
$('#button-cart').trigger('click');
setTimeout(function()
{
if($("div").is(".alert-success"))
{
location='/index.php?route=checkout/checkout';
}
}, 1000);
});
Этот кусочек кода редиректит на оформление заказа.
Если <a href="http://www.opencart.com/index.php?route=extension/extension&path=5&filter_search=One%20click%20checkout&filter_license=0&page=1">тут</a> не найдёте, то значит таких нет.
Классно! Сегодня-завтра попробую, как раз искал это на Вашем сайте!)) Спасибо!