checkout.liquid adding shipping address input fields on shopify plus store
Hello, I've currently added the custom fields to the checkout page and have ran into and issue. The issue being that once I submit the form on the customer information step of the checkout process, the page refreshes with required shipping fields that are created by shopify and not collecting the data from the inputs that I created.
For background, I added the input fields to a product that is not a physical product and also doesn't require shipping. The store owner wants to be able to collect this data so that he can send the customers a preorder gift card as incentive. I would like the the data from the inputs to show on the orders shipping information on the backend.
Below I have added the the js code that I used to add to the checkout.liquid template.
$(document).on(`page:load page:change`, function() {
document.querySelector(".checkbox__label").innerText = "Keep me up to date on Smart Box availability and updates"
if (Shopify.Checkout.step === 'contact_information'){
//create text input variable
var input = `
<div class="section section--shipping-address" data-shipping-address="">
<div class="section__header">
<h2 class="section__title" id="section-delivery-title">
shipping address
</h2>
</div>
<div class="section__content">
<div class="fieldset">
<div class="fieldset-description" data-buyer-accepts-marketing="">
<div class="section__content">
<div class="checkbox-wrapper">
<div class="checkbox__input" style="display:inline-block;padding-right: 5px;">
<input name="checkout[sameAddressInput]" type="hidden" value="0" ><input class="input-checkbox sameAddressCheckbox" data-backup="sameAddressInput" type="checkbox" value="1" name="checkout[sameAddressInput]" id="checkout_sameAddressInput">
</div>
<label class="checkbox__label_for_shipping" for="sameAddressInput">Same as Billing address</label>
</div>
</div>
</div>
<div class="address-fields" data-additional-fields="">
<input class="visually-hidden" autocomplete="shipping given-name" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="first_name" data-honeypot="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][first_name]">
<input class="visually-hidden" autocomplete="shipping family-name" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="last_name" data-honeypot="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][last_name]">
<input class="visually-hidden" autocomplete="shipping address-line1" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="address1" data-honeypot="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][address1]">
<input class="visually-hidden" autocomplete="shipping address-line2" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="address2" data-honeypot="true" size="30" type="text" name="checkout[shipping_address][address2]">
<input class="visually-hidden" autocomplete="shipping address-level2" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="city" data-honeypot="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][city]">
<input class="visually-hidden" autocomplete="shipping country" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="country" data-honeypot="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][country]">
<input class="visually-hidden" autocomplete="shipping address-level1" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="province" data-honeypot="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][province]">
<input class="visually-hidden" autocomplete="shipping postal-code" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="zip" data-honeypot="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][zip]">
<input class="visually-hidden" autocomplete="shipping tel" tabindex="-1" aria-hidden="true" aria-label="no-label" data-autocomplete-field="phone" data-honeypot="true" size="30" type="text" name="checkout[shipping_address][phone]">
<div class="field field--required field--error field--half" data-address-field="first_name">
<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_first_name">First name</label>
<input placeholder="First name" autocomplete="shipping given-name" autocorrect="off" data-backup="first_name" class="field__input" aria-describedby="error-for-first_name" aria-invalid="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][first_name]" id="checkout_shipping_address_first_name">
</div>
<p class="field__message field__message--error" id="error-for-first_name">Enter a first name</p></div><div class="field field--required field--error field--half" data-address-field="last_name">
<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_last_name">Last name</label>
<input placeholder="Last name" autocomplete="shipping family-name" autocorrect="off" data-backup="last_name" class="field__input" aria-describedby="error-for-last_name" aria-invalid="true" aria-required="true" size="30" type="text" value="" name="checkout[shipping_address][last_name]" id="checkout_shipping_address_last_name">
</div>
<p class="field__message field__message--error" id="error-for-last_name">Enter a last name</p></div><div data-address-field="address1" data-autocomplete-field-container="true" class="field field--required field--error">
<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_address1">Address</label>
<input placeholder="Address" autocomplete="shipping address-line1" autocorrect="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-describedby="error-for-address1" aria-invalid="true" aria-required="true" data-backup="address1" data-autocomplete-trigger="true" data-autocomplete-title="Suggestions" data-autocomplete-single-item="1 item available" data-autocomplete-multi-item="{{number}} items available" data-autocomplete-item-selection="{{number}} of {{total}}" data-autocomplete-close="Close suggestions" class="field__input" size="30" type="text" name="checkout[shipping_address][address1]" id="checkout_shipping_address_address1" aria-haspopup="false">
<p class="field__additional-info visually-hidden" data-address-civic-number-warning="">
<svg class="icon-svg icon-svg--size-16 field__message__icon" aria-hidden="true" focusable="false"> <use xlink:href="#info"></use> </svg>
Add a house number if you have one
</p>
</div>
<p class="field__message field__message--error" id="error-for-address1">Enter an address</p></div><div data-address-field="address2" data-autocomplete-field-container="true" class="field field--optional">
<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_address2">Apartment, suite, etc. (optional)</label>
<input placeholder="Apartment, suite, etc. (optional)" autocomplete="shipping address-line2" autocorrect="off" data-backup="address2" class="field__input" size="30" type="text" name="checkout[shipping_address][address2]" id="checkout_shipping_address_address2">
</div>
</div><div data-address-field="city" data-autocomplete-field-container="true" class="field field--required field--error">
<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_city">City</label>
<input placeholder="City" autocomplete="shipping address-level2" autocorrect="off" data-backup="city" class="field__input" aria-describedby="error-for-city" aria-invalid="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][city]" id="checkout_shipping_address_city">
</div>
<p class="field__message field__message--error" id="error-for-city">Enter a city</p></div><div class="field field--required field--error field--third field--show-floating-label" data-address-field="country" data-autocomplete-field-container="true">
<div class="field__input-wrapper field__input-wrapper--select"><label class="field__label field__label--visible" for="checkout_shipping_address_country">Country/region</label>
<select size="1" autocomplete="shipping country" data-backup="country" class="field__input field__input--select" aria-describedby="error-for-country" aria-invalid="true" aria-required="true" name="checkout[shipping_address][country]" id="checkout_shipping_address_country" placeholder="Country/region"><option data-code="US" selected="selected" value="United States">United States</option>
<option disabled="disabled" value="---">---</option>
<option data-code="AF" value="Afghanistan">Afghanistan</option>
<option data-code="AX" value="Aland Islands">Åland Islands</option>
<option data-code="AL" value="Albania">Albania</option>
<option data-code="DZ" value="Algeria">Algeria</option>
<option data-code="AD" value="Andorra">Andorra</option>
<option data-code="AO" value="Angola">Angola</option>
<option data-code="AI" value="Anguilla">Anguilla</option>
<option data-code="AG" value="Antigua And Barbuda">Antigua & Barbuda</option>
<option data-code="AR" value="Argentina">Argentina</option>
<option data-code="AM" value="Armenia">Armenia</option>
<option data-code="AW" value="Aruba">Aruba</option>
<option data-code="AC" value="Ascension Island">Ascension Island</option>
<option data-code="AU" value="Australia">Australia</option>
<option data-code="AT" value="Austria">Austria</option>
<option data-code="AZ" value="Azerbaijan">Azerbaijan</option>
<option data-code="BS" value="Bahamas">Bahamas</option>
<option data-code="BH" value="Bahrain">Bahrain</option>
<option data-code="BD" value="Bangladesh">Bangladesh</option>
<option data-code="BB" value="Barbados">Barbados</option>
<option data-code="BY" value="Belarus">Belarus</option>
<option data-code="BE" value="Belgium">Belgium</option>
<option data-code="BZ" value="Belize">Belize</option>
<option data-code="BJ" value="Benin">Benin</option>
<option data-code="BM" value="Bermuda">Bermuda</option>
<option data-code="BT" value="Bhutan">Bhutan</option>
<option data-code="BO" value="Bolivia">Bolivia</option>
<option data-code="BA" value="Bosnia And Herzegovina">Bosnia & Herzegovina</option>
<option data-code="BW" value="Botswana">Botswana</option>
<option data-code="BR" value="Brazil">Brazil</option>
<option data-code="IO" value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option data-code="VG" value="Virgin Islands, British">British Virgin Islands</option>
<option data-code="BN" value="Brunei">Brunei</option>
<option data-code="BG" value="Bulgaria">Bulgaria</option>
<option data-code="BF" value="Burkina Faso">Burkina Faso</option>
<option data-code="BI" value="Burundi">Burundi</option>
<option data-code="KH" value="Cambodia">Cambodia</option>
<option data-code="CM" value="Republic of Cameroon">Cameroon</option>
<option data-code="CA" value="Canada">Canada</option>
<option data-code="CV" value="Cape Verde">Cape Verde</option>
<option data-code="BQ" value="Caribbean Netherlands">Caribbean Netherlands</option>
<option data-code="KY" value="Cayman Islands">Cayman Islands</option>
<option data-code="CF" value="Central African Republic">Central African Republic</option>
<option data-code="TD" value="Chad">Chad</option>
<option data-code="CL" value="Chile">Chile</option>
<option data-code="CN" value="China">China</option>
<option data-code="CX" value="Christmas Island">Christmas Island</option>
<option data-code="CC" value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option data-code="CO" value="Colombia">Colombia</option>
<option data-code="KM" value="Comoros">Comoros</option>
<option data-code="CG" value="Congo">Congo - Brazzaville</option>
<option data-code="CD" value="Congo, The Democratic Republic Of The">Congo - Kinshasa</option>
<option data-code="CK" value="Cook Islands">Cook Islands</option>
<option data-code="CR" value="Costa Rica">Costa Rica</option>
<option data-code="HR" value="Croatia">Croatia</option>
<option data-code="CW" value="Curaçao">Curaçao</option>
<option data-code="CY" value="Cyprus">Cyprus</option>
<option data-code="CZ" value="Czech Republic">Czechia</option>
<option data-code="CI" value="Côte d'Ivoire">Côte d’Ivoire</option>
<option data-code="DK" value="Denmark">Denmark</option>
<option data-code="DJ" value="Djibouti">Djibouti</option>
<option data-code="DM" value="Dominica">Dominica</option>
<option data-code="DO" value="Dominican Republic">Dominican Republic</option>
<option data-code="EC" value="Ecuador">Ecuador</option>
<option data-code="EG" value="Egypt">Egypt</option>
<option data-code="SV" value="El Salvador">El Salvador</option>
<option data-code="GQ" value="Equatorial Guinea">Equatorial Guinea</option>
<option data-code="ER" value="Eritrea">Eritrea</option>
<option data-code="EE" value="Estonia">Estonia</option>
<option data-code="SZ" value="Eswatini">Eswatini</option>
<option data-code="ET" value="Ethiopia">Ethiopia</option>
<option data-code="FK" value="Falkland Islands (Malvinas)">Falkland Islands</option>
<option data-code="FO" value="Faroe Islands">Faroe Islands</option>
<option data-code="FJ" value="Fiji">Fiji</option>
<option data-code="FI" value="Finland">Finland</option>
<option data-code="FR" value="France">France</option>
<option data-code="GF" value="French Guiana">French Guiana</option>
<option data-code="PF" value="French Polynesia">French Polynesia</option>
<option data-code="TF" value="French Southern Territories">French Southern Territories</option>
<option data-code="GA" value="Gabon">Gabon</option>
<option data-code="GM" value="Gambia">Gambia</option>
<option data-code="GE" value="Georgia">Georgia</option>
<option data-code="DE" value="Germany">Germany</option>
<option data-code="GH" value="Ghana">Ghana</option>
<option data-code="GI" value="Gibraltar">Gibraltar</option>
<option data-code="GR" value="Greece">Greece</option>
<option data-code="GL" value="Greenland">Greenland</option>
<option data-code="GD" value="Grenada">Grenada</option>
<option data-code="GP" value="Guadeloupe">Guadeloupe</option>
<option data-code="GT" value="Guatemala">Guatemala</option>
<option data-code="GG" value="Guernsey">Guernsey</option>
<option data-code="GN" value="Guinea">Guinea</option>
<option data-code="GW" value="Guinea Bissau">Guinea-Bissau</option>
<option data-code="GY" value="Guyana">Guyana</option>
<option data-code="HT" value="Haiti">Haiti</option>
<option data-code="HN" value="Honduras">Honduras</option>
<option data-code="HK" value="Hong Kong">Hong Kong SAR</option>
<option data-code="HU" value="Hungary">Hungary</option>
<option data-code="IS" value="Iceland">Iceland</option>
<option data-code="IN" value="India">India</option>
<option data-code="ID" value="Indonesia">Indonesia</option>
<option data-code="IQ" value="Iraq">Iraq</option>
<option data-code="IE" value="Ireland">Ireland</option>
<option data-code="IM" value="Isle Of Man">Isle of Man</option>
<option data-code="IL" value="Israel">Israel</option>
<option data-code="IT" value="Italy">Italy</option>
<option data-code="JM" value="Jamaica">Jamaica</option>
<option data-code="JP" value="Japan">Japan</option>
<option data-code="JE" value="Jersey">Jersey</option>
<option data-code="JO" value="Jordan">Jordan</option>
<option data-code="KZ" value="Kazakhstan">Kazakhstan</option>
<option data-code="KE" value="Kenya">Kenya</option>
<option data-code="KI" value="Kiribati">Kiribati</option>
<option data-code="XK" value="Kosovo">Kosovo</option>
<option data-code="KW" value="Kuwait">Kuwait</option>
<option data-code="KG" value="Kyrgyzstan">Kyrgyzstan</option>
<option data-code="LA" value="Lao People's Democratic Republic">Laos</option>
<option data-code="LV" value="Latvia">Latvia</option>
<option data-code="LB" value="Lebanon">Lebanon</option>
<option data-code="LS" value="Lesotho">Lesotho</option>
<option data-code="LR" value="Liberia">Liberia</option>
<option data-code="LY" value="Libyan Arab Jamahiriya">Libya</option>
<option data-code="LI" value="Liechtenstein">Liechtenstein</option>
<option data-code="LT" value="Lithuania">Lithuania</option>
<option data-code="LU" value="Luxembourg">Luxembourg</option>
<option data-code="MO" value="Macao">Macao SAR</option>
<option data-code="MG" value="Madagascar">Madagascar</option>
<option data-code="MW" value="Malawi">Malawi</option>
<option data-code="MY" value="Malaysia">Malaysia</option>
<option data-code="MV" value="Maldives">Maldives</option>
<option data-code="ML" value="Mali">Mali</option>
<option data-code="MT" value="Malta">Malta</option>
<option data-code="MQ" value="Martinique">Martinique</option>
<option data-code="MR" value="Mauritania">Mauritania</option>
<option data-code="MU" value="Mauritius">Mauritius</option>
<option data-code="YT" value="Mayotte">Mayotte</option>
<option data-code="MX" value="Mexico">Mexico</option>
<option data-code="MD" value="Moldova, Republic of">Moldova</option>
<option data-code="MC" value="Monaco">Monaco</option>
<option data-code="MN" value="Mongolia">Mongolia</option>
<option data-code="ME" value="Montenegro">Montenegro</option>
<option data-code="MS" value="Montserrat">Montserrat</option>
<option data-code="MA" value="Morocco">Morocco</option>
<option data-code="MZ" value="Mozambique">Mozambique</option>
<option data-code="MM" value="Myanmar">Myanmar (Burma)</option>
<option data-code="NA" value="Namibia">Namibia</option>
<option data-code="NR" value="Nauru">Nauru</option>
<option data-code="NP" value="Nepal">Nepal</option>
<option data-code="NL" value="Netherlands">Netherlands</option>
<option data-code="NC" value="New Caledonia">New Caledonia</option>
<option data-code="NZ" value="New Zealand">New Zealand</option>
<option data-code="NI" value="Nicaragua">Nicaragua</option>
<option data-code="NE" value="Niger">Niger</option>
<option data-code="NG" value="Nigeria">Nigeria</option>
<option data-code="NU" value="Niue">Niue</option>
<option data-code="NF" value="Norfolk Island">Norfolk Island</option>
<option data-code="MK" value="North Macedonia">North Macedonia</option>
<option data-code="NO" value="Norway">Norway</option>
<option data-code="OM" value="Oman">Oman</option>
<option data-code="PK" value="Pakistan">Pakistan</option>
<option data-code="PS" value="Palestinian Territory, Occupied">Palestinian Territories</option>
<option data-code="PA" value="Panama">Panama</option>
<option data-code="PG" value="Papua New Guinea">Papua New Guinea</option>
<option data-code="PY" value="Paraguay">Paraguay</option>
<option data-code="PE" value="Peru">Peru</option>
<option data-code="PH" value="Philippines">Philippines</option>
<option data-code="PN" value="Pitcairn">Pitcairn Islands</option>
<option data-code="PL" value="Poland">Poland</option>
<option data-code="PT" value="Portugal">Portugal</option>
<option data-code="QA" value="Qatar">Qatar</option>
<option data-code="RE" value="Reunion">Réunion</option>
<option data-code="RO" value="Romania">Romania</option>
<option data-code="RU" value="Russia">Russia</option>
<option data-code="RW" value="Rwanda">Rwanda</option>
<option data-code="WS" value="Samoa">Samoa</option>
<option data-code="SM" value="San Marino">San Marino</option>
<option data-code="ST" value="Sao Tome And Principe">São Tomé & Príncipe</option>
<option data-code="SA" value="Saudi Arabia">Saudi Arabia</option>
<option data-code="SN" value="Senegal">Senegal</option>
<option data-code="RS" value="Serbia">Serbia</option>
<option data-code="SC" value="Seychelles">Seychelles</option>
<option data-code="SL" value="Sierra Leone">Sierra Leone</option>
<option data-code="SG" value="Singapore">Singapore</option>
<option data-code="SX" value="Sint Maarten">Sint Maarten</option>
<option data-code="SK" value="Slovakia">Slovakia</option>
<option data-code="SI" value="Slovenia">Slovenia</option>
<option data-code="SB" value="Solomon Islands">Solomon Islands</option>
<option data-code="SO" value="Somalia">Somalia</option>
<option data-code="ZA" value="South Africa">South Africa</option>
<option data-code="GS" value="South Georgia And The South Sandwich Islands">South Georgia & South Sandwich Islands</option>
<option data-code="KR" value="South Korea">South Korea</option>
<option data-code="SS" value="South Sudan">South Sudan</option>
<option data-code="ES" value="Spain">Spain</option>
<option data-code="LK" value="Sri Lanka">Sri Lanka</option>
<option data-code="BL" value="Saint Barthélemy">St. Barthélemy</option>
<option data-code="SH" value="Saint Helena">St. Helena</option>
<option data-code="KN" value="Saint Kitts And Nevis">St. Kitts & Nevis</option>
<option data-code="LC" value="Saint Lucia">St. Lucia</option>
<option data-code="MF" value="Saint Martin">St. Martin</option>
<option data-code="PM" value="Saint Pierre And Miquelon">St. Pierre & Miquelon</option>
<option data-code="VC" value="St. Vincent">St. Vincent & Grenadines</option>
<option data-code="SD" value="Sudan">Sudan</option>
<option data-code="SR" value="Suriname">Suriname</option>
<option data-code="SJ" value="Svalbard And Jan Mayen">Svalbard & Jan Mayen</option>
<option data-code="SE" value="Sweden">Sweden</option>
<option data-code="CH" value="Switzerland">Switzerland</option>
<option data-code="TW" value="Taiwan">Taiwan</option>
<option data-code="TJ" value="Tajikistan">Tajikistan</option>
<option data-code="TZ" value="Tanzania, United Republic Of">Tanzania</option>
<option data-code="TH" value="Thailand">Thailand</option>
<option data-code="TL" value="Timor Leste">Timor-Leste</option>
<option data-code="TG" value="Togo">Togo</option>
<option data-code="TK" value="Tokelau">Tokelau</option>
<option data-code="TO" value="Tonga">Tonga</option>
<option data-code="TT" value="Trinidad and Tobago">Trinidad & Tobago</option>
<option data-code="TA" value="Tristan da Cunha">Tristan da Cunha</option>
<option data-code="TN" value="Tunisia">Tunisia</option>
<option data-code="TR" value="Turkey">Turkey</option>
<option data-code="TM" value="Turkmenistan">Turkmenistan</option>
<option data-code="TC" value="Turks and Caicos Islands">Turks & Caicos Islands</option>
<option data-code="TV" value="Tuvalu">Tuvalu</option>
<option data-code="UM" value="United States Minor Outlying Islands">U.S. Outlying Islands</option>
<option data-code="UG" value="Uganda">Uganda</option>
<option data-code="UA" value="Ukraine">Ukraine</option>
<option data-code="AE" value="United Arab Emirates">United Arab Emirates</option>
<option data-code="GB" value="United Kingdom">United Kingdom</option>
<option data-code="US" value="United States">United States</option>
<option data-code="UY" value="Uruguay">Uruguay</option>
<option data-code="UZ" value="Uzbekistan">Uzbekistan</option>
<option data-code="VU" value="Vanuatu">Vanuatu</option>
<option data-code="VA" value="Holy See (Vatican City State)">Vatican City</option>
<option data-code="VE" value="Venezuela">Venezuela</option>
<option data-code="VN" value="Vietnam">Vietnam</option>
<option data-code="WF" value="Wallis And Futuna">Wallis & Futuna</option>
<option data-code="EH" value="Western Sahara">Western Sahara</option>
<option data-code="YE" value="Yemen">Yemen</option>
<option data-code="ZM" value="Zambia">Zambia</option>
<option data-code="ZW" value="Zimbabwe">Zimbabwe</option></select>
<div class="field__caret">
<svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-10 field__caret-svg" role="presentation" aria-hidden="true" focusable="false"> <use xlink:href="#caret-down"></use> </svg>
</div>
</div>
<p class="field__message field__message--error" id="error-for-country">Select a country/region</p></div>
<div class="field field--required field--show-floating-label field--third" data-address-field="province" data-autocomplete-field-container="true">
<div class="field__input-wrapper field__input-wrapper--select"><label class="field__label field__label--visible" for="checkout_shipping_address_province">State</label>
<select placeholder="State" autocomplete="shipping address-level1" autocorrect="off" data-backup="province" class="field__input field__input--select" aria-required="true" name="checkout[shipping_address][province]" id="checkout_shipping_address_province"><option disabled="">State</option><option data-alternate-values="["Alabama"]" value="AL">Alabama</option><option data-alternate-values="["Alaska"]" value="AK">Alaska</option><option data-alternate-values="["American Samoa"]" value="AS">American Samoa</option><option data-alternate-values="["Arizona"]" value="AZ">Arizona</option><option data-alternate-values="["Arkansas"]" value="AR">Arkansas</option><option data-alternate-values="["California"]" value="CA">California</option><option data-alternate-values="["Colorado"]" value="CO">Colorado</option><option data-alternate-values="["Connecticut"]" value="CT">Connecticut</option><option data-alternate-values="["Delaware"]" value="DE">Delaware</option><option data-alternate-values="["Florida"]" value="FL">Florida</option><option data-alternate-values="["Georgia"]" value="GA">Georgia</option><option data-alternate-values="["Guam"]" value="GU">Guam</option><option data-alternate-values="["Hawaii"]" value="HI">Hawaii</option><option data-alternate-values="["Idaho"]" value="ID">Idaho</option><option data-alternate-values="["Illinois"]" value="IL">Illinois</option><option data-alternate-values="["Indiana"]" value="IN">Indiana</option><option data-alternate-values="["Iowa"]" value="IA">Iowa</option><option data-alternate-values="["Kansas"]" value="KS">Kansas</option><option data-alternate-values="["Kentucky"]" value="KY">Kentucky</option><option data-alternate-values="["Louisiana"]" value="LA">Louisiana</option><option data-alternate-values="["Maine"]" value="ME">Maine</option><option data-alternate-values="["Marshall Islands"]" value="MH">Marshall Islands</option><option data-alternate-values="["Maryland"]" value="MD">Maryland</option><option data-alternate-values="["Massachusetts"]" value="MA">Massachusetts</option><option data-alternate-values="["Michigan"]" value="MI">Michigan</option><option data-alternate-values="["Federated States of Micronesia"]" value="FM">Micronesia</option><option data-alternate-values="["Minnesota"]" value="MN">Minnesota</option><option data-alternate-values="["Mississippi"]" value="MS">Mississippi</option><option data-alternate-values="["Missouri"]" value="MO">Missouri</option><option data-alternate-values="["Montana"]" value="MT">Montana</option><option data-alternate-values="["Nebraska"]" value="NE">Nebraska</option><option data-alternate-values="["Nevada"]" value="NV">Nevada</option><option data-alternate-values="["New Hampshire"]" value="NH">New Hampshire</option><option data-alternate-values="["New Jersey"]" value="NJ">New Jersey</option><option data-alternate-values="["New Mexico"]" value="NM">New Mexico</option><option data-alternate-values="["New York"]" value="NY">New York</option><option data-alternate-values="["North Carolina"]" value="NC">North Carolina</option><option data-alternate-values="["North Dakota"]" value="ND">North Dakota</option><option data-alternate-values="["Northern Mariana Islands"]" value="MP">Northern Mariana Islands</option><option data-alternate-values="["Ohio"]" value="OH">Ohio</option><option data-alternate-values="["Oklahoma"]" value="OK">Oklahoma</option><option data-alternate-values="["Oregon"]" value="OR">Oregon</option><option data-alternate-values="["Palau"]" value="PW">Palau</option><option data-alternate-values="["Pennsylvania"]" value="PA">Pennsylvania</option><option data-alternate-values="["Puerto Rico"]" value="PR">Puerto Rico</option><option data-alternate-values="["Rhode Island"]" value="RI">Rhode Island</option><option data-alternate-values="["South Carolina"]" value="SC">South Carolina</option><option data-alternate-values="["South Dakota"]" value="SD">South Dakota</option><option data-alternate-values="["Tennessee"]" value="TN">Tennessee</option><option data-alternate-values="["Texas"]" value="TX">Texas</option><option data-alternate-values="["Virgin Islands"]" value="VI">U.S. Virgin Islands</option><option data-alternate-values="["Utah"]" value="UT">Utah</option><option data-alternate-values="["Vermont"]" value="VT">Vermont</option><option data-alternate-values="["Virginia"]" value="VA">Virginia</option><option data-alternate-values="["Washington"]" value="WA">Washington</option><option data-alternate-values="["District of Columbia"]" value="DC">Washington DC</option><option data-alternate-values="["West Virginia"]" value="WV">West Virginia</option><option data-alternate-values="["Wisconsin"]" value="WI">Wisconsin</option><option data-alternate-values="["Wyoming"]" value="WY">Wyoming</option><option data-alternate-values="["Armed Forces Americas"]" value="AA">Armed Forces Americas</option><option data-alternate-values="["Armed Forces Europe"]" value="AE">Armed Forces Europe</option><option data-alternate-values="["Armed Forces Pacific"]" value="AP">Armed Forces Pacific</option></select>
<div class="field__caret shown-if-js">
<svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-10 field__caret-svg" role="presentation" aria-hidden="true" focusable="false"> <use xlink:href="#caret-down"></use> </svg>
</div>
</div>
</div><div class="field field--required field--error field--third" data-address-field="zip" data-autocomplete-field-container="true">
<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_shipping_address_zip">ZIP code</label>
<input placeholder="ZIP code" autocomplete="shipping postal-code" autocorrect="off" data-backup="zip" data-autocomplete-trigger="true" data-autocomplete-title="Suggestions" data-autocomplete-single-item="1 item available" data-autocomplete-multi-item="{{number}} items available" data-autocomplete-item-selection="{{number}} of {{total}}" data-autocomplete-close="Close suggestions" class="field__input field__input--zip" aria-describedby="error-for-zip" aria-invalid="true" aria-required="true" size="30" type="text" name="checkout[shipping_address][zip]" id="checkout_shipping_address_zip">
</div>
<p class="field__message field__message--error" id="error-for-zip">Enter a ZIP / postal code</p></div><div data-address-field="phone" class="field field--optional">
<div class="field__input-wrapper field__input-wrapper--icon-right"><label class="field__label field__label--visible" for="checkout_shipping_address_phone">Phone (optional)</label>
<input placeholder="Phone (optional)" autocomplete="shipping tel" autocorrect="off" data-backup="phone" data-phone-formatter="true" data-phone-formatter-country-select="[name='checkout[shipping_address][country]']" class="field__input field__input--numeric" size="30" type="tel" value="" name="checkout[shipping_address][phone]" id="checkout_shipping_address_phone">
<div class="field__icon">
<div data-tooltip="true" id="phone_tooltip" class="tooltip-container"><button type="button" class="tooltip-control" data-tooltip-control="true" aria-label="More information" aria-describedby="tooltip-for-phone" aria-controls="tooltip-for-phone" aria-pressed="false" placeholder="Phone (optional)"><svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-16 icon-svg--block icon-svg--center" role="presentation" aria-hidden="true" focusable="false"> <use xlink:href="#question"></use> </svg></button><span class="tooltip" role="tooltip" id="tooltip-for-phone">In case we need to contact you about your order</span></div>
</div>
</div>
</div></div>
</div>
</div>
</div>
`;
//append Purchase Order html content
$(".section--billing-address:first").after(input);
//selectors
let sameAddressCheckbox = document.querySelector(".sameAddressCheckbox");
let billingAddress = document.querySelector("#checkout_billing_address_address1");
let billingAddress2 = document.querySelector("#checkout_billing_address_address2");
let billingCity = document.querySelector("#checkout_billing_address_city");
let billingState = document.querySelector("#checkout_billing_address_province");
let billingZip = document.querySelector("#checkout_billing_address_zip");
let shippingAddress = document.querySelector("#checkout_shipping_address_address1");
let shippingingAddress2 = document.querySelector("#checkout_shipping_address_address2");
let shippingCity = document.querySelector("#checkout_shipping_address_city");
let shippingState = document.querySelector("#checkout_shipping_address_province");
let shippingZip = document.querySelector("#checkout_shipping_address_zip");
sameAddressCheckbox.addEventListener("change",(e) =>{
if( sameAddressCheckbox.checked){
shippingAddress.value = billingAddress.value;
shippingingAddress2.value = billingAddress2.value;
shippingCity.value = billingCity.value;
shippingState.value = billingState.value;
shippingZip.value = billingZip.value;
shippingAddress.disabled = true;
shippingingAddress2.disabled = true;
shippingCity.disabled = true;
shippingState.disabled = true;
shippingZip.disabled = true;
} else {
shippingAddress.value = "";
shippingingAddress2.value = "";
shippingCity.value = "";
shippingState.value = "";
shippingZip.value = "";
shippingAddress.disabled = false;
shippingingAddress2.disabled = false;
shippingCity.disabled = false;
shippingState.disabled = false;
shippingZip.disabled = false;
}
})
}
}
);
Community Blog Articles
Holiday Cheers to Our Community | November '24
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping Viral Products to Sell in 2025
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Shining a spotlight on our top members of October 2024!
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024