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

您负责管理已添加元素的状态。 Shopify可能不太在乎所添加的内容，因此，当然，当您在屏幕之间切换时，将由您来管理内容。使用localStorage或cookie。创造奇迹。作为奖励练习，请确保在结帐时将自定义字段值分配给订单。您可能会发现自己所有的辛苦工作都是徒劳的，因为这些价值在la-la land显得微不足道，除非您明确将它们添加为订单注释或属性。

Answer 2

在用例中，您似乎希望用户选择住宅或商用的地址类型，因此raido按钮组似乎更合适。我已经编辑了HTML以创建单选按钮而不是Checkbox。为了保持状态，我使用了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>

Shopify PLUS-其他结帐自定义字段

2 个答案: