Делаем кнопку "Купить" в общем списке товаров в Opencart

Иногда бывает нужно добавить в шаблон сайта на Opencart кнопку покупки товара прямо в общий список товаров. Ну например на главной странице в списке новых поступлений. По умолчанию , при нажатии кнопки " Купить ", система перекидывает на страницу, где предлагается ввести количество и подтвердить покупку. Но часто бывает нужно иметь возможность сразу добавить одну единицу товара в корзину просто при нажатии кнопки " Купить ".

Для реализации данной фичи добавляем в шаблон header.tpl где нибудь внутри тега <head>следующий Javascript код:

<script type="text/javascript">
function buyProduct(id)
{
        $.ajax({
            type: 'post',
            url: 'index.php?route=module/cart/callback',
            dataType: 'html',
            data: 'product_id='+id+'&quantity=1',
            success: function (html) {
                $('#module_cart .middle').html(html);
            },   

            complete: function () {
                var image = $('#image'+id).offset();
                var cart  = $('#module_cart').offset();

                $('#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>

Теперь в нужном контроллере (для главной страницы это /catalog/controller/common/home.php) ищем место, где в шаблон передаётся массив товаров и добавляем передачу идентификатора:

$this->data['products'][] = array(
  'id'    => $result['product_id'], /*это та самая строчка*/
  'name'    => $result['name'],
  'model'   => $result['model'],
  'rating'  => $rating,
  'stars'   => sprintf($this->language->get('text_stars'), $rating),
  'thumb'   => image_resize($image, $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height')),
  'price'   => $price,
  'special' => $special,
  'href'    => $this->model_tool_seo_url->rewrite($this->url->http('product/product&product_id=' . $result['product_id']))
);

Осталось только добавить в шаблон страницы саму кнопку покупки, которая при клике по ней будет вызывать нашу Javascript функцию:

<a href="#" onclick="buyProduct(<?php echo $products[$j]['id']; ?>);return false;"  id="add_to_cart<?php echo $products[$j]['id']; ?>" class="buy"></a>

Функция, используя Ajax, передает данные о товаре в метод Callback корзины и получает от него обновленные данные о количестве товара в корзине, о самом товаре и т.д. И после этого динамически изменяет HTML-содержимое соответствующих блоков корзины (количество товара, наличие на складе и т.д.). Ну и наконец вызывает функцию анимации перемещения иконки товара в корзину.

Для того, чтобы эта самая анимация у нас отображалась, к атрибуту "id" изображений товаров дописываем идентификатор:

id="image<?php echo $products[$j]['id']; ?>"