Este é o desafio final do Grupo 6 do Hiring Coders #2. O desafio consistem em desenvolver uma loja Vtex com consumo de API's com o front-end baseado na temática da parceira e patrocinadora corebiz.
O contexto completo do desafio está aqui.
Você pode conferir aqui nesse link
A loja foi pensada para ser composta por 5 páginas:
* Home
* Sobre
* Produtos
* Contato
* Blog
As página "Home" e "Sobre" seguem os mesmos padrões da corebiz com as informações e caracteríticas principais da marca. As páginas "produtos" e "contato" são as que, conforme solicitado no desafio, entregam o consumo da API vtex e AWS, nelas podemos verirficar os produtos, fazer a compra desses produtos e observar a lista de clientes. O link do header denominado "blog" redireciona para um link externo mantido pela corebiz.
- Store
- Store GraphQL
- Add to Cart Button
- Breadcrumb
- Carousel
- Category Menu
- Checkout Summary
- Condition Layout
- CSS Handles
- Disclosure Layout
- Flex Layout
- Footer
- Header
- Icons
- Image
- Link
- Locale Switcher
- Login
- Logo
- Minicart
- Modal layout
- Menu
- My Account
- Order Placed
- Product Bookmark Interface
- Product Customizer
- Product Details
- Product Gifs
- Product Highlights
- Product Identifier
- Product Kit
- Product Price
- Product Quantity
- Product Review Interfaces
- Product Specification
- Product Specifications
- Product Summary
- Product Summary List
- Responsive Layout
- Review and Ratings
- Rich Text
- Shelf
- Slider Layout
- Slider
- Styleguide
- Stack Layout
- Sticky Layout
- Store Drawer
- Search Result
- Store Components
- Store Form
- Tab Layout
- Telemarketing
- Video
Os componentes da loja elaborados para o desafio foram:
- Api Vtex IO
- Api AWS
- Componente Cadastro Leads
- Componente Lista de Leads Admin
- Header
- Footer
- Home
- Sobre
- Produtos
- Contato
Abaixo você pode conferir como realizamos a construção de cada um destes compenentes.
O Header responsivo foi desenvolvido através dos blocos "header-layout.desktop" e "header-layout.mobile". O layout desktop conta com o logo, um menu de navegação e um minicart, organizados em um "flex-layout". Já o layout mobile, mantém o logo e minicart, e a navegação é condensada em um menu gaveta.
O footer responsivo com os blocos "footer-layout.desktop" e "footer-layout.mobile" também utiliza o flex layout para organizar o logo, os endereços da corebiz em cada país, as redes sociais, o copyright e um botão que leva ao topo da página.
O store.home, baseado na aparência do site original, tem como objetivo trazer de mensagem inicial a presença global da corebiz. Desta forma, a home foi divida em seções para separar cada parte dessa página inicial. Na primeira seção há uma imagem de fundo com o mapa de presença, mais um "stack-layout" estilizado com blocos "rich-text" para o título, subtítulo e estatísticas. Na seção seguinte, os ícones de parceiros foram baixados diretamente da página oficial da corebiz e sincronizadas através do asset builder, mostrando alguns dos principais clientes da empresa. Já na terceira seção, o uso das imagens também seguiram o mesmo critério, porém foi utilizado o "slider-layout" para mostrar cada imagem ao clicar nas setas de ambos os lados, direita ou esquerda. A quarta seção foi estilizada usando dois blocos de "info-cards" para mostrar as atuações da corebiz na mídia. Com isso, finalizando com a quinta seção, nela é mostrada as principais notícias e conteúdos do blog da corebiz, usando-se o "rich-text", "flex-layout" e "image" para os títulos, hashtags e imagens referentes ao conteúdo descrito.
A página about-us traz a missão e valores que são a base da corebiz. Foi utilizado "flex-layout" para compor o design das imagens com os textos e foi inserido um "tablayout" estilizado para descrever o framework de transformação digital da empresa, separando os seguimentos canal de vendas, taxa de conversão, marketing de performance e projetos ominichannel.
Após cadastrar e ativar as marcas, categorias e produtos através do Admin, a página de produtos foi criada através de um bloco customizado "store.custom#products" com um "search-result-layout", filtrando apenas os óculos e estabelecendo um máximo de 8 produtos por página. Possui a opção de visualização em grid ou lista e customização dos filtros de busca.
A área de contato do site abre um modal para cadastro de leads de clientes que se conecta a API AWS. Foi utilizado um Componente VTEX com um formulário de cadastro contendo os campos nome, email, telefone, e um registro automático de prospect para possivelmente ser transformado em cliente caso o usuário finalize alguma compra na loja. Mais detalhes aqui.
Ao todo o nosso grupo é composto de 10 integrantes. Nos dividimos em back-end e front-end para elaborar desafio. Utilizamos a metodologia Kanban e a ferramenta Trello para nos organizar e ter ciência das atividades a fazer, em andamento e controle do que já foi concluído. Também elaboramos um fluxograma das atividades que você pode conferir aqui.
| Camilla | Alberto | Lucas Ramos | Jefferson |
|---|---|---|---|
 |
|
|
|
| Lucas Vihuchi | Laura | Guilhermano | Evelyn |
|---|---|---|---|
|
|
|
|
| Breno |
|---|
|
🔝Topo