Skip to content

Instantly share code, notes, and snippets.

@michaelwomple
Last active May 2, 2018 19:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michaelwomple/b28c0c44613db7d10c30f478e2593e4b to your computer and use it in GitHub Desktop.
Save michaelwomple/b28c0c44613db7d10c30f478e2593e4b to your computer and use it in GitHub Desktop.
An example of how to get around displaying erroneous html in AMP Templates.
CSS :
<style>
.noDisplay : { display: none; }
</style>
JSON :
{
"items": [{
{
"priceType:"",
"price": "1.99",
},
{
"priceType":"Card",
"price": "2.99",
},
{
"priceType":"BitCoin",
"price": "5.99",
}
}]
}
AMP List Template :
<template type="amp-mustache">
<table>
<tr class=”noDisplay{{priceType}}”>
<td>{{priceType}}:</td>
<td>$ {{price}}</td>
</tr>
</table>
</template>
Resulting HTML:
<table>
<tr class=”noDisplay”>
<td></td>
<td>1.99</td>
</tr>
<tr class=”noDisplayCard”>
<td>Card</td>
<td>2.99</td>
</tr>
<tr class=”noDisplayBitCoin”>
<td>BitCoin</td>
<td>5.99</td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment