Объединение нескольких входов AMP-состояния в фильтр для динамической c AMP-карусели? - PullRequest
1 голос
/ 21 января 2020

Я вручную портирую страницу продукта 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 на две отдельные цели?

  1. сгенерировать обновленный «myFilter» в зависимости от того, какие опции выбрал пользователь
  2. установить для «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>

1 Ответ

0 голосов
/ 25 января 2020

Я нашел решение. Это не особенно элегантно, но работает.

Поскольку нет возможности связывать setStates, я должен установить переменную и жестко закодировать оператор фильтра в одном setState. Я использую оператор if / else для генерации фильтра переменных 1 или 2 из моего массива в JSON.

<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>
...