将多个AMP-状态输入加入到动态AMP-旋转木马的滤波器中？

Question

我正在手动移植一个珠宝eCommerce产品页面到AMP。我需要组合多个独立的AMP-状态(宝石形状，克拉重量，贵金属)，然后使用结果作为一个array.filter()的输入，以过滤我的JSON一个动态的AMP-旋转木马。

所需的UX:如果用户单击“黄色黄金”按钮，然后单击“2克拉”按钮，我希望将图像(在下面的JSON数组中)过滤为传递object.metal == '_y‘& object.ctw == '_2-0’过滤器的对象。

简单的onClick Javascript很容易实现，但我不知道如何用tap:AMP.setState实现这个多步骤逻辑。因此，我正在寻求帮助，将多个变量组合到一个AND语句中，然后在array.filter()中使用该语句刷新一个AMP-Carousel，以匹配用户的选择。

我用一个变量正确地刷新/更新了AMP-Carousel，如下所示：

<button on="tap:AMP.setState({ filteredProducts: { values : galleryItems.items[0].values.filter(a => a.metal == '_r')}})">Rose Gold</button>

如何将我的setState扩展为两个离散的目标？

1. 根据用户选择了
2. set 'filteredProducts‘to values.filter(a => myFilter)

生成一个更新的'myFilter’。

这是我的AMP-Carousel，以及我的JSON (希望这能帮助其他与上述问题无关的人！)

<amp-list id="galleryList" width="1000" height="1000" layout="responsive" src="/path/to/my/initial/json"[src]="filteredProducts"  binding="no">
<template type="amp-mustache">
 <amp-carousel class="pdp-gallery-carousel" layout="responsive" width="1000" height="1000" type="slides" controls="" loop="">
  {{#values}} 
   <div class="pdp-gallery-inner">
    {{^isVideo}}
      <amp-img class="pdp-gallery-image" src="{{src}}" layout="intrinsic" width="{{width}}" height="{{height}}" srcset="{{srcset}}"></amp-img>
    {{/isVideo}}
    {{#isVideo}}
      <amp-youtube data-videoid="{{ytID}}" layout="responsive" width="480" height="270" autoplay="" loop=""></amp-youtube>
    {{/isVideo}}
   </div>
  {{/values}}
 </amp-carousel>
</template>
<amp-list>

注意-我知道这个JSON有点古怪，但这是我找到的唯一能让AMP-Carousel在AMP-胡子中工作的方法。

<amp-state id="galleryItems">
 <script type="application/json">
{ 
  "items":[ 
    { 
      "values":[ 
        { 
          "id":0,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":true,
          "metal":"_wgp",
          "ctw":"_0-70",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":1,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":true,
          "metal":"_y",
          "ctw":"_0-70",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":2,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_r",
          "ctw":"_0-70",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":3,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":true,
          "metal":"_wgp",
          "ctw":"_0-70",
          "width":"2500",
          "height":"2500"
        },
        { 
          "id":4,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":true,
          "metal":"_wgp",
          "ctw":"_0-70",
          "width":"2500",
          "height":"2500"
        },
        { 
          "id":5,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_wgp",
          "ctw":"_1-0",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":6,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_y",
          "ctw":"_1-0",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":7,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_r",
          "ctw":"_1-0",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":8,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_wgp",
          "ctw":"_2-0",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":9,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_y",
          "ctw":"_2-0",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":10,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_r",
          "ctw":"_2-0",
          "width":"1200",
          "height":"1200"
        },
        { 
          "id":11,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":true,
          "metal":"_wgp",
          "ctw":"_0-70",
          "width":"813",
          "height":"813"
        },
        { 
          "id":12,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_y",
          "ctw":"_0-70",
          "width":"813",
          "height":"813"
        },
        { 
          "id":13,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_r",
          "ctw":"_0-70",
          "width":"813",
          "height":"813"
        },
        { 
          "id":14,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":true,
          "metal":"_wgp",
          "ctw":"_1-0",
          "width":"813",
          "height":"813"
        },
        { 
          "id":15,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_r",
          "ctw":"_1-0",
          "width":"813",
          "height":"813"
        },
        { 
          "id":16,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_y",
          "ctw":"_1-0",
          "width":"813",
          "height":"813"
        },
        { 
          "id":17,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":true,
          "metal":"_wgp",
          "ctw":"_2-0",
          "width":"813",
          "height":"813"
        },
        { 
          "id":18,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_y",
          "ctw":"_2-0",
          "width":"813",
          "height":"813"
        },
        { 
          "id":19,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "isVideo":false,
          "isDefault":false,
          "metal":"_r",
          "ctw":"_2-0",
          "width":"813",
          "height":"813"
        },
        { 
          "id":20,
          "alt":"image-alt",
          "src":"foobar.jpg",
          "ytID":"RLBY06fVA2U",
          "isVideo":true,
          "isDefault":true,
          "metal":"_wgp",
          "ctw":"_0-70",
          "width":"804",
          "height":"804"
        }
      ]
    }
  ]
}
</script>
</amp-state>

Answer 1

我想出了解决办法。它并不特别优雅，但很实用。

因为没有链接setStates的能力，所以我必须在一个setState中设置一个变量并硬编码过滤器语句。我使用if/ use语句在JSON中为数组生成一个1或2个变量过滤器。

<button on="tap:AMP.setState({ metal : '_y',  filteredProducts: { values : ctw == null ? galleryItems.items[0].values.filter(a => a.metal == '_y') : galleryItems.items[0].values.filter(a => a.metal == '_y' && a.ctw == ctw)}})">Yellow Gold</button>
<button on="tap:AMP.setState({ ctw : '_2-0',  filteredProducts: { values : metal == null ? galleryItems.items[0].values.filter(a => a.ctw == '_2-0') : galleryItems.items[0].values.filter(a => a.metal == metal && a.ctw == '_2-0')}})">2.0 carats</button>