diff --git a/react/Installment.tsx b/react/Installment.tsx new file mode 100644 index 0000000..76cde17 --- /dev/null +++ b/react/Installment.tsx @@ -0,0 +1,2 @@ +import Installment from "./components/Installment/index"; +export default Installment; diff --git a/react/components/Installment/Installment.module.css b/react/components/Installment/Installment.module.css new file mode 100644 index 0000000..4c896d1 --- /dev/null +++ b/react/components/Installment/Installment.module.css @@ -0,0 +1,15 @@ +.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 new file mode 100644 index 0000000..406d640 --- /dev/null +++ b/react/components/Installment/index.tsx @@ -0,0 +1,33 @@ +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 = { + 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/index.d.ts b/react/index.d.ts new file mode 100644 index 0000000..1eabbb4 --- /dev/null +++ b/react/index.d.ts @@ -0,0 +1 @@ +declare module "*.module.css"; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a994556..b8e85f6 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -112,7 +112,7 @@ // "product-rating-summary", // "flex-layout.row#list-price-savings", preço com promoção vindo vtex "flex-layout.row#selling-price", - "product-installments", + "installment-component", "product-separator", "sku-selector", "product-quantity", @@ -127,7 +127,6 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3, "blockClass": "product__name" }, "children": ["vtex.store-components:product-name"] @@ -136,7 +135,9 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "sku-product" + } }, diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..d831536 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + "installment-component": { + "component": "Installment" } + } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ea8d095..e96ece9 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -105,12 +105,15 @@ padding-bottom: 1rem; } +.flexRowContent--product__image { + padding: 0; + margin: 0; +} @media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { .flexRowContent--product__image { flex-direction: column; } } - .flexRowContent--product__image .stretchChildrenWidth:first-child { padding-right: 16px; margin-right: 16px; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index e9bddff..45edad4 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -8,9 +8,8 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); /* Grid breakpoints */ -.sellingPriceValue { +.sellingPrice { font-family: "Open Sans", sans-serif; - font-style: normal; font-weight: 700; font-size: 25px; line-height: 38px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 8069397..ae71d76 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -97,13 +97,13 @@ padding-bottom: 1rem; } -.flexRowContent--product__image{ +.flexRowContent--product__image { + padding: 0; + margin: 0; + @media #{$mq-tablet}, #{$mq-mobile} { flex-direction: column; } -} - -.flexRowContent--product__image { .stretchChildrenWidth { &:first-child { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index aaeffce..621dbff 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -1,6 +1,5 @@ -.sellingPriceValue{ +.sellingPrice { font-family: $font-family; - font-style: normal; font-weight: 700; font-size: 25px; line-height: 38px;