Dicionário do E-Commerce
12 de abril de 2017
Como adicionar combo de produtos no carrinho
10 de maio de 2017

Como automatizar campos no seu produto

A automatização de alguns campos de uma categoria de produtos é muito útil para evitar um trabalho manual repetitivo e desnecessário, mas o que é essa automatização e para que serve? Esse recurso nada mais é do que uma maneira de fazer com que alguns campos de preenchimento apareçam automaticamente em produtos de uma certa categoria, por exemplo: quando eu cadastrar um produto na categoria de alianças, um campo automatizado pedindo o nome de gravação das alianças aparecerá na página desse produto sem precisar de nenhuma configuração individual.

A configuração tem um nível de dificuldade médio, mas é extremamente útil e otimizará o seu tempo de uma maneira relevante, sem contar que ficará fácil faze-lo seguindo os passos deste tutorial! Lembrando que caso hajam dúvidas, você pode entrar em contato com a equipe DC5!

Para automatizar os campos do seu produto da maneira que mostraremos nesse tutorial, você irá precisar entrar em contato com a nossa equipe para que façamos a instalação dos recursos que iremos utilizar. Feito isso, você pode seguir para o tutorial.

Nesse tutorial vamos dar exemplo uma loja que vende alianças e precisa de um campo personalizado para que seu cliente escreva a gravação e especifique o tamanho da aliança. Veja abaixo os passos para fazer essa configuração.

1. Para automatizar campos no seu produto, primeiramente você precisa acessar o painel administrativo dele. Se você não sabe como acessá-lo, nós temos um tutorial que ensina como faze-lo, neste link.
2. Depois de efetuar o login, você se encontrará na página inicial de administração do seu site. Agora você deve acessar no menu lateral, a aba “Produtos > Extra Products Option“(lembrando que esse recurso só estará disponível após a instalação realizada pela equipe DC5), conforme a imagem abaixo indica:

2.1. Esse é a área que utilizaremos para automatizar os campos no seu produto!

3. Aqui nós faremos uso das categorias de produtos. Por exemplo: Todas as alianças fazem parte da categoria de alianças, e assim por diante. Caso seus produtos não estejam cadastrados nas categorias, será necessário faze-lo. Por esse motivo, para ajudar na organização do processo, existem as “Sections”(Seções, em português). Você pode – e deve – criar as seções para se organizar. Nós recomendamos que tenha uma seção para cada categoria de produto, pois assim evitaremos futuras complicações. No caso, nós faremos uso da categoria de anéis, então clicando em “Add new section“, criaremos a seção de anéis.

3.1. Atente-se às informações na imagem: *Os campos que não foram explicados não são de grande importância, mas você pode altera-los caso saiba para que eles servem.

3.2. Feito isso, acesse a seção anéis clicando sobre ela.

4. Agora nós criaremos os campos que queremos automatizar clicando em Add field.

4.1. Uma janela apareceu em sua tela com inúmeras configurações. Primeiramente nós vamos configurar as regras condicionais, ou seja, quando esse campo deverá aparecer no site. Para isso, clique em Conditional Rules

4.2. Selecione Product caso queira que o campo apareça apenas em determinado produto, ou Category caso queira que o campo apareça em determinada categoria. No caso, usaremos a categoria.

4.3. Preste muita atenção na escolha desse campo:
> Equals to/In – Selecione esta opção se você quiser que o campo apareça na(s) categoria(s) que iremos inserir no próximo passo.
> Not Equals to/ Not in – Selecione esta opção se você quiser que o campo apareça em todas as outras categorias, com exceção da(s) que iremos inserir no próximo passo. Ou seja, se eu selecionar essa opção e inserir a categoria “Pingentes”, o campo que estamos criando aparecerá em todas as outras categorias, menos na de pingentes.
No caso, usaremos a opção Equals to/In.

4.4. Ao clicar no próximo campo de preenchimento, as categorias aparecerão automaticamente. Você pode escolher quantas categorias quiser, incluindo a opção “All categories”, que irá adicionar o campo que está sendo criado em todas as suas categorias de produtos. No caso, escolheremos Anéis.

4.5. Vamos voltar para as propriedades gerais clicando em General Properties.

5. Propriedades Gerais.
5.1. No campo “Name*” atribuiremos um ID ao campo, assim como fizemos ao criar a seção. Recomendamos que este ID seja algo que informe para que vai servir aquele campo (o cliente não terá acesso ao ID, isso é para organização do administrador). No caso, vamos fazer um campo de texto onde o cliente deverá inserir o nome de gravação no anel, para usar como aliança. Não coloque espaços neste campo, use algo como um hífen para separar as palavras.

5.2. No campo Field Type* vamos definir qual é o tipo de campo que será criado. Existem onze opções de campo, neste tutorial usaremos o campo de texto e o select pois são os mais usados. Agora usaremos o texto e mais adiante neste tutorial, o select.

5.3. Neste caso podemos deixar algumas das opções sem preenchimento. Nos campos que ficarem sem instruções nesse tutorial, apenas faça alterações caso você tenha certeza de suas respectivas funções. Pulando direto para o Price Type, mantenha a opção “Normal”.

5.4. Mantenha a opção “Habilitado” marcada para que o campo fique ativo. Se a opção “Required” estiver marcada, significa que o campo será obrigatório, ou seja, o cliente terá a obrigação de preenche-lo para continuar a compra, se estiver desmarcado, ele poderá concluir a compra sem preencher o campo.

5.5. Agora nós passaremos para a parte que ficará disponível para a visualização do usuário, ou seja, a customização do campo em si. Esses campos são de simples preenchimento:
> Título – Aqui você deve escrever o que aparecerá para o cliente na página de produto. Por exemplo: no meu está escrito “Nome de Personalização”, então isso aparecerá para ele antes do campo de texto.
> Title Position – A posição do título inserido. Neste campo teremos as opções “Left of the field” que fará com que o título fique a esquerda do campo de texto disponível para o cliente, e “Above field” que fará com que o título fique acima do campo de texto.
> Title Type – Neste caso é uma personalização do título, você pode aumentar a letra de exibição (numa escala entre H1 e H6, onde o H1 é a maior fonte e o H6 a menor), colocar em uma “div” caso tenha inserido uma classe CSS (para usuários avançados) ou manter a personalização padrão, que é a que estamos usando de exemplo, o “span”.
> Title Color – Aqui você deve escolher a cor da fonte que aparecerá o título. Ao clicar no campo, uma paleta de cores aparecerá para que você escolha sua cor. Aqueles números que aparecem no campo são os códigos do hexadecimal das cores, você pode inserir um pronto caso queira.

6. Clique em Add new field.

7. Clique em Salvar alterações.

8. Pronto! Essa deverá ser a visualização do campo automatizado no seu site:

9. Agora prosseguiremos com a opção de select. Dessa vez vamos simular uma diferença de tamanho para os anéis.
9.1. Vamos voltar para a escolha de “Field Type” e selecionar “Select”.

9.2. Observe que uma linha com algumas opções foi criada automaticamente.

9.3. Esses dois campos de “option” têm a mesma finalidade. A diferença é que o “Option Value” só vai aparecer para o administrador quando receber o pedido, enquanto o “Option Text” vai estar na interface para o cliente selecionar. Recomendamos que o preenchimento dos dois seja igual para facilitar o processo do administrador. Para adicionar mais uma linha dessa, clique no “+” em azul no final dela, isso fará com que o cliente tenha várias opções.
O “Price (preço)” só deve ser inserido se determinada opção alterar o valor do produto, caso contrário deixe-o em branco.

9.4. Vou manter a seguinte configuração, clicar no “Add new field” e salvar as alterações. Não se esqueça de configurar as “Conditional Rules” da maneira que ensinamos acima.

9.5. Pronto! Essa deve ser a visualização no site:

 

Nós da DC5 esperamos que você tenha conseguido esclarecer todas as suas dúvidas com esse tutorial! Caso ainda hajam dúvidas, sintam-se a vontade para entrar em contato com nossa equipe!

DC5
DC5

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *