Ad

Shopify PLUS - Additional Checkout Custom Field

- 1 answer

I was trying to add additional custom field in the checkout screen and here is my code:

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

It returns the checkout page like this -

Checkout Custom Fields

The problem is - once I click continue button and comes back to this page again, I don't see the checkbox checked. I feel the values are not being passed or may be something else.

What am I missing?

Ad

Answer

From the usecase, it looks like you want the user to select the Address Type either Residential or Commercial so a raido button group seems more suitable. I have edited the HTML to create the Radio Button instead of Checkbox. To maintain the state, I have used Session Storage. You may also replace Session Storage with Local Storage if you want to do so. For explanation check code comments.

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

<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>
Ad
source: stackoverflow.com
Ad