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:
Abaixo você pode conferir como realizamos a construção de cada um destes compenentes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum nisi vel metus ultricies congue. Praesent tempus dignissim placerat. Morbi viverra, velit vitae imperdiet facilisis, tellus eros sodales felis, id aliquet eros ipsum eu nisl. Curabitur ac ante vitae lectus cursus porttitor id vel enim. Nullam placerat ac augue ut auctor. Fusce mattis sit amet nisi at ultricies. Nunc iaculis finibus lectus, sit amet mollis lectus suscipit in. Integer volutpat tellus at congue congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum nisi vel metus ultricies congue. Praesent tempus dignissim placerat. Morbi viverra, velit vitae imperdiet facilisis, tellus eros sodales felis, id aliquet eros ipsum eu nisl. Curabitur ac ante vitae lectus cursus porttitor id vel enim. Nullam placerat ac augue ut auctor. Fusce mattis sit amet nisi at ultricies. Nunc iaculis finibus lectus, sit amet mollis lectus suscipit in. Integer volutpat tellus at congue congue.
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, 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.
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 | Victor |
|---|---|
|
🔝Topo