Web Is Life

Лента постов про web dev

ajax корзина virtuemart

08 Июня 2012 15109 , ,

Недавно понадобилось сделать дополнительный функционал для мини корзины товаров в virtuemart. Я использовал jomla 1.5 + vm 1.9, но не думаю, что в более поздних версиях что то будет сильно отличаться.
Добавленный функционал корзины: Миниатюры товаров + ajax удаление товаров из корзины. Код и пояснения под катом.

Собственно пост:
1) Сделаем отображение миниатюр товара в модуле корзины.

Идем по адресу site_dir/administrator/components/com_virtuemart/html/shop.basket_short.php и ищем такой код:

1
2
3
4
5
$minicart[$ci]['url'] = $url;
$minicart[$ci]['product_name'] = shopMakeHtmlSafe($ps_product->get_field($_SESSION['cart'][$i]["product_id"], "product_name"));
$minicart[$ci]['quantity'] = $cart[$i]["quantity"];
$minicart[$ci]['price'] = $CURRENCY_DISPLAY->getFullValue( $subtotal );
$minicart[$ci]['attributes'] = $html;

После него следует добавить строчку, которая будет вытягивать наши миниатюры:

1
$minicart[$ci]['image'] = shopMakeHtmlSafe($ps_product->get_field($_SESSION['cart'][$i]["product_id"], "product_thumb_image"));

И, если там таковая отсутствует, строчку с id продукта:

1
$minicart[$ci]['product_id'] = shopMakeHtmlSafe($ps_product->get_field($_SESSION['cart'][$i]["product_id"], "product_id"));

Теперь добавим изображения в шаблон корзины (site_dir/public_html/components/com_virtuemart/themes/название_вашей_темы/templates/common/minicart.tpl.php)
где нибудь после <div class="minicart_item">

1
2
3
<div style="text-align: center">
    <img src="/components/com_virtuemart/shop_image/product/<?php echo $cart['image'] ?>" class="cart_image"/>
</div>

Никаких css стилей в данном примере указывать не буду, если возникнут вопросы, задавайте в комментариях.

2) Сделаем кнопку ajax удаления товаров

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="minicart_item">
    <input type="image" alt="Удалить товар" class="minicart_del_img" style="float: right;" src="ВАША КАРТИНКА" onclick="productDelete(<?php echo $cart['product_id']; ?>)"/>
    <div style="text-align: center">
        <img src="/components/com_virtuemart/shop_image/product/<?php echo $cart['image'] ?>" class="cart_image"/>
    </div>
    <div style="clear: both;"></div>
    <div style="text-align: center">
        <a href="<?php echo $cart['url'] ?>"><?php
echo mb_substr($cart['product_name'], 0, 30);
if (mb_strlen($cart['product_name']) > 20)
    echo '...';
?></a>&nbs p; x &nbs p; <?php echo $cart['quantity'] ?> //Уберите пробелы в &nbs p;
    </div>
    <div style="clear: both;"></div>
    <div style="text-align: center" class="cart_price">
        <?php echo $cart['price'] ?>
    </div>
    <br style="clear: both;" />
</div>

А теперь, самое главное, где нибудь вверху данной страницы вставляем javascript с описанием функции productDelete(). Код с минимумом описания. Если вы его не понимаете, то просто вставьте как есть.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript">
    function updateMiniCarts() { //Обновляем корзину
        var callbackCart = function(responseText) {
            carts = $$( '.vmCartModule' );
            if( carts ) {
                try {
                    for (var i=0; i<carts.length; i++){
                        carts[i].innerHTML = responseText;
                        color = carts[i].getStyle( 'color' );
                        bgcolor = carts[i].getStyle( 'background-color' );//Визуализация
                        var fxc = new Fx.Style(carts[i], 'color', {duration: 2000});//Визуализация
                        var fxbgc = new Fx.Style(carts[i], 'background-color', {duration: 1000});//Визуализация
                        fxc.start( '#ebebeb', color );//Визуализация
                        fxbgc.start( '#ebebeb', '#ffffff' );//Визуализация
                        if( parent ) {
                            setTimeout( "carts[" + i + "].setStyle( 'background-color', 'transparent' )", 1000 );//Визуализация
                        }
                    }
                } catch(e) {}
            }
        }
        option = { method: 'post', onComplete: callbackCart, data: { only_page:1,page: "shop.basket_short", option: "com_virtuemart" } }
        new Ajax( live_site + '/index2.php', option).request();
    }
    function productDelete(product_id){
        var callback = function(responseText){
            updateMiniCarts();// обновляем корзину по callback
        }
        var opt = {
            method: 'post',
            onComplete: callback,
            data: { //Все это стандартные переменные с virtuemart, не трогайте их, правда.
                only_page:1,
                page: "shop.basket_short",
                option: "com_virtuemart",
                func: "cartDelete",
                product_id: product_id
            }
        }
        new Ajax( '/index2.php', opt ).request();
    }

</script>

Ну, вот вроде и все, что я хотел рассказать. Дерзайте. По всем вопросам прошу в комментарии.

Подписывайтесь на обновления

Читайте RSS ленту

Комментарии

  • Дмитрий ответить
    01.11.2012 в 16:26

    Не работает удаление:-( А за изображение — спасибо!

    • Федор Майоров ответить
      18.11.2012 в 17:08

      Удаление не работает совсем (после обновления страницы продукт остается в корзине) или только ajax?

  • Иван ответить
    25.12.2012 в 23:13

    Подскажите вышеуказанное решение относится к этому случаю?

    Добавляю товар в корзину. Модуль мини-коризны обновляется. Показывается сумма товара и его количество. Далее, нажимаю кнопку «Оформить заказ». Всплывает окно (так и задумано) в котором я ввожу все свои данные и нажимаю «Подтвердить заказ». В этом же всплывающем окне осуществляется переход на другую страницу, информирующую об успешном завершении заказа. Закрываю окошко.
    Супер! Если бы не одно но…

    Страница с которой открывалось всплывающее окно до сих содержит 1 товар на сумму 490р. Но если перейти на другую страницу, то корзина становится пустой.

    Как я мог бы сделать так, чтобы после завершения заказа во всплывающем окне осуществлялся бы редирект на страницу магазина на той странице, с которой у меня открылось всплывающее окно?

    • strokoff ответить
      27.12.2012 в 20:07

      Здравствуйте, Иван.
      Вариантов решения вашей проблемы три.
      1. Редирект на другую страницу
      для этого после окончания инициализации заказа в javascript добавьте редирект на нужную страницу

      1
      window.location.replace("http://нужная_страница");

      2. Можно обойтись без редиректа и просто заменить строку с отображением «1 товар на сумму 490р.»
      нужно обратиться к элементу содержащему данный текст и перезаписать его после выполнения заказа к примеру:

      1
      jQuery(".cartDiv").html("Заказ отправлен!");

      3. Обратиться за изменениями к нам и мы сделаем все за вас 🙂

  • Сергей ответить
    28.08.2013 в 01:28

    Удаление работает, только вместо onclick=»productDelete(<?php echo cart[‘product_id’]; ?>)надо onclick=»productDelete(<?php echo $pid; ?>)

Добавить комментарий