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>

Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow

Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub

Written by @philkrie