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

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

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

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

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

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

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

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

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

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

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

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

</head>

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

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

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

Находим код:

<a href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" > </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 из данного архива на название вашего шаблона.

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

upload.zip (460 downloads)