Не нажимать кнопку «Добавить в корзину», если конкретный продукт не выбран - Shopify

Question

Привет, эксперты, хорошего дня, у меня есть проект на Shopify, где я изо всех сил пытаюсь предупредить и предупредить, когда определенный продукт выбран для некоторых условий.

Я сделал шаблон продукта, гдеЯ заполняю список продуктов из коллекции A как первый набор выбора, а коллекция B - как второй набор выбора.

Это страница продукта, на которой я могу выбрать 1 продукт из коллекции A, а также 1 продукт из коллекции B (У каждого продукта есть кнопка Добавить в корзину)

Условие для коллекции A требуется длядобавить как минимум 1 товар из коллекции B, в то время как для коллекции B не требуется иметь товар из коллекции A.

Вот чего я не хочу достигнуть: при нажатии любой из товаров из коллекции A она выдаст предупреждение "Необходимо выбрать хотя бы 1 товар из коллекции B "

Я использую cart.js для нескольких товаров в шаблоне товара.Это возможно?или есть самый простой способ реализовать это?

Спасибо

Answer 1

Я не могу говорить о внутренней работе cart.js, но то, что вы просите, должно быть достаточно простым с обычным Javascript.

То, что вы хотите сделать, это:

• При отправке формы A;
• Выберите форму B;
• Проверьте, есть ли у формы B выбранный вариант;
• Запретить добавление кдействие корзины, если нет варианта в форме B

Если cart.js имеет простой способ вставить функцию проверки, я бы вставил код.В противном случае я бы добавил функцию проверки к отправке формы или щелчку по кнопке отправки, в зависимости от того, что удобнее, если cart.js находится в игре.

Пример функции проверки будет выглядеть примерно так:

function validateFormA(evt){
  var formB = document.forms('product-form-b'); // document.forms can access any form on the page using the appropriate ID attribute

  if(!form){
    // Couldn't find form, should this pass or fail?
    return;
  }

  var variantIdField = form.id;  // To access the form control with the name 'id'
  var value = variantIdField.value;
  if(!value){
    evt.preventDefault();
    return false;
  }
  return true;
}