Shopify PLUS-附加签出自定义字段

我试图在结帐屏幕中添加其他自定义字段，下面是我的代码：

<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> 

地址类型
住宅的
商业的
if（window.jQuery）{
jquery=window.jquery；
}else if（window.Checkout&&window.Checkout.$）{
jquery=window.Checkout.$；
}
jquery（函数（）{
if（jquery（'.section--shipping address.section\u content'）.length）{
var addType=jquery（'.additional checkout fields'）.html（）；
jquery（'.section--shipping address.section\u content'）.append（addType）；
}
});

它返回的签出页面如下所示-

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

---

我缺少什么？

您负责管理添加元素的状态。Shopify可能不太在意你添加的内容，所以当你在屏幕之间切换时，当然要由你来管理内容。使用本地存储或cookie。创造奇迹。作为额外练习，请确保在完成签出时将自定义字段值指定给订单。你可能会发现你所有的努力都是徒劳的，因为这些价值在la la land中消失了，除非你明确地将它们添加为订单注释或属性。

从用例来看，你似乎希望用户选择地址类型，无论是住宅还是商业，因此raido按钮组似乎更合适。我编辑了HTML以创建单选按钮，而不是复选框。为了保持状态，我使用了。如果愿意，还可以将会话存储替换为。有关解释，请查看代码注释

<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>

if（window.jQuery）{
jquery=window.jquery；
}else if（window.Checkout&&window.Checkout.$）{
jquery=window.Checkout.$；
}
jquery（函数（）{
if（jquery（'.section--shipping address.section\u content'）.length）{
var addType=jquery（'.additional checkout fields'）.html（）；
jquery（'.section--shipping address.section\u content'）.append（addType）；
//从会话存储中获取保存的数据
让savedAddressType=sessionStorage.getItem（'address_type'）；
//如果会话存储中存在某些值
if（savedAddressType！==null）{
jquery（'input[name=“checkout[address_type]”][value='+savedAddressType+']'）。prop（“checked”，true）；
}
//收听单选按钮上的更改事件
jquery（'input[name=“checkout[address\u type]”）.change（function（）{
if（this.value！==savedAddressType）{
savedAddressType=this.value；
sessionStorage.setItem（'address_type'，savedAddressType）；
}
});
}
}); 

谢谢你的建议。你有任何文档或链接，我可以看到一些工作的例子吗？没有，但Shopify有大量的文档。应该花一点时间来弄清楚checkout.liquid可以做什么/不能做什么，以及如何保持可以在那里使用的值。我认为你最好在车里做这件事，因为那太简单了。。。与结帐相比，购物车要简单得多，但顾客在结帐时需要购物车，因为有些人可能想跳过购物车。我真的很感谢你的帮助，但我认为Shopify没有这样的文档。有一些文章是关于如何处理checkout.liquid的。更不用说，既然你潜入其中，你也有义务自己去试验和弄明白。虽然在结帐时收集额外的信息比购物车级别的工作要多一些，但这确实很糟糕。希望我能帮忙，但不行。我使用了本地存储，正如David在前面的回答中所建议的那样。但你的回答更准确，因此我接受它！哈伊尔！