0

Не знаю как отследить change и передать изменения в кнопки с одинаковым ID. Есть модуль комплектов, он выводит товары в карточке товаров.

И если я выбираю в одном товаре Опцию (input) данные этой опции передаються в кнопку и выходит (Размер: М) но если есть две кнопки с одинаковым ID, то данные передадуться только в одну( Я писал автору, но он говорит что это невозможно сделать, потому что данные могут передаться только по уникальному ID...

В общем, я немного разобрался в этом JS но он для меня капец какой сложный...

Слушаем input и если есть Чанге, выполняем kjset.initEvent();

$(document).ready(function() {
  kjset.initEvent();
  startTimer();

  setTimeout(function() { $(".set-options input").trigger('change'); } , 500);});

В этой части есть кусочек кода который передает данные в кнопку

 var kjset = {
  product_id: null,
  iset: null,
  gproducts: [],
  set_modal: false,
  current_set: null,
  initEvent: function() {
      var obj = this;
      $(".add-set-btn").click(function() {
          $(this).button('loading');

          $(this).parents('.sets-owl').trigger('autoplay.stop.owl');
          product_id = $(this).parents('.set').find("input[name='sp_product_id']").val();
          iset = $(this).parents('.set').find("input[name='sp_iset']").val();
          gproducts = $(this).parents('.set').find('.set-product').filter(function(index) {
              return $(this).find("input[name='sp_include']").is(":checked");
          });
          products = $(this).parents('.set').find('.set-product').filter(function(index) {
              return $(this).find("input[name='sp_include']").is(":checked");
          });

          obj.current_set = $(this).parents('.set');

          obj.recuesiveCheckSetOptions(products);
          $(".sets-owl").trigger("owl.stop");
      });
      $("input[name='sp_set_quantity']").change(function() {
          obj.current_set = $(this).parents('.set');
          obj.update_total();
      });
      $(".set input[name='sp_include']").change(function() {
          obj.current_set = $(this).parents('.set');
          obj.update_total();
      });
      $(".set-options").remove().appendTo('body');
      $('.apply-options').on('click', function() {
          var btn_id = $(this).parents('.modal').attr('id');
          $('button[data-target="#' + btn_id + '"]').parents('.set').find('.add-set-btn').first().trigger("click");
      });
      $(".set-options select,.set-options input[type='radio'],.set-options input[type='checkbox']").change(function() {
          var options = $(this).parents('.set-options').find("select option:selected,input[type='radio']:checked,input[type='checkbox']:checked");
          var btn_id = $(this).parents('.set-options').attr("id");
          var product = $("button[data-target='#" + btn_id + "'").parents('.set-product');
          obj.current_set = $(product).parents('.set');
          var cprice = parseFloat($(product).find("input[name='sp_cprice']").val());
          var eq_mod = false;
          var total = cprice;

          var str_opts = "";

          $(options).each(function() {
              //console.log($(this).parents('.form-group').find('label'));

              str_opts += $(this).parents('.form-group').find('label').eq(0).text().trim();
              str_opts += ": ";
              str_opts += $(this).parent('label').text().trim();
              str_opts += "<br/>";
             // console.log(str_opts);

              var pre = $(this).data('prefix');
              var price = parseFloat($(this).data('price'));
              if (pre.length != 0 && isNaN(price) == false) {
                  switch (pre) {
                      case '-':
                          total -= price;
                          break;
                      case '+':
                          total += price;
                          break;
                      case '=':
                          total = price;
                          break;
                      case '*':
                          total *= price;
                          break;
                      case '/':
                          total /= price;
                          break;
                      case 'u':
                          total = total + (($total * price) / 100);
                          break;
                      case 'd':
                          total = total - ((total * price) / 100);
                          break;
                      default:
                          break;
                  }
              }
          });
          $("button[data-target='#" + btn_id + "'").html(str_opts);
          //console.log(str_opts);

          total -= cprice;
          $(product).find("input[name='sp_option_price']").val(total);
          obj.update_total();
      });
  },
  initCarousel: function() {
      kjsetInitCarousel(".sets-owl");
  },
  numberWithSpaces: function(number) {
      //return number;
      return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
  },
  roundNumber: function(number) {
      decimals = parseInt(getDecimal());
      var dec = Math.pow(10, decimals)
      var part1, part2;
      var nnumber;
      if (decimals) {
          nnumber = "" + Math.round(parseFloat(number) * dec + .0000000000001);
          if (number > 1) part1 = nnumber.slice(0, -1 * decimals);
          else part1 = "0";
          part2 = nnumber.slice(-1 * decimals);
          return this.numberWithSpaces(part1) + "." + part2;
      } else return this.numberWithSpaces(Math.round(number));
  },
  animateCounter: function(selector, oldp, newp) {
      var obj = this;
      if (oldp !== newp) $(selector).prop('Counter', oldp).animate({
          Counter: newp
      }, {
          duration: 500,
          easing: 'swing',
          step: function(now) {
              $(this).text(Math.ceil(now));
          },
          complete: function() {
              $(selector).html(obj.roundNumber(newp));
          }
      });
  },
  update_total: function() {
      var obj = this;
      var set = obj.current_set;
      var cprice;
      var option_price;
      var qty;
      var qqty;
      var actual_price;
      var total = 0;
      var start;
      var total_economy = 0;
      var economy;
      var qs = parseInt($(set).find("input[name='sp_set_quantity']").val());
      if (set.length > 1) set = $(set).last();
      $(set).find('.set-product').each(function(index) {
          if ($(this).find("input[name='sp_include']").length)
              if ($(this).find("input[name='sp_include']").is(':checked') == false) return;
          qqty = qty = parseInt($(this).find("input[name='sp_quantity']").val());
          qty *= qs;

          if ($(this).find('input[name="sp_discounts_json"]').length) {
              var discounts = JSON.parse($(this).find('input[name="sp_discounts_json"]').val());
              $.each(discounts, function(index, value) {
                  if (qty >= parseInt(index)) cprice = value;
              });
          } else cprice = parseFloat($(this).find("input[name='sp_cprice']").val());


          if($(this).find('input[name="sp_discount_from"]').val()=='old')
              cprice_for_disc = parseFloat($(this).find("input[name='sp_oldcprice']").val());
          else
              cprice_for_disc=cprice;

          option_price = parseFloat($(this).find("input[name='sp_option_price']").val());
          discount = $(this).find("input[name='sp_discount']").val();
          cprice += option_price;
          cprice_for_disc += option_price;

          if (discount.substring(discount.length - 1) == "%") 
            economy = (cprice_for_disc / 100) * parseFloat(discount.slice(0, -1));
          else 
            economy = discount / qqty;

          total_economy += economy * qty;
          total += (cprice * qty);
          cprice = (cprice-economy)*qty;


          start = parseFloat(($(this).find('.new_price .num').html()).replace(/\s/g, ''));
          obj.animateCounter($(this).find(".new_price .num"), start, cprice);
      });     
      total_economy = getRoundEconomy(total_economy);
      total -= total_economy;
      if ($(set).find('.set-total .economy').length) {
          start = parseFloat(($(set).find('.set-total .economy .economy_val .num').html()).replace(/\s/g, ''));
          obj.animateCounter($(set).find('.set-total .economy .economy_val .num'), start, total_economy);
          if (total_economy != 0) $(set).find('.set-total .economy').fadeTo("slow", 1);
          else $(set).find('.set-total .economy').fadeTo("slow", 0);
      }
      start = parseFloat(($(set).find('.set-total .new_summ .num').html()).replace(/\s/g, ''));
      obj.animateCounter($(set).find('.set-total .new_summ .num'), start, total);
  },
    addSetToCart: function() {
      var products = {};
      var jsons = [];
      var obj = this;
      var qs = parseInt($(obj.current_set).find("input[name='sp_set_quantity']").val());
      var newproducts={};
      var lastprod;

      $.each(gproducts, function(key, value) {
        var options = obj.getOptions(value);
        var product_id = $(value).find('input[name="sp_product_id"]').val();
        var quantity = $(value).find('input[name="sp_quantity"]').val();
        var post_products = {};
        post_products.product_id = product_id;
        post_products.quantity = quantity*qs;

        post_products.option=$(options).filter('*[name^="sp_option["]').serialize();
        newproducts[key]=post_products;

      });

      $.ajax({
        url: 'index.php?route=extension/module/sets/addSetToCart',
        type: 'post',
        async: false,
        data: {products:newproducts},
        dataType: 'json',
        success: function(json) {
            $('.alert-dismissible, .text-danger').remove();
            $('.form-group').removeClass('has-error');

            if (json['error']) {
                if (json['error']['option']) {
                    let errorOption = '';
                    for (i in json['error']['option']) {
                        var element = $('#input-option' + i.replace('_', '-'));

                        if (element.parent().hasClass('input-group')) {
                            element.parent().after('<div class="text-danger"><span class="KT-danger"><i class="fas fa-exclamation"></i>' + json['error']['option'][i] + '</span></div>');
                        } else {
                            element.after('<div class="text-danger"><span class="KT-danger"><i class="fas fa-exclamation"></i>' + json['error']['option'][i] + '</span></div>');
                        }
                        errorOption += '<div class="alert-text-item">' + json['error']['option'][i] + '</div>';
                    }
                    usNotify('danger', errorOption);
                }

                if (json['error']['error_warning']) {
                    usNotify('danger', json['error']['error_warning']);
                }

                if (json['error']['recurring']) {
                    $('select[name=\'recurring_id\']').after('<div class="text-danger"><span class="KT-danger"><i class="fas fa-exclamation"></i>' + json['error']['recurring'] + '</span></div>');
                }

                // Highlight any found errors
                $('.text-danger').parent().addClass('has-error');
                var scrollTo = $( ".has-error .text-danger" ).first();
                $('html, body').animate({scrollTop: scrollTo.offset().top - 350})
            }

            if (json['success']) {
                usNotify('success', json['success']);
                octPopupCart();
                if(typeof octYandexEcommerce == 'function') {
                    octYandexEcommerce(json);
                }

                // Need to set timeout otherwise it wont update the total
                setTimeout(function () {
                    $('#oct-cart-quantity, .header-cart-index, .mobile-header-index').html(json['total_products']);
                    $('.us-cart-text').html(json['total_amount']);
                }, 100);
            }
        }
      });


    },
  addSetToCartSuccess: function(json) {
      kjsetAddSetToCartSuccess(json);
  },
  clearOptionPrice: function() {
      $("input[name='sp_option_price']").val(0);
  },
  addSetToTotal: function() {
      var obj = this;
      $.ajax({
          url: 'index.php?route=extension/module/sets/addSetToTotal',
          type: 'post',
          data: {
              sp_product_id: product_id,
              sp_iset: iset
          },
          dataType: 'json',
          success: function() {
              obj.addSetToCart(iset);
          }
      });
  },
  getOptions: function(product) {
      var modal_selector = $($(product).find('.open-options').data('target'));
      var options = $(product).find('input[type="hidden"],input[type="checkbox"]');
      if (modal_selector.length) {
          var options_modal = $(modal_selector).find('input[type=\'text\'], input[type=\'hidden\'], input[type=\'date\'], input[type=\'time\'], input[type=\'datetime\'], input[type=\'radio\']:checked, input[type=\'checkbox\']:checked, select,  textarea');
          var options = $.merge(options_modal, options);
      }
      return options;
  },
  recuesiveCheckSetOptions: function(products) {
      var obj = this;
      var product = products.shift();
      var options = obj.getOptions(product);
      var modal_selector = $($(product).find('.open-options').data('target'));
      $.ajax({
          url: 'index.php?route=extension/module/sets/checkProductOption',
          type: 'post',
          data: options,
          dataType: 'json',
          success: function(json) {
              $(modal_selector).find('.text-danger').parent().removeClass('has-error');
              $(modal_selector).find('.text-danger').remove();
              if (json['error']) {

                  var btn = $(obj.current_set).find(".add-set-btn");
                  $(btn).button('reset');

                  if (json['error']['option']) {
                      $(".modal").modal('hide');
                      if (modal_selector.length) setTimeout(function() {
                          $(modal_selector).modal('show')
                      }, 500);
                      for (i in json['error']['option']) {
                          var element = $(modal_selector).find('#set-input-option' + i.replace('_', '-'));
                          if (element.parent().hasClass('input-group')) {
                              element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                          } else {
                              element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                          }
                      }
                  }
                  if (modal_selector.length) $(modal_selector).find('.text-danger').parent().addClass('has-error');
              } else if (json['success']) {
                  if (products.length > 0) obj.recuesiveCheckSetOptions(products);
                  else {
                      $(".modal").modal('hide');
                      obj.addSetToTotal();
                  }
              }
          },
          error: function(xhr, ajaxOptions, thrownError) {
              alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
          }
      });
  }};

Вот этот код который выполняется и передает данные в кнопку

$("button[data-target='#" + btn_id + "'").html(str_opts);

Сама кнопка в twig

{% if (options) %}<div class="dm-com-vd-button-1"><button type="button" class="btn btn-primary open-options" data-toggle="modal" data-target="#sets-popup-{{ modal_id }}">{{ text_sets_options }}</button></div>{% endif %}

Проблема в том, что кнопка имеет data-target в котором есть ID вы это уже увидели. И дело в том, что если две кнопки с одинаковым ID то данные с str_opts подставляться только в одну кнопку. А как сделать чтобы данные str_opts вставлялись во все кнопки с одинаковым ID я не знаю, даже если найду пример, я блин не пойму что нашел...

Полный скрипт

4
  • 1
    ID (идентификатор) подразумевает уникальное значение в пределах документа. Если необходимо выбирать несколько элементов, то для этого лучше использовать классы или data-атрибуты.
    – XelaNimed
    Commented 22 авг. 2022 в 6:28
  • Извините, но я не смогу собрать нужную конструкцию, просто из за непонимания Commented 22 авг. 2022 в 6:54
  • Я надеюсь, что Вы поймёте меня правильно... На мой взгляд у Вас "смешались в кучу кони, люди"... Зачем использовать timeout? Вот этим кодом $(".set-options input").trigger('change') Вы инициируете событие change у всех инпутов с классом set-options - зачем? На события нужно просто подписываться и тут лишь разница в том, присутствует ли элемент в данный момент или добавляется динамически (от этого зависит к какому элементу мы "привязываемся"). Какому автору Вы писали? Используете библиотеку/шаблон?! Как называется? Где документация?
    – XelaNimed
    Commented 22 авг. 2022 в 7:09
  • Да, я понимаю вас правильно! Но я не понимаю о чем вы пишите. Поймите меня и вы, я не понимаю работу js на уровне первых двух уроков... Мне хватило знаний только чтобы найти что за что отвечает, но как исправить - тут уже пустота. Вот и обратился за помощью. Автор просто перестал отвечать на opencartforum Commented 22 авг. 2022 в 9:33

1 ответ 1

0

Вы можете заменить данную конструкцию:

$("button[data-target='#" + btn_id + "'").html(str_opts);

... на эту:

[...document.querySelectorAll("button[data-target='#" + btn_id + "'")]
  .forEach(button => button.innerHTML = str_opts);
3
  • К сожалению, не сработало, работает но как и первая конструкция( Commented 22 авг. 2022 в 6:51
  • 1
    А вы уверены, что на странице есть два элемента button[data-target='#ид']? Commented 22 авг. 2022 в 6:52
  • Это пипец, мне стыдно.... Да, ID разные........ Я почему то думал что если данные не вставляются то ID одинаковы, я на них даже не посмотрел( Commented 22 авг. 2022 в 7:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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