Shoppline — Loja com WC + Tema e plugins próprios

Desafio: Criar uma loja virtual WooCommerce / WordPress para uma loja física de artigos eletrônicos e utilidades. A loja deveria funcionar tanto para controle de vendas presenciais quanto para vendas online.

Solução: Loja virtual desenvolvida com WooCommerce e diversos plugins personalizados, como: Caixa Rápido com leitor de código de barras, que adiciona o produto diretamente no carrinho ao ler a etiqueta, impressão de etiquetas na impressora Zebra, que cria um QRCode e um Código de Barras para cada produto e imprime etiquetas com essas informações, entre outros.

Acesso: https://shoppline.com.br/

* Todos os valores nas imagens são fictícios e não representam preços reais praticados pela loja.

Sumário

  1. Caixa Rápido com Leitor de Código de Barras
  2. Controle de Estoque Rápido
  3. Painel de Movimentação Financeira
  4. Impressão de Etiquetas Zebra 🦓
  5. Impressão de notas e Endereço
  6. Sistema de Comissionamento
  7. Cálculo de Lucratividade

Caixa Rápido com Leitor de Código de Barras

A Shoppline é uma loja híbrida, funciona tanto presencialmente, como loja física, quanto digitalmente, como loja virtual. Assim, precisávamos de um sistema que funcionasse bem como um caixa de supermercado, passando os produtos em um detector que pudesse acessar o preço desses e somá-los automaticamente, mas sem descaracterizar o sistema WooCommerce.

Tendo em vista que o cliente possuía leitores de código de barras, foi desenvolvido um plugin que, acessando a API Rest do WordPress, fosse capaz de enviar o código do produto afim de obter o seu preço, fazendo a leitura de um código de barras com esse código de produto representado, impresso em uma etiqueta no produto.

Caixa rápido de uma Loja virtual WooCommerce

A saída de um leitor de código de barras é muito semelhante à de um teclado de computador, logo, uma solução em JavaScript era suficiente para, de um campo de texto, obter o código lido e enviar este número à API do site.

Com os dados em mãos, pude criar uma tabela que soma os valores assim que o retorno dos dados acontece, e adiciona uma linha à tabela, mostrando os dados do produto adicionado e campos especiais, como os de preço de Atacado e Varejo, o campo de preço manual e a quantidade, além da qtd. em estoque e dos subtotais.

Os preços de Atacado e Varejo são dois campos personalizados dentro do WordPress, que substituem o preço normal de um produto WooCommerce, neste caixa rápido o usuário pode escolher com qual quer trabalhar, ou até mesmo digitar um preço totalmente diferente usando o campo de preço manual.

Controle de Estoque Rápido

O WooCommerce é uma excelente ferramenta para donos de lojas virtuais, porém, a princípio, a quantidade de configurações e personalizações que se pode fazer pode assustar um usuário iniciante. Pensando nisso, se fez necessária uma página que unisse as principais opções, as atualizações mais corriqueiras, para que estas fossem efetuadas mais rapidamente.

Além de atalhos úteis como: Vender (leva à página do produto), Editar (edição do produto no painel) e Desativar (fica invisível na loja), foi criado um controle de estoque mais rápido, utilizando bibliotecas JavaScript que auxiliam no carregamento, organização e filtragem das informações. O salvamento da quantidade em estoque é feito com apenas um clique.

Dessa forma, a busca por um produto se tornou instantânea bem como a atualização da quantidade deste em estoque, além de proporcionar uma visualização mais completa dos produtos, mostrando preço de custo (com botão anti-enxeridos), atacado e varejo juntos, além da localização física do produto no armazém.

Painel de Movimentação Financeira

Uma das principais dores, citada pelo cliente durante o desenvolvimento, que envolvia a parte financeira da loja, era a saída indiscriminada de pequenos valores do caixa, gastos que iam desde alimentação de funcionários até transporte casual de mercadoria, embalagem, pilhas, materiais de escritório, diárias etc.

Um painel de controle que contabilizasse essas saídas de capital, em conjunto com as entradas geradas pelas vendas dos produtos via WooCommerce, se fez necessário.

Neste painel é possível filtrar as movimentações financeiras feitas na loja, sejam vendas de produtos, entrada de capital próprio ou saída para compras esporádicas, por range de datas e analisar os dados resumidos de saldo, bem como a divisão deste em formas de pagamento distintas e também via um pequeno fluxo de caixa, um histórico de todas as movimentações.

Quer uma Loja Virtual WooCommerce você também?

Aproveite nosso desconto de 40% para novos clientes e garanta a sua agora mesmo.
Clique no botão abaixo e seja atendido por um especialista WordPress.


Impressão de Etiquetas Zebra 🦓

Talvez a coisa mais complexa que já fiz em toda a minha carreira como programador foi configurar uma impressora Zebra .. rss. Brincadeiras à parte, o cliente precisava de um sistema de impressão de etiquetas para codificar seus produtos em estoque.

Estas etiquetas são, até hoje, primordiais para o bom funcionamento da loja. E como ele já possuía a impressora, tive que me virar para criar um sistema que gerasse códigos de barra para os produtos WooCommerce. Por sorte encontrei o seguinte plugin: YITH WooCommerce Barcodes and QR Codes, que me forneceu classes úteis para geração desses códigos.

Com essas classes pude criar uma página onde os produtos são tabelados e se pode escolher uma quantidade de etiquetas que se quer imprimir. Clicando sobre o botão de “mais”, as etiquetas são geradas em um layout proporcional ao tamanho do rolo de adesivos, para uma visualização quase exata da impressão.

Além dos códigos: numérico, QR e Barras, o nome do produto e o fornecedor são adicionados. Ao clicar em “Imprimir Etiquetas”, a interface de impressão do Windows é aberta com o tamanho das etiquetas préviamente configurados, e então segue-se normalmente a imprimir.

Impressão de notas e Endereço

Outro sistema de impressão presente neste projeto é o que imprime os cupons “não fiscais”, entregues aos clientes da loja junto com os produtos comprados. Nestes cupons algumas informações sobre o pedido são impressos em papel amarelo (como os usados em extratos bancários) via impressora térmica Epson.

Um QRCode Pix também é impresso caso o cliente queira pagar presencialmente via Pix, além do endereço do cliente, para orientação dos entregadores, a lista de produtos e algumas considerações sobre garantia.

Ainda é possível configurar uma outra impressora Zebra, com uma bobina maior, para impressão de etiquetas de endereço, que podem ser coladas em caixas de entrega, como mostrou a figura acima. Um código de barras único também é gerado para o pedido, e um QRCode codifica um link para o endereço do cliente no Google Maps.

Sistema de Comissionamento

A Shoppline já trabalhava com vendedores externos, pessoas que recebiam comissões por oferecer os produtos da loja. O desafio foi criar uma interface de gerenciamento para essas pessoas, em que a comissão fosse contabilizada automaticamente a cada venda atribuída a um vendedor comissionado, que diferente de um funcionário da loja, recebia uma fatia da venda.

Então criei uma tabela parecida com a de controle de estoque, usando dataTable para agilizar a busca, filtragem e organização. O botão “Relatórios” aponta para os relatórios avançados do próprio WooCommerce, filtrado por vendedor, já o botão “Assumir” faz uso das classes do plugin User Switching para agilizar o login do administrador na conta do usuário / vendedor.

O administrador / gerente pode ainda editar as informações do vendedor, excluir ou desativar seu usuário e ainda visualizar o status, a comissão devida naquela semana e ainda o lucro obtido pelo vendedor naquele mês.

Cálculo de Lucratividade

E, para fechar com chave de ouro, talvez o painel mais completo da loja, o painel de Pedidos. Esta tabela surge da necessidade de se ter, em um único lugar, várias ações relacionadas ao pedido dos clientes dentro de um range de datas: visualização e alteração rápida de status, meio de pagamento, emissão de recibos (Impressão de notas e Endereço acima), totais, preços, frete, vendedores, entregadores responsáveis, comissão, descontos, cálculo da lucratividade no período etc.

Com o filtro de range de datas é possível selecionar qualquer período, dando liberdade ao gerente da loja de visualizar a lucratividade em períodos específicos e tomar uma decisão mais embasada e factual.

Loja virtual WooCommerce

Aproveite nosso desconto de 40% para novos clientes e garanta a sua agora mesmo.
Clique no botão abaixo e seja atendido por um especialista WordPress.


Rolar para cima
Rolar para cima