Script Tag

注意

如果你正在创建与主题集成的新应用程序时,你需要使用主题应用扩展

如果你的应用程序添加了对主题应用扩展的支持,但是需要兼容 Online Store 1.0 主题,则可以采用 Script Tag REST Admin API 作为替代的接入方式来实现主题应用扩展的功能。

Script Tag 代表一些 JavaScript 代码在远程服务器运行的代码片段。你可以使用 Script Tag 加载来自远程服务器的 JavaScript 代码片段到主题页面视图中,并将其视作一个应用块的功能。Script Tag 是与创建它们应用程序相关的唯一标识符,当应用程序从商店中删除时,所有与该应用程序创建的 Script Tag 也会被移除。Script Tag 不会对商家的主题造成私有化。

你需要基于一个应用来创建一个 Script Tag,在店铺中通过安装这个应用来使用 Script Tag 功能,通过这种方式并不会让店铺主题私有化。下面是通过 Script Tag API 创建了一个 Script Tag,店铺通过安装这个应用就能在店铺页面查看到这个脚本。

curl -L -X POST 'https://{handle}.myshopline.com/admin/openapi/v20240601/store/script_tags.json' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
--data-raw '{
"script_tag": {
"display_scope": "all",
"event": "onload",
"src": "https://djavaskripped.org/fancy.js"
}
}'

在店铺页面就能查看到这个脚本已经被植入到页面了。

<script>
(function() {
function asyncLoad() {
var tagList = [{"src":"https://djavaskripped.org/fancy.js","appKey":"SL201"}];
for (var i = 0; i < tagList.length; i++) {
var tag = tagList[i];
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = tag.src;
s.setAttribute("org", "ST_"+tag.appKey);
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
};
if(window.attachEvent) {
window.attachEvent('onload', asyncLoad);
} else {
window.addEventListener('load', asyncLoad, false);
}
})();
</script>

你可以使用 Script Tag 进行以下操作:

  • 在商店页面添加功能,而无需手动编辑主题模板。
  • 商家卸载应用程序后,主题模板会恢复到安装应用程序前的状态。
这篇文章对你有帮助吗?