Javascript 如何通过脚本标记将HTML准确插入Shopify商店？

我想在某个部分之后将我的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);
})();

如果主题有一个类名为ProductSection的节，这将起作用，但对于大多数没有类名的节，这将不起作用。假设我有一个图像库，我想显示，但只在产品页面和产品描述之后显示，选择产品描述DOM节点以便在其之后插入图像库的最佳方式是什么

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

---

他们似乎得出了类似的结论，但Shopify应用程序市场上有一些应用程序确实做到了这一点，我想知道它们是如何做到的？

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

1一种方法是要求merchant向标记中添加一些特定元素，您可以稍后使用这些元素通过JavaScript呈现内容

2尝试通过某个特定的标记或href值猜测DOM元素，但允许商家通过某个JavaScript变量覆盖DOM元素选择器

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

3结合预先确定的信息使用方法2。我们看到了AfterPay使用的这种方法。他们有一个预定义的流行主题数组及其选择器。然后他们使用Shopify.theme.name中的theme name属性 并获取相关的选择器。此解决方案可能不会在所有情况下都有效，因此请允许商家通过一些JavaScript变量重写DOM选择器

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

---

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

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

1一种方法是要求merchant向标记中添加一些特定元素，您可以稍后使用这些元素通过JavaScript呈现内容

2尝试通过某个特定的标记或href值猜测DOM元素，但允许商家通过某个JavaScript变量覆盖DOM元素选择器

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

3结合预先确定的信息使用方法2。我们看到了AfterPay使用的这种方法。他们有一个预定义的流行主题数组及其选择器。然后他们使用Shopify.theme.name中的theme name属性 并获取相关的选择器。此解决方案可能不会在所有情况下都有效，因此请允许商家通过一些JavaScript变量重写DOM选择器

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

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