amp-htmlaccelerated-mobile-page

amp-list within amp-consent element not always working


Generally I wanted to implement an amp-consent following this tutorial:

basic user consent

But for some reason the elements which should be loaded via amp-list do not always appear within the amp-consent element.

As long the amp-list block is placed outside the amp-list its contents is visible immidiatelly.

Why is this so and how to display the amp-list contents along with the prompt-ui?


Solution

  • Apparently AMP has some build-in restriction on generating results with amp-list without specifying any particular action, but you may solve this just by triggering one. Admitted it is not the best solution but it works.

    Just add another div-Element inside your amp-consent component and place for example an button (which displays another div container) within the source div container.

    on="tap:targetContainer.show,sourceContainer.hide" 
    

    Depending on Service which you have applyed and the result volume, the list generated by the call to your end-point should be visible right now.

    <div id="targetContainer" hidden class="message">    
        <amp-list width="auto" height="132" layout="fixed-height" src="yourEndPoint" class="m1">
          <template type="amp-mustache">
               <button class="button_select" on="{{onAction}}">{{label}}</button>
          </template>
        </amp-list>