Use this code snippet to add a checkbox for a user to check before they can complete a 2-Step-Order form. You can also add a link to your terms and conditions.
Code Snippet - Order Confirmation Checkbox
https://docs.google.com/document/d/1-nRsE5yCUpgtWMfsmMpALDCgdIcNYm-n6QKgfcwMPR0/edit?usp=sharing
<script>
(function () {
//****
// If you want to update TOS with the content please add your correct location id
// And create a blank form and get id then pass that form id on the formId varible
//****
const checkBoxLabelText = "By checking this box, you agree to our ";
const termsURL = "https://google.com";
const termsText = "terms and conditions";
const location_id = "4f6En2kmrDyqEdKKD68i"; // Enter your valid location Id
const formId = "ehVnSNE8GHO71wLkmt6r"; // Enter a vaild form id
const customFieldName = "accept_terms_and_conditions"; // Enter your custom field key
class GOHLTECH_POST_FORM_DATA {
constructor() {
this.headers = {
"Content-Type": "application/json",
};
this.baseURL = "https://msgsndr.com/";
}
async postFormData(formId, locationId, data, path) {
const postBody = {
...data,
formId: formId,
location_id: locationId,
};
const requestOptions = {
method: "POST",
headers: this.headers,
body: JSON.stringify(postBody),
redirect: "follow",
};
try {
const request = await fetch(this.baseURL + path, requestOptions);
const response = await request.json();
return response;
} catch (err) {
return err;
}
}
}
const store = {
[customFieldName]: "",
};
const privacyStyles = `
.custom_accept_container {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 15px;
margin-bottom: 10px;
}
.custom_accept_container label {
display: inline-flex;
margin-left: 5px;
}
`;
function appendStyle(stylesheet) {
const style = document.createElement("style");
style.innerHTML = stylesheet;
const head = document.querySelector("head");
head.append(style);
}
appendStyle(privacyStyles);
const postForm = new GOHLTECH_POST_FORM_DATA();
const checkBoxContainer = document.createElement("div");
checkBoxContainer.classList = "custom_accept_container";
const chekboxLabel = document.createElement("label");
chekboxLabel.htmlFor = "accept_terms";
chekboxLabel.classList = "custom_accept";
chekboxLabel.innerHTML = `${checkBoxLabelText} <a style="margin-left: 10px;" href=${termsURL} target="_blank">${termsText}</a>`;
const acceptCheck = document.createElement("input");
acceptCheck.type = "checkbox";
acceptCheck.id = "accept_terms";
checkBoxContainer.append(acceptCheck);
checkBoxContainer.append(chekboxLabel);
function getElementByFn(selector) {
let elements = [];
let intervalId;
return new Promise((res, rej) => {
intervalId = setInterval(() => {
elements = document.querySelectorAll(selector);
if (!elements.length) return;
clearInterval(intervalId);
if (elements.length === 1) return res(elements[0]);
if (elements.length > 1) return res([...elements]);
}, 300);
setTimeout(() => {
if (!elements.length) {
clearInterval(intervalId);
res(false);
console.log(`${selector} elements not found`);
}
}, 20000);
});
}
function enableSubmitButton(checkbox, button) {
if (!button) return console.log("Please provide a button");
if (!checkbox.checked) {
button.style.pointerEvents = "none";
button.style.opacity = 0.5;
store.accept_terms_and_conditions = "";
} else {
button.style.pointerEvents = "auto";
button.style.opacity = 1;
store.accept_terms_and_conditions = "Yes";
}
}
async function getStepButton(type) {
const stepButton = await getElementByFn(
".c-order section.info ~ section button.form-btn",
);
if (!stepButton) return console.error("Form Button Not Found");
stepButton.addEventListener("click", (e) => {
appendTermsCheckBox(type);
});
}
async function appendTermsCheckBox(type = "") {
let formButton;
if (type == "one-step")
formButton = await getElementByFn(".c-order button.form-btn");
if (type === "two-step")
formButton = await getElementByFn(
".c-order .payment-content button.form-btn",
);
if (!formButton) return console.log("No Checkout button found!!!");
formButton.parentElement?.insertBefore(checkBoxContainer, formButton);
if (checkBoxContainer.isConnected) {
formButton.style.pointerEvents = "none";
formButton.style.opacity = 0.5;
}
formButton.addEventListener("click", async (e) => {
if (!formId || !location_id)
return console.log("Location id and form id is required");
if (!store.email) return console.log("No Data Found!!");
const posted = await postForm.postFormData(
formId,
location_id,
store,
"form",
);
console.log(posted);
});
acceptCheck.addEventListener("change", () => {
enableSubmitButton(acceptCheck, formButton);
});
const stepBackButton = await getElementByFn(
".c-order .forward-shopping-details",
);
if (stepBackButton) {
stepBackButton.addEventListener("click", getCheckoutType);
stepBackButton.addEventListener("click", updateStore);
}
}
async function getCheckoutType() {
const orderForm = await getElementByFn(".c-order");
if (!orderForm) return console.error("No order form found!");
let isOneStepForm = orderForm.id.trim().includes("one-step-order");
await updateStore();
if (isOneStepForm) {
appendTermsCheckBox("one-step");
} else {
getStepButton("two-step");
}
}
async function updateStore() {
const inputs = await getElementByFn(
".c-order section.info input:not(input[type='checkbox'],input[type='radio'])",
);
console.log(inputs);
if (!inputs.length) return console.log("No inputs found!");
inputs.forEach((input) => {
input.addEventListener("input", () => {
store[input.name.trim()] = input.value;
});
});
}
getCheckoutType();
})();
</script>
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article