[英]How can I inject JS from my .NET application into Shopify's dynamic themes?
So I have a custom app that calculates monthly EMI for a all products on the catalogue of a store.所以我有一个自定义应用程序,可以计算商店目录中所有产品的每月 EMI。 So from what I know, I have two options:
所以据我所知,我有两个选择:
Both of them works, and I am able to display the EMI for all products and cart.它们都有效,我能够显示所有产品和购物车的 EMI。
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.为了让我注入我的 JS,我必须在 product-template.liquid 上确定一个 div,并在 append 上使用我自己的 div。 So I'm using product price class from Shopify's debut theme and appending my div:
所以我使用来自 Shopify 的首个主题的产品价格 class 并附加我的 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.对于 Shopify 的首个主题,我可以在上面注入我的 JS。 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.
因此,假设他们没有 product_price class,我没有任何可指点,因此无法插入我的脚本。
So my question is, what is that common element, across all themes than can be used for JS injection.所以我的问题是,在所有主题中,可用于 JS 注入的通用元素是什么。
For example: the "Submit" button on Checkout.liquid remains constant across all themes, and Shopify wouldn't let you alter.例如:Checkout.liquid 上的“提交”按钮在所有主题中保持不变,并且 Shopify 不会让您更改。 I need something similar for products.
我需要类似的产品。
Let me know if you have any other question or need more clarification.如果您有任何其他问题或需要更多说明,请告诉我。
For random things like your case, injecting some info into DOM, you are probably best off having your code work off a section.对于像您的情况这样的随机事情,将一些信息注入 DOM,您可能最好让您的代码在一个部分中工作。 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.
然后,您可以在您期望某些元素所在的部分触发您的 JS 支持代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.