Clickable product rows in GHL order forms
This script enhances the user experience for GHL order forms with multiple product or price options.
By default, High Level one-step and two-step order forms only support clicking on the radio button to change the selected product.
This script makes the entire row clickable.
Copy this code into a Code element on the High Level page that has an order form.
Set background-color
to a color of your choice. This changes the highlight color when the user hovers over a product detail row.
<style>
.product-detail .product-description:hover {
/* SET THE HOVER BACKGROUND COLOR FOR THE PRODUCT DESCRIPTION ROW */
background-color: yellow;
cursor: pointer;
}
</style>
<script>
// @from https://guides.levelupghl.com
// Make product rows in order forms clickable
(function (document) {
function waitForElem(selector) {
return new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector))
}
const observer = new MutationObserver((mutations) => {
if (document.querySelector(selector)) {
observer.disconnect()
resolve(document.querySelector(selector))
}
})
observer.observe(document.body, {
childList: true,
subtree: true,
})
})
}
function selectPrice(row, event) {
if (event.target?.nodeName !== "INPUT") {
row.querySelector("input").click()
}
}
waitForElem(".order-form .product-detail .product-description").then(
(elm) => {
const productRows = document.querySelectorAll(
".order-form .product-detail .product-description"
)
productRows.forEach((row) => {
row.addEventListener("click", (event) => selectPrice(row, event))
})
}
)
})(document);
</script>