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

feat: adiciona testID 3 a 14

Browse Source
This commit is contained in:
Vitor Soares 2023-02-09 00:42:27 -03:00
parent 342774490f
commit e049d978c5
12 changed files with 366 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,13 +9,17 @@
background: black;
border: none;
border-radius: 0;
width: 99.432%;
width: 100%;
}
[class*="description-container"] {
display: flex;
}
[class*="add-to-cart-button"] {
width: 100%;
}
@media only screen and (max-width: 1024px) {
[class*="html--buy-button"] :global(.vtex-button) {
width: 100%;
@ -35,4 +39,8 @@
[class*="html--buy-button"] :global(.vtex-button) {
height: 74px;
}
[class*="html--shipping-simulator"] {
padding-bottom: 8px;
}
}

10
store/blocks/minicart.jsonc
View File

@ -7,6 +7,16 @@
}
},
"html#add-to-cart-button": {
"props": {
"testId": "add-to-cart-button",
"blockClass": "add-to-cart-button"
},
"children": [
"add-to-cart-button"
]
},
"minicart.v2": {
"props": {
"customPixelEventId": "add-to-cart-button"

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

@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout#product",
"html#tab-layout",
// "html#description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
@ -89,6 +89,7 @@
},
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
@ -101,25 +102,27 @@
"thumbnailsOrientation": "horizontal"
}
},
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#product-name",
"html#identifier",
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments",
"Pix",
// "flex-layout.row#selling-price",
"html#selling-price",
"html#product-installments",
"html#pix",
// "product-separator",
"sku-selector",
"html#sku-selector",
"html#buy-button",
// "flex-layout.row#buy-button",
// "product-gifts",
"availability-subscriber",
"shipping-simulator"
"html#shipping-simulator"
]
},
@ -127,19 +130,57 @@
"props": {
"blockClass": "buy-button"
},
"children": ["product-quantity", "add-to-cart-button"]
"children": ["html#product-quantity", "html#add-to-cart-button"]
},
"html#product-name": {
"html#identifier": {
"props": {
"blockClass": "product-name"
"blockClass": "product-name",
"testId": "product-code"
},
"children": [
"product-identifier.product"
]
},
"html#selling-price": {
"props": {
"testId": "product-price"
},
"children": [
"product-selling-price"
]
},
"html#pix": {
"props": {
"testId": "pix-price"
},
"children": [
"Pix"
]
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator",
"blockClass": "shipping-simulator"
},
"children": [
"shipping-simulator"
]
},
// DESCRIÇÃO DE PRODUTOS
"html#tab-layout": {
"props": {
"testId": "product-description"
},
"children": [
"tab-layout#product"
]
},
"tab-layout#product": {
"props": {
"blockClass": "structure",
@ -274,12 +315,13 @@
"children": ["product-images#imageDescription", "product-description"]
},
// "flex-layout.row#quantity-buy-button": {
// "props": {
// "blockClass": "quantity-buy-button"
// },
// "children": [
// "product-quantity",
// "html#product-quantity",
// "flex-layout.row#buy-button"
// ]
// },
@ -287,7 +329,7 @@
// CARROSSEL DE PRODUTOS
"list-context.product-list#carousel-list": {
"blocks": ["product-summary.shelf#carousel-shelf"],
"children": ["slider-layout#carousel"]
"children": ["html#slider"]
},
"product-summary.shelf#carousel-shelf": {
@ -299,12 +341,33 @@
]
},
// "html#shelf": {
// "props": {
// "testId": "vtex-product-summary"
// },
// "children": [
// "product-summary-image",
// "product-summary-name",
// "product-list-price",
// "product-selling-price"
// ]
// },
"html#slider": {
"props": {
"testId": "product-summary-list"
},
"children": [
"slider-layout#carousel"
]
},
"slider-layout#carousel": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 1
"phone": 2
},
"infinite": true,
"showNavigationArrows": "always",
@ -313,19 +376,23 @@
},
"flex-layout.row#product-name": {
"html#product-name": {
"props": {
"marginBottom": 3
"testId": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
"sku-selector": {
"html#sku-selector": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true,
"blockClass": "sku-size"
}
"blockClass": "sku-size",
"testId": "sku-selector"
},
"children": [
"sku-selector"
]
},
"flex-layout.row#buy-button": {
@ -335,7 +402,7 @@
"width": "73%",
"blockClass": "buy-button-row"
},
"children": ["product-quantity", "add-to-cart-button"]
"children": ["html#product-quantity", "html#add-to-cart-button"]
},
"flex-layout.row#product-availability": {
@ -358,10 +425,10 @@
"blockClass": "info-availability"
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#product-name",
"html#identifier",
"flex-layout.row#availability",
"sku-selector"
"html#sku-selector"
]
},
"flex-layout.row#availability": {
@ -382,6 +449,15 @@
}
},
"html#product-quantity": {
"props": {
"testId": "product-quantity"
},
"children": [
"product-quantity"
]
},
"product-quantity": {
"props": {
"size": "large",
@ -390,11 +466,15 @@
}
},
"product-installments": {
"html#product-installments": {
"props": {
"installmentsCriteria": "max-quality-without-interest",
"blockClass": "fees"
}
"blockClass": "fees",
"testId": "product-installments"
},
"children": [
"product-installments"
]
},
"newsletter": {

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

@ -18,12 +18,15 @@
}
.stretchChildrenWidth {
padding: 0 !important;
margin: 0;
width: 100% !important;
max-width: 664px !important;
}
@media only screen and (max-width: 1025px) {
.stretchChildrenWidth {
max-width: unset !important;
width: 100% !important;
padding: 0 !important;
}
}
@ -49,8 +52,12 @@
}
}
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
gap: 32px;
}
@media only screen and (max-width: 1025px) {
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
flex-direction: column;
gap: 0;
}
}

6
styles/css/vtex.product-summary.css
View File

@ -22,6 +22,12 @@
max-width: 291.2px;
}
}
@media only screen and (max-width: 767px) {
.imageNormal {
height: 124.8px;
width: 100%;
}
}
.brandName {
font-weight: 400;

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

@ -70,7 +70,7 @@
}
.productImage .productImageTag {
width: 103% !important;
width: 100% !important;
height: 100%;
max-height: 664px !important;
object-fit: contain;
@ -83,12 +83,30 @@
}
}
.productImagesGallerySlide {
max-width: 664px !important;
width: 100% !important;
}
@media only screen and (max-width: 1025px) {
.productImagesGallerySlide {
max-width: none !important;
width: none !important;
}
}
.carouselGaleryThumbs {
display: block;
margin-top: 16px;
margin-bottom: 16px;
}
@media only screen and (max-width: 1025px) {
.carouselGaleryThumbs {
margin-bottom: 32px;
}
}
.productImagesThumb {
height: 90px !important;
width: unset !important;
margin-bottom: 0 !important;
margin-right: 16px;
@ -171,6 +189,9 @@
bottom: 3px;
transform: rotateY(180deg);
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemImageValue {
max-width: 100%;
}
.skuSelectorContainer .skuSelectorItem--selected .skuSelectorItemTextValue {
font-weight: 400;
font-size: 14px;
@ -237,7 +258,15 @@
margin: 0;
}
:global(.vtex-store-components-3-x-skuSelectorSubcontainer) .diagonalCross {
top: 7px;
right: 2px;
left: 1px;
bottom: 6px;
}
.shippingContainer {
position: relative;
display: flex;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
@ -248,6 +277,16 @@
height: 49px;
border-radius: 0;
}
@media only screen and (max-width: 767px) {
.shippingContainer :global(.vtex-input-prefix__group) {
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
display: none;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: relative;
left: 32px;
@ -260,6 +299,15 @@
display: flex;
align-items: center;
}
@media only screen and (max-width: 767px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
margin-top: 0;
left: auto;
right: 0;
bottom: 0;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
font-weight: 400;
font-size: 12px;
@ -282,6 +330,12 @@
background: #000000;
cursor: pointer;
}
@media only screen and (max-width: 767px) {
.shippingContainer :global(.vtex-button) {
min-width: 49px;
right: 0;
}
}
.shippingContainer :global(.vtex-button)::after {
content: "OK";
font-weight: 600;
@ -309,6 +363,8 @@
@media only screen and (max-width: 767px) {
:global(.vtex-address-form__field--small) {
flex-direction: column;
width: 100%;
padding-bottom: 24px;
}
}
@ -326,6 +382,11 @@
display: flex;
flex-direction: row;
}
@media only screen and (max-width: 399px) {
.shippingTable .shippingTableRow {
padding-top: 8px;
}
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
font-weight: 400;
font-size: 14px;
@ -338,6 +399,12 @@
padding-right: 122px;
}
}
@media only screen and (max-width: 399px) {
.shippingTable .shippingTableRow .shippingTableHeadDeliveryName {
width: auto;
margin-right: 32px;
}
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
display: flex;
order: 3;
@ -347,11 +414,23 @@
text-transform: uppercase;
color: #202020;
}
@media only screen and (max-width: 399px) {
.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate {
width: auto;
margin-right: 32px;
}
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice {
display: flex;
order: 2;
font-size: 0;
}
@media only screen and (max-width: 399px) {
.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice {
width: auto;
margin-right: 32px;
}
}
.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after {
content: "FRETE";
font-weight: 400;
@ -398,6 +477,17 @@
.shippingTableBody .shippingTableRadioBtn {
display: none;
}
@media only screen and (max-width: 399px) {
.shippingTableBody .shippingTableCellDeliveryName {
width: 82px;
margin-right: 20px;
}
}
@media only screen and (max-width: 399px) {
.shippingTableBody .shippingTableCellDeliveryPrice {
margin-right: 32px;
}
}
.subscriberContainer .title {
font-size: 0;
@ -431,6 +521,11 @@
gap: 8px;
margin-top: 15px;
}
@media only screen and (max-width: 1025px) {
.subscriberContainer .form .content {
max-width: unset;
}
}
.subscriberContainer .form .content .inputName {
grid-area: nome;
margin-bottom: 0;
@ -511,23 +606,6 @@
}
}
:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
max-width: 632px;
width: 100%;
height: 632px;
}
@media only screen and (max-width: 1025px) {
:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
max-width: unset;
height: 944px;
}
}
@media only screen and (max-width: 767px) {
:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
height: unset;
}
}
.newsletter {
display: flex;
align-items: flex-end;

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

@ -30,19 +30,19 @@
line-height: 32px;
}
}
.container--structure :global(.vtex-store-components-3-x-productImageTag) {
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
width: 100% !important;
max-height: 632px !important;
max-width: 632px !important;
}
@media only screen and (max-width: 1025px) {
.container--structure :global(.vtex-store-components-3-x-productImageTag) {
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
max-width: unset !important;
max-height: 944px !important;
}
}
@media only screen and (max-width: 767px) {
.container--structure :global(.vtex-store-components-3-x-productImageTag) {
.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) {
max-width: unset !important;
max-height: unset !important;
}

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

@ -6,11 +6,14 @@
}
.stretchChildrenWidth {
padding: 0 !important;
margin: 0;
width: 100% !important;
max-width: 664px !important;
@include mq(md, max) {
max-width: unset !important;
width: 100% !important;
padding: 0 !important;
}
}
@ -36,7 +39,10 @@
}
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {
gap: 32px;
@include mq(md, max) {
flex-direction: column;
gap: 0;
}
}

5
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -8,6 +8,11 @@
height: 291.2px;
max-width: 291.2px;
}
@include mq(sm, max) {
height: 124.8px;
width: 100%;
}
}
.brandName {

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

@ -62,7 +62,7 @@
.productImage {
.productImageTag {
width: 103% !important;
width: 100% !important;
height: 100%;
max-height: 664px !important;
object-fit: contain;
@ -78,12 +78,28 @@
}
}
.productImagesGallerySlide {
max-width: 664px !important;
width: 100% !important;
@include mq(md, max) {
max-width: none !important;
width: none !important;
}
}
.carouselGaleryThumbs {
display: block;
margin-top: 16px;
margin-bottom: 16px;
@include mq(md, max) {
margin-bottom: 32px;
}
}
.productImagesThumb {
height: 90px !important;
width: unset !important;
margin-bottom: 0 !important;
margin-right: 16px;
@ -187,6 +203,10 @@
bottom: 3px;
transform: rotateY(180deg);
}
.skuSelectorItemImageValue {
max-width: 100%;
}
}
.skuSelectorItem--selected {
@ -271,8 +291,27 @@
}
}
:global(.vtex-store-components-3-x-skuSelectorSubcontainer) {
.diagonalCross {
top: 7px;
right: 2px;
left: 1px;
bottom: 6px;
}
}
// :global(.vtex-store-components-3-x-skuSelectorItemImage) {
// .diagonalCross {
// top: 8px;
// right: 3px;
// left: 3px;
// bottom: 7px;
// }
// }
// CEP
.shippingContainer {
position: relative;
display: flex;
:global(.vtex-address-form__postalCode) {
@ -283,6 +322,16 @@
width: 280px;
height: 49px;
border-radius: 0;
@include mq(sm, max) {
width: 100%;
}
:global(.vtex-input__suffix) {
@include mq(sm, max) {
display: none;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
@ -299,6 +348,14 @@
display: flex;
align-items: center;
@include mq(sm, max) {
position: absolute;
margin-top: 0;
left: auto;
right: 0;
bottom: 0;
}
:last-child {
font-weight: 400;
font-size: 12px;
@ -326,6 +383,11 @@
background: $black;
cursor: pointer;
@include mq(sm, max) {
min-width: 49px;
right: 0;
}
&::after {
content: "OK";
font-weight: 600;
@ -359,6 +421,8 @@
@include mq(sm, max) {
flex-direction: column;
width: 100%;
padding-bottom: 24px;
}
}
@ -379,6 +443,10 @@
display: flex;
flex-direction: row;
@include mq(xs, max) {
padding-top: 8px;
}
.shippingTableHeadDeliveryName {
font-weight: 400;
font-size: 14px;
@ -390,6 +458,11 @@
@include mq(xl, min) {
padding-right: 122px;
}
@include mq(xs, max) {
width: auto;
margin-right: 32px;
}
}
.shippingTableHeadDeliveryEstimate {
@ -402,6 +475,11 @@
text-transform: uppercase;
color: $black-100;
@include mq(xs, max) {
width: auto;
margin-right: 32px;
}
}
.shippingTableHeadDeliveryPrice {
@ -410,6 +488,11 @@
font-size: 0;
@include mq(xs, max) {
width: auto;
margin-right: 32px;
}
&::after {
content: "FRETE";
@ -469,6 +552,19 @@
.shippingTableRadioBtn {
display: none;
}
.shippingTableCellDeliveryName {
@include mq(xs, max) {
width: 82px;
margin-right: 20px;
}
}
.shippingTableCellDeliveryPrice {
@include mq(xs, max) {
margin-right: 32px;
}
}
}
// PRODUTO INDISPONÍVEL
@ -513,6 +609,10 @@
gap: 8px;
margin-top: 15px;
@include mq(md, max) {
max-width: unset;
}
.inputName {
grid-area: nome;
margin-bottom: 0;
@ -608,20 +708,20 @@
// }
}
:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
max-width: 632px;
width: 100%;
height: 632px;
// :global(.vtex-store-components-3-x-productImagesContainer--first-image) {
// max-width: 632px;
// width: 100%;
// height: 632px;
@include mq(md, max) {
max-width: unset;
height: 944px;
}
// @include mq(md, max) {
// max-width: unset;
// height: 944px;
// }
@include mq(sm, max) {
height: unset;
}
}
// @include mq(sm, max) {
// height: unset;
// }
// }
// NEWSLETTER
.newsletter {

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

@ -18,7 +18,7 @@
}
}
:global(.vtex-store-components-3-x-productImageTag) {
:global(.vtex-store-components-3-x-productImageTag--img-description--main) {
width: 100% !important;
max-height: 632px !important;
max-width: 632px !important;

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

@ -32,8 +32,8 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
xss: 0,
xs: 400px,
sm: 768px,
md: 1026px,
xl: 1920px