Shopify Newsletter订阅JS转AMP HTML 转换工具及实现方案咨询

核心说明 #

你当前使用的订阅功能代码依赖动态加载jQuery、自定义DOM操作、异步请求逻辑，这类非官方自定义JavaScript完全不符合AMP规范，不存在可以直接转换这类代码为AMP兼容格式的工具，你可以通过以下两种低代码方案实现需求，完全不需要编码经验：

方案1：后台直接开启适配（零代码，优先选择） #

你使用的Shopsheriff插件本身已内置AMP兼容的订阅组件，直接进入插件后台的「功能设置」页面，找到「AMP适配」开关打开，保存后插件会自动在AMP页面输出符合规范的订阅代码，无需手动修改任何内容。

方案2：手动用AMP原生组件实现 #

如果需要自定义配置，直接替换原有代码为以下内容即可：

第一步：引入AMP官方组件脚本 #

在AMP页面的<head>标签中添加以下两段代码：

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

第二步：添加订阅功能容器代码 #

在页面<body>标签中任意位置添加以下代码，将其中的你的店铺ID替换为你自己的Shopsheriff店铺ID即可：

<!-- 桌面端订阅弹窗 -->
<amp-iframe
  width="450"
  height="600"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-forms"
  src="https://onetapsignup.com/otg/otg.php?mob=2&store_id=你的店铺ID"
  media="(min-width: 600px)"
  style="position:fixed;top:0;right:0;z-index:2147483647;border:none;background:transparent;"
  [hidden]="hideOtgIframe"
>
  <amp-img placeholder layout="fill" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></amp-img>
</amp-iframe>

<!-- 移动端订阅弹窗 -->
<amp-iframe
  width="100vw"
  height="380"
  layout="fixed"
  sandbox="allow-scripts allow-same-origin allow-forms"
  src="https://onetapsignup.com/otg/otg.php?mob=1&store_id=你的店铺ID"
  media="(max-width: 599px)"
  style="position:fixed;bottom:0;left:0;z-index:2147483647;border:none;background:transparent;"
  [hidden]="hideOtgIframe"
>
  <amp-img placeholder layout="fill" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></amp-img>
</amp-iframe>

<!-- 自动关闭弹窗逻辑 -->
<script type="application/json" id="otg-close-listener">
{
  "on": "message",
  "action": "AMP.setState({ hideOtgIframe: true })",
  "if": "event.data.startsWith('onetap_')"
}
</script>

验证方法 #

修改完成后用AMP官方验证工具检测页面，确认无报错即可上线。

内容的提问来源于stack exchange，提问作者Eric Parker