Question

我目前正在开发一个客户端包，他们现在有 5 个基于不同区域的网站在 Shopify Plus 上运行。对于基于欧盟的网站，他们希望在结帐页面上添加增值税号字段，因为我们可以访问 checkout.liquid 我认为我不会很难让它工作。结果我错了，关于添加字段的文档很少。

我已将此代码添加到 {{ content_for_layout }} 正下方的 checkout.liquid 文件中。

<div class="additional-checkout-fields" style="display:none;">
   <div class="fieldset fieldset--vat-number" data-additional-fields>
      <div class="field field--optional field--vat-number">
         <h2 class="additional-field-title">Additional Information</h2>
         <div class="field__input-wrapper">       
            <label class="field__label field__label--visible" for="checkout_vat_number">Suburb</label>
            <input placeholder="VAT Number" class="field__input" aria-required="true" size="30" type="text" name="checkout[vat_number]" id="checkout_attributes_vat_number">
         </div>
      </div>
   </div>
</div>

以及创建了一个单独的 js 文件并链接到 checkout.liquid 但代码如下

<script>

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

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

        // Get saved data from sessionStorage
        let savedVATNumber = sessionStorage.getItem('vat_number');

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

        // Listen to change event on text box
        jquery('input[name="checkout[vat_number]"]').change(function() {
            if (this.value !== savedVATNumber) {
                savedVATNumber = this.value;
                sessionStorage.setItem('vat_number', savedVATNumber);
            }

        });

    }
}); 

</script>

自定义字段显示在结帐页面上完全没有问题。我希望它位于“公司名称”下方，但我认为这不可能（如果您知道可以做到，请告诉我）。我的问题是，当填写增值税号并且用户按下“继续发货”时，增值税号会被清除，他们需要再次填写。理想情况下，我希望它只显示在客户信息页面上并保存信息，然后不显示在剩余的结账页面上，但如果它需要保留在所有阶段，那么数字需要经过。

遗憾的是，我不是 jquery/javascript 高手，所以我不相信我的脚本是正确的。任何帮助将不胜感激。 Customer Information page with VAT showing

Shopify 自定义结帐字段未保存

0 个答案: