Loading

Добавление выбранного кол-ва товаров в корзину с главной на OpenCart v.1.4.9.x

Добавление выбранного кол-ва товаров в корзинуКак сделать так, чтобы в корзину добавлялся не один товар, а выбранное количество данного товара? В этой статье я расскажу вам как это реализовать.Многие администраторы магазинов на OpenCart v.1.4.9.x изменили действие кнопки «В корзину», т.е. если клиент магазина нажимает на кнопку «В корзину» с главной или из другой какой-либо страницы, то его не перебрасывает на страницу с подробным описанием данного товара, а товар сразу добавляется в корзину без перезагрузки страницы.

И так те инструкции, которые здесь будут описаны, будут работоспособны, только при тех условиях, что у вас уже изменено действие кнопки «В корзину». Если действие кнопки «В корзину» у вас неизменено, то для начала вам нужно прочитать вот эту статью: Меняем действие кнопки «Добавить в корзину» для OpenCart v.1.4.9.x а уже потом приступить к выполнению инструкций приведенных в данной статье.

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

catalog\view\theme\default\template\common\header.tpl

Находим такой код:

<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>

И ниже его добавляем следующий код:

<script type="text/javascript" src="catalog/view/theme/default/js/az_drop_menu.js"></script>
<script type="text/javascript" src="catalog/view/theme/default/js/generic.js"></script>

Эти скрипты нужны для того, чтобы сделать кнопки + (плюс) и — (минус) по краям поля ввода количества товара (см. скрин). Если вам не нужны данные кнопки, а нужно простое поле ввода количества товаров, тогда это действие пропускаем и переходим к следующему.

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

catalog\view\theme\default\template\common\header.tpl

Находим такой код:

</head>

Выше него добавляем:

<script type="text/javascript">
function buyProduct (id, qnty)
{
$.ajax ({
type: 'post',
url: 'index.php?route=module/cart/callback',
dataType: 'html',
data: 'product_id='+id+'&quantity='+qnty,
success: function (html) {
$('#module_cart .middle').html (html);
},complete: function () {
var image = $('#image'+id).position ();
var cart  = $('#module_cart').position ();$('#image'+id).before ('<img src="' + $('#image'+id).attr ('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');

params = {
top : cart.top + 'px',
left : cart.left + 'px',
opacity : 0.0,
width : $('#module_cart').width (),
heigth : $('#module_cart').height ()
};

$('#temp').animate (params, 'slow', false, function () {
$('#temp').remove ();
});
}
});

}
</script>

Этот скрипт выполняет добавление заданного количества товара в корзину.

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

catalog\view\theme\default\template\module\bestseller_home.tplcatalog\view\theme\default\template\module\featured_home.tplcatalog\view\theme\default\template\module\latest_home.tplcatalog\view\theme\default\template\module\special_home.tpl

catalog\view\theme\default\template\product\category.tpl

catalog\view\theme\default\template\product\manufacturer.tpl

catalog\view\theme\default\template\product\search.tpl

catalog\view\theme\default\template\product\search.tpl

И делаем идентичные изменения, которые смотрим ниже, для всех вышеуказанных файлов.

Находим код:

<a href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" >&nbsp;</a>

И заменяем его на этот код:

<div>
<div><span></span><span><input type = 'text' id = 'qnty_<?php echo $products[$j]['product_id']; ?>' name="qnty_<?php echo $products[$j]['product_id']; ?>" size="2" value="1"></span><span></span></div><a href="#" onclick="qnty = document.getElementById ('qnty_<?php echo $products[$j]['product_id']; ?>').value; buyProduct (<?php echo $products[$j]['product_id']; ?>, qnty);return false;" id="add_to_cart<?php echo $products[$j]['product_id']; ?>"><img src="catalog/view/theme/default/image/button_prod.png"></a>
</div>

Это действие добавляет поле ввода количества товаров и кнопки плюс и минус.

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

catalog\view\theme\default\stylesheet\stylesheet.css

И в самый низ, после последней записи класса, добавляем:

.minus {background:url (.../image/minus.png) no-repeat; width:16px; height:24px; display: block; float: left; cursor: pointer; }
.plus {background:url (.../image/plus.png) no-repeat; width:16px; height:24px; display: block;float: left; cursor: pointer; }
.buton_container INPUT { height:20px; display: block; width: 15px; border: none; padding:0; margin:0; text-align:center;}
.buton_input { float: left;   border-top: solid 2px #A0B4D0; border-bottom: solid 2px #A0B4D0;}
.listing_button {margin-bottom:5px;margin-left:3px;margin-top:6px;}

Здесь задаются стили вывода поля ввода количества товаров и кнопок плюс и минус. Тут вы можете немного поиграться, сделав все по своему усмотрению под дизайн вашего сайта.

5. Скачиваем архив по ссылке ниже и загружаем содержимое его папки upload в корневую директорию магазина.

В состав архива входят картинки кнопки в корзину, плюсика и минуса, а также скрипты из пункта 1.

Если вы выполните эти инструкции верно, то у вас будет поле с указанием количества товара и идобавлением его в корзину с главной или какой-либо другой страницы без ее перезагрузки.

Если ваш шаблон не default, то переименуйте папку default из данного архива на название вашего шаблона.

Скачать архив скриптов и картинок

[download id="109"]

Отправить ответ

3 Комментарий на "Добавление выбранного кол-ва товаров в корзину с главной на OpenCart v.1.4.9.x"

Войти с помощью: 
  Subscribe  
newest oldest most voted
Notify of
shell
Участник

А как бы такое проделать под последнюю версию?

admin
Гость

Постараемся сделать в ближайшее время.

oldnick
Участник

прошло 5 месяцев. есть новости в этом направлении?

Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 
Генерация пароля