maeln0r 08 Июня 2012 в 20:51

ajax корзина virtuemart

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

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

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

$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;

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

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

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

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

Теперь добавим изображения в шаблон корзины

(site_dir/public_html/components/com_virtuemart/themes/<span style="color: #ff0000;">название_вашей_темы</span>/templates/common/minicart.tpl.php)
где нибудь после
<div class="minicart_item">

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

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

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

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

<div class="minicart_item"><input class="minicart_del_img" style="float: right;" alt="Удалить товар" src="ВАША КАРТИНКА" type="image" />)"/>
<div style="text-align: center;"><img class="cart_image" src="/components/com_virtuemart/shop_image/product/<?php echo $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)<br ?--> echo '...';
?></a>&nbs p; x &nbs p; <!--?php echo $cart['quantity'] ?--> //Уберите пробелы в &nbs p;</div>
<div style="clear: both;"></div>
<div class="cart_price" style="text-align: center;"></div>
 

</div>

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

<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>

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

Последняя редакция 25 января, 2023 в 07:01