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 ( -

- - {productInstallment.numberOfInstallment}x{" "} - - de - - {""} R${" "} - {productInstallment.value?.toFixed(2).toString().replace(".", ",")}{" "} - - sem juros -

- ); -}; - -export default Installment; diff --git a/react/components/PixDiscount/index.tsx b/react/components/PixDiscount/index.tsx index 4da239f..10b0cd3 100644 --- a/react/components/PixDiscount/index.tsx +++ b/react/components/PixDiscount/index.tsx @@ -23,9 +23,9 @@ const PixDiscount = () => { className={styles["pixContainer__img"]} />
- +

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; + } + } + }