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 5 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?