Tableless

Busca Menu

Plugins jQuery e bibliotecas JavaScript para e-commerces

Seja o primeiro a comentar por

jQuery.payment

https://stripe.com/blog/jquery-payment

O plugin jQuery.payment valida o número dos principais cartões do mercado. Desenvolvido pelo pessoal da Stripe, empresa especializada em uma solução de pagamento para desenvolvedores de e-commerces, o plugin conta com validadores para números de cartão de crédito, data de validade e código de segurança.

Exemplos de uso:

$('.numero-cartao').payment('formatCardNumber');
$('.expiracao-cartao').payment('formatCardExpiry');
$('.codigo-cartao').payment('formatCardCVC');
$('.numerico').payment('restrictNumeric');

É possível também tirar proveito de alguns utilitários que acompanham o plugin e executar tarefas de validação, além de retornar informações do cartão baseado no número e a data de validade como um objeto:

$.payment.validateCardNumber('4242 4242 4242 4242'); //=> true
$.payment.validateCardExpiry('05', '05'); //=> false
$.payment.validateCardCVC('12344'); //=> false
$.payment.cardType('4242 4242 4242 4242'); //=> 'visa'
$.payment.cardExpiryVal('05 / 04'); //=> {month: 5, year: 2004}

O código-fonte, em CoffeeScript, está disponível no GitHub: https://github.com/stripe/jquery.payment.

accounting.js

http://josscrowcroft.github.com/accounting.js/

Accounting.js é uma biblioteca JavaScript com funções utilitárias para formatar números e valores monetários.

Além de formatar números, extrair valores e converter números decimais, a biblioteca implementa uma função bem interessante para padronizar a exibição de números em colunas de uma tabela.

Exemplos de uso:

accounting.formatMoney(1337.99, "R$", 2, ".", ","); // R$1.337,99
accounting.formatColumn([99.9, 12.39, 44.33, 84950, -22], "R$");
// ["R$    99.90", "R$    12.39", "R$    44.33", "R$84,950.00", "R$   -22.00"]
accounting.formatNumber(86960, 2, ".", ","); // "86.960,00"
(0.932).toFixed(2); // "0.93"
accounting.unformat("R$ 29.443,32", ","); // 29443.32

Para padronizar o formato em todas as funções, sem a necessidade de utilizar parâmetros extras em suas chamadas, basta atualizar o objeto accounting.settings:

accounting.settings = {
  currency: {
	  symbol : "R$",
	  decimal : ",",
	  thousand: ".",
	  precision : 2 
  }
}

Masked Input

http://digitalbush.com/projects/masked-input-plugin/

Ainda falando de formatação, temos o plugin MaskedInput, responsável por formatar qualquer input em formulários, garantindo assim uma maior integridade dos dados digitados.

Exemplos de uso:

$(".cnpj").mask("99.999.999/9999-99");
$(".cpf").mask("999.999.999-99");
$(".telefone").mask("(99) 9999-9999");
$(".cep").mask("99.999-999");

É importante lembrar que esses tipos de formatação e validação não devem ser realizados apenas no cliente – devem ser processados também no servidor.

Ideal Forms

http://elclanrs.github.com/jq-idealforms/

Formulários são uma parte importante de qualquer e-commerce e, geralmente, são a parte mais chata para o usuário: os cadastros tendem a ser tediosos, com campos desnecessários, validações mal-feitas e falta de informações.

O plugin Ideal Forms é uma ferramenta completa para a criação de formulários intuitivos e visualmente atraentes. Seus recursos incluem inputs customizáveis (select, radio, checkbox e arquivo), validação on-the-fly e um layout totalmente responsivo.

A validação pode ser feita utilizando o atributo data-ideal, como no exemplo abaixo:

<div><label>Usuário:</label><input type="text" name="username" data-ideal="required username"/></div>
<div><label>Senha:</label><input type="text" name="password" data-ideal="required pass"/></div>

Outra opção é utilizar parâmetros na inicialização do plugin. O Ideal Forms utiliza o atributo name dos campos para configurações específicas:

$('#form-cadastro').idealforms({
	inputs: {
	  'idade': {
	    filters: 'required min',
	    data: { min: 18 },
	    errors: { min: 'Você precisa ter 18 anos para comprar nesse site' }
	  }
	}
});

Ainda é possível dividir um formulário em passos, recurso indicado para o cadastro e o registro de um pedido em um e-commerce. Para isso, basta adicionar mais de um elemento section dentro do seu formulário.

A documentação do projeto é bem completa e está disponível no GitHub.

Filtrify

http://luis-almeida.github.com/filtrify/

Filtrify é um plugin jQuery que habilita filtros em tempo real, ideal para páginas de produtos em uma loja online. Basedo no atributo data de elementos HTML, o Filtrify gera uma lista, possibilitando selecionar apenas elementos de um determinado filtro.

O plugin recebe dois elementos: um container para os filtros e outro para os elementos a serem filtrados. No exemplo abaixo temos uma lista de produtos (notem as categorias no atributo data):

<div id="filtros"></div>

<ul id="produtos">
    <li data-categoria="informática, eletrônicos, computadores">Desktop Core i7</li>
    <li data-genre="informática, acessórios, impressoras">Impressora HP Deskjet</li>
    <li data-genre="informática, acessórios, tablets">iPad</li>
    <li data-genre="telefonia, celular, apple">iPhone</li>
    <li data-genre="informática, laptops">Notebook Positivo</li>
</ul>

A inicialização fica assim:

$.filtrify("produtos", "filtros");

E o resultado:

filtrify

jQuery Zoom

http://www.jacklmoore.com/zoom

O plugin jQuery Zoom habilita o recurso de zoom em imagens com interações do mouse. A inicialização do plugin cria elementos novos para o efeito de zoom, portanto, deve ser aplicada em um elemento capaz de receber outros elementos (não pode ser aplicada em um elemento img).

Exemplos de uso:

$('a.foto-produto').zoom(); 
$('a.foto-produto-grab').zoom({ on:'grab' });

As opções do plugin incluem os seguintes parâmetros: url da imagem maior, on (mouseover, grab, click ou toggle), duration (velocidade do zoom) e callback.

Bônus: Carrinho de compras com drag and drop

http://tableless.com.br/carrinho-de-compras-com-drag-and-drop/

Há mais ou menos dois anos escrevi um tutorial aqui no Tableless mostrando como implementar um carrinho com funções de drag and drop.

Utilizando os métodos draggable e droppable da biblioteca jQueryUI, ao final do tutorial você tem um carrinho drag and drop completamente funcional, pronto para ser implementado no seu e-commerce.

Clique aqui para visualizar o exemplo do tutorial no navegador.

Publicado no dia