Sprite formas de pagamentos

O que é Sprite de imagens

Sprite de imagens é uma técnica que combina várias pequenas imagens em uma unica imagem maior. Ao utilizar esse método reduzimos o número de requisições HTTP.

Por exemplo, se uma loja utiliza 10 ícones pequenos de 30 x 30 pixels, carregá-los separadamente resultaria em 30 requisições diferentes. Usando sprite, esses 10 ícones seriam combinados em uma imagem 300 x 300 pixels e somente uma única requisição precisaria ser feita.

Para exibir as imagens individuais corretamente carregadas por Sprinte, usamos a propriedade CSS background-position.

Sprite de imagens de pagamentos

A Tray disponibiliza a técnica de sprites para as imagens das formas de pagamento. Como a maioria das lojas possuem diversas formas de pagamento e elas geralmente são exibidas em ícones, usa-la faz muito sentido.

Utilizamos a classe .pag para identificar onde a imagem de pagamento deve ser carregada e a classe .pag-lazy para efetivamente carregar o sprite das imagens de pagamento. Cada forma de pagamento é identificada por uma classe própria iniciando por .pag-.

A tabela abaixo mostra a classe e uma imagem representativa. A imagem carregada pode ser ligeiramente diferente.

Classe	Ícone
.pag-bb
.pag-itau
.pag-bradesco
.pag-caixa
.pag-avista .pag-banrisul
.pag-pix
.pag-bank_billet
.pag-deposit
.pag- .pag-base .pag-bcash .pag-billing
.pag-visa
.pag-visaelectron
.pag-mastercard
.pag-maestro
.pag-elo
.pag-jcb
.pag-hiper
.pag-hipercard
.page-amex
.pag-diners
.page-aura
.pag-discover
.pag-pagseguro
.pag-mercadopago
.pag-vindi
.pag-paypal
.pag-moip
.pag-peela
.pag-check
.pag-dinheiromail

O código abaixo mostra a implementação dos ícones de forma de pagamento utilizando a técnica de sprinte.

Código

<ul class="payment-list row">
    {% for payment in paymentMethods.order %}
        <li class="col-sm-2 col-xs-2 payment-form">
            <i class="pag {{ payment.sprite_class }}" aria-label="{{ payment.display_name }}"></i>
        </li>
    {% endfor %}
    {% for payment in paymentMethods.credit %}
        <li class="col-sm-2 col-xs-2 payment-form">
            <i class="pag {{ payment.sprite_class }}" aria-label="{{ payment.display_name }}"></i>
        </li>
    {% endfor %} 
</ul>