如何将 .NET 应用程序中的 JS 注入 Shopify 的动态主题？

Question

所以我有一个自定义应用程序，可以计算商店目录中所有产品的每月 EMI。 所以据我所知，我有两个选择：

1. 要么我即时计算 EMI，因此每当客户打开该特定产品时，我都可以使用 Shopify 的 product.js，并获取变体 ID、价格并在 div 中显示每月付款。 通过使用 /products/{product-handle}.js
2. 或者，我可以在安装时存储每个产品的 EMI，并为每个产品存储一个元字段。 我知道我也必须听取有关产品更改的 webhook，所以不用担心。

它们都有效，我能够显示所有产品和购物车的 EMI。

为了让我注入我的 JS，我必须在 product-template.liquid 上确定一个 div，并在 append 上使用我自己的 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>

对于 Shopify 的首个主题，我可以在上面注入我的 JS。 但是当商人有不同的主题时，挑战就来了。 因此，假设他们没有 product_price class，我没有任何可指点，因此无法插入我的脚本。

所以我的问题是，在所有主题中，可用于 JS 注入的通用元素是什么。

例如：Checkout.liquid 上的“提交”按钮在所有主题中保持不变，并且 Shopify 不会让您更改。 我需要类似的产品。

如果您有任何其他问题或需要更多说明，请告诉我。

Answer 1

对于像您的情况这样的随机事情，将一些信息注入 DOM，您可能最好让您的代码在一个部分中工作。 这样，商家会在他们的主题自定义中看到您的部分，并且可以将其拖动到他们想要呈现的位置。 然后，您可以在您期望某些元素所在的部分触发您的 JS 支持代码。