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 = `
##
shipping address
Enter a first name
Enter a last name
Add a house number if you have one
Enter an address
Enter a city
Select a country/region
Enter a ZIP / postal code
In case we need to contact you about your order
`;
//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;
}
})
}
}
);
