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

feat: adiciona testeId em blocos e responsividade na pagina de produto

Browse Source
This commit is contained in:
Thiago Bronisio 2023-02-01 01:45:09 -03:00
parent 18b7d2dbca
commit 753c9494fa
15 changed files with 313 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
react/components/Html/styles.css
View File

@ -1,6 +1,7 @@
/*
CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO
*/
[class*="html--buy-button"] :global(.vtex-button) {
min-height: 49px;
padding: 12px 64px;
@ -32,6 +33,11 @@
}
}
[class*="html--product-quantity"] {
width: 128px;
margin-right: 10px;
}
/*
DESCRIÇÃO DO PRODUTO SELECIONADO
*/
@ -47,7 +53,7 @@
[class*="html--container-description"] {
margin: 32px 32px 16px 32px;
margin: 32px 32px 0px 32px;
}
@media(max-width: 1024px){
[class*="html--container-description"] {
@ -63,14 +69,11 @@
margin-bottom: 16px;
position: relative;
width: 53.75%;
padding: 0 40px;
}
@media(max-width: 1024px){
[class*="html--container-form-input"] {
display: flex;
padding: 0 40px;
margin-bottom: 32px;
position: relative;
width: 100%;
}
}

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

@ -5,7 +5,7 @@
"condition-layout.product#availability",
"tab-layout#description",
"list-context.product-list#prateleira",
"newsletter-form#container-newsletter"
"flex-layout.row#newsletter-container"
]
},
@ -24,6 +24,7 @@
/*
IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO
*/
"condition-layout.product#availability": {
"props": {
"blockClass": "availability",
@ -72,8 +73,16 @@
}
},
"flex-layout.row#product-image": {
"children": ["html#product-images"]
},
"html#product-images": {
"props": {
"testId": "product-images"
},
"children": ["product-images"]
},
"product-images": {
"props": {
"thumbnailsOrientation": "horizontal",
@ -112,7 +121,21 @@
"testId": "product-images",
"blockClass": "image-description"
},
"children": ["image#product"]
"children": ["html#product-image"]
},
"html#product-image":{
"props": {
"testId": "product-images"
},
"children": ["product-images#description"]
},
"product-images#description":{
"props": {
"blockClass": "description",
"displayMode": "first-image"
}
},
"image#product": {
@ -220,19 +243,45 @@
*/
"list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf#prateleira"],
"children": ["rich-text#prateleira","slider-layout#prateleira"]
"children": ["rich-text#title-prateleira","slider-layout#prateleira"]
},
"product-summary.shelf#prateleira": {
"children": ["html#product-summary"]
},
"html#product-summary": {
"props":{
"testId": "vtex-product-summary",
"blockClass": "product-summary"
},
"children": [
"stack-layout#prodsum",
"product-summary-name",
"product-list-price",
"product-selling-price"
"product-summary-name#name-prateleira",
"product-list-price#promotion-prateleira",
"product-selling-price#price-prateleira"
]
},
"rich-text#prateleira": {
"product-summary-name#name-prateleira": {
"props": {
"blockClass": "name-prateleira"
}
},
"product-list-price#promotion-prateleira":{
"props": {
"blockClass": "promotion-prateleira"
}
},
"product-selling-price#price-prateleira":{
"props": {
"blockClass": "price-prateleira"
}
},
"rich-text#title-prateleira": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
@ -246,7 +295,7 @@
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 1
"phone": 2
},
"infinite": true,
"fullWidth": false,
@ -257,19 +306,22 @@
/*
NEWSLETTER
*/
"newsletter-form#container-newsletter": {
"props": {
"blockClass": "container-newsletter"
},
"children": [
"rich-text#subscriber-newsletter",
"rich-text#offer-newsletter",
"html#container-form-input"
]
"flex-layout.row#newsletter-container":{
"props":{
"blockClass": "newsletter-container"
},
"children": ["flex-layout.row#text-newsletter","newsletter-form#container-newsletter"]
},
"rich-text#subscriber-newsletter": {
"flex-layout.row#text-newsletter":{
"props": {
"blockClass": "text-newsletter"
},
"children": ["rich-text#newsletter-title","rich-text#offer-newsletter" ]
},
"rich-text#newsletter-title": {
"props": {
"blockClass": "subscriber-newsletter",
"textAlignment": "center",
@ -286,6 +338,16 @@
"text": "Receba ofertas e novidades por e-mail"
}
},
"newsletter-form#container-newsletter": {
"props": {
"blockClass": "container-newsletter"
},
"children": [
"html#container-form-input"
]
},
"html#container-form-input": {
"props": {
"blockClass": "container-form-input"
@ -318,9 +380,9 @@
"product-identifier.product",
"flex-layout.row#selling-price",
"product-installments#parcelaProduct",
"pix-discount",
"html#pix-discount",
"availability-subscriber",
"sku-selector",
"html#sku-selector",
"html#buy-button",
"shipping-simulator"
]
@ -342,6 +404,20 @@
}
},
"html#pix-discount":{
"props": {
"testId": "pix-price"
},
"children": ["pix-discount"]
},
"html#sku-selector":{
"props": {
"testId": "sku-selector"
},
"children": ["sku-selector"]
},
"sku-selector": {
"props": {
"blockClass": "sku-selector",
@ -358,7 +434,15 @@
"testId": "buy-button",
"blockClass": "buy-button"
},
"children": ["product-quantity","add-to-cart-button"]
"children": ["html#product-quantity","add-to-cart-button"]
},
"html#product-quantity":{
"props": {
"testId": "product-quantity",
"blockClass": "product-quantity"
},
"children": ["product-quantity"]
},
/*

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

@ -91,4 +91,28 @@
.flexRowContent--product-description .stretchChildrenWidth {
width: 100% !important;
}
}
/* NEWSLETTER */
.flexRow--newsletter-container {
display: flex;
align-items: center;
width: 100%;
background-color: #000000;
}
.flexRow--newsletter-container .flexRowContent--newsletter-container {
display: flex;
flex-direction: column;
}
.flexRow--newsletter-container .flexRowContent--newsletter-container .stretchChildrenWidth {
width: 100% !important;
}
.flexRow--newsletter-container .flexRowContent--newsletter-container .flexRowContent--text-newsletter {
display: flex;
flex-direction: column;
}
/* CORREÇÃO BUG SCROLL DA PAG */
:global(.vtex-store-footer) {
margin: 0 !important;
}

2
styles/css/vtex.product-quantity.css
View File

@ -10,7 +10,7 @@
/* INPUT CONTADOR DE PRODUTO */
.quantitySelectorContainer {
height: 49px;
width: 149px;
width: 100%;
margin: 0 10px 0 0;
}
@media only screen and (max-width: 768px) {

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

@ -9,6 +9,7 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
@ -28,11 +29,10 @@
margin: 0;
}
}
.productImagesGallerySlide .productImage .productImageTag {
width: 100%;
.productImagesGallerySlide .productImage .productImageTag--main {
max-height: 100% !important;
object-fit: contain;
}
/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
.carouselGaleryThumbs {
margin: 16px 0;
@ -223,6 +223,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
line-height: 28px;
color: #929292;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input__error) {
position: absolute;
bottom: 40px;
right: 0;
margin: 0;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
width: 100%;
margin-bottom: 16px;
@ -237,6 +243,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
content: "AVISE-ME";
@ -270,26 +277,32 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
display: block;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
position: relative;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before {
content: "CALCULAR FRETE";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
width: 280px;
height: 49px;
border-radius: 0;
}
@media only screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
width: 100%;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
position: absolute;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
margin-top: 25px;
@ -437,8 +450,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
}
/* IMAGEM DA DESCRIÇÃO DO PRODUTO */
.imageElement {
width: 100%;
.productImageTag--description {
max-height: 100% !important;
}
/* DESCRIÇÃO DO PRODUTO */
@ -460,7 +473,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
}
@media only screen and (max-width: 1024px) {
.productDescriptionContainer .productDescriptionTitle {
margin-top: 16px;
font-size: 20px;
}
}
@media only screen and (min-width: 1921px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 32px;
}
}
.productDescriptionContainer .productDescriptionText {
@ -468,4 +486,16 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media only screen and (max-width: 1024px) {
.productDescriptionContainer .productDescriptionText {
font-size: 14px;
line-height: 19px;
}
}
@media only screen and (min-width: 1921px) {
.productDescriptionContainer .productDescriptionText {
font-size: 18px;
line-height: 25px;
}
}

25
styles/css/vtex.store-footer.css
View File

@ -1,11 +1,14 @@
.row--menu-row {
padding-right: 24px;
}
.row--menu-row .rowContainer {
align-items: flex-start;
}
.row--payment-methods {
padding-top: 16px;
}
@charset "UTF-8";
/*
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 */
/* CORREÇÃO BUG DE SCROLL NA PAGINA */
.socialNetworksContainer {
margin: 0 !important;
}

10
styles/css/vtex.store-newsletter.css
View File

@ -13,7 +13,6 @@
justify-content: center;
align-items: center;
background-color: #000000;
margin-top: 64px;
position: relative;
}
@ -35,9 +34,6 @@
}
@media only screen and (max-width: 768px) {
.emailInputContainer :global(.vtex-input) :global(.vtex-input__error) {
width: 100%;
top: 32px;
left: 18px;
font-size: 12px;
line-height: 16px;
font-weight: 400;
@ -91,4 +87,10 @@
padding: 0 16px 13px 16px;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.defaultSuccessMessage {
color: white;
margin: 0 0 16px 0;
text-align: center;
}

20
styles/css/vtex.tab-layout.css
View File

@ -9,10 +9,11 @@
/* Grid breakpoints */
.container--description {
padding: 0 40px;
margin: 16px 0;
}
.container--description .listContainer {
display: flex;
padding: 0 80px;
padding: 0 64px;
border-bottom: 1px solid #b9b9b9;
justify-content: space-between;
}
@ -37,6 +38,11 @@
margin-bottom: 16px;
}
}
@media only screen and (min-width: 1921px) {
.container--description .listContainer .listItem {
width: 142px;
}
}
.container--description .listContainer .listItem :global(.vtex-button) {
background-color: transparent;
border: none;
@ -58,6 +64,13 @@
text-transform: capitalize;
border-bottom: 2px solid transparent;
}
@media only screen and (min-width: 1921px) {
.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-size: 24px;
line-height: 38px;
border-bottom: 3px solid transparent;
}
}
.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover {
color: #000000;
border-bottom: 2px solid #000000;
@ -76,6 +89,11 @@
border-bottom: none;
}
}
@media only screen and (min-width: 1921px) {
.container--description .listContainer .listItemActive {
border-bottom: 3px solid #000000;
}
}
.container--description .listContainer .listItemActive :global(.vtex-button) {
color: #000000;
}

4
styles/sass/pages/footer/vtex.store-footer.scss Normal file
View File

@ -0,0 +1,4 @@
/* CORREÇÃO BUG DE SCROLL NA PAGINA */
.socialNetworksContainer {
margin: 0 !important;
}

24
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -71,3 +71,27 @@
}
}
}
/* NEWSLETTER */
.flexRow--newsletter-container {
display: flex;
align-items: center;
width: 100%;
background-color: $color-black-padrao;
.flexRowContent--newsletter-container {
display: flex;
flex-direction: column;
.stretchChildrenWidth {
width: 100% !important;
}
.flexRowContent--text-newsletter {
display: flex;
flex-direction: column;
}
}
}
/* CORREÇÃO BUG SCROLL DA PAG */
:global(.vtex-store-footer) {
margin: 0 !important;
}

2
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -1,7 +1,7 @@
/* INPUT CONTADOR DE PRODUTO */
.quantitySelectorContainer {
height: 49px;
width: 149px;
width: 100%;
margin: 0 10px 0 0;
@include mq(sm, max) {
margin: 0 0 10px 0;

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

@ -1,4 +1,5 @@
.container {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
@ -14,12 +15,8 @@
@include mq(md, max) {
margin: 0;
}
.productImageTag {
width: 100%;
.productImageTag--main {
max-height: 100% !important;
object-fit: contain;
@include mq(sm, max) {
}
}
}
}
@ -228,6 +225,12 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
color: $color-gray-6;
}
}
:global(.vtex-input__error) {
position: absolute;
bottom: 40px;
right: 0;
margin: 0;
}
}
.submit {
width: 100%;
@ -242,6 +245,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&::before {
content: "AVISE-ME";
color: $color-white;
@ -273,24 +277,31 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
@include mq(sm, max) {
display: block;
}
:global(.vtex-input__label) {
font-size: 0;
&::before {
content: "CALCULAR FRETE";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
}
}
:global(.vtex-input-prefix__group) {
width: 280px;
height: 49px;
border-radius: 0;
@include mq(sm, max) {
width: 100%;
:global(.vtex-input) {
position: relative;
:global(.vtex-input__label) {
font-size: 0;
&::before {
content: "CALCULAR FRETE";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray-6;
}
}
:global(.vtex-input-prefix__group) {
width: 280px;
height: 49px;
border-radius: 0;
@include mq(sm, max) {
width: 100%;
}
}
:global(.vtex-input__error) {
position: absolute;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
margin-top: 25px;
@ -439,8 +450,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
}
/* IMAGEM DA DESCRIÇÃO DO PRODUTO */
.imageElement {
width: 100%;
.productImageTag--description {
max-height: 100% !important;
}
/* DESCRIÇÃO DO PRODUTO */
@ -457,7 +468,10 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
margin-bottom: 8px;
color: $color-gray13;
@include mq(md, max) {
margin-top: 16px;
font-size: 20px;
}
@include mq(xl, min) {
font-size: 32px;
}
}
.productDescriptionText {
@ -465,5 +479,13 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
font-size: 16px;
line-height: 22px;
color: $color-gray14;
@include mq(md, max) {
font-size: 14px;
line-height: 19px;
}
@include mq(xl, min) {
font-size: 18px;
line-height: 25px;
}
}
}

10
styles/sass/pages/product/vtex.store-newsletter.scss
View File

@ -4,7 +4,6 @@
justify-content: center;
align-items: center;
background-color: $color-black-padrao;
margin-top: 64px;
position: relative;
}
@ -22,9 +21,6 @@
right: 0;
margin-right: 16px;
@include mq(sm, max) {
width: 100%;
top: 32px;
left: 18px;
font-size: 12px;
line-height: 16px;
font-weight: 400;
@ -75,3 +71,9 @@
}
}
}
.defaultSuccessMessage {
color: white;
margin: 0 0 16px 0;
text-align: center;
}

14
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -1,8 +1,9 @@
.container--description {
padding: 0 40px;
margin: 16px 0;
.listContainer {
display: flex;
padding: 0 80px;
padding: 0 64px;
border-bottom: 1px solid $color-gray11;
justify-content: space-between;
@include mq(md, max) {
@ -21,6 +22,9 @@
width: 100%;
margin-bottom: 16px;
}
@include mq(xl, min) {
width: 142px;
}
:global(.vtex-button) {
background-color: transparent;
@ -40,6 +44,11 @@
line-height: 38px;
text-transform: capitalize;
border-bottom: 2px solid transparent;
@include mq(xl, min) {
font-size: 24px;
line-height: 38px;
border-bottom: 3px solid transparent;
}
&:hover {
color: $color-black-padrao;
border-bottom: 2px solid $color-black-padrao;
@ -57,6 +66,9 @@
@include mq(md, max) {
border-bottom: none;
}
@include mq(xl, min) {
border-bottom: 3px solid $color-black-padrao;
}
:global(.vtex-button) {
color: $color-black-padrao;
}

4
styles/sass/utils/_vars.scss
View File

@ -29,8 +29,8 @@ $grid-breakpoints: (
cstm: 400,
sm: 769px,
md: 1025px,
lg: 1921px,
xl: 1922px,
lg: 1920px,
xl: 1921px,
) !default;
$z-index: (