Делаем кнопку "Купить" в общем списке товаров в Opencart
2012-02-14 13:46:25 Комментариев: 0 Просмотров: 265
 

Иногда бывает нужно добавить в шаблон сайта на 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']; ?>"

 

 

 

Оставить комментарий

Ваше Имя:


Ваш комментарий: Внимание: HTML не поддерживается! Используйте обычный текст.

Оценка: Плохо            Хорошо

Введите код, указанный на картинке:



 
СТАТЬИ
 
Последние статьи
Решаем проблему некорректно работающих отчетов в опенкарт 1.5.1.3 Те, кто обновил свои магазины до новой версии движка или просто поставил новый opencart 1.5.1.3 должны были заметить, что отчеты в нем не работают ...
Подробнее >>
Как переделать модуль от старых версий opencart на opencart 1.5.x или ocstore 1.5 Наверное многие из Вас при поиске модуля для своего магазина на opencart новой версии столкнулись с тем, что найденный модуль предназначен для боле...
Подробнее >>
Экономно однако Новое двухстороннее косметическое мыло. Смотрите не перепутайте! ...
Подробнее >>
Корзина товаров в шапке сайта на Opencart   Наверняка те, кто часто делает интернет-магазины на популярной Opencart, столкнулись с необходимостью выноса...
Подробнее >>
Мега супер девайс от Apple планшетник iPad   И так, первое , о чем я бы хотел рассказать, это мега супер девайс от Apple планшетник iPad. Я приобрел сей ...
Подробнее >>