CODEWITHSUNDEEP
amp-htmlmustacheamp-bindamp-imgamp-mustache
Ada Diamonds
Ada Diamonds

Reputation: 11

Joining multiple AMP-State inputs into a filter for a dynamic AMP-Carousel?

I'm manually porting a jewelry eCommerce product page to AMP. I need to combine multiple independent AMP-States (gemstone shape, carat weight, precious metal) and then use the result as the input for an array.filter() to filter my JSON for a dynamic AMP-Carousel.

Desired UX: if the user clicks on the 'yellow gold' button and then the '2 carats' button I want to filter the images (in a JSON array below) to just the objects that pass the filter of object.metal == '_y' && object.ctw == '_2-0'

Easy to do with simple onClick Javascript, but I'm not sure how to do this multi-step logic with tap:AMP.setState. Thus, I'm seeking help to combine multiple variables into an AND statement that I then use in an array.filter() to refresh an AMP-Carousel to match the user's selection.

I have the AMP-Carousel properly refreshing/updating with one variable as follows:

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

How can I extend my setState into two discrete objectives?

  1. generate an updated 'myFilter' depending on which options the user has selected
  2. set 'filteredProducts' to values.filter(a => myFilter)

Here's my AMP-Carousel, as well as my JSON (hopefully this helps out others unrelated to the above issue!)

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

Note - I know this JSON is a bit funky, but this is the only way I found to get an AMP-Carousel working in AMP-Mustache.

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

Upvotes: 1

Views: 655

Answers (1)

Ada Diamonds
Ada Diamonds

Reputation: 11

I figured out a solution. It's not particularly elegant, but it works.

Because there's not the ability to chain setStates, I have to set a variable and hard code the filter statement in one setState. I use an if/else statement to generate a 1 or 2 variable filter of my array in 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>

Upvotes: 0

Related Questions