diff --git a/react/Installment.tsx b/react/Installment.tsx
deleted file mode 100644
index 76cde17..0000000
--- a/react/Installment.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import Installment from "./components/Installment/index";
-export default Installment;
diff --git a/react/components/Html/style.css b/react/components/Html/style.css
index 6a029ae..1a2d5bd 100644
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@@ -10,3 +10,16 @@
[class*="html--cep"] {
margin: 16px 0;
}
+
+[class*="agenciamagma-store-theme-5-x-html--pix-component" ]{
+ margin: 0;
+ padding: 0;
+}
+
+[class*="agenciamagma-store-theme-5-x-html--slider-product" ]{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+
+}
diff --git a/react/components/Installment/Installment.module.css b/react/components/Installment/Installment.module.css
deleted file mode 100644
index 4c896d1..0000000
--- a/react/components/Installment/Installment.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.installment-product {
- font-family: 'Open Sans', sans-serif;
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- line-height: 22px;
- margin: 0;
- padding: 0;
- height: 22px;
- color: #929292;
-}
-
-.installment-product__strong {
- font-weight: 700;
-}
diff --git a/react/components/Installment/index.tsx b/react/components/Installment/index.tsx
deleted file mode 100644
index 9e7f39a..0000000
--- a/react/components/Installment/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import { useProduct } from "vtex.product-context";
-import styles from "./Installment.module.css";
-
-const Installment = () => {
- const skuProduct = useProduct();
- console.log(skuProduct);
-
- const productInstallment: any = {
- numberOfInstallment:
- skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
- .NumberOfInstallments,
- value:
- skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
- .Value,
- };
-
- return (
-
-
+
R$ {pixPrice?.toFixed(2).toString().replace(".", ",")}
-
+
10% de desconto
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 03d37e3..7190ddf 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -4,7 +4,7 @@
"html#breadcrumb",
"placeholder-component",
"condition-layout.product#availability",
- "tab-layout#description",
+ "html#product-description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
// "shelf.relatedProducts",
@@ -87,12 +87,12 @@
"blockClass": "product-skus"
},
"children": [
- "flex-layout.row#product-name",
- "product-identifier.product",
+ "html#flex-layout.row#product-name",
+ "html#codigo",
// "product-rating-summary", // avaliações
// "flex-layout.row#list-price-savings", preço com promoção vindo vtex
- "flex-layout.row#selling-price",
- "installment-component",
+ "html#selling-price",
+ "html#installment-component",
"html#pix-component",
// "product-separator", //linha que separa preço de skus
"html#sku-selector",
@@ -106,13 +106,29 @@
]
},
- "flex-layout.row#product-name": {
+ "html#flex-layout.row#product-name": {
"props": {
- "blockClass": "product__name"
+ "blockClass": "product__name",
+ "testId": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
+ "html#codigo": {
+ "props": {
+ "testId": "product-code"
+ },
+ "children": ["product-identifier.product"]
+ },
+
+ "html#selling-price": {
+ "props": {
+ "testId": "product-price",
+ "tag": "span"
+ },
+ "children": ["flex-layout.row#selling-price"]
+ },
+
"html#sku-selector": {
"props": {
"testId": "sku-selector"
@@ -128,10 +144,31 @@
}
},
+ "html#installment-component": {
+ "props": {
+ "tag": "span",
+ "testId": "product-installments"
+ },
+ "children": ["product-installments#installment"]
+ },
+
+ "product-installments#installment": {
+ "props": {
+ "markers": ["portion", "portion2"],
+ "installmentOptionsFilter": {
+ "paymentSystemName": "Mastercard",
+ "installmentsQuantity": 4
+ },
+ "message": "{installmentsNumber}x
de {installmentValue}
sem juros",
+ "blockClas": "installment"
+ }
+ },
+
"html#pix-component": {
"props": {
"tag": "section",
- "testId": "pix-price"
+ "testId": "pix-price",
+ "blockClass": "pix-component"
},
"children": ["pix-component"]
},
@@ -179,12 +216,6 @@
},
"flex-layout.row#product-availability": {
- "props": {
- "colGap": 7,
- "marginTop": 4,
- "marginBottom": 7,
- "paddingTop": 7
- },
"children": [
"flex-layout.col#stack",
"flex-layout.col#right-col-availability"
@@ -198,7 +229,7 @@
},
"children": [
"flex-layout.row#product-name",
- "product-identifier.product",
+ "html#codigo",
"flex-layout.row#availability",
"sku-selector"
]
diff --git a/store/blocks/pdp/product__carousel.jsonc b/store/blocks/pdp/product__carousel.jsonc
index 4b0fae9..fe32833 100644
--- a/store/blocks/pdp/product__carousel.jsonc
+++ b/store/blocks/pdp/product__carousel.jsonc
@@ -27,7 +27,8 @@
"product-summary-image#slider-images",
"product-summary-name",
// "product-summary-space",
- "product-summary-price"
+ "product-list-price",
+ "product-selling-price"
]
},
diff --git a/store/blocks/pdp/product__description.jsonc b/store/blocks/pdp/product__description.jsonc
index da8141a..09ed1a8 100644
--- a/store/blocks/pdp/product__description.jsonc
+++ b/store/blocks/pdp/product__description.jsonc
@@ -12,6 +12,14 @@
"blockClass": "image-description"
}
},
+
+ "html#product-description": {
+ "props": {
+ "testId": "product-description"
+ },
+ "children": ["tab-layout#description"]
+ },
+
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
diff --git a/store/interfaces.json b/store/interfaces.json
index 542ea1e..2fdeaae 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -6,9 +6,6 @@
"component": "html",
"composition": "children"
},
- "installment-component": {
- "component": "Installment"
- },
"pix-component": {
"component": "PixDiscount"
},
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 45edad4..0a2856e 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -14,4 +14,19 @@
font-size: 25px;
line-height: 38px;
color: #000;
+}
+
+.installments {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 22px;
+ margin: 0;
+ padding: 0;
+ height: 22px;
+ color: #929292;
+}
+.installments .installments-portion, .installments .installments-portion2 {
+ font-weight: 400;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index d3abedc..b4b2f47 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -40,11 +40,14 @@
line-height: 19px;
}
}
-.containerNormal .clearLink .element .priceContainer {
+.containerNormal .clearLink .element .listPrice {
padding: 0;
margin: 0;
}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer {
+.containerNormal .clearLink .element .listPrice .installmentContainer {
+ display: none;
+}
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
@@ -57,24 +60,21 @@
margin-bottom: 8px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .listPriceContainer {
+ .containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
font-size: 12px;
line-height: 15px;
}
}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .listPriceLabel {
- display: none;
-}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 14px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
+ .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 12px;
line-height: 16px;
}
}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
content: "de ";
font-family: "Open Sans", sans-serif;
font-style: normal;
@@ -84,12 +84,12 @@
text-align: center;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
+ .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
font-size: 12px;
line-height: 15px;
}
}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
content: " por";
font-family: "Open Sans", sans-serif;
font-style: normal;
@@ -99,12 +99,12 @@
text-align: center;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
+ .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
font-size: 12px;
line-height: 15px;
}
}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
padding: 0;
margin: 0;
height: 33px;
@@ -117,28 +117,22 @@
color: #000;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
+ .containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
font-size: 18px;
line-height: 25px;
}
}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 24px;
line-height: 33px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
+ .containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 18px;
line-height: 25px;
}
}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceLabel {
- display: none;
-}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceValue {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) .sellingPriceValue {
padding: 0;
margin: 0;
-}
-.containerNormal .clearLink .element .priceContainer .installmentContainer {
- display: none;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss
index 621dbff..59458e7 100644
--- a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss
@@ -5,3 +5,20 @@
line-height: 38px;
color: $color-black0;
}
+
+.installments {
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 22px;
+ margin: 0;
+ padding: 0;
+ height: 22px;
+ color: #929292;
+
+ .installments-portion, .installments-portion2 {
+ font-weight: 400;
+ }
+
+}
diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
index 06fab47..b5a2877 100644
--- a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
@@ -33,109 +33,10 @@
}
}
- .priceContainer {
+ .listPrice {
padding: 0;
margin: 0;
- .listPriceContainer {
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- text-align: center;
- text-decoration-line: line-through;
- color: #BABABA;
- padding: 0;
- margin-bottom: 8px;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 12px;
- line-height: 15px;
- }
-
- .listPriceLabel {
- display: none;
- }
-
- .currencyContainer {
- font-size: 14px;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 12px;
- line-height: 16px;
- }
-
- &::before {
- content: "de ";
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- text-align: center;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 12px;
- line-height: 15px;
- }
- }
-
- &::after {
- content: " por";
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- text-align: center;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 12px;
- line-height: 15px;
- }
- }
- }
-
- }
-
- .sellingPriceContainer {
- padding: 0;
- margin: 0;
- height: 33px;
- font-family: $font-family;
- font-style: normal;
- font-weight: 700;
- font-size: 24px;
- line-height: 33px;
- text-align: center;
- color: $color-black0;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 18px;
- line-height: 25px;
- }
-
- .currencyContainer {
- font-size: 24px;
- line-height: 33px;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 18px;
- line-height: 25px;
- }
- }
-
- .sellingPriceLabel {
- display: none;
- }
-
- .sellingPriceValue {
- padding: 0;
- margin: 0;
- }
- }
-
.installmentContainer {
display: none;
}
@@ -143,4 +44,93 @@
}
}
+ :global(.vtex-product-price-1-x-listPriceValue) {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ text-decoration-line: line-through;
+ color: #BABABA;
+ padding: 0;
+ margin-bottom: 8px;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 12px;
+ line-height: 15px;
+ }
+
+ :global(.vtex-product-price-1-x-currencyContainer) {
+ font-size: 14px;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 12px;
+ line-height: 16px;
+ }
+
+ &::before {
+ content: "de ";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 12px;
+ line-height: 15px;
+ }
+ }
+
+ &::after {
+ content: " por";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 12px;
+ line-height: 15px;
+ }
+ }
+ }
+ }
+
+ :global(.vtex-product-price-1-x-sellingPrice) {
+ padding: 0;
+ margin: 0;
+ height: 33px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ text-align: center;
+ color: $color-black0;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 18px;
+ line-height: 25px;
+ }
+
+ :global(.vtex-product-price-1-x-currencyContainer) {
+ font-size: 24px;
+ line-height: 33px;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 18px;
+ line-height: 25px;
+ }
+ }
+ .sellingPriceValue {
+ padding: 0;
+ margin: 0;
+ }
+ }
+
}