如何將 .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 支持代碼。