1

We want to insert some conditional dynamic content on our AMP pages. We are using mustache to add the dynamic content.

Mustache is logic less (with support for basic if else) i.e. mentioned here. They have also suggested to use Handlebar JS for such complex conditional logic but looks like we don't have any AMP alternative here.

One way to solve is - send simple boolean from server to avoid all AND/OR conditions on the client side but we will have to send too many such variables if we go by this approach. How should we handle such complex conditions in AMP?

Sahil Sharma
  • 3,027
  • 3
  • 29
  • 71
  • Can you please give an example for what you want to accomplish? – Sebastian Benz Aug 27 '18 at 11:24
  • We have web page that display automobile prices, offers etc. based on user's selected city. Now if we have user's cookies and user re-enters website through AMP, we want to show prices, offers based on user's cookies. The problem is that logic to show price, offers has multiple if, else if (along with OR, AND) on the UI side. If we have condition like (A && B) in current UI logic, we will have to rewrite it as logic for (A), then for (B). – Sahil Sharma Aug 27 '18 at 11:28

1 Answers1

3

For more complex use cases you can combine amp-bind and amp-list. The trick is: bindings are evaluated as part of amp-list rendering. This means you can use the expressiveness of amp-bind together with mustache template logic:

  <amp-state src="amp-list-state.json" credentials=include id=state></amp-state>
  <amp-list  src="amp-list-state.json" credentials=include height="560" layout="fixed-height"   >
     <template type="amp-mustache">
       <li>{{.}}
          <div [hidden]="state.user.likesPickups">
            Convertibles ...
         </div>
         <div [hidden]="!state.user.likesPickups && state.user.age < 30">
            Pickups  ...
         </div>
       </li>
    </template>    
  </amp-list>

Note: it's best to use the same JSON endpoint for both amp-state and amp-list. This ensures that only a single request will be made during page load.

Link to the sample: https://amp-demos.glitch.me/amp-list-state.html

Sebastian Benz
  • 4,055
  • 1
  • 18
  • 17
  • The link you have shared just gives the output. The input would be coming from host/amp-list-state.json BUT where's the code. According to your code it should show something else as you print Pickups ... only if user's age is 30 – Sahil Sharma Aug 27 '18 at 15:48
  • There's no documented version of the sample, you can take a look at the source to see it's working (there's no server side logic). I'm using the `hidden` attribute to hide the element if users don't like pickups and the age is less than 30. – Sebastian Benz Aug 27 '18 at 16:44
  • Thank you. It's working. Hope this kind of hidden variables won't have any seo or other kind of impact. – Sahil Sharma Aug 27 '18 at 17:25