josecarloslins/challenge-vtex-io-josecarloslins
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Finalização do header para todas as telas

Browse Source
This commit is contained in:
José Carlos Lins 2023-01-27 08:32:52 -03:00
parent f276946a19
commit ad6d278bce
28 changed files with 584 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/Installments.tsx
View File

@ -1,3 +0,0 @@
import { Installments } from "./components/installments";
export default Installments;

2
react/components/descont-pix/index.tsx
View File

@ -5,7 +5,7 @@ import styles from "./styles.css";
export const DescontPix: FC = () => {
const productContextValue = useProduct();
console.log(productContextValue);
// const fetchApi = async () => {
// fetch("/api/checkout/pub/orderForms/simulation", {
// method: "POST",

16
react/components/installments/index.tsx
View File

@ -1,16 +0,0 @@
import React, { FC } from 'react'
import { useProduct } from 'vtex.product-context'
import styles from "./styles.css";
export const Installments: FC = () => {
const productContextValue = useProduct();
let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4;
return (
<div className={styles.containerProductReference}>
<span className={styles.sellingPrice}><strong className={styles.sellingPriceBold}>4 x</strong> de <strong className={styles.sellingPriceBold}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</strong> sem juros</span>
</div>
);
}

10
react/components/installments/styles.css
View File

@ -1,10 +0,0 @@
.sellingPrice{
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.sellingPriceBold{
font-weight: 700;
}

100
store/blocks/header/header.jsonc
View File

@ -7,12 +7,27 @@
},
"header-layout.desktop": {
"children": [
"flex-layout.row#1-desktop",
"flex-layout.row#3-desktop",
"flex-layout.row#top-menu-descont",
"sticky-layout#4-desktop"
]
},
"flex-layout.row#top-menu-descont":{
"props": {
"blockClass": "container-top-menu-descont"
},
"children": [
"rich-text#text-top-menu-descont"
]
},
"rich-text#text-top-menu-descont": {
"props": {
"text": "Desconto na primeira compra",
"blockClass": "text-top-menu-descont"
}
},
"flex-layout.row#1-desktop": {
"children": ["telemarketing"],
"props": {
@ -57,47 +72,69 @@
"children": [
"flex-layout.col#logo-desktop",
"flex-layout.col#category-menu",
"flex-layout.col#spacer",
// "flex-layout.col#spacer",
"search-bar",
"locale-switcher",
"login",
"minicart.v2"
"flex-layout.row#login-and-cart"
]
},
"search-bar":{
"props": {
"placeholder": "Faça sua busca"
}
},
"flex-layout.col#logo-desktop": {
"props": {
"verticalAlign": "middle"
"verticalAlign": "middle",
"blockClass": "logo-desktop-m3academy"
},
"children": ["logo#desktop"]
},
"flex-layout.col#category-menu": {
"props": {
"verticalAlign": "middle"
"verticalAlign": "middle",
"blockClass": "menu-header-container"
},
"children": ["vtex.menu@2.x:menu#category-menu"]
},
"logo#desktop": {
"props": {
"title": "Logo",
"title": "Logo M3 Academy",
"href": "/",
"url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
"width": "180",
"height": "12"
"url": "https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png",
"width": "100%",
"height": "auto"
}
},
"header-layout.mobile": {
"children": ["sticky-layout#1-mobile"]
"children": [
"flex-layout.row#top-menu-descont",
"sticky-layout#1-mobile"
],
"props": {
"sticky": false
}
},
"sticky-layout#1-mobile": {
"children": ["flex-layout.row#1-mobile"]
"children": ["flex-layout.row#mobile-header-col"]
},
"flex-layout.row#mobile-header-col": {
"children": [
"flex-layout.row#1-mobile",
"search-bar#mobile"
],
"props": {
"blockClass": "mobile-header-col"
}
},
"flex-layout.row#1-mobile": {
"children": [
"drawer",
"logo#mobile",
"flex-layout.col#spacer",
"login",
"minicart.v2"
"flex-layout.row#login-and-cart"
],
"props": {
"blockClass": "main-header-mobile",
@ -106,8 +143,22 @@
"fullWidth": true
}
},
"flex-layout.row#login-and-cart":{
"children": [
"login",
"minicart.v2"
],
"props": {
"blockClass": "login-and-cart-container"
}
},
"drawer": {
"children": ["menu#drawer"]
"children": ["menu#drawer"],
"props": {
"blockClass": "drawer-header"
}
},
"menu#drawer": {
@ -125,9 +176,16 @@
"props": {
"title": "Logo",
"href": "/",
"url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
"width": "77.5",
"height": "27.5"
"url": "https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png",
"width": "140",
"height": "33",
"blockClass": "logo-mobile-header"
}
},
"search-bar#mobile": {
"props": {
"blockClass": "search-mobile-header"
}
}
}

30
store/blocks/pdp/product.jsonc
View File

@ -49,6 +49,7 @@
"product-images#description": {
"props":{
"displayMode": "first-image",
"zoomMode": "disabled",
"blockClass": "image-description-pdp"
}
},
@ -188,18 +189,27 @@
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
"mobile": 2
}
}
},
"html#related-products-testid": {
"props": {
"testId": "vtex-product-summary"
},
"children": [
"rich-text#title-related-products",
"list-context.product-list#related-products-pdp"
]
},
"flex-layout.row#related-products-pdp":{
"props": {
"blockClass": "container-related-products-pdp"
},
"children": [
"rich-text#title-related-products",
"list-context.product-list#related-products-pdp"
"html#related-products-testid"
]
},
@ -302,7 +312,7 @@
"flex-layout.row#product-name",
"product-identifier.product",
"flex-layout.row#selling-price",
"installments",
"product-installments#m3",
"html#descont-pix",
"html#sku-selector",
"flex-layout.row#quantity-and-buy-button",
@ -311,6 +321,18 @@
]
},
"product-installments#m3": {
"props": {
"markers": ["discount"],
"installmentOptionsFilter": {
"paymentSystemName": "Mastercard",
"installmentsQuantity": 4
},
"blockClass": "m3-custom-installments",
"message": "{installmentsNumber} x <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
}
},
"html#descont-pix":{
"props": {
"testId": "pix-price"

3
store/interfaces.json
View File

@ -2,9 +2,6 @@
"example-component": {
"component": "Example"
},
"installments": {
"component": "Installments"
},
"descont-pix": {
"component": "DescontPix"
},

6
styles/configs/style.json
View File

@ -4,14 +4,14 @@
],
"spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
"customMedia": [
{ "s": 20 },
{ "s": 48 },
{ "ns": {
"value": 40,
"value": 48,
"minWidth": true
}
},
{ "m": {
"value": 40,
"value": 48,
"minWidth": true
}
},

39
styles/css/vtex.flex-layout.css
View File

@ -8,6 +8,45 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.flexRowContent--main-header {
padding: 24.5px 40px !important;
justify-content: space-between;
}
.flexRowContent--main-header .flexCol--logo-desktop-m3academy {
width: 44.8717%;
}
.flexRowContent--main-header .flexCol--logo-desktop-m3academy :global(.vtex-store-components-3-x-logoContainer) {
max-width: 100%;
max-height: 100%;
min-width: auto;
padding: 0;
}
.flexRowContent--main-header-mobile {
justify-content: space-between;
}
.flexRowContent--mobile-header-col {
padding: 32px 40px;
flex-direction: column;
row-gap: 8px;
}
.flexRowContent--mobile-header-col .stretchChildrenWidth {
width: 100% !important;
}
.flexRowContent--mobile-header-col :global(.vtex-store-components-3-x-searchBarContainer) {
max-width: 100%;
}
.flexRowContent--login-and-cart-container {
gap: 40px;
}
@media screen and (min-width: 1920px) {
.flexRowContent--main-header {
padding: 24.5px 360px !important;
}
}
.flexRow--container-product-main {
padding: 0 40px;
}

32
styles/css/vtex.login.css Normal file
View File

@ -0,0 +1,32 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.container {
height: min-content;
align-self: flex-end;
padding: 3px 0px;
}
.container :global(.vtex-button) {
border: 0;
}
.container :global(.vtex-button):hover {
background: transparent;
}
.container :global(.vtex-button) :global(.vtex-button__label) {
padding: 0 !important;
padding-left: 4px !important;
}
.label {
font-size: 0;
padding: 0;
}
.label::after {
content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
}

25
styles/css/vtex.menu.css Normal file
View File

@ -0,0 +1,25 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
:global(.vtex-menu-2-x-styledLink) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.1em;
text-transform: uppercase;
color: #929292;
}
:global(.vtex-menu-2-x-styledLinkContainer) {
margin: 0;
}
:global(.vtex-menu-2-x-menuContainer) {
gap: 15px;
}

31
styles/css/vtex.minicart.css Normal file
View File

@ -0,0 +1,31 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.minicartContainer {
align-self: flex-end;
padding: 3px 0;
}
.minicartContainer .openIconContainer {
padding: 0;
}
.minicartContainer .openIconContainer :global(.vtex-minicart-2-x-cartIcon) {
display: none;
}
.minicartContainer .openIconContainer .minicartIconContainer::after {
content: url("https://agenciamagma.vteximg.com.br/arquivos/cartChallegeVtexT4.svg");
}
.minicartContainer .openIconContainer :global(.vtex-button) {
border: 0;
}
.minicartContainer .openIconContainer :global(.vtex-button):hover {
background: transparent;
}
.minicartContainer .openIconContainer :global(.vtex-button) :global(.vtex-button__label) {
padding: 0 !important;
}

13
styles/css/vtex.product-price.css
View File

@ -20,3 +20,16 @@
line-height: 22px;
color: #929292;
}
.installments--m3-custom-installments .installments-discount--m3-custom-installments {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installments--m3-custom-installments .currencyContainer--m3-custom-installments {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}

25
styles/css/vtex.rich-text.css
View File

@ -7,6 +7,31 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.container--text-top-menu-descont {
justify-content: center;
background-color: #000000;
}
.paragraph--text-top-menu-descont {
display: flex;
margin: 0;
padding: 10px 0;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
}
.paragraph--text-top-menu-descont::after {
content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightWhiteChalengeVtex.svg");
margin-left: 54px;
height: 14px;
}
.paragraph--text-top-menu-descont::before {
content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftWhiteChalengeVtex.svg");
margin-right: 54px;
height: 14px;
}
.container--title-related-products {
justify-content: center;
margin-top: 16px;

16
styles/css/vtex.sticky-layout.css
View File

@ -0,0 +1,16 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.wrapper--sticky-header {
background-color: #ffffff !important;
}
.wrapper--stuck .container {
position: relative !important;
}

45
styles/css/vtex.store-components.css
View File

@ -8,6 +8,43 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.searchBarContainer {
padding: 0;
align-self: center;
}
.searchBarContainer :global(.vtex-input-prefix__group) {
display: flex;
flex-direction: row-reverse;
border: 0;
border-radius: 0;
border-bottom: 1px solid #AEAEAE;
height: auto;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-weight: 300;
font-size: 12px;
line-height: 16px;
color: #AEAEAE;
border: 0;
padding: 0;
background: transparent;
padding-bottom: 8px;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
padding: 0;
padding-bottom: 8px;
background: transparent;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchBarIcon--search) {
padding-right: 12px;
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchBarIcon--search)::after {
content: url("https://agenciamagma.vteximg.com.br/arquivos/searchChallengeVtexT4.svg");
}
.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchIcon) {
display: none;
}
.newsletter {
background: red;
}
@ -364,3 +401,11 @@
display: block !important;
}
}
@media screen and (max-width: 416px) {
.shippingTable {
width: 100%;
}
.shippingTable .shippingTableBody .shippingTableRow {
align-items: center;
}
}

10
styles/css/vtex-store-components-3.css → styles/css/vtex.store-drawer.css
View File

@ -7,8 +7,12 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.container {
margin: 0;
.openIconContainer {
padding: 0;
max-width: max-content;
}
.openIconContainer .menuIcon {
display: none;
}
.openIconContainer::after {
content: url("https://agenciamagma.vteximg.com.br/arquivos/drawerChallegeVtexT4.svg");
}

44
styles/sass/pages/header/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,44 @@
.flexRowContent--main-header{
padding: 24.5px 40px !important;
justify-content: space-between;
.flexCol--logo-desktop-m3academy{
width: 44.8717%;
:global(.vtex-store-components-3-x-logoContainer){
max-width: 100%;
max-height: 100%;
min-width: auto;
padding: 0;
}
}
}
.flexRowContent--main-header-mobile{
justify-content: space-between;
}
.flexRowContent--mobile-header-col{
padding: 32px 40px;
flex-direction: column;
row-gap: 8px;
.stretchChildrenWidth{
width: 100% !important;
}
:global(.vtex-store-components-3-x-searchBarContainer){
max-width: 100%;
}
}
.flexRowContent--login-and-cart-container{
gap: 40px;
}
@media screen and (min-width: 1920px) {
.flexRowContent--main-header{
padding: 24.5px 360px !important;
}
}

27
styles/sass/pages/header/vtex.login.scss Normal file
View File

@ -0,0 +1,27 @@
.container{
height: min-content;
align-self: flex-end;
padding: 3px 0px;
:global(.vtex-button){
border: 0;
&:hover{
background: transparent;
}
:global(.vtex-button__label){
padding: 0 !important;
padding-left: 4px !important;
}
}
}
.label{
font-size: 0;
padding: 0;
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
}
}

17
styles/sass/pages/header/vtex.menu.scss Normal file
View File

@ -0,0 +1,17 @@
:global(.vtex-menu-2-x-styledLink){
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.1em;
text-transform: uppercase;
color: #929292;
}
:global(.vtex-menu-2-x-styledLinkContainer){
margin: 0;
}
:global(.vtex-menu-2-x-menuContainer){
gap: 15px;
}

29
styles/sass/pages/header/vtex.minicart.scss Normal file
View File

@ -0,0 +1,29 @@
.minicartContainer{
align-self: flex-end;
padding: 3px 0;
.openIconContainer{
padding: 0;
:global(.vtex-minicart-2-x-cartIcon){
display: none;
}
.minicartIconContainer{
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/cartChallegeVtexT4.svg");
}
}
:global(.vtex-button){
border: 0;
&:hover{
background: transparent;
}
:global(.vtex-button__label){
padding: 0 !important;
}
}
}
}

29
styles/sass/pages/header/vtex.rich-text.scss Normal file
View File

@ -0,0 +1,29 @@
.container--text-top-menu-descont{
justify-content: center;
background-color: #000000;
}
.paragraph--text-top-menu-descont{
display: flex;
margin: 0;
padding: 10px 0;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightWhiteChalengeVtex.svg");
margin-left: 54px;
height: 14px;
}
&::before{
content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftWhiteChalengeVtex.svg");
margin-right: 54px;
height: 14px;
}
}

9
styles/sass/pages/header/vtex.sticky-layout.scss Normal file
View File

@ -0,0 +1,9 @@
.wrapper--sticky-header {
background-color: #ffffff !important;
}
.wrapper--stuck{
.container{
position: relative !important;
}
}

46
styles/sass/pages/header/vtex.store-components.scss Normal file
View File

@ -0,0 +1,46 @@
.searchBarContainer{
padding: 0;
align-self: center;
:global(.vtex-input-prefix__group){
display: flex;
flex-direction: row-reverse;
border: 0;
border-radius: 0;
border-bottom: 1px solid #AEAEAE;
height: auto;
:global(.vtex-styleguide-9-x-input){
font-weight: 300;
font-size: 12px;
line-height: 16px;
color: #AEAEAE;
border: 0;
padding: 0;
background: transparent;
padding-bottom: 8px;
}
:global(.vtex-input__suffix){
padding: 0;
padding-bottom: 8px;
background: transparent;
:global(.vtex-store-components-3-x-searchBarIcon--search){
padding-right: 12px;
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/searchChallengeVtexT4.svg");
}
}
:global(.vtex-store-components-3-x-searchIcon){
display: none;
}
}
}
}

12
styles/sass/pages/header/vtex.store-drawer.scss Normal file
View File

@ -0,0 +1,12 @@
.openIconContainer{
padding: 0;
.menuIcon{
display: none;
}
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/drawerChallegeVtexT4.svg");
}
}

16
styles/sass/pages/product/vtex.product-price.scss
View File

@ -11,3 +11,19 @@
line-height: 22px;
color: #929292;
}
.installments--m3-custom-installments{
.installments-discount--m3-custom-installments{
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.currencyContainer--m3-custom-installments{
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}
}

6
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -68,9 +68,5 @@
right: -20px;
}
}
// .sliderTrack--container-slider-related-products-pdp{
// width: 700% !important;
// }
}

11
styles/sass/pages/product/vtex.store-components.scss
View File

@ -425,3 +425,14 @@
display: block !important;
}
}
@media screen and (max-width: 416px) {
.shippingTable {
width: 100%;
.shippingTableBody{
.shippingTableRow{
align-items: center;
}
}
}
}