Sistema de Variações no Produto - Opções relacionadas (tamanho, cor...) Opencart

Muitos lojistas, que vendem produtos com opções relacionadas como Cor e Tamanho, sempre se perguntavam como fazer para manter o estoque sincronizado entre as opções.
E o melhor sistema para isso é o uso de Variações, como feito por grandes lojas, fizemos este sistema de Variações no Produto - Opções relacionadas para o Opencart justamente para atender está grande demanda e necessidade importante para muitas lojas.

Primeira instalação e adaptaçào ao tema gratuita, adicionamos também o CSS base.

Com nossa melhoria, pode vender produtos com Cor e Tamanho, sendo cadastrado a cor como uma Variação por exemplo e o tamanho uma opção normal do Opencart, entre outros muitos usos.
Assim é possível manter o estoque normal e sem precisar mexer nos recursos nativos do Opencart das opções e o melhor de tudo, cada produto ligado a variação é um produto único, logo pode ter descrição diferente, imagens diferentes, opções diferentes, estoque diferente, em resumo é um produto único, só que ligado aos outros produtos pelas variações.


O que faz

• Pode criar N Variações e cada variação pode ter N produtos relacionados
• Pode informar o Título de referência da variação
• Pode informar o Nome da variação (aparece na página do Produto se desejar)
• Pode Habilitar ou desabilitar uma variação
• Pode informar o valor do Produto na variação, exemplo: Variação Cor e no Produto o Valor pode ser por exemplo Azul, Verde, Vermelho ou como preferir
• Pode escolher entre o Tipo: Imagem, Cor ou Texto
• Atalho no Menu do Administrador para o Painel das Variações em Catálogo com o nome Variações Produto, logo abaixo de Produtos
• No modo Imagem é usado a miniatura da imagem de capa do Produto
• Os produtos relacionados pela variação são exibidos acima das opções na página do Produto
• Visualmente parece uma opção, mesmo recurso usado pela NetShoes, Nike e outras grandes lojas online
• Pode agora criar produtos com Cor e Tamanho, sendo a variação Cor por exemplo e o Tamanho opções normais do Opencart
• Painel para criar as Variações em Extensões -> Extensões -> Módulos
• Pode criar, editar ou remover uma variação
• Pode adicionar ou remover produtos de uma variação
• Faça como grandes lojas como Netshoes, Nike entre outras, com as Variações os Produtos relacionados são únicos, facilitando o cliente achar o Produto desejado e melhorado o SEO se feito um bom cadastro com boa descrição e um bom título
• Resolva o problema dos estoques das opções relacionadas, já que vai ser usada apenas opções simples sem relacionamento com a ajuda das Variações
• Exiba os diferentes versões e tipos de um mesmo produto de forma fácil, já que os produtos das Variações são exibidos normalmente na Loja e facilitam visualmente na página do Produto o cliente trocar entre eles
• Agora ficou fácil para o cliente ver as diferentes cores de um produto ou versões
• Painel Codemarket
• Pode personalizar o CSS pelo Painel, além de informar se deseja exibir o Nome da variação e o valor da variação no Produto
• Pode Habilitar ou Desabilitar a melhoria pelo Painel

O que é uma Variação?

Uma variação nada mais é que vários produtos relacionados, mas visualmente parece uma opção na página dos produtos relacionados pela variação criada.
Exemplo, variação Tênis Nike Revolution 5 Feminino - Imagem de Capa usada nas imagens de exemplo, dentro dela tem N produtos relacionados pela Cor.
São produtos semelhantes, porém diferentes devido terem cores diferentes, quantidades diferentes e em cada produto tem Opções de Tamanhos com quantidades diferentes.

Exemplo:
Camiseta Codemarket Azul
Camiseta Codemarket Verde
São 2 produtos distintos, mas que podem ser relacionados entre si por uma variação contendo os dois dentros, logo quando entrar no produto Camiseta Codemarket Azul, vai exibir a miniatura dele e do Verde visualmente como se fosse uma opção.

E o produto acessado fica destacado na miniatura, para mostrar que foi o escolhido e quando passa o mouse nos outros produtos tem um efeito visual para mostrar qual produto está com o mouse em cima.
Ao escolher outro produto das miniaturas troca a página para o outro produto da variação que fica destacado.
No exemplo informei miniatura da imagem de capa do produto, porém pode ser Cor ou Texto, sendo o mais usado a imagem de capa mesmo.

Por que resolve o problema de produtos relacionados, como Cor e Tamanho?
Resolve, porque cada produto é único, mesmo sendo semelhante no geral, porém com cores diferente ou algum outro atributo diferente.
Enquanto na opção vai ficar apenas uma opção simples de Tamanho ou outra, assim não fica 2 opções relacionadas e sim uma opção normal com seu estoque.

Em resumo, não vai ser cadastrado opção Cor e Tamanho por exemplo.
Mas sim feito uma cópia dos produtos com Cores diferentes tornando eles produtos únicos e dentro deles que fica o Tamanho, mas para o cliente visualmente se parece uma opção diferenciada os produtos relacionados por uma variação.

O mais interessante que a melhoria é isolada dos recursos nativos do Opencart, ou seja, não mexe nas opções e foi feita com base em grandes lojas que usam o sistema de variações a alguns anos para resovler este detalhe e outros.

Só posso usar a variação para Cor?

Pode usar para representar diferentes caracteristicas dos produtos relacionados, pode usar uma variação para destacar os tipos diferentes de um produto, exemplos:

• Computadores com diferentes especificações, mas mesmo modelo base
• Celulares do mesmo modelo base, mas com caracteres diferentes, exemplo Iphone 11, Iphone 11 Pro, Iphone Se..., cada um é um produto único, porém podem ser exibidos como variação, facilitando o cliente ver as opções que tem do aparelho
• Outro exemplo de celular Samsumg S20 com os modelos S20, S20+ e S20 Ultra, podem aparecer visualmente como uma variação, assim fica fácil o cliente escolher o aparelho ideal da mesma família S20
• Relacionar produtos semelhantes, mostrando outras opções
• Relacionar produtos complementares
• Exibir diferentes opções de um mesmo produto base, mas com pequenas caracteristicas diferentes, seja em especificação, cor ou outro detalhe
• Exibir versões diferentes de um produto, exemplo Lite e Pro

• Recomendamos que crie o produto base principal, principalmente se for muito semelhante
• Depois duplique ele usando o Copiar do Opencart
• Use título diferente, modelo diferente, quantidade do produto, pode mudar também a descrição, use também imagens diferentes se for diferente visualmente, em resumo aplique as diferenças
• Agora em Extensões -> Extensões -> Módulos -> Codemarket - Sistema de Variações no Produto cria as variações relacionando os produtos na variação desejada

Lançamento
10/07/2020

Atualização
Versão 1.1 - 11/08/2020

• Adicionado Atalho no Menu do Administrador para o Painel das Variações em Catálogo com o nome Variações Produto, logo abaixo de Produtos
• Suporte ao Opencart 3.0.3.6

Atualização opcional, interessante para facilitar a criação e edição das Variações.

Compatibilidade

• Opencart 3 até 3.0.3.9
• Painel Codemarket
• Tema padrão Opencart