Как получить обновленные параметры URL после события изменения jQuery

Question

В Shopify я пытаюсь получить идентификатор выбранного варианта в файле сценария. Мне удалось получить идентификатор варианта путем получения параметра URL-адреса, но он дает мне параметр URL-адреса, который был там до события при изменении.

Я пытался сделать AJAX-вызов, перебрал идентификаторы вариантов продукта, но безуспешно.

// Getting the URL Parameter for Variant ID 
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};


$('#option-color').change(function() {

  var currentUrl = getUrlParameter('variant');

  var variants = [];
  var selected = $(this).val(),
      mainImage = jQuery('.main-image img').attr('srcset'),
      maxCount = 0;

  $('.thumbnail').addClass('thumbnail--hidden');
  $('.thumbnail--last').addClass('thumbnail--last');
  arr = [];


  var addImage = $.each(images, function(i, image) {
    var alt = images[i].alt,
        url = images[i].url;

    if (( alt == selected || url == mainImage) && maxCount < 4) {
      $($('.thumbnail img[alt="' + alt + '"]')[maxCount]).parents('.thumbnail').removeClass('thumbnail--hidden');

      maxCount++
    }

  });

Я в основном хочу иметь возможность вывести идентификатор варианта, которым он становится после выбора нового цвета.

Answer 1

При поиске идентификатора варианта выбранного в данный момент варианта необходимо настроить прослушиватель для фактического элемента, который изменяет вариант.Все эти активные элементы генерируют событие типа «изменение», которое вы можете прослушивать.Когда вы получаете событие изменения, как правило, вы получаете вариант для проверки, но если нет, вы всегда можете запросить элемент для его текущего значения.

Поиск в URL, вероятно, наименее эффективный и наименее надежный способ сделать это.Не все темы утруждают себя размещением текущего варианта в URL, и, как вы указали, в зависимости от того, когда вы решите проанализировать и проанализировать это значение, оно может не соответствовать вашему желанию.

Таким образом, самый безопасный подход - это изучить DOM и выяснить элемент, с которым клиент выбрал варианты, и пролистать его, чтобы обнаружить «изменение» и последующее значение.