Shopify PLUS - дополнительное поле для оформления заказа

Question

Я пытался добавить дополнительное настраиваемое поле на экране оформления заказа, и вот мой код:

<div class="additional-checkout-fields" style="display:none">
  <div class="fieldset fieldset--address-type" data-additional-fields>
    <div class="field field--optional field--address-type">
      <h2 class="additional-field-title">ADDRESS TYPE</h2>
      <div class="field__input-wrapper">
        <label>
          <input data-backup="Residential" class="input-checkbox" aria-labelledby="error-for-address_type" type="checkbox" name="checkout[Residential]" id="checkout_attributes_Residential" value="Residential" /> 
          <span>Residential</span>
        </label>
        <label>
          <input data-backup="Commercial" class="input-checkbox" aria-labelledby="error-for-address_type" type="checkbox" name="checkout[Commercial]" id="checkout_attributes_Commercial" value="Commercial" /> 
          <span>Commercial</span> 
        </label>
       </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  if (window.jQuery) {
    jquery = window.jQuery;
  } else if (window.Checkout && window.Checkout.$) {
   jquery = window.Checkout.$;
  }

  jquery(function() {
    if (jquery('.section--shipping-address .section__content').length) {
      var addType = jquery('.additional-checkout-fields').html();
      jquery('.section--shipping-address .section__content').append(addType);
    }
  });
</script> 

Возвращает страницу оформления заказа следующим образом -

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

Что мне не хватает?

Answer 1

С точки зрения использования, похоже, что вы хотите, чтобы пользователь выбрал тип адреса: жилой или коммерческий, поэтому группа кнопок raido кажется более подходящей.Я отредактировал HTML, чтобы создать переключатель вместо флажка.Для поддержания состояния я использовал Session Storage .Вы также можете заменить Session Storage на Local Storage , если хотите.Для пояснения проверьте код комментария.

<div class="additional-checkout-fields" style="display:none">
   <div class="fieldset fieldset--address-type" data-additional-fields>
      <div class="field field--optional field--address-type">
         <h2 class="additional-field-title">ADDRESS TYPE</h2>
         <div class="field__input-wrapper">
            <label>
            <input class="input-radio" aria-label="" type="radio"  name="checkout[address_type]" id="checkout_attributes_Residential" value="residential" checked>
            <span>Residential</span>
            </label>
            <label>
            <input class="input-radio" aria-label="" type="radio"name="checkout[address_type]" id="checkout_attributes_Commercial" value="commercial">
            <span>Commercial</span>  
            </label>
         </div>
      </div>
   </div>
</div>

часть JavaScript

<script type = "text/javascript" >

    if (window.jQuery) {
        jquery = window.jQuery;
    } else if (window.Checkout && window.Checkout.$) {
    jquery = window.Checkout.$;
}

jquery(function() {
    if (jquery('.section--shipping-address .section__content').length) {
        var addType = jquery('.additional-checkout-fields').html();
        jquery('.section--shipping-address .section__content').append(addType);

        // Get saved data from sessionStorage
        let savedAddressType = sessionStorage.getItem('address_type');

        // if some value exist in sessionStorage
        if (savedAddressType !== null) {
            jquery('input[name="checkout[address_type]"][value=' + savedAddressType + ']').prop("checked", true);
        }

        // Listen to change event on radio button
        jquery('input[name="checkout[address_type]"]').change(function() {
            if (this.value !== savedAddressType) {
                savedAddressType = this.value;
                sessionStorage.setItem('address_type', savedAddressType);
            }

        });

    }
}); 

</script>

Answer 2

Вы несете ответственность за управление состоянием добавленных вами элементов.Shopify может меньше заботиться о том, что вы добавляете, поэтому, конечно, когда вы переключаетесь между экранами, вы сами можете управлять содержимым.Используйте localStorage или cookie.Творит чудеса.В качестве дополнительного упражнения убедитесь, что значения настраиваемых полей назначены заказу после завершения оформления заказа.Вы можете найти всю свою тяжелую работу напрасно, поскольку эти ценности томятся в а-ля земле, если вы явно не добавите их как примечания или атрибуты заказа.