diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index a8c7935..b775543 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -107,3 +107,5 @@ max-width:314.4px;
display: flex;
flex-direction: column;
}
+ [class*="html--m3-add-to-cart-button "]{
+ width: 100%; }
diff --git a/react/components/Pix/Pix.css b/react/components/Pix/Pix.css
index 986bdb1..6c16d76 100644
--- a/react/components/Pix/Pix.css
+++ b/react/components/Pix/Pix.css
@@ -30,6 +30,7 @@ font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
+margin: 0;
/* identical to box height */
@@ -41,6 +42,7 @@ font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
+margin: 0;
/* identical to box height */
diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
index c945149..457849c 100644
--- a/react/components/Pix/Pix.tsx
+++ b/react/components/Pix/Pix.tsx
@@ -37,8 +37,8 @@ const Pix = () => {
-
R$ {strResult}
-
10 % de desconto
+
R$ {strResult}
+
10 % de desconto
);
diff --git a/store/blocks/pdp/product-shelf-related.jsonc b/store/blocks/pdp/product-shelf-related.jsonc
index b018e80..b2d4e7d 100644
--- a/store/blocks/pdp/product-shelf-related.jsonc
+++ b/store/blocks/pdp/product-shelf-related.jsonc
@@ -4,10 +4,7 @@
"blockClass": "m3-shelf-retaletd"
},
"blocks": ["product-summary.shelf#m3-shelf-retaletd-content"],
- "children": [
- "rich-text#m3-shelf-related-title",
- "slider-layout#m3-carousel-products"
- ]
+ "children": ["rich-text#m3-shelf-related-title", "html#slider-layout"]
},
"product-summary.shelf#m3-shelf-retaletd-content": {
"props": {
@@ -33,6 +30,12 @@
"message": "de {listPriceValue} por"
}
},
+ "html#slider-layout": {
+ "props": {
+ "testId": "product-summary-list"
+ },
+ "children": ["slider-layout#m3-carousel-products"]
+ },
"slider-layout#m3-carousel-products": {
"props": {
"blockClass": "m3-carousel-products",
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index aa03d67..99c7f96 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
- "tab-layout#tab-product",
+ "html#tab-layout",
"list-context.product-list#m3-shelf-retaletd",
"newsletter#m3-newsletter",
"product-questions-and-answers"
@@ -55,7 +55,7 @@
"blockClass": "product"
},
"children": [
- "flex-layout.row#product-image",
+ "html#product-images",
"product-bookmark",
"product-specification-badges"
]
@@ -76,6 +76,12 @@
"rowGap": 0
}
},
+ "html#product-images": {
+ "props": {
+ "testId": "product-images"
+ },
+ "children": ["flex-layout.row#product-image"]
+ },
"flex-layout.row#product-image": {
"children": ["product-images"]
},
@@ -100,14 +106,13 @@
"rowGap": 0
},
"children": [
- "flex-layout.row#product-name",
- "product-identifier.product",
+ "html#product-name",
+ "html#product-identifier.product",
"product-rating-summary",
- "flex-layout.row#selling-price",
- "product-installments#parcelas",
- "m3-pix",
- "sku-selector",
- "product-assembly-options",
+ "html#selling-price",
+ "html#product-installments",
+ "html#m3-pix",
+ "html#sku-selector",
"product-gifts",
"html#buy-button",
"availability-subscriber",
@@ -115,6 +120,26 @@
]
},
+ "html#product-identifier.product": {
+ "props": { "testId": "product-code" },
+ "children": ["product-identifier.product"]
+ },
+ "html#selling-price": {
+ "props": { "testId": "product-price" },
+ "children": ["flex-layout.row#selling-price"]
+ },
+ "html#m3-pix": {
+ "props": {
+ "testId": "pix-price"
+ },
+ "children": ["m3-pix"]
+ },
+ "html#product-installments": {
+ "props": {
+ "testId": "product-installments"
+ },
+ "children": ["product-installments#parcelas"]
+ },
"product-installments#parcelas": {
"props": {
"blockClass": "desconto",
@@ -123,13 +148,24 @@
"message": "{installmentsNumber} x de {installmentValue} sem juros"
}
},
+ "html#product-name": {
+ "props": {
+ "testId": "product-name"
+ },
+ "children": ["flex-layout.row#product-name"]
+ },
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
},
"children": ["vtex.store-components:product-name"]
},
-
+ "html#sku-selector": {
+ "props": {
+ "testId": "sku-selector"
+ },
+ "children": ["sku-selector"]
+ },
"sku-selector": {
"props": {
"variationsSpacing": 3,
@@ -143,12 +179,19 @@
"marginBottom": 7,
"paddingRight": 0
},
- "children": ["html#sizeQuantity", "add-to-cart-button"]
+ "children": ["html#product-quantity", "html#add-to-cart-button"]
},
- "html#sizeQuantity": {
+ "html#add-to-cart-button": {
+ "props": {
+ "blockClass": "m3-add-to-cart-button",
+ "testId": "add-to-cart-button"
+ },
+ "children": ["add-to-cart-button"]
+ },
+ "html#product-quantity": {
"props": {
"blockClass": "quantity",
- "testid": "product-quantity"
+ "testId": "product-quantity"
},
"children": ["product-quantity#size"]
},
@@ -182,17 +225,12 @@
},
"children": [
"flex-layout.row#product-name",
- "product-identifier.product",
+ "html#product-identifier.product",
"flex-layout.row#availability",
"sku-selector"
]
},
- // "flex-layout.row#identifieAndName": {
- // "props": {
- // "blockClass": "identifieAndName"
- // },
- // "children": ["flex-layout.row#product-name", "product-identifier.product"]
- // },
+
"flex-layout.row#availability": {
"props": {
"blockClass": "message-availability"
@@ -203,7 +241,7 @@
"props": {
"blockClass": "m3-shipping-simulator"
},
- "children": ["rich-text", "shipping-simulator"]
+ "children": ["rich-text", "html#shipping-simulator"]
},
"rich-text": {
"props": {
@@ -212,6 +250,12 @@
"text": "Calcular o frete"
}
},
+ "html#shipping-simulator": {
+ "props": {
+ "testId": "shipping-simulator"
+ },
+ "children": ["shipping-simulator"]
+ },
"share#default": {
"props": {
diff --git a/store/blocks/pdp/tab-layout-product.jsonc b/store/blocks/pdp/tab-layout-product.jsonc
index 0ed0ac0..3ca723e 100644
--- a/store/blocks/pdp/tab-layout-product.jsonc
+++ b/store/blocks/pdp/tab-layout-product.jsonc
@@ -1,4 +1,11 @@
{
+ "html#tab-layout": {
+ "props": {
+ "testId": "product-description"
+ },
+ "children": ["tab-layout#tab-product"]
+ },
+
"tab-layout#tab-product": {
"children": ["tab-list#tab-product", "tab-content#tab-product"],
"props": {
@@ -101,6 +108,7 @@
},
"children": ["product-images#imageDescription", "product-description"]
},
+
"product-description": {
"props": {
"collapseContent": false
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index e25f4d9..058e6ec 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -133,8 +133,9 @@
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
}
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
+ width: 100%;
flex-direction: column;
}
}
@@ -158,6 +159,14 @@
position: initial;
}
}
+@media (max-width: 768px) {
+ .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: auto;
+ }
+}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
@@ -170,6 +179,11 @@
max-width: 231px;
height: 49px;
}
+@media (max-width: 768px) {
+ .shippingContainer :global(.vtex-input-prefix__group) {
+ max-width: none;
+ }
+}
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input),
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
font-family: "Open Sans";
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 977a478..002a4cc 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -142,7 +142,8 @@
:global(.vtex-address-form__postalCode) {
display: flex;
- @media (max-width:1024px) {
+ @media (max-width:768px) {
+ width: 100%;
flex-direction: column;
}
@@ -166,6 +167,13 @@
position: initial;
}
+ @media (max-width:768px) {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: auto;
+ }
+
:global(.vtex__icon-external-link) {
display: none;
}
@@ -182,6 +190,9 @@
max-width: 231px;
height: 49px;
+ @media (max-width:768px) {
+ max-width: none;
+ }
:global(.vtex-address-form-4-x-input),