Cotação de moedas Componentes

O que é

Serve para o site de uma casa de câmbio, agência de turismo, loja que importa, portal de notícias: "Dólar hoje R$ 5,43 ▲ 0,32%". Você escreve uma <div sw-cotacao>, diz quais pares quer (sw-cotacao-pares="USD-BRL,EUR-BRL") e ele monta os cartões com o valor e a variação do dia (verde subindo, vermelho caindo).

Precisa do JavaScript do SWCore e de internet: o navegador de quem visita busca os valores na AwesomeAPI (economia.awesomeapi.com.br), um serviço público e gratuito que não pede cadastro nem chave. Você não precisa de nada no seu servidor. Sem internet, ou se a API estiver fora, aparece "Cotação indisponível no momento." no lugar (o mesmo vale para par escrito errado). O símbolo segue a moeda de destino do par: USD-BRL mostra "R$", BTC-USD mostra "US$", USD-EUR mostra "€".

Quando usar

• Mostrar o câmbio do dia num site de turismo, câmbio ou importação: modo cartões.
• Comparar compra, venda, máxima e mínima de várias moedas: sw-cotacao-mode="table".
• Não use para calcular preço de venda ou fechar negócio: é informativo, com atraso de mercado.

Comece aqui

1. 1

   Coloque o SWCore na página.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Escreva a div com os pares que quer mostrar. Pronto: ao abrir a página, o navegador busca os valores.

   <div sw-cotacao sw-cotacao-pares="USD-BRL,EUR-BRL"></div>

3. 3

   Para atualizar sozinho, diga de quanto em quanto tempo (em milissegundos: 60000 = 1 minuto).

   <div sw-cotacao sw-cotacao-pares="USD-BRL,EUR-BRL" sw-cotacao-auto="60000"></div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<section class="p-3">
  <h2 class="t-h5">Câmbio de hoje</h2>
  <div sw-cotacao sw-cotacao-pares="USD-BRL,EUR-BRL,ARS-BRL" sw-cotacao-tipo="v" sw-cotacao-auto="300000"></div>
  <p class="t-pp t-mut">Valores de venda, atualizados a cada 5 minutos. Fonte: AwesomeAPI.</p>
</section>

<div sw-cotacao
     sw-cotacao-pares="BTC-BRL,ETH-BRL"
     sw-cotacao-mode="table"
     sw-cotacao-auto="60000"></div>

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js.
• Internet no navegador de quem visita — os valores vêm da AwesomeAPI (gratuita, sem chave). Nada é preciso no seu servidor.

Cuidados — erros comuns

• Par escrito errado (USD/BRL, dolar-real): a API não reconhece e aparece "Cotação indisponível no momento.". Use o formato USD-BRL, com hífen e em maiúsculas.
• sw-cotacao-auto muito baixo (ex.: 1000): a API gratuita limita pedidos e passa a recusar (aparece "Cotação indisponível no momento."). Use 60000 (1 minuto) ou mais.
• Muitos blocos [sw-cotacao] na mesma página: cada um faz o seu pedido. Junte os pares num bloco só.
• Testar abrindo o arquivo sem internet: aparece "Cotação indisponível no momento." — não é defeito do seu código.

O que ele não faz

• Depende de um serviço externo (AwesomeAPI). Se ele sair do ar ou mudar, a cotação some.
• Valor com ponto decimal (5.43), no formato americano — não usa vírgula.
• A seta e a cor mostram a variação do dia (desde a abertura), não desde a última atualização da página.
• Não tem eventos nem função para ler os valores por código.