Currency Conversion
Introduction
This example shows how to use amp-bind to filter JSON data on select of option in select dropdown.
Setup
We include amp-bind to track the state
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Implementation
This example uses a public currency endpoint to populate amp-state. The default value is EUR (euro) and we convert the currency values by updating amp-state when the user changes the dropdown to a different currency.
Banana
EUR 2.00
<amp-state id="currencyFilter" src="https://api.exchangeratesapi.io/latest"></amp-state>
<amp-state id="defState">
<script type="application/json">
{
"currencyRate": 1,
"currencyDecimal": 2,
"currencyCode": "EUR"
}
</script>
</amp-state>
<select on="change:AMP.setState({
defState: {
currencyRate: event.value == 'EUR' ? 1 : currencyFilter.rates[event.value],
currencyCode: event.value
}
})">
<option value="CAD">CAD</option>
<option value="EUR" selected>EUR</option>
<option value="HKD">HKD</option>
<option value="ISK">ISK</option>
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="RUB">RUB</option>
<option value="INR">INR</option>
</select>
<h3>Banana</h3>
<div>
<span [text]="defState.currencyCode">EUR</span>
<span [text]="(2*defState.currencyRate).toFixed(defState.currencyDecimal)">2.00</span>
</div>
<amp-img src="https://cdn.glitch.com/cbcdd9ba-70f9-4d53-a19d-486e4b70f73f%2F440px-Cavendish_Banana_DS.jpg?v=1578089065672" height="112" width="112" layout="fixed" title="banana"></amp-img>
さらに説明が必要ですか？
このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-
