How can I inject JS from my .NET application into Shopify's dynamic themes?

Question

So I have a custom app that calculates monthly EMI for a all products on the catalogue of a store. So from what I know, I have two options:

1. Either I calculate EMI on the fly, so whenever a customer would open that specific product, I can use Shopify's product.js, and get the variant id, and the price and display monthly payments in the div. By using /products/{product-handle}.js
2. Or, I can store the EMI for each products, right on the installation, and store for each product a metafield. I know I've to listen to webhooks on product change as well, so don't worry about that.

Both of them works, and I am able to display the EMI for all products and cart.

In order for me to inject my JS, I have to pinpoint a div on product-template.liquid, and append my own div to that using. So I'm using product price class from Shopify's debut theme and appending my div:

         <div class="product__price">
            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
          </div>
 <div id="monthly-price" data-price="{{price| divided_by: 100.00 | json}}">
          {{product.metafields.products.monthly-price}}
        </div>

For Shopify's debut theme, I was able to inject my JS above. But the challenge comes, when the merchant has a different theme. So let's say they do not have product_price class, I do not have anything to point to, thereby cannot insert my script.

So my question is, what is that common element, across all themes than can be used for JS injection.

For example: the "Submit" button on Checkout.liquid remains constant across all themes, and Shopify wouldn't let you alter. I need something similar for products.

Let me know if you have any other question or need more clarification.

Answer 1

For random things like your case, injecting some info into DOM, you are probably best off having your code work off a section. That way, the merchant sees your section in their Theme customization, and they can drag it where they want it to be rendered. You can then trigger your JS support code off your section, where you expect certain elements to be.