AMP for Email：amp-list状态设置与表单提交技术求助

核心问题 #

你的代码中AMP.setState的语法存在错误：Mustache模板变量（{{src}}、{{title}}、{{price}}）作为字符串值传入时未包裹引号，导致AMP无法正确解析这些字符串，最终状态更新失败。

修复步骤 #

1. 修正AMP.setState的变量包裹：在状态更新的对象中，给所有字符串类型的Mustache变量添加双引号，确保JS能正确识别为字符串值。
2. 可选优化交互逻辑：将状态更新事件从产品容器移到提交按钮上，避免点击产品任意区域都触发状态变更（根据实际需求选择）。

修正后的完整代码 #

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp4email-boilerplate>body {visibility: hidden}</style>
</head>
<body>
  <amp-state id="selectedProduct">
    <script type="application/json">
      {"src": "imageSrc","title": "ProductName","price": "400"}
    </script>
  </amp-state>

  <div class="container">
    <amp-list width="500" height="500" layout="responsive" src="https://bounce.mailamp.in/similar-products" items="products">
      <template type="amp-mustache">
        <div class="product-item">
          <amp-img class="product-image" width="100" height="100" src="{{src}}" alt="Product Image"></amp-img>
          <p>{{title}}</p>
          <p>Price: ₹{{price}}</p>
          <form method="post" action-xhr="https://bounce.mailamp.in/add-to-cart">
            <input type="hidden" name="src" [value]="selectedProduct.src">
            <input type="hidden" name="title" [value]="selectedProduct.title">
            <input type="hidden" name="price" [value]="selectedProduct.price">
            <!-- 将状态更新绑定到按钮点击事件 -->
            <button type="submit" class="add-to-cart-button" on="tap:AMP.setState({selectedProduct: {src: '{{src}}', title: '{{title}}', price: '{{price}}'}})">Add to Cart</button>
          </form>
        </div>
      </template>
    </amp-list>
  </div>
</body>
</html>

关键修改说明 #

• 把AMP.setState中的src: {{src}}改为src: '{{src}}'，对所有字符串类型的字段做同样处理，确保模板渲染后生成合法的JS对象。
• 将状态更新事件从产品容器移到提交按钮，这样只有点击"Add to Cart"时才会更新选中状态并提交表单，更符合用户交互逻辑。

验证方法 #

1. 使用AMP官方验证工具检查代码是否符合AMP规范。
2. 在支持AMP for Email的客户端中测试：点击产品的"Add to Cart"按钮，查看网络请求是否携带了正确的产品参数。

内容的提问来源于stack exchange，提问作者Adarsh Raut