如何通过脚本标签将我的 HTML 准确插入 Shopify 商店？

Question

我想在某个部分之后将我的 HTML 块插入 Shopify 商店，但问题是每个商店都可以使用数千种不同的主题之一，每个主题都有不同的 DOM 结构体。

我可以创建脚本标签，然后尝试插入我的 HTML，如下所示：

(function() {
  var child = document.createElement("div");
  var text  = document.createTextNode("This is a test message");
  child.appendChild(text);

  var parent = document.getElementByClassName("ProductSection");
  parent.appendChild(child);
})();

如果主题中有一个 class 名称为 ProductSection 的部分，这将起作用，但对于大多数没有的部分来说，这将不起作用。假设我有一个我想展示的图片库，但只在产品页面上和产品描述之后，什么是 select 产品描述 DOM 节点的最佳方式，以便我可以插入我的图片画廊之后呢？

我发现了几个有类似问题的线程：

https://community.shopify.com/c/Shopify-APIs-SDKs/Using-Script-tag-to-add-dynamic-content-to-product-template/m-p/457855 https://community.shopify.com/c/Shopify-APIs-SDKs/Need-to-add-a-button-to-the-Product-page-via-a-Script-Tag/m-p/413919

他们似乎得出了类似的结论，但 Shopify 应用市场上有一些应用正是这样做的，我想知道他们是怎么做到的？

Answer 1

正如您分享的链接中所建议的，不可能在所有情况下都正确识别 DOM 元素。但是，可以使用几种不同的方法。

1) 一种是要求商家在标记中添加一些特定元素，您以后可以使用这些元素通过 JavaScript 呈现您的内容。

2) 尝试通过一些特定的标签或 href 值猜测 DOM 元素，但允许商家通过一些 JavaScript 变量覆盖 DOM 元素选择器。

3) 结合使用方法 2 和预先确定的信息。看到 AfterPay 使用的这种方法。他们有一系列预定义的流行主题及其选择器。然后他们使用 主题名称 属性来自 Shopify.theme.name 并获取相关的选择器。此解决方案可能并非在所有情况下都有效，因此请允许商家通过某些 JavaScript 变量覆盖 DOM 选择器。

Afterpay.supportedThemes = {
    alchemy: {
        product: {
            "2017-12-14": {
                selector: ".quadd-wrapper"
            }
        }
    }
}

AfterPay JS Source Code

如果您知道任何其他插件，您可以检查 JavaScript 并查看它们如何识别选择器。

如何通过脚本标签将我的 HTML 准确插入 Shopify 商店？

How do I accurately insert my HTML into a Shopify shop via Script Tags?

html

javascript

script-tag

shopify