JS добавление кол-ва товара в корзине с определенным шагом

Question

У меня есть товары, которые имеют характеристику "Минимальное количество для заказа" - id="val_num" и шаг "Продается по...шт" - id="val_num2". Все корректно работает в карточке товара, в каталоге и тд.

В корзине, если товар всего один, то тоже все корректно работает, но если добавить еще один товар с другими значениями id="val_num" и id="val_num2" или же вовсе без этих характеристик, то кнопки увеличения/уменьшения количества начинают работать не правильно.

Подскажите пожалуйста, как правильно составить массив для перебора значений id

function quantity() {
  //Regulator Up копки + в карточке товара при добавлении в корзину
  $('.qty__plus').off('click').on('click', function(){
        //console.log('qty__plus')
    var quantity = $(this).parent().find('.quantity, .cartqty');
    var currentVal = parseInt(quantity.val());
    if ($('#val_num2').length){
                  var numb=parseInt($('#val_num2').text());
                  console.log(numb)
                }
                else{
                   var numb=1;
                }
    if (!isNaN(currentVal)){
      quantity.val(currentVal + numb);
      quantity.trigger('keyup');
      quantity.trigger('change');
    }
    return false;
  });
  //Regulator Down копки - в карточке товара при добавлении в корзину
  $('.qty__minus').off('click').on('click', function(){
        //console.log('qty__minus')
    var quantity = $(this).parent().find('.quantity, .cartqty');
    var currentVal = parseInt(quantity.val());
    if ($('#val_num2').length){
                  var numb=parseInt($('#val_num2').text());
                  console.log(numb)
                }
                else{
                   var numb=1;
                }
    var numb2=parseInt($('#val_num').text());
    if (!isNaN(currentVal) && !(currentVal <= numb) && !(currentVal <= numb2) ){
      quantity.val(currentVal - numb);
      quantity.trigger('keyup');
      quantity.trigger('change');
    }
    return false;
  });
}

В шаблоне, товары в корзине и кнопки +- выводится так:

<!-- Форма корзины -->
<form action="{CART_URL}" method="post" class="cartForm">
    <input type="hidden" name="fast_order" value="1" />
    <input type="hidden" name="hash" value="{HASH}" />
    <!-- Корзина: Элементы -->
    <div class="cart__items">
        {% FOR cart_items %}
        <div class="cart__item flex" data-id="{cart_items.GOODS_MOD_ID}">
            <a class="cart__image flex-center" href="{cart_items.GOODS_URL}">
                <img src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo.png?design=PARTY{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}">
            </a>
            <div class="cart__content flex">
                <div class="cart__info-top flex {% IF cart_items.GOODS_MOD_ART_NUMBER %}has-art{% ENDIF %}">
                    <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара -->
                    <div class="cart__art cart__info">
                        {% IF cart_items.GOODS_MOD_ART_NUMBER %}
                        <label>Артикул:</label>
                        <span>{cart_items.GOODS_MOD_ART_NUMBER}</span>
                        {% ENDIF %}
                    </div>
                    <div class="cart__qty">
                        <span>Кол-во</span>
                    </div>
                    <div class="cart__price">
                        <span>Цена</span>
                    </div>
                </div>
                <div class="cart__info">
                    <!-- Название -->
                    <a class="cart__name" href="{cart_items.GOODS_URL}">{cart_items.GOODS_NAME}</a>
                    <!-- Модификации -->
                    {% IFNOT cart_items.distinctive_properties_empty %}
                        {% FOR distinctive_properties %}
                        <div class="cart__prop flex">
                            <label>{cart_items.distinctive_properties.NAME}:</label>
                            <span>{cart_items.distinctive_properties.VALUE}</span>
                        </div>
                        {% ENDFOR %}
                    {% ENDIF %}
                </div>
                {% FOR goods_attr_list %}
                {% IF cart_items.goods_attr_list.NAME=Минимальная партия для заказа %}<span id="val_num" style="display:none">{cart_items.goods_attr_list.VALUE}</span>
                {% ELSEIF cart_items.goods_attr_list.NAME=Продается по %}<span id="val_num2" style="display:none">{cart_items.goods_attr_list.VALUE}</span>
                {% ENDIF %}
                {% ENDFOR %}
                <div class="cart__actions flex">
                    <div class="cart__qty">
                        <div class="qty flex-center">
                            <a href="javascript:void(0)" class="qty__minus flex-center unselectable" title="Уменьшить"><i class="icon-minus"></i></a>
                            <input 
                              type="text" 
                              name="form[quantity][{cart_items.GOODS_MOD_ID}]" 
                              maxlength="4" 
                              value="{cart_items.ORDER_LINE_QUANTITY}" 
                              max="{cart_items.GOODS_MOD_REST_VALUE}" 
                              title="Количество, {cart_items.GOODS_MOD_MEASURE_NAME}" 
                              class="cartqty quantity" 
                              onkeypress="return keyPress(this, event);" 
                              onpaste="return false;" 
                              autocomplete="off"
                              readonly="true" 
                              />
                            <a href="javascript:void(0)" class="qty__plus flex-center unselectable" title="Увеличить"><i class="icon-plus"></i></a>
                        </div>
                        {% FOR goods_attr_list %}
                      {% IF cart_items.goods_attr_list.NAME=Минимальная партия для заказа %}
                      <div style="float: left;position: relative;width: 100%;opacity: 0.4;font-size: 10px;text-align: left;padding: 7px 0 0 0;">мин кол-во заказа: {cart_items.goods_attr_list.VALUE} шт</div>
                    {% ENDIF %}
                  {% ENDFOR %}
                    </div>
                    <div class="cart__price {CURRENCY_CHAR_CODE}">
                        <!-- {% IF cart_items.ORDER_LINE_PRICE_OLD > 0 %}<div class="price__old">{cart_items.ORDER_LINE_PRICE_OLD | money_format}</div>{% ENDIF %} -->
                        <div class="cartPriceTotal price__now">{cart_items.ORDER_LINE_PRICE_NOW | money_format}</div>
                        {% IF cart_items.ORDER_LINE_PRICE_OLD > cart_items.ORDER_LINE_PRICE_NOW %}
                        <div class="price__old">{cart_items.ORDER_LINE_PRICE_OLD | money_format}</div>
                        {% ENDIF %}
                    </div>
                </div>
                <!-- Удалить -->
                <a class="cart__delete flex-center remove" data-href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" onclick="cartDelete($(this))" class="remove">
                    <i class="icon-close"></i>
                </a>
            </div>
        </div>
        {% ENDFOR %}
    </div>
</form>

Обновленная функция, которая не выводит значение data-val_num:

function quantity() {
  //Regulator Up копки + в карточке товара при добавлении в корзину
  $('.qty__plus').off('click').on('click', function(){
        //console.log('qty__plus')
    var quantity = $(this).parent().find('.quantity, .cartqty');
    var currentVal = parseInt(quantity.val());
    var val_num2 = $(this).data('val_num2');
    if ($('#val_num2').length){
                  var numb = $(this).val_num2;
                  console.log(numb)
                }
                else{
                   var numb=1;
                }
    if (!isNaN(currentVal)){
      quantity.val(currentVal + numb);
      quantity.trigger('keyup');
      quantity.trigger('change');
    }
    return false;
  });
  //Regulator Down копки - в карточке товара при добавлении в корзину
  $('.qty__minus').off('click').on('click', function(){
        //console.log('qty__minus')
    var quantity = $(this).parent().find('.quantity, .cartqty');
    var currentVal = parseInt(quantity.val());
    var val_num2 = $(this).data('val_num2');
    if ($('#val_num2').length){
                  var numb = $(this).val_num2;
                  console.log(numb)
                }
                else{
                   var numb=1;
                }
    var val_num = $(this).data('val_num');
    var numb2 = $(this).val_num;
    console.log(numb2);
    if (!isNaN(currentVal) && !(currentVal <= numb) && !(currentVal <= numb2) ){
      quantity.val(currentVal - numb);
      quantity.trigger('keyup');
      quantity.trigger('change');
    }
    return false;
  });
}

Answer 1

Переложите ваши val_num и val_num2 в тег <input в виде атрибутов data-*, допустим это будут data-part и data-min

Предположим, что корзина(упрощенно) выглядит вот так(HTML без шаблонизатора):

<div class="qty flex-center">
    <a href="javascript:void(0)" class="qty__minus flex-center unselectable" title="Уменьшить">-</a>

    <input type="text" name="" maxlength="4" value="6" max="" title="Количество, " class="cartqty quantity"
           onkeypress="return keyPress(this, event);" onpaste="return false;" autocomplete="off" readonly="true"
           data-part='2'
           data-min='3'
    />

    <a href="javascript:void(0)" class="qty__plus flex-center unselectable" title="Увеличить">+</a>
</div>

<div class="qty flex-center">
    <a href="javascript:void(0)" class="qty__minus flex-center unselectable" title="Уменьшить">-</a>

    <input type="text" name="" maxlength="4" value="8" max="" title="Количество, " class="cartqty quantity"
           onkeypress="return keyPress(this, event);" onpaste="return false;" autocomplete="off" readonly="true"
           data-part='4'
           data-min='2'
    />

    <a href="javascript:void(0)" class="qty__plus flex-center unselectable" title="Увеличить">+</a>
</div>

Измененная функция:

function quantity() {
  //Regulator Up копки + в карточке товара при добавлении в корзину
  $('.qty__plus').off('click').on('click', function(){
    
    var quantity = $(this).parent().find('.quantity, .cartqty');
    var currentVal = parseInt(quantity.val());
    var numb = parseInt(quantity[0].getAttribute('data-part')); // Вытаскиваем значение атрибута data-part
    if (!isNaN(currentVal)){
      quantity.val(currentVal + numb);
      quantity.trigger('keyup');
      quantity.trigger('change');
    }
    return false;
  });
  //Regulator Down копки - в карточке товара при добавлении в корзину
  $('.qty__minus').off('click').on('click', function(){
    var quantity = $(this).parent().find('.quantity, .cartqty');
    var currentVal = parseInt(quantity.val());
    var numb = parseInt(quantity[0].getAttribute('data-part')); 
    var numb2 = parseInt(quantity[0].getAttribute('data-min')); // Получаем значение атрибута data-min
    if (!isNaN(currentVal) && !(currentVal <= numb) && !(currentVal <= numb2) ){
      quantity.val(currentVal - numb);
      quantity.trigger('keyup');
      quantity.trigger('change');
    }
    return false;
  });
}

Теперь для каждой позиции в вашей корзине определены значения, которые вам необходимы.

БЛОГ НА HUSL

JS добавление кол-ва товара в корзине с определенным шагом

Ответы (1 шт):