diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 7669a87..2eaced6 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -38,6 +38,11 @@
width: 100%;
}
+[class*="html--product-summary"] {
+ display: flex;
+ flex-direction: column;
+}
+
@media (min-width: 1921px) {
[class*="html--product-quantity"] {
width: 16.712%;
diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc
index 437419b..29af517 100644
--- a/store/blocks/pdp/product-description.jsonc
+++ b/store/blocks/pdp/product-description.jsonc
@@ -2,7 +2,7 @@
"html#productDescription": {
"props": {
"blockClass": "productDescription",
- "testId": "tab-layout"
+ "testId": "product-description"
},
"children": ["tab-layout#productDescription"]
},
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 7e4edfa..ceede37 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -122,11 +122,11 @@
"rowGap": 0
},
"children": [
- "flex-layout.row#product-name",
- "product-identifier.product",
+ "html#product-name",
+ "html#codigo",
"product-rating-summary",
- "flex-layout.row#selling-price",
- "product-installments",
+ "html#selling-price",
+ "html#product-installments",
"html#pix",
"html#sku-selector",
"product-gifts",
@@ -138,6 +138,13 @@
]
},
+ "html#selling-price": {
+ "props": {
+ "testId": "product-price"
+ },
+ "children": ["flex-layout.row#selling-price"]
+ },
+
"html#pix": {
"props": {
"blockClass": "pix",
@@ -154,6 +161,13 @@
"children": ["shipping-simulator"]
},
+ "html#product-name": {
+ "props": {
+ "testId": "product-name"
+ },
+ "children": ["flex-layout.row#product-name"]
+ },
+
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@@ -161,6 +175,13 @@
"children": ["vtex.store-components:product-name"]
},
+ "html#codigo": {
+ "props": {
+ "testId": "product-code"
+ },
+ "children": ["product-identifier.product"]
+ },
+
"product-identifier.product": {
"props": {
"label": "hide",
@@ -168,6 +189,13 @@
}
},
+ "html#product-installments": {
+ "props": {
+ "testId": "product-installments"
+ },
+ "children": ["product-installments"]
+ },
+
"product-installments": {
"props": {
"markers": ["discount"],
@@ -311,10 +339,18 @@
"children": [
"product-summary-image",
"product-summary-name",
- "product-price"
+ "product-list-price",
+ "product-selling-price"
]
},
+ "product-list-price": {
+ "props": {
+ "blockClass": "product-list-price",
+ "message": "de {listPriceValue} por"
+ }
+ },
+
"html#slider-layout": {
"props": {
"blockClass": "shelf",
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index d3a0261..0df8e8c 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -112,4 +112,37 @@
font-size: 25px;
line-height: 38px;
color: #000000;
+}
+
+.listPrice {
+ margin-top: 8px;
+}
+
+.listPrice--product-list-price {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #bababa;
+ text-decoration: line-through;
+}
+
+.listPriceValue {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #bababa;
+}
+
+.sellingPriceValue {
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ color: #000000;
+}
+
+.sellingPrice--hasListPrice {
+ margin-bottom: 32px;
}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 1668279..59cea53 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -8,7 +8,7 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
/* Grid breakpoints */
-.headingLevel1--shelfTitleText {
+.heading-level-1 {
font-style: normal;
font-weight: 400;
font-size: 24px;
@@ -16,7 +16,7 @@
}
@media (max-width: 1024px) {
- .headingLevel1--shelfTitleText {
- margin-top: 32px;
+ .heading-level-1 {
+ margin-top: 16px;
}
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 24b1cdf..d540bc9 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -499,6 +499,14 @@
margin: 0;
}
+.productDescriptionTitle {
+ font-size: 24px;
+}
+
+.productDescriptionText {
+ font-size: 16px;
+}
+
@media (min-width: 1921px) {
.container--pageProduct {
width: 100%;
@@ -520,6 +528,13 @@
width: 100%;
max-width: 100%;
}
+ .productDescriptionTitle {
+ font-size: 20px;
+ }
+ .productDescriptionText {
+ padding-bottom: 16px;
+ font-size: 14px;
+ }
}
@media (max-width: 492px) {
.shippingContainer {
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 5fc03aa..4b7078e 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -85,5 +85,6 @@
flex-direction: column;
margin-top: 15px;
gap: 16px;
+ border-bottom: 1px solid #cccccc;
}
}
\ 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 7804407..1682dd3 100644
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -104,3 +104,36 @@
line-height: 38px;
color: $color-black;
}
+
+.listPrice {
+ margin-top: 8px;
+}
+
+.listPrice--product-list-price {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray14;
+ text-decoration: line-through;
+}
+
+.listPriceValue {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray14;
+}
+
+.sellingPriceValue {
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ color: $color-black;
+}
+
+.sellingPrice--hasListPrice {
+ margin-bottom: 32px;
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index 49f1389..e4dff0f 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -1,4 +1,4 @@
-.headingLevel1--shelfTitleText {
+.heading-level-1 {
font-style: normal;
font-weight: 400;
font-size: 24px;
@@ -6,7 +6,7 @@
}
@media (max-width: 1024px) {
- .headingLevel1--shelfTitleText {
- margin-top: 32px;
+ .heading-level-1 {
+ margin-top: 16px;
}
}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 0a741c2..2d07908 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -515,6 +515,14 @@
margin: 0;
}
+.productDescriptionTitle {
+ font-size: 24px;
+}
+
+.productDescriptionText {
+ font-size: 16px;
+}
+
@media (min-width: 1921px) {
.container--pageProduct {
width: 100%;
@@ -542,6 +550,15 @@
max-width: 100%;
}
}
+
+ .productDescriptionTitle {
+ font-size: 20px;
+ }
+
+ .productDescriptionText {
+ padding-bottom: 16px;
+ font-size: 14px;
+ }
}
@media (max-width: 492px) {
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 9075fbd..211c97c 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -80,5 +80,6 @@
flex-direction: column;
margin-top: 15px;
gap: 16px;
+ border-bottom: 1px solid $color-gray6;
}
}
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index b38d9da..e58dd08 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -17,6 +17,7 @@ $color-gray10: #bfbfbf;
$color-gray11: #ffffff;
$color-gray12: #868686;
$color-gray13: #989898;
+$color-gray14: #bababa;
$color-blue: #4267b2;