Shopify Checkout - Отправка формы - страница не перезагружается - невозможно отключить кнопку с помощью метода setAttribute ('disable')

Question

Недавно я нашел решение, позволяющее клиентам не вводить PO BOX на Shopify, и я столкнулся с парой проблем, и мне было интересно, сталкивался ли кто-нибудь с этим раньше. Я знаю, что у Shopify есть ограничения на то, что вы можете делать со страницей checkout.liquid -> теперь я обнаружил эту замечательную функцию, которая создает сообщение об ошибке и не позволяет пользователю отправлять форму. Теперь, когда кто-то отправляет форму, Кнопка продолжает загружаться бесконечно, и я хотел бы обновить страницу sh. В качестве альтернативы я хотел бы отключить кнопку, которую я тестировал в консоли, создав новую переменную и используя метод setAttribute для отключения в идентификаторе формы. Это работало в консоли - однако, когда я подключил этот скрипт в своем файле - и затем проверил в консоли - он вернул бы ноль.

(function($) {
  $(document).on('ready page:load page:change', function() {
    var regex = /^.*p(.O.|o box|ost office|ost box)/i;
    var fieldErrorClass = 'field--error';
    var fieldErrorMessageSelector = '.field__message--error';
    var errorText = '{{ 'shopify.checkout.shipping.Po_Box_Err' | t }}';
    var $inputs = $("[data-step] [name='checkout[shipping_address][address1]'], [data-step] [name='checkout[shipping_address][address2]']");

    var regexCheckFn = function(elem) {
      var $current = $(elem);
      var $parent = $current.closest('.field__input-wrapper');
      var $field = $current.closest('.field');
      if (regex.test($current.val())) {
        if (!$field.hasClass(fieldErrorClass)) {
          $field.addClass(fieldErrorClass);
        }
        if ($field.find(fieldErrorMessageSelector).length < 1) {
          $parent.after("<p class='field__message field__message--error'>"+ errorText +"</p>");
        }
        return false;
       } else {
        if ($field.hasClass(fieldErrorClass)) {
          $field.removeClass(fieldErrorClass);
        }
        if ($field.find(fieldErrorMessageSelector).length > 0) {
          $field.find(fieldErrorMessageSelector).remove();
        }
        return true;
      }
    };

    // Call regex check on form submit
    $(document).on('submit', '[data-step] form', function() {
      // default to true and will be set to false if there is an error to prevent form submission
      var isValid = true;
      $inputs.each(function() {
        isValid = isValid && regexCheckFn($(this));
      });
      return isValid;
    });

    // Call regex check on blur
    $inputs.blur(function() {
      regexCheckFn($(this));
    });

  });
})(Checkout.$);

Answer 1

Проблема в том, что ваш код запрещает отправку формы после того, как Shopify отключает кнопку «Отправить» и переключает ее в состояние «загрузки», а вы не переключаете ее обратно.

Я бы немного изменил код, чтобы справиться с этим, проверив всю форму как на входных размытиях, так и на событиях отправки форм. Затем включите кнопку «Отправить», если форма верна, и отключите, если нет. Смотрите пример ниже:

(function($) {
  $(document).on('ready page:load page:change', function() {
    var regex = /^.*p(.O.|o box|ost office|ost box)/i;
    var fieldErrorClass = 'field--error';
    var fieldErrorMessageSelector = '.field__message--error';
    var errorText = '{{ 'shopify.checkout.shipping.Po_Box_Err' | t }}';
    var $inputs = $("[data-step] [name='checkout[shipping_address][address1]'], [data-step] [name='checkout[shipping_address][address2]']");

    var regexCheckFn = function(elem) {
      var $current = $(elem);
      var $parent = $current.closest('.field__input-wrapper');
      var $field = $current.closest('.field');
      if (regex.test($current.val())) {
        if (!$field.hasClass(fieldErrorClass)) {
          $field.addClass(fieldErrorClass);
        }
        if ($field.find(fieldErrorMessageSelector).length < 1) {
          $parent.after("<p class='field__message field__message--error'>"+ errorText +"</p>");
        }
        return false;
       } else {
        if ($field.hasClass(fieldErrorClass)) {
          $field.removeClass(fieldErrorClass);
        }
        if ($field.find(fieldErrorMessageSelector).length > 0) {
          $field.find(fieldErrorMessageSelector).remove();
        }
        return true;
      }
    };

    // Call regex check on form submit
    $(document).on('submit', '[data-step] form', validateForm);

    // Call regex check on blur
    $inputs.blur(validateForm);

    function validateForm() {
      var isValid = true;
      $inputs.each(function() {
        isValid = isValid && regexCheckFn($(this));
      });
      if (isValid) {
        $("#continue_button").removeAttr("disabled");
      } else {
        $("#continue_button").attr("disabled", "disabled").removeClass("btn--loading");
      }
      return isValid;
    }
  });
})(Checkout.$);