From 2a211a9ce52801bda953c13abb5aab43fba0fadf Mon Sep 17 00:00:00 2001 From: Emerson Fully <63175980+emersonfully@users.noreply.github.com> Date: Fri, 10 Feb 2023 22:17:34 -0300 Subject: [PATCH] projeto finalizado --- store/blocks/pdp/product.jsonc | 20 ++++++++++++++++--- styles/css/vtex.flex-layout.css | 1 + styles/css/vtex.product-price.css | 5 +++++ styles/css/vtex.slider-layout.css | 6 +++++- styles/css/vtex.store-components.css | 12 +++++++---- styles/css/vtex.tab-layout.css | 2 +- .../sass/pages/product/vtex.flex-layout.scss | 1 + .../pages/product/vtex.product-price.scss | 5 +++++ .../pages/product/vtex.slider-layout.scss | 5 ++++- .../pages/product/vtex.store-components.scss | 11 ++++++---- .../sass/pages/product/vtex.tab-layout.scss | 2 +- 11 files changed, 55 insertions(+), 15 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ebc66b3..b7885b9 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -98,8 +98,7 @@ "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" }, "thumbnailsOrientation": "horizontal", "showPaginationDots": false, @@ -286,11 +285,26 @@ "children": [ "product-summary-image", "product-summary-name", - "product-summary-price", + "product-list-price#summary", + "product-selling-price#summary", "product-summary-buy-button" ] }, + "product-selling-price#summary": { + "props": { + "blockClass": "summary-selling-price" + }, + "children": ["product-selling-price"] + }, + + "product-list-price#summary": { + "props": { + "blockClass": "summary-list-price" + }, + "children": ["product-summary-price"] + }, + "html#slider": { "props": { "testId": "product-summary-list", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index dfa6723..0789508 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -10,6 +10,7 @@ /* Grid breakpoints */ .flexRowContent--product-main-stack { padding: 0 30px; + margin-bottom: 0; } @media screen and (max-width: 1024px) { .flexRowContent--product-main-stack { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 191c4e1..b451a2b 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -12,6 +12,11 @@ visibility: hidden; } +.listPrice--summary { + visibility: visible; + display: block; +} + .savings { display: none; } diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 832e0d8..6104f2a 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -10,7 +10,11 @@ /* Grid breakpoints */ .sliderLayoutContainer--carousel { background-color: white; - padding: 0 40px; +} +@media screen and (min-width: 1025px) { + .sliderLayoutContainer--carousel { + padding: 0 40px; + } } .paginationDotsContainer { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c35730b..255ca99 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -205,16 +205,20 @@ } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { color: #000000; - position: absolute; - left: 348px; - top: 25px; font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; } -@media screen and (max-width: 1024px) { +@media screen and (min-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + left: 348px; + top: 25px; + } +} +@media screen and (max-width: 1024px) and (min-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { right: -60px; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 4dd8dc1..4e02656 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -29,7 +29,7 @@ .contentItem { display: flex; - padding: 62px 52px; + padding: 62px 52px 0; } @media screen and (min-width: 1920px) { .contentItem { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 5baf2f9..b71e93f 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -6,6 +6,7 @@ // } .flexRowContent--product-main-stack { padding: 0 30px; + margin-bottom: 0; @media screen and (max-width: 1024px) { display: flex; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 8d8c9f2..acb8bea 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -2,6 +2,11 @@ visibility: hidden; } +.listPrice--summary { + visibility: visible; + display: block; +} + .savings { display: none; } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 67e585c..6be0ff4 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,6 +1,9 @@ .sliderLayoutContainer--carousel { background-color: white; - padding: 0 40px; + + @media screen and (min-width: 1025px) { + padding: 0 40px; + } } .paginationDotsContainer { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 41763a1..2519843 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -229,9 +229,6 @@ :global(.vtex-address-form__postalCode-forgottenURL) { color: $color-black; - position: absolute; - left: 348px; - top: 25px; font-family: $font-family; font-style: normal; @@ -239,7 +236,13 @@ font-size: 12px; line-height: 16px; - @media screen and (max-width: 1024px) { + @media screen and (min-width: 768px) { + position: absolute; + left: 348px; + top: 25px; + } + + @media screen and (max-width: 1024px) and (min-width: 768px) { right: -60px; } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 607c713..4b90ea6 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -16,7 +16,7 @@ .contentItem { display: flex; - padding: 62px 52px; + padding: 62px 52px 0; @media screen and (min-width: 1920px) { padding: 62px 360px;