How to when a product variant is selected and add metadata for order fulfillment?

Question

I am using BookThatApp's date picker and several dropdowns as product variant options for renting sports equipment. Typically, once an order is complete, I have to do a manual calculation based on the product variant options and use that to select appropriate sporting equipment for the customer. I could easily write this calculation in javascript. My goal is to add this calculation to the order so that it is visible to staff once the rental has been purchased. This could be a tag, metafield, or even another product option.

My understanding is that theme.liquid code is executed on initial page render and wouldn't be able to detect when a dropdown is selected and run the calculation - is that correct? If so, are there other options to accomplish this functionality or is digging for a third party app the only way?

So far, this was unsuccessful in my theme.liquid:

{%- if product.metafields.bookthatapp.json_config -%}
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
    crossorigin="anonymous">
  </script>
  
  <script>
    jQuery('#bta-widget-container').on('theme:variants:changed', function(evt, variantObj){
       console.log('theme event detected');
       console.log(variantObj);
    }); 
  </script>
{%- endif -%}

{% render 'bookthatapp-widgets' %}

I also looked at the BTA docs which mention that a variantChange event is emitted. Although this fired on page load, it did not log anything when variants were modified:

{%- if product.metafields.bookthatapp.json_config -%}
  <script>
    Bta = {
      callbacks: {
        variantChanged: function(variant) {
          console.log(variant);
          console.log("DEBUG: Variant Modified!");
        }
      }
    }
  </script>
{%- endif -%}

{% render 'bookthatapp-widgets' %}

Finally, the original theme documentation says that a variant:change event is fired whenever a user has changed the variant in a product selector. However, this did not product any output whatsoever.

{%- if product.metafields.bookthatapp.json_config -%}
  <script>
    document.addEventListener('variant:change', function(event) {
      let variant = event.detail.variant; // Gives you access to the whole variant details
      let previousVariant = event.detail.previousVariant; // Gives you access to the details of the previously selected variant
      let product = event.detail.product; // Gives you access to the whole product that the variant belongs to
      let form = event.target; // The form that triggers the change
      console.log("DEBUG: Variant Modified!");
    });
  </script>
{%- endif -%}

{% render 'bookthatapp-widgets' %}

References:
Shopify trigger function on variant selection but don't override existing functionality https://support.maestrooo.com/article/304-technical-javascript-events-exposed-by-the-theme
BTA Developer Guide > Widgets

Answer 1

you can 100% do calculations in JS. Once your page renders, when a variant is selected, you run code. You have access to everything you'd want to know since you can render all internal metafield data to JS. So if a customer chooses between variants 1, 2, or 22, you know. Do your calculation. Save the result as a Line Item Property in an HTML input element in your form. Now, in your order, that line item is decorated with whatever the result was of your calculation. Bingo. You're good to go.