diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 999c3ec..65fd3f5 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -334,24 +334,28 @@ "product-summary.shelf#carousel-shelf": { "children": [ - "product-summary-image", - "product-summary-name", - "product-summary-space", - "product-summary-price" + "html#shelf" ] }, - // "html#shelf": { - // "props": { - // "testId": "vtex-product-summary" - // }, - // "children": [ - // "product-summary-image", - // "product-summary-name", - // "product-list-price", - // "product-selling-price" - // ] - // }, + "html#shelf": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-space", + "product-list-price", + "product-selling-price" + ] + }, + + "product-list-price": { + "props": { + "message": "de {listPriceValue} por" + } + }, "html#slider": { "props": { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index a59cc19..4129fa2 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -45,4 +45,30 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.listPrice { + display: block; + font-size: 14px; + line-height: 19px; + margin-bottom: 8px; + color: #bababa; +} +@media only screen and (max-width: 1025px) { + .listPrice { + font-size: 12px; + line-height: 16px; + } +} + +:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) .sellingPriceValue { + font-size: 24px; + line-height: 33px; + color: #000000; +} +@media only screen and (max-width: 1025px) { + :global(.vtex-product-price-1-x-sellingPrice--hasListPrice) .sellingPriceValue { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0e7e548..79622dd 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -92,4 +92,8 @@ .element { padding: 0; +} + +:global(.vtex-product-summary-2-x-clearLink) { + padding-bottom: 32px; } \ 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 a4c9e8f..974cf26 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -43,3 +43,32 @@ } } } + +// CARROSSEL +.listPrice { + display: block; + font-size: 14px; + line-height: 19px; + margin-bottom: 8px; + + color: $gray-700; + + @include mq(md, max) { + font-size: 12px; + line-height: 16px; + } +} + +:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) { + .sellingPriceValue { + font-size: 24px; + line-height: 33px; + + color: $black; + + @include mq(md, max) { + font-size: 18px; + line-height: 25px; + } + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 23edb64..444f2c8 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -91,3 +91,7 @@ .element { padding: 0; } + +:global(.vtex-product-summary-2-x-clearLink) { + padding-bottom: 32px; +}