BigCommerce checkout tweak to accommodate purchase orders

bigcommerce-purchase-orders.html

<script>
// this code tweaks BigCommerce's checkout page a little bit to make up for their ridiculous shortcomings

document.addEventListener('DOMContentLoaded', function(event) {

  // add note about purchase order numbers to the checkout form
  var checkoutAppDiv = document.getElementById('checkout-app');
  var checkoutObserver = new MutationObserver(function(mutationsList, observer) {
    var orderCommentsField = document.querySelector('.form-input[name="orderComment"]');
    if(orderCommentsField !== null) {
      var purchaseOrderNumberHelpText = document.createElement('p');
      purchaseOrderNumberHelpText.setAttribute('class', 'purchase-order-help-text');
      purchaseOrderNumberHelpText.innerHTML = '<strong>If you have a purchase order #</strong>, please enter it here.';
      orderCommentsField.before(purchaseOrderNumberHelpText);
      checkoutObserver.disconnect();
    }
  });
  checkoutObserver.observe(checkoutAppDiv, {childList: true, subtree: true});

});
</script>

1. Add the offline payment method called Check and then change the payment method label from Check to Invoice Me. It will still be called "Check" in the admin interface, but "Invoice Me" will appear for the customer in the checkout.
2. Use the JavaScript code above to inject a message onto the page just above the Order Comments field telling customers to enter a purchase order # into that field, if they have one.

There are two downsides to this workaround. First, this field is part of the Shipping step, not the Billing step, which means the message and Order Comments field are in a weird place. Second and more importantly subsequent checkouts from the same customer account might not display the Order Comments field because the checkout system usually skips past the Shipping and Billing parts of the checkout when the customer already has this information saved in their account. The code I wrote doesn't move the entire field to a later step because I was playing it safe, and moving fields to different steps might break something in BigCommerce's checkout processing code.

To add the script, go to Storefront->Script Manager and create a script with these values:

• Name of script: checkout tweaks (or whatever you want to call it)
• Description: making up for BigCommerce's ridiculous shortcomings
• Location on page: select Footer
• Select pages where script will be added: select Checkout
• Script category: select Essential
• Script type: select Script
• Script contents: paste the code from above