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

juniorarora
New Member
1 0 0
 

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.

0 Likes
mr-easy
Shopify Partner
4 0 1

Just taking a guess here, but i do see the <main> tag on every page of every theme that i've worked with so I guess you can try to work with that? 

If you can looking for a low-level element specific to each product or something, i am not sure there is a solution for that.

0 Likes