diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
index b692894..35387d7 100644
--- a/react/components/Pix/Pix.tsx
+++ b/react/components/Pix/Pix.tsx
@@ -64,7 +64,7 @@ const Pix = () => {
}, [productContext?.selectedItem]);
return (
-
+
{
/>
-
+
{(pixValue / 100).toLocaleString("pt-br", {
style: "currency",
currency: "BRL",
})}
-
-
{discountValue}
+
+
{discountValue}
);
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 72d7f9b..94cde86 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,10 +1,10 @@
{
"store.product": {
"children": [
- "html#breadcrumb",
+ "html#breadcontainer",
//"example-component",
"condition-layout.product#availability",
- "tab-layout",
+ "html#product-description",
//"flex-layout.row#specifications-title",
//"product-specification-group#table",
"flex-layout.row#shelf-row"
@@ -33,10 +33,17 @@
},
"list-context.product-list": {
- "children": ["slider-layout#shelf-prod"],
+ "children": ["html#slider"],
"blocks": ["product-summary.shelf"]
},
+ "html#slider": {
+ "props": {
+ "testId": "product-summary-list"
+ },
+ "children": ["slider-layout#shelf-prod"]
+ },
+
"slider-layout#shelf-prod": {
"props": {
"itemsPerPage": {
@@ -47,12 +54,11 @@
"infinite": true,
"showNavigationArrows": "always",
"showPaginationDots": "always",
- "blockClass": "slide-shelf",
- "colGap": 16
+ "blockClass": "slide-shelf"
}
},
- "html#breadcrumb": {
+ "html#breadcontainer": {
"props": {
"tag": "section",
"testId": "breadcrumbs",
@@ -121,8 +127,9 @@
}
},
"flex-layout.row#product-image": {
- "children": ["product-images"]
+ "children": ["html#imagens"]
},
+
"product-images": {
"props": {
"aspectRatio": {
@@ -136,14 +143,29 @@
}
},
+ "html#imagens": {
+ "props": {
+ "testId": "product-images"
+ },
+ "children": ["product-images"]
+ },
+
"product-installments": {
"props": {
"blockClass": "sellingInfo"
}
},
- "flex-layout.row#selling-prices": {
+ "html#product-installments": {
"props": {
+ "testId": "product-installments"
+ },
+ "children": ["product-installments"]
+ },
+
+ "html#selling-price": {
+ "props": {
+ "testId": "product-price",
"blockClass": "sellingPrice"
},
"children": ["product-selling-price"]
@@ -156,28 +178,49 @@
"rowGap": 0
},
"children": [
- "flex-layout.row#product-name",
- "product-identifier.product",
+ "html#product-name",
+ "html#codigo",
//"availability-subscriber",
//"product-assembly-options",
"product-rating-summary",
//"flex-layout.row#list-price-savings",
- "flex-layout.row#selling-prices",
- "product-installments",
- "pix-component",
+ "html#selling-price",
+ "html#product-installments",
+ "html#pixzap",
//"product-separator",
- "sku-selector",
- //"product-quantity",
+ "html#sku-selector",
//"product-gifts",
"flex-layout.row#buy-button",
- "shipping-simulator",
+ "html#shipping-simulator",
"placeholder-component"
//"share#default"
]
},
- "flex-layout.row#product-name": {
+ "html#shipping-simulator": {
"props": {
+ "testId": "shipping-simulator"
+ },
+ "children": ["shipping-simulator"]
+ },
+
+ "html#pixzap": {
+ "props": {
+ "testId": "pix-price"
+ },
+ "children": ["pix-component"]
+ },
+
+ "html#codigo": {
+ "props": {
+ "testId": "product-code"
+ },
+ "children": ["product-identifier.product"]
+ },
+
+ "html#product-name": {
+ "props": {
+ "testId": "product-name",
"marginBottom": 3,
"blockClass": "productName"
},
@@ -192,6 +235,13 @@
}
},
+ "html#sku-selector": {
+ "props": {
+ "testId": "sku-selector"
+ },
+ "children": ["sku-selector"]
+ },
+
"product-quantity": {
"props": {
"size": "large",
@@ -199,22 +249,36 @@
}
},
+ "html#product-quantity": {
+ "props": {
+ "testId": "product-quantity"
+ },
+ "children": ["product-quantity"]
+ },
+
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7,
"blockClass": "quantityAndBuy"
},
- "children": ["product-quantity", "add-to-cart-button"]
+ "children": ["html#product-quantity", "html#add-to-cart-button"]
},
- "add-to-cart-button": {
+ "add-to-cart-button#addSacola": {
"props": {
"blockClass": "addToCartButton",
"text": "ADICIONAR À SACOLA"
}
},
+ "html#add-to-cart-button": {
+ "props": {
+ "testId": "add-to-cart-button"
+ },
+ "children": ["add-to-cart-button#addSacola"]
+ },
+
"flex-layout.row#product-availability": {
"props": {
"blockClass": "productPanel"
@@ -231,10 +295,10 @@
"blockClass": "info-availability"
},
"children": [
- "flex-layout.row#product-name",
- "product-identifier.product",
+ "html#product-name",
+ "html#codigo",
"flex-layout.row#availability",
- "sku-selector"
+ "html#sku-selector"
]
},
"flex-layout.row#availability": {
@@ -330,6 +394,13 @@
}
},
+ "html#product-description": {
+ "props": {
+ "testId": "product-description"
+ },
+ "children": ["tab-layout"]
+ },
+
"tab-content.item#1": {
"children": ["product-images#2", "product-description"],
"props": {
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
index 54c378d..7efa965 100644
--- a/store/blocks/product-summary/product-summary.jsonc
+++ b/store/blocks/product-summary/product-summary.jsonc
@@ -1,5 +1,12 @@
{
"product-summary.shelf": {
+ "children": ["html#prateleira"]
+ },
+
+ "html#prateleira": {
+ "props": {
+ "testId": "vtex-product-summary"
+ },
"children": [
"stack-layout#prodsum",
"product-summary-name",
@@ -12,6 +19,7 @@
//"add-to-cart-button"
]
},
+
"flex-layout.col#productRating": {
"props": {
"blockClass": "productRating"
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 1bf58dc..7952978 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -12,6 +12,16 @@
justify-content: center;
margin: 0 0 32px;
}
+@media only screen and (max-width: 1024px) {
+ .container--shelf-title {
+ margin: 0 0 24px;
+ }
+}
+@media only screen and (max-width: 767px) {
+ .container--shelf-title {
+ margin: 0 0 16px;
+ }
+}
.container--shelf-title .headingLevel3 {
font-weight: 400;
font-size: 20px;
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index b60c0c6..77be60c 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -2,6 +2,14 @@
justify-content: center;
margin: 0 0 32px;
+ @include mq(lg, max) {
+ margin: 0 0 24px;
+ }
+
+ @include mq(md, max) {
+ margin: 0 0 16px;
+ }
+
.headingLevel3 {
font-weight: 400;
font-size: 20px;