Переадресация на оформление заказа после добавления в корзину на Opencart

Урок 36 Как сделать переход на оформление заказа после добавления в корзину на Opencart

| Мар 6, 2022

Приветствую!

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

Сегодня я разберу два варианта, как это можно сделать: исправим существующую кнопку добавления в корзину и добавим отдельно кнопку для быстрой покупки (Важно! Для товаров, у которых есть опции, данное решение в текущем виде не подойдет, так как перед этим необходимо вывести выбор опций в товары в категориях)

Переход на страницу оформления заказа по нажатию на стандартную кнопку «Купить»

Изменения будут вноситься в файле common.js (рассматривается на примере стандартного шаблона) для категорий, модулей, поиска и т.д. и в темплейте карточки товара (непосредственно для товара)

Открываем файл

1	/catalog/view/javascript/common.js

Находим примерно на строке 140 функцию добавления в корзину

1	'add': function(product_id, quantity) {

Здесь необходимо заменить поведение при нажатии на кнопку, а именно строчку

1	$('html, body').animate({ scrollTop: 0 }, 'slow');

меняем на

1	window.location.href = '/index.php?route=checkout/checkout';

Если у Вас установлен модуль упрощенного оформления заказа Simple, то код будет немного отличаться

1	window.location.href = '/index.php?route=checkout/simplecheckout';

Сохраняем и обновляем кеш модификаторов. Теперь на страницах категорий, поиска, производителей и модулей при добавлении товара в корзину будет автоматический редирект на страницу оформления заказа.

Чтобы это работало и в карточке товара, открываем темплейт по адресу

1	/catalog/view/theme/default/template/product/product.tpl

И примерно на 459 строке

1	$('html, body').animate({ scrollTop: 0 }, 'slow');

меняем на

1	window.location.href = '/index.php?route=checkout/checkout';

Если у Вас установлен модуль упрощенного оформления заказа Simple, то код будет немного отличаться

1	window.location.href = '/index.php?route=checkout/simplecheckout';

Так же не забываем обновлять модификаторы.

Добавляем новую кнопку перехода на страницу оформления заказа при покупке

Здесь помимо изменений в файле скриптов, будут вноситься изменения и в темплейты

Прежде всего добавим новую функцию в

1	/catalog/view/javascript/common.js

А именно после функции

1	'add': function(product_id, quantity) {

после 176 строки добавляем

'addnew': function(product_id, quantity) {

$.ajax({

url: 'index.php?route=checkout/cart/add',

type: 'post',

data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),

dataType: 'json',

beforeSend: function() {

$('#cart > button').button('loading');

complete: function() {

$('#cart > button').button('reset');

success: function(json) {

$('.alert, .text-danger').remove();

if (json['redirect']) {

location = json['redirect'];

}

if (json['success']) {

$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">×</button></div>');

// Need to set timeout otherwise it wont update the total

setTimeout(function () {

$('#cart > button').html('<span id="cart-total">' + json['total'] + '</span>');

}, 100);

window.location.href = '/index.php?route=checkout/checkout';

$('#cart > ul').load('index.php?route=common/cart/info ul li');

}

error: function(xhr, ajaxOptions, thrownError) {

alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

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

1	/catalog/view/theme/default/template/product/category.tpl

Находим примерно на строке 131 код

1	<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>

и перед ним или после добавляем такой

1	<button type="button" onclick="cart.addnew('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><i class="fa fa-plane"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>

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

Для карточки товара в

1	/catalog/view/theme/default/template/product/product.tpl

также добавляем новую функцию на строке 470 после стандартной функции добавления в корзину

$('#button-cartnew').on('click', function() {

$.ajax({

url: 'index.php?route=checkout/cart/add',

type: 'post',

data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),

dataType: 'json',

beforeSend: function() {

$('#button-cart').button('loading');

complete: function() {

$('#button-cart').button('reset');

success: function(json) {

$('.alert, .text-danger').remove();

$('.form-group').removeClass('has-error');

if (json['error']) {

if (json['error']['option']) {

for (i in json['error']['option']) {

var element = $('#input-option' + i.replace('_', '-'));

if (element.parent().hasClass('input-group')) {

element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');

} else {

element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');

}

if (json['error']['recurring']) {

$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');

}

// Highlight any found errors

$('.text-danger').parent().addClass('has-error');

}

if (json['success']) {

$('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

window.location.href = '/index.php?route=checkout/checkout';

$('#cart > ul').load('index.php?route=common/cart/info ul li');

}

error: function(xhr, ajaxOptions, thrownError) {

alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

}

});

//--></script>

Ну и после этого добавляем новую кнопку. Примерно на строке 296 после или перед

1	<button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>

Добавляем новую кнопку

1	<button type="button" id="button-cartnew" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><i class="fa fa-plane"></i></button>

Так же сохраняем, обновляем модификаторы и радуемся результату.

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