Passar para o conteúdo principal

Personalizações com upload [Interno]

Veja como implementar personalização com uploads de arquivo.

Gabriela Mello avatar
Escrito por Gabriela Mello
Atualizado há mais de 11 meses

Em caso de lojas que trabalham com personalização dos produtos e dão a opção aos consumidores para importar arquivos, como imagem de um logo a ser bordado, temos uma solução de tratar os arquivos via link.

💡 Para marcas já lançadas, esse modelo envolve revisão de layout e deve ser direcionado via dev.

Nessa doc você vai conferir:

Como o modelo de personalização com upload funciona

Se a marca tem a opção de personalizar produtos com upload de imagem, o fluxo de compra ficará similar a este:

  1. O produto é acessado e a personalização é escolhida, fazendo o upload de imagem dentro da página do produto;

  2. Após selecionado e o item adicionado ao carrinho, já é possível conferir o link do arquivo. Ou seja, o consumidor sobe um arquivo em png por exemplo e ele é convertido em link para ser adicionado ao pedido;

  3. No admin, o pedido entra com a personalização contendo o link do arquivo escolhido.

📢A ferramenta que converte os uploads em link é a Cloudinary e o seller precisará criar uma conta própria. A ferramenta tem opção gratuita com até 25gb de espaço.

Aqui um exemplo de loja:

https://jalecosmania.vnda.dev/produto/produto-004-3

No painel administrativo o pedido ficará assim:

Tutorial de como usar a Cloudinary

O Cloudinary oferece uma solução abrangente de gerenciamento de imagens baseada em nuvem, simplificando uploads e gerando links para as imagens hospedadas.

Passo 1: Criando uma conta no Cloudinary

  1. Criar uma conta: Acesse o site da Cloudinary e cadastre-se para criar uma conta gratuita.

2. Crie um projeto: Após criar uma conta, você receberá seu Cloud Name (Nome da Nuvem), dentro da núvem será possivel criar um projeto. No plano gratuito é permitido somente um projeto.

Após criado o projeto será exibida a seguinte tela:

Passo 2: Configurações necessárias para implementação

  1. Preset de Upload: Cloudinary utiliza preset de upload, que nada mais é do que a configurações que determinam como será aceito o upload de arquivos.

  • O nome do preset é criado automaticamente

  • Signing Mode - IMPORTANTE esse item deve estar como Unsigned, o que permite que sejam efetuados uploads de arquivos sem necessidade de autenticação

  • Nome da pasta onde serão armazenados os uploads

2. Segurança: Configurar para que somente os domínios do seller tenham permissão para efetuar o upload de arquivos.

  • Importante informar todos os domínios que tem permissão para efetuar o upload, dessa maneira podemos nos assegurar de que ninguém externo pode consumir o armazenamento.

Passo 3: Acesso as imagens

  1. Acesso: Na tela inicial da aplicação em Media explorer é possível acessar a pasta onde os arquivos ficarão armazenados.

2. Gerencie os arquivos: Dentro da pasta é possivel excluir os arquivos que não forem mais necessários, assim como efetuar outras tarefas com os arquivos.

Passo 4: Informações adicionais

  1. Link da imagem: O processo quando efetuado em conjunto com a loja gera o link para o upload da imagem e utiliza esse item como valor do atributo personalizado.

Dessa maneira o item fica disponível no pedido, eliminando a necessidade passos adicionais posteriores a compra ou externos ao processo.

Lógica de implementação: Toda a lógica do processo está contida dentro do processo de compra, a validação dos tipos de imagens, o tamanho das imagens assim como a geração e disponibilização do link

Para quem é indicado

Sellers que trabalham com algum tipo de personalização que envolva o upload de imagens, como:

  • Jóias: https://www.kaisjoinha.com.br/produto/pingente-fotogravacao-580

  • Vestuário: https://www.dashuniformes.com.br/produto/blazer-feminino-alongado-albertina-mwl-11004

Benefícios

Esse modelo de implementação tira a dependência de enviar os anexos para algum e-mail da marca ou de gerar arquivos para carrinhos que não viraram pedidos e por isso facilita o fluxo do lojista que pode realizar toda a gestão através do admin.

  • Segurança nas imagens: Com o Cloudinary é possível restringir o upload das imagens de qualquer outro domínio senão o desejado.

  • Backup das imagens: O Cloudinary faz automaticamente o backup das imagens para assegurar redundância e disponibilidade.

  • Armazenamento: Cloudinary disponibiliza 25GB de armazenamento das imagens no plano gratis, permitindo mais do que o necessário para o upload das imagens.

Respondeu à sua pergunta?