Кол-во товаров в корзине Есть решение
Доброго времени! Использую шаблон default 3.0. Столкнулся с необходимостью сделать в корзине кнопки "+" и "-" которые прибавляют и убавляют количество товара в корзине, но вот что то не соображу пока каким это образом можно сделать...может есть готовые решения что бы не изобретать велосипед? Кто нибудь делал подобное подскажите пожалуйста, спасибо заранее!
7 ответов
Сам спросил - сам ответил! вдруг кому пригодится! Это "самопальный" вариант, и возможно есть проще и лучше, но мне некогда было разбираться поэтому я установил тему mobile и повыдергивал из нее некотоыре куски кода. Показываю что именно! Идем в Cart.html ищем cart item и вставляем это!
<!-- cart item --> <div class="row cart-product-item" data-id="{$item.id}"> <div class="col w1 item-thumb"><a href="{$wa->shop->productUrl($item.product)}" title="{$item.product.name|escape}">{$wa->shop->productImgHtml($item.product, '96x96', ['default' => "`$wa_theme_url`img/dummy48.png"])}</a> </div> <div class="col w9 item-name"> <a href="{$wa->shop->productUrl($item.product)}" class="bold">{$item.product.name|escape}</a> {if $item.sku_name && $item.sku_name != $item.product.name}{$item.sku_name|escape}{/if} </div> <div class="volume-buttons"> <a class="general-button gray-button minus-link decrease-volume" href="javascript:void(0);">−</a> </div> <div class="col item-qty"> <input type="text" name="quantity[{$item.id}]" value="{$item.quantity}" class="qty{if !empty($item.error)} error{/if}"> </div> <div class="volume-buttons"> <a class="general-button gray-button plus-link increase-volume" href="javascript:void(0);">+</a> </div> <div class="col w1 item-remove"><a class="delete" href="#" title="[`Remove from cart`]"><i class="icon16 remove"></i></a></div> <div class="col w3 align-center item-total nowrap">{shop_currency_html($item.full_price, true)}</div> {if !empty($item.services)} <!-- services -->далее идем в cart.js и в самое начало (перед вашим кодом) вставляем этот код:
// Click on "+","-" good volume buttons ( function($) { var bindEvents = function() { $(document).on("click", ".increase-volume", function() { var $product = $(this).closest(".cart-product-item"); changeVolume("positive",$product); return false; }); $(document).on("click", ".decrease-volume", function() { var $product = $(this).closest(".cart-product-item"); changeVolume("negative",$product); return false; }); }; var changeVolume = function(type, $product) { var $volumeInput = $product.find(".item-qty input.qty"), current_val = parseInt($volumeInput.val()), is_disabled = ($volumeInput.attr("disabled") === "disabled"), disable_time = 800, new_val; if (type === "positive") { new_val = current_val + 1; } else if (type === "negative") { new_val = current_val - 1; } // Set new value if (!is_disabled) { if ( new_val > 0 ) { $volumeInput.attr("disabled","disabled"); $volumeInput.val(new_val); // Recalculate Price $volumeInput.change(); setTimeout( function() { $volumeInput.attr("disabled", false) }, disable_time); // If volume is zero => remove item from basket } else { deleteItemFromBasket( $product ); } } }; var deleteItemFromBasket = function( $product ) { $product.find("a.delete").click(); }; $(document).ready( function() { bindEvents(); }); })(jQuery);ну и в default.css вставляем этот код:
/* BUTTONS STYLES */ .general-button, button, input[type="text"], input[type="password"], input[type="button"], input[type="submit"], textarea { display: inline-block; vertical-align: top; margin: 0; padding: 0.5em 1em; box-sizing: border-box; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font: normal 1em/1.5em "Helvetica Neue", "Roboto Condensed", "Roboto", Arial, sans-serif; text-decoration: none; color: #121212; } .general-button.wa-error, button.wa-error, input[type="text"].wa-error, input[type="password"].wa-error, input[type="button"].wa-error, input[type="submit"].wa-error, textarea.wa-error, .general-button.error, button.error, input[type="text"].error, input[type="password"].error, input[type="button"].error, input[type="submit"].error, textarea.error { border-color: #c03; } .errormsg { color: #c03; } .general-button, button, input[type="button"], input[type="submit"] { white-space: nowrap; text-align: center; border: 1px solid rgba(0,0,0,0.3); border-top-color: rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1); box-shadow: 0 1px 1px rgba(0,0,0,0.1); -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-shadow: 0 1px 0px rgba(255,255,255,0.5); background: #fcd630; background: #fcd630 -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background: #fcd630 -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.5)), color-stop(100%, rgba(255,255,255,0))); background: #fcd630 -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background: #fcd630 -o-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background: #fcd630 -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background: #fcd630 linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); } .general-button.gray, button.gray, input[type="button"].gray, input[type="submit"].gray, .general-button.gray-button, button.gray-button, input[type="button"].gray-button, input[type="submit"].gray-button { background: #eee linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); } /* END BUTTONS STYLES */ .volume-buttons{ display:inline-block; }Не подскажите как поправить что бы - и + был вокруг "контейнера" с количеством?
Только увидел ваше сообщение, я решил этот вопрос у себя тем, что в cart.html поместил блок с "контейнером" в блок с кнопкой "+" Вроде работает без нареканий )) вот код
<div class="volume-buttons"> <a class="general-button gray-button minus-link decrease-volume" href="javascript:void(0);">−</a> </div> <div class="volume-buttons"> <a class="general-button gray-button plus-link increase-volume" href="javascript:void(0);">+</a> <div class="col item-qty"> <input type="text" name="quantity[{$item.id}]" value="{$item.quantity}" class="qty{if !empty($item.error)} error{/if}"> </div> </div>Спасибо за ответ, я так понял что вы код который был изначально прописан:
Заменили на:
Именно!
Наименование товара перекрывается картинкой. Подскажите пожалуйста что в коде исправить нужно?
кнопки не работают, вероятно что то не так со вставкой в cart.js - вставляю как написано в самое начало