Что ж, так как суровые правила сайта не позволяют новичку создать полезную тему, то напишу здесь.
Делаем счётчик количества товара для добавления в корзину на странице категории (1.6.1.x).
Нам будет необходимо править всего 2 файла шаблона. В ядро даже лезть не будем.
Как создать работающее поле ввода количества товара описал
Для просмотра ссылки Войди или Зарегистрируйся товарищ модератор сообщества PrestaShop.
Поэтому эту часть в двух словах переведу на русский.
Открываем
/themes/default-bootstrap/product-list.tpl
В районе 149-й строки находим следующий код:
PHP:
{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
{if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
{capture}add=1&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}{/capture}
<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
<span>{l s='Add to cart'}</span>
</a>
{else}
<span class="button ajax_add_to_cart_button btn btn-default disabled">
<span>{l s='Add to cart'}</span>
</span>
{/if}
{/if}
И прямо перед первой ссылкой <a class="button ajax_add_to_cart_button..... добавляем код текстового поля:
PHP:
<input style="font-size:27px; text-align:center; width:30px;" type="text" name="qty" id="quantity_to_cart_{$product.id_product|intval}" value="1"/>
Сохраняем/грузим файл и переходим ко второму.
Открываем
/themes/default-bootstrap/js/modules/blockcart/ajax-cart.js
В районе 137-й строки находим код:
Код:
ajaxCart.add(idProduct, null, false, this, minimalQuantity);
Расширяем его до вот такого:
Код:
ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val());
Первая часть работы окончена. У нас появилось текстовое поле перед каждой кнопкой добавления товара в корзину, в которое можно вписать количество, и оно будет работать как часы.
Теперь добавляем кнопки увеличения/уменьшения этого самого количества. Можно пойти легким путем и просто добавить нашему input-у атрибут type="number". Но если хотим редактировать стили кнопок и сделать их отдельно, то необходимо внести следующие правки в вышеперечисленные файлы.
В
product-list.tpl:
PHP:
<div class="incr-decr-buttons">
<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="product_quantity_incr">
<span><i class="icon-chevron-up"></i></span>
</a>
<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="product_quantity_decr">
<span><i class="icon-chevron-down"></i></span>
</a>
</div>
<input type="text" min="1" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" class="cat-prod-qty" value="1" />
<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l
s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.
product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
<span>{l s='Add to cart'}</span>
</a>
В
ajax-cart.js:
Код:
// The button to increment the product value
$(document).on('click', '.product_quantity_incr', function(e){
e.preventDefault();
fieldName = $(this).data('field-qty');
var currentVal = parseInt($('input[name='+fieldName+']').val());
quantityAvailableT = 100000000;
if (!isNaN(currentVal) && currentVal < quantityAvailableT)
$('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
else
$('input[name='+fieldName+']').val(quantityAvailableT);
});
// The button to decrement the product value
$(document).on('click', '.product_quantity_decr', function(e){
e.preventDefault();
fieldName = $(this).data('field-qty');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 1)
$('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
else
$('input[name='+fieldName+']').val(1);
});
Теперь объясню, что мы сделали.
Сначала мы присвоили нашему полю идентификатор #quantity_to_cart_{$product.id_product|intval}, который в окончании возвращает уникальный идентификатор каждого товара. И связали это поле с кнопкой добавления товара в корзину.
Во второй части мы добавили в файл шаблона код самих кнопок на увеличение/уменьшение. Затем в .js добавили код, отвечающий за ту же самую функцию на странице отдельного товара, немного видоизменив его. Тут самое главное — обратить внимание на класс кнопок, повторяющихся в js
(.product_quantity_incr и .product_quantity_decr). Эти классы
обязательно должны отличаться от классов аналогичных кнопок на странице товара. Иначе получим двойное срабатывание скрипта на странице товара, тем самым увеличивая/уменьшая количество на 2 за шаг.
Всё. Готов ответить на вопросы по теме.
P. S.
Для просмотра ссылки Войди или Зарегистрируйся.
