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:
É 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:
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:
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:
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:
É 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:
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:
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):
A inicialização fica assim:
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:
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.