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>

它returns结账页面是这样的-

问题是 - 单击“继续”按钮并再次返回此页面后，我没有看到复选框被选中。我觉得这些值没有被传递或者可能是其他东西。

我错过了什么？

Answer 1

您负责管理您添加的元素的状态。 Shopify 可能不太关心你添加的东西，所以当你在屏幕之间切换时，当然要由你来管理内容。使用 localStorage 或 cookie。创造奇迹。作为奖励练习，请确保在您完成结帐时将您的自定义字段值分配给订单。你可能会发现你所有的努力都是徒劳的，因为那些价值在 la-la 土地上萎靡不振，除非你明确地将它们添加为订单备注或属性。

Answer 2

从用例来看，您似乎希望用户 select 地址类型为住宅或商业，因此 raido 按钮组似乎更合适。我编辑了 HTML 以创建单选按钮而不是复选框。为了保持状态，如果你想这样做，我已经使用了Session Storage. You may also replace Session Storage with 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>

Shopify PLUS - 附加结帐自定义字段

Shopify PLUS - additional checkout custom field

liquid

shopify