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>