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>

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow

Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub

Written by @philkrie