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

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

View File

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

View File

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

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>
);
}

View File

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

View File

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

View File

@ -49,6 +49,7 @@
"product-images#description": { "product-images#description": {
"props":{ "props":{
"displayMode": "first-image", "displayMode": "first-image",
"zoomMode": "disabled",
"blockClass": "image-description-pdp" "blockClass": "image-description-pdp"
} }
}, },
@ -188,18 +189,27 @@
"itemsPerPage": { "itemsPerPage": {
"desktop": 4, "desktop": 4,
"tablet": 3, "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":{ "flex-layout.row#related-products-pdp":{
"props": { "props": {
"blockClass": "container-related-products-pdp" "blockClass": "container-related-products-pdp"
}, },
"children": [ "children": [
"rich-text#title-related-products", "html#related-products-testid"
"list-context.product-list#related-products-pdp"
] ]
}, },
@ -302,7 +312,7 @@
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product", "product-identifier.product",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"installments", "product-installments#m3",
"html#descont-pix", "html#descont-pix",
"html#sku-selector", "html#sku-selector",
"flex-layout.row#quantity-and-buy-button", "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":{ "html#descont-pix":{
"props": { "props": {
"testId": "pix-price" "testId": "pix-price"

View File

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

View File

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

View File

@ -8,6 +8,45 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* 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 { .flexRow--container-product-main {
padding: 0 40px; 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;
}

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;
}

View File

@ -20,3 +20,16 @@
line-height: 22px; line-height: 22px;
color: #929292; 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;
}

View File

@ -7,6 +7,31 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* 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 { .container--title-related-products {
justify-content: center; justify-content: center;
margin-top: 16px; margin-top: 16px;

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;
}

View File

@ -8,6 +8,43 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* 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 { .newsletter {
background: red; background: red;
} }
@ -364,3 +401,11 @@
display: block !important; display: block !important;
} }
} }
@media screen and (max-width: 416px) {
.shippingTable {
width: 100%;
}
.shippingTable .shippingTableBody .shippingTableRow {
align-items: center;
}
}

View File

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

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;
}
}

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");
}
}

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;
}

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;
}
}
}
}

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;
}
}

View File

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

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;
}
}
}
}

View File

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

View File

@ -11,3 +11,19 @@
line-height: 22px; line-height: 22px;
color: #929292; 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;
}
}

View File

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

View File

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