ajax корзина virtuemart
Недавно понадобилось сделать дополнительный функционал для мини корзины товаров в 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> |
Ну, вот вроде и все, что я хотел рассказать. Дерзайте. По всем вопросам прошу в комментарии.
Комментарии
01.11.2012 в 16:26
Не работает удаление:-( А за изображение — спасибо!
18.11.2012 в 17:08
Удаление не работает совсем (после обновления страницы продукт остается в корзине) или только ajax?
25.12.2012 в 23:13
Подскажите вышеуказанное решение относится к этому случаю?
Добавляю товар в корзину. Модуль мини-коризны обновляется. Показывается сумма товара и его количество. Далее, нажимаю кнопку «Оформить заказ». Всплывает окно (так и задумано) в котором я ввожу все свои данные и нажимаю «Подтвердить заказ». В этом же всплывающем окне осуществляется переход на другую страницу, информирующую об успешном завершении заказа. Закрываю окошко.
Супер! Если бы не одно но…
Страница с которой открывалось всплывающее окно до сих содержит 1 товар на сумму 490р. Но если перейти на другую страницу, то корзина становится пустой.
Как я мог бы сделать так, чтобы после завершения заказа во всплывающем окне осуществлялся бы редирект на страницу магазина на той странице, с которой у меня открылось всплывающее окно?
27.12.2012 в 20:07
Здравствуйте, Иван.
Вариантов решения вашей проблемы три.
1. Редирект на другую страницу
для этого после окончания инициализации заказа в javascript добавьте редирект на нужную страницу
2. Можно обойтись без редиректа и просто заменить строку с отображением «1 товар на сумму 490р.»
нужно обратиться к элементу содержащему данный текст и перезаписать его после выполнения заказа к примеру:
3. Обратиться за изменениями к нам и мы сделаем все за вас 🙂
28.08.2013 в 01:28
Удаление работает, только вместо onclick=»productDelete(<?php echo cart[‘product_id’]; ?>)надо onclick=»productDelete(<?php echo $pid; ?>)