Блог

Главная - Вопросы по программированию - Shopify — Cart.js не добавлять товар в корзину

Shopify — Cart.js не добавлять товар в корзину

#javascript #jquery #shopify

#javascript #jquery #Shopify

Вопрос:

В настоящее время я пытаюсь получить Shopify cart.js чтобы добавить мои товары в корзину.

Раньше он работал отлично, но когда я добавил варианты, он начал ломаться, и, хоть убейте, я не могу заставить его работать. При нажатии на кнопку — он вообще не добавляет товар в сумку.

   <form action="/cart/add" method="post" data-cart-submit>
    {% if product.variants.size > 1 %}
      <div class="w-form">
        <div class="inpost-form-option w-clearfix">
          <label class="inpost-form-label">{{ product.options.first }}</label>
          <select id="variant-select" class="inpost-quantity w-select">
                {% for variant in product.variants %}
                    {% if variant.available == true %}
                        <option value="{{ variant.id }}">{{ variant.title }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
      </div>
      {% endif %}
      <button class="inpost-buy w-button" type="submit" data-cart-add="{{ variant.id }}">Add to Bag →</button>
  </form>

Добавлен Javascript

 <script type="text/javascript">
    jQuery(function() {
        CartJS.init({{ cart | json }});
    });
</script>

Ошибка консоли

shop_events_listener-91b4691….js: 1 СООБЩЕНИЕhttps://monah-uk.myshopify.com/cart/add.js 404 (Не найден)

Комментарии:

1. Похоже, что к кнопке пытаются добавить жестко закодированный идентификатор варианта, но на него ссылаются за пределами for цикла, где variant определена переменная. Это означало бы установку data-cart-add в пустую строку, поэтому, если предполагается, что именно так товары попадают в корзину, ничего не будет добавлено. Однако без javascript просмотр формы — это просто дикое массовое угадывание — не могли бы вы также найти функцию javascript, которая должна выполняться? Если в консоли есть какие-либо ошибки, связанные с добавлением продукта, обмен ими также поможет.

2. Я добавил javascript, который запускается в моей теме. жидкий файл к вопросу.

3. Ах! С CartJS, похоже, вы используете тему Focal или Kagami?

4. Ошибка 404 (не найдена) обычно означает, что скрипт пытался добавить идентификатор варианта, которого не существует в вашем магазине. Если вы откроете инструменты отладчика на вкладке сеть и попытаетесь добавить товар в корзину (это поможет очистить журнал перед тем, как вы это сделаете, если что-то уже появилось), следите за вызовом /cart/add.js . В деталях для этой записи вы должны увидеть раздел данных запроса. Как минимум, необходимо передать параметр с именем ‘id’, и этот параметр ‘id’ должен соответствовать одному из вариантов идентификаторов, присутствующих в вашем магазине.

5. Чтобы получить список идентификаторов вариантов, которые есть в вашем продукте, для регистрации в вашей консоли, вы можете добавить эту комбинацию Liquid / javascript: {% if product %}<script>console.log({{ product.variants | map: 'id' | json }})</script>{% endif %} — это позволит вам легко сравнить то, что передается в конечную точку AJAX, с реальными существующими вариантами.