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
https://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
https://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
https://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
https://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:
jQuery Zoom
https://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
https://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.