diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 03d37e3..43bcc1e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -92,7 +92,7 @@ // "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#installment-component", "html#pix-component", // "product-separator", //linha que separa preço de skus "html#sku-selector", @@ -108,7 +108,8 @@ "flex-layout.row#product-name": { "props": { - "blockClass": "product__name" + "blockClass": "product__name", + "testId": "product-name" }, "children": ["vtex.store-components:product-name"] }, @@ -128,6 +129,26 @@ } }, + "html#installment-component": { + "props": { + "tag": "span", + "testId": "product-installments" + }, + "children": ["product-installments#installment"] + }, + + "product-installments#installment": { + "props": { + "markers": ["portion"], + "installmentOptionsFilter": { + "paymenSystemName": "Mastercard", + "installmentsQuantity": 4 + }, + "message": "{installmentsNumber}x de {installmentValue} sem juros", + "blockClas": "installment" + } + }, + "html#pix-component": { "props": { "tag": "section", diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 45edad4..7d1d94e 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 { + font-weight: 400; } \ 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..7220bec 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 { + font-weight: 400; + } + +}