Hot site: Meu Perfume

Meu perfume - Home

Em 2014 a Thipos cosméticos, uma das principais empresas de perfumes contratipos do país, desenvolveu um projeto inovador para a personalização de perfumes com imagens ou fotos enviados pelos clientes no qual todo o processo de personalização e compra teria que ocorrer por meio de um hotsite.

Após criação do layout realizada pelo cliente, comecei a desenvolver o Meu Perfume com para desktops em PHP 5.6 e banco de dados MySQL. Não foi utilizada nenhuma plataforma de e-commerce ou CMS.

Para iniciar o processo de criação do perfume, o cliente precisa informar o nome, e-mail, CEP e concordar com a política de privacidade, caso ele não compre o produto, a empresa pode utilizar essa base para futuras campanhas.

Em seguida o cliente irá escolher a fragrância do seu perfume divididas em feminina e masculina, como frasco de cada gênero tem uma diferenciação de cor, criei uma função em jQuery para troca da classe do frasco e da lista de fragrância, para suavizar a transição, utilizei um CSS transition na configuração all .4s ease-in-out.

Meu perfume - Escolha a fragrância

Após selecionar a fragrância, é exibido um box com as informações do produto com um link para o site oficial.

Com a fragrância definida o usuário poderá enviar e recortar por meio do plug-in cropper. Após a edição e validação, por meio de um Ajax enviada para o servidor e uma função em PHP envia, recorta e aplica os filtros na imagem.

Meu perfume - Escolha a Foto

Caso o cliente esteja satisfeito com o preview do produto, ele será enviado para a página de compra.

Na página de compra o cliente pode optar em comprar uma embalagem de presente, inserir um cupom de desconto, personalizar outro perfume ou finalizar a compra. Ao passar o mouse em cima da sacola de presente, o plug-in Elevate Zoom aproxima a imagem, mostrando detalhes. Há uma programação para desconto progressivo, ao ser aplicada a soma é exibida no box de descontos.

Meu Perfume - Carrinho

Ao finalizar a compra, o cliente é direcionado para o PagSeguro para efetuar o pagamento, em seguida ele é encaminhado para uma tela de confirmação com um carrossel com todos as fragrâncias que ele personalizou.

Meu perfume - Confirmação

Em seguida, por meio da API de notificações do PagSeguro, o status de confirmação ou não do pagamento é atualizado e seguida um e-mail é enviado para o cliente e outra para o administrador do sistema.

A partir desse ponto, o pedido é gerenciado a partir de um administrador que eu desenvolvi para esse projeto, porém como esse sistema é de uso exclusivo do cliente, não entrarei em detalhes sobre o seu funcionamento.