Блог

Для контекста я создал скрипт для назначения элемента localstorage на основе того, что выбирает пользователь, этот элемент может содержать «S10», но также может содержать много других значений, для этого примера пользователь выбрал «S10»

Теперь это сохранено в localstorage.

Я создал этот скрипт, который я поместил в каждый из продуктов, включенных в сетку продуктов, поэтому этот скрипт будет загружаться несколько раз для каждого продукта:

 window.onload = function() {
  const string = localStorage.getItem('MyfitmentList', JSON.stringify(myfitment) );
  const attr = {{ product.metafields['fitment']['fitment'] | json }};

  document.getElementById("fitment").innerHTML = (`${string.includes(attr) ? '✔' : 'not a fit' }`);
}
 

Каждая сетка продуктов также содержит этот контейнер <div id="fitment"></div>

Приведенный выше скрипт загружается индивидуально для каждой карточки сетки продуктов и имеет собственные отдельные значения для «attr». Если «attr» не содержит «S10» (который пользователь ранее выбрал), тогда он должен показывать «не подходит», но если продукт содержит «S10», тогда он должен показывать галочку.

Проблема, с которой я столкнулся, заключается в том, что это работает только для первого скрипта, в первом <div id="fitment"></div> контейнере. Я вижу, что каждый отдельный скрипт имеет разное значение «attr», что хорошо, но я не знаю, почему заполняется только первый контейнер.

Каждый скрипт должен запускаться индивидуально и заполнять контейнер «fitment» в своей собственной карточке продукта. Я немного в недоумении относительно того, как это сделать.

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

Любая помощь будет очень признательна!