0

У меня есть товары, которые имеют характеристику "Минимальное количество для заказа" - 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;
  });
}
2
  • Можете пояснить - что значит не правильно?
    – SwaD
    25 сен 2022 в 16:34
  • @SwaD Это значит, что если у товара1 характеристики id="val_num" например 25, id="val_num2" например 5, то при добавлении в корзину товар2 у которого характеристики id="val_num" например 15, id="val_num2" например 3, при увеличении/уменьшении количества товара2 будет браться значение id="val_num2" товара1 и не будет срабатывать ограниечение id="val_num" если оно меньше, потому что тоже значение берется из товар1
    – BoxBon
    25 сен 2022 в 17:36

1 ответ 1

0

Переложите ваши 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;
  });
}

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

3
  • Доброго времени суток! Я заменил <span id="val_num"> на <a id="val_num" data-val_num="...">, как вы советовали. Но не могу разобраться в правильном выводе через JS. Все время получаю либо Null, либо Undefined. Вывести пытаюсь так: var val_num2 = $(this).data('val_num2'); if ($('#val_num2').length){var numb = $(this).val_num2; console.log(numb)} else{var numb=1;}
    – BoxBon
    2 окт 2022 в 14:55
  • Прикрепил полный код отредактированной функции в тело вопроса
    – BoxBon
    2 окт 2022 в 15:04
  • Обновил комментарий, оставив пример и идею. Тестировал здесь
    – SwaD
    2 окт 2022 в 17:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.