Я вручную портирую страницу продукта eCommerce для AMP. Мне нужно объединить несколько независимых AMP-состояний (форма драгоценного камня, вес в каратах, драгоценный металл), а затем использовать результат в качестве входных данных для array.filter (), чтобы отфильтровать мой JSON для динамической c AMP-карусели.
Желаемый UX: если пользователь нажимает кнопку «желтое золото», а затем кнопку «2 карата», я хочу отфильтровать изображения (в массиве JSON ниже) только для объектов, которые проходят фильтр object.metal == '_y' && object.ctw == '_2-0'
Легко сделать с помощью простого onClick Javascript, но я не уверен, как это сделать в несколько шагов logi c с нажатием: AMP.setState. Таким образом, мне нужна помощь для объединения нескольких переменных в оператор AND, который я затем использую в array.filter (), чтобы обновить sh AMP-карусель для соответствия выбору пользователя.
У меня AMP-Карусель правильно обновляется / обновляется с помощью одной переменной следующим образом:
<button on="tap:AMP.setState({ filteredProducts: { values : galleryItems.items[0].values.filter(a => a.metal == '_r')}})">Rose Gold</button>
Как я могу расширить свой setState на две отдельные цели?
- сгенерировать обновленный «myFilter» в зависимости от того, какие опции выбрал пользователь
- установить для «FilterProducts» значения values.filter (a => myFilter)
Вот моя AMP-карусель, а также мой 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-Карусель работать в 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>