diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index ac8a248..8186529 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -4,7 +4,6 @@
"html#pageProduct",
"newsletter"
]
-
},
"html#pageProduct": {
"props": {
@@ -101,10 +100,11 @@
"product-images": {
"props": {
+ "testId":"product-images",
"blockClass": "divImagens",
"aspectRatio": {
"desktop": "auto",
- "phone": "16:9"
+ "phone": "auto"
},
"thumbnailsOrientation": "horizontal",
"displayThumbnailsArrows": false,
@@ -140,6 +140,11 @@
// "share#default"
]
},
+ "pixCustom":{
+ "props":{
+ "testId":"pix-price"
+ }
+ },
"shipping-simulator":{
"props":{
"blockClass":"divCep"
@@ -160,6 +165,7 @@
},
"product-quantity":{
"props":{
+ "testId":"product-quantity",
"blockClass":"divQuantidade",
"size":"regular"
}
@@ -168,7 +174,7 @@
"props":{
"blockClass":"divParcelamente",
"markers": ["discount"],
- "message": " {installmentsNumber}x de {installmentValue} sem juros ",
+ "message": "{installmentsNumber} de {installmentValue} sem juros",
"installmentsCriteria":"max-quantity-without-interest"
}
},
@@ -189,6 +195,7 @@
"sku-selector": {
"props": {
+ "testId":"sku-selector",
"blockClass":"divSku",
"variationsSpacing": 3,
"showValueNameForImageVariation": true
@@ -203,9 +210,14 @@
},
"children": ["add-to-cart-button"]
},
-
+ "add-to-cart-button":{
+ "props":{
+ "testId":"add-to-cart-button"
+ }
+ },
"flex-layout.row#product-availability": {
"props": {
+ "blockClass":"divProductIndisponivel",
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
@@ -225,16 +237,21 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
- "sku-selector",
- "flex-layout.row#availability"
+ "flex-layout.col#availability",
+ "sku-selector"
]
},
- "flex-layout.row#availability": {
+ "flex-layout.col#availability": {
"props": {
"blockClass": "message-availability"
},
"children": ["availability-subscriber"]
},
+ "availability-subscriber":{
+ "props":{
+ "blockClass":"buttonIndisponivel"
+ }
+ },
"share#default": {
"props": {
@@ -380,15 +397,14 @@
}
},
"list-context.product-list#demo": {
- "props":{
- // "category":"112901"
- // "specificationFilters":"(id:112901)"
- },
"blocks": ["product-summary.shelf#demo"],
"children": ["slider-layout#demo-product"]
},
"product-summary.shelf#demo": {
+ "props":{
+ "testId":"vtex-product-summary"
+ },
"children": [
"product-summary-image",
"product-summary-name",
@@ -401,6 +417,7 @@
"slider-layout#demo-product": {
"props": {
+ "testId":"product-summary-list",
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 29bf15a..e6a8cb3 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -25,16 +25,57 @@
}
.flexRowContent {
+ padding: 0;
margin: 0;
}
-.flexRowContent--divProduct {
- margin-top: 16px;
- padding: 0px;
- padding-left: 40px !important;
- margin-bottom: 16px;
+.flexRowContent--divProductIndisponivel {
+ gap: 32px;
+}
+
+.flexColChild--info-availability .flexRow--divNomeProduct {
+ text-align: end;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ text-align: right;
+ color: #575757;
+}
+@media (max-width: 1024px) {
+ .flexColChild--info-availability .flexRow--divNomeProduct {
+ text-align: left;
+ }
+}
+.flexColChild--info-availability :global(.vtex-product-identifier-0-x-product-identifier) {
+ display: flex;
+ justify-content: flex-end;
+ align-items: end;
+ margin: 0;
+ margin-top: 8px;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(146, 146, 146, 0.48);
+ margin-bottom: 24px;
+}
+@media (max-width: 1024px) {
+ .flexColChild--info-availability :global(.vtex-product-identifier-0-x-product-identifier) {
+ display: block;
+ }
+}
+.flexColChild--info-availability .flexCol--message-availability {
+ width: 100%;
+}
+.flexColChild--info-availability .flexCol--message-availability .flexColChild--message-availability {
+ width: 100%;
+}
+
+.flexRowContent--divProduct {
gap: 32px;
- padding-right: 40px !important;
}
@media (max-width: 1024px) {
.flexRowContent--divProduct {
@@ -54,8 +95,20 @@
line-height: 34px;
color: #575757;
}
+@media (max-width: 1024px) {
+ .flexCol--divInfoProduct .flexRow--divNomeProduct {
+ text-align: left;
+ }
+}
.flexCol--divInfoProduct .flexRow--divNomeProductModelo {
text-align: end;
+}
+@media (max-width: 1024px) {
+ .flexCol--divInfoProduct .flexRow--divNomeProductModelo {
+ text-align: left;
+ }
+}
+.flexCol--divInfoProduct .flexRow--divNomeProductModelo :global(.vtex-product-identifier-0-x-product-identifier) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index ba64241..082f9ad 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -27,6 +27,9 @@
.installments--divParcelamente .installmentsNumber--divParcelamente {
font-weight: 700;
}
+.installments--divParcelamente .installmentsNumber--divParcelamente::after {
+ content: "x";
+}
.installments--divParcelamente .installments-discount--divParcelamente {
font-weight: 700;
}
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index e0f5ca1..d1243da 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -9,4 +9,17 @@
/* Grid breakpoints */
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
+}
+
+.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__input) {
+ border-left: 0px;
+ border-right: 0px;
+}
+.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__plus-button) {
+ color: black;
+ background-color: white;
+}
+.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__minus-button) {
+ color: black;
+ background-color: white;
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index c046de5..abb39a2 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -13,7 +13,11 @@
.container {
margin: 0;
- padding: 0;
+ margin-top: 16px !important;
+ padding: 0px !important;
+ padding-left: 40px !important;
+ margin-bottom: 16px !important;
+ padding-right: 40px !important;
max-width: 100%;
}
.container .productImagesContainer--divImagens {
@@ -43,6 +47,11 @@
max-width: 100% !important;
}
}
+@media (max-width: 641px) {
+ .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens {
+ display: block !important;
+ }
+}
.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
margin-right: 16px;
padding: 0px;
@@ -143,6 +152,7 @@
height: 48px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .frameAround--divSku {
+ border: 1px solid #989898;
border-radius: 50%;
width: 48px;
height: 48px;
@@ -190,6 +200,7 @@
height: 40px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku {
+ border: 1px solid #989898;
border-radius: 50%;
width: 40px;
height: 40px;
@@ -205,6 +216,12 @@
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku {
padding: 0 !important;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute {
height: 40px;
@@ -398,4 +415,64 @@
background-color: black;
border: 0;
border-radius: 0;
+}
+
+.subscriberContainer {
+ width: 100%;
+}
+.subscriberContainer .title {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.subscriberContainer .form .content {
+ display: grid;
+ grid-template-areas: "1" "2";
+ justify-content: inherit;
+ gap: 10px;
+ width: 100%;
+ max-width: 100%;
+}
+.subscriberContainer .form .content .inputName {
+ grid-area: 1;
+ margin-right: 0;
+ margin-bottom: 0;
+}
+.subscriberContainer .form .content .inputEmail {
+ grid-area: 1;
+ margin-right: 0;
+ margin-bottom: 0;
+}
+.subscriberContainer .form .content .submit {
+ grid-area: 2;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) {
+ width: 100%;
+ height: 49px;
+ border: 0;
+ background-color: #000000;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button__label) {
+ font-size: 0;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
+ content: "AVISE-ME";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ text-transform: uppercase;
+ color: #ffffff;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 110e471..860f8ea 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,30 +1,69 @@
-
- .stretchChildrenWidth{
- width: 100% !important;
- padding: 0 ;
- @media (max-width: 1024px) {
- padding-right: 0px
- }
+.stretchChildrenWidth {
+ width: 100% !important;
+ padding: 0;
+ @media (max-width: 1024px) {
+ padding-right: 0px;
}
+}
-.flexRowContent--divDescription{
+.flexRowContent--divDescription {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}
-.flexRowContent{
+.flexRowContent {
+ padding: 0;
margin: 0;
}
+.flexRowContent--divProductIndisponivel {
+ gap: 32px;
+}
+.flexColChild--info-availability {
+ .flexRow--divNomeProduct {
+ text-align: end;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ text-align: right;
+ color: #575757;
+ @media (max-width: 1024px) {
+ text-align: left;
+ }
+ }
+ :global(.vtex-product-identifier-0-x-product-identifier) {
+ display: flex;
+ justify-content: flex-end;
+ align-items: end;
+ margin: 0;
+ margin-top: 8px;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(146, 146, 146, 0.48);
+ margin-bottom: 24px
+ }
+ @media (max-width: 1024px) {
+ :global(.vtex-product-identifier-0-x-product-identifier) {
+ display: block;
+ }
+ };
+ .flexCol--message-availability{
+ width: 100%;
+ .flexColChild--message-availability{
+ width: 100%;
+ }
+ }
+
+}
.flexRowContent--divProduct {
- margin-top: 16px;
- padding: 0px;
- padding-left: 40px !important;
- margin-bottom: 16px;
gap: 32px;
- padding-right: 40px !important;
- @media (max-width:1024px) {
+ @media (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth {
@@ -40,28 +79,37 @@
font-size: 20px;
line-height: 34px;
color: #575757;
+ @media (max-width: 1024px) {
+ text-align: left;
+ }
}
.flexRow--divNomeProductModelo {
text-align: end;
- font-family: "Open Sans";
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- color: rgba(146, 146, 146, 0.48);
+ @media (max-width: 1024px) {
+ text-align: left;
+ }
+ :global(.vtex-product-identifier-0-x-product-identifier){
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(146, 146, 146, 0.48);
+
+ }
}
}
-.flexCol--divImgDescription{
+.flexCol--divImgDescription {
margin-right: 22px;
@media (max-width: 1024px) {
margin-right: 0px;
}
}
-.flexRow--divButtonBuy{
+.flexRow--divButtonBuy {
text-align: center;
width: 100%;
- :global(.vtex-button){
+ :global(.vtex-button) {
background-color: black;
}
-}
\ No newline at end of file
+}
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
index 8bc93f6..b858a6e 100644
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -16,6 +16,9 @@
color: #929292;
.installmentsNumber--divParcelamente{
font-weight: 700;
+ &::after{
+ content: "x";
+ }
}
.installments-discount--divParcelamente{
font-weight: 700;
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index e726a89..9715649 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -10,4 +10,18 @@
// width: 100%;
// }
// }
+}
+.quantitySelectorStepper--divQuantidade{
+ :global(.vtex-numeric-stepper__input){
+ border-left: 0px;
+ border-right: 0px;
+ }
+ :global(.vtex-numeric-stepper__plus-button){
+ color: black;
+ background-color: white;
+ }
+ :global(.vtex-numeric-stepper__minus-button){
+ color: black;
+ background-color: white;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index fd15cfa..bd0e590 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -3,7 +3,11 @@
}
.container {
margin: 0;
- padding: 0;
+ margin-top: 16px !important;
+ padding: 0px !important;
+ padding-left: 40px !important;
+ margin-bottom: 16px !important;
+ padding-right: 40px !important;
max-width: 100%;
.productImagesContainer--divImagens {
width: 100%;
@@ -28,6 +32,9 @@
}
}
.carouselGaleryThumbs--divImagens {
+ @media (max-width: 641px) {
+ display: block !important;
+ }
.productImagesThumb {
margin-right: 16px;
padding: 0px;
@@ -121,6 +128,7 @@
width: 48px;
height: 48px;
.frameAround--divSku {
+ border: 1px solid #989898;
border-radius: 50%;
width: 48px;
height: 48px;
@@ -151,7 +159,6 @@
.skuSelectorSubcontainer--tamanho {
order: 1;
height: 67px;
- // margin-bottom: 10px !important;
.skuSelectorName {
font-size: 0;
font-family: "Open Sans";
@@ -169,6 +176,7 @@
width: 40px;
height: 40px;
.frameAround--divSku {
+ border: 1px solid #989898;
border-radius: 50%;
width: 40px;
height: 40px;
@@ -183,6 +191,12 @@
height: 40px;
.skuSelectorItemTextValue--divSku {
padding: 0 !important;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(185, 185, 185, 0.6);
}
.absolute {
height: 40px;
@@ -203,7 +217,6 @@
transform: rotate(-90deg);
}
}
-
.shippingContainer {
display: flex;
position: relative;
@@ -291,7 +304,7 @@
line-height: 19px;
color: #202020;
}
- .shippingTableHeadDeliveryEstimate{
+ .shippingTableHeadDeliveryEstimate {
display: flex;
order: 1;
text-transform: uppercase;
@@ -305,7 +318,7 @@
color: #202020;
}
- .shippingTableHeadDeliveryPrice{
+ .shippingTableHeadDeliveryPrice {
text-transform: uppercase;
font-size: 0;
width: 62px;
@@ -316,7 +329,7 @@
line-height: 19px;
color: #202020;
}
- .shippingTableHeadDeliveryPrice::after{
+ .shippingTableHeadDeliveryPrice::after {
content: "FRETE";
font-size: 14px;
}
@@ -373,7 +386,7 @@
}
}
}
-.inputGroup--newsletter{
+.inputGroup--newsletter {
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid #929292;
@@ -384,3 +397,66 @@
}
}
}
+.subscriberContainer {
+ width: 100%;
+ .title {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+ }
+ .subscribeLabel {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+ }
+ .form {
+ .content {
+ display: grid;
+ grid-template-areas:
+ "1"
+ "2";
+ justify-content: inherit;
+ gap: 10px;
+ width: 100%;
+ max-width: 100%;
+ .inputName {
+ grid-area: 1;
+ margin-right: 0;
+ margin-bottom: 0;
+ }
+ .inputEmail {
+ grid-area: 1;
+ margin-right: 0;
+ margin-bottom: 0;
+ }
+ .submit {
+ grid-area: 2;
+ :global(.vtex-button) {
+ width: 100%;
+ height: 49px;
+ border: 0;
+ background-color: #000000;
+ }
+ :global(.vtex-button__label) {
+ font-size: 0;
+ &::after {
+ content: "AVISE-ME";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ text-transform: uppercase;
+ color: #ffffff;
+ }
+ }
+ }
+ }
+ }
+}