From e4582300d104c1ca665c11b902c4ca4133b73efd Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 6 Feb 2023 21:35:24 -0300 Subject: [PATCH] feat(prateleira):prateleira de produtos finalizada --- react/components/Html/styles.css | 17 ++++- store/blocks/pdp/product.jsonc | 62 ++++++++++++++++--- styles/css/vtex.flex-layout.css | 33 ++++++++++ styles/css/vtex.product-price.css | 45 ++++++++++++++ styles/css/vtex.product-summary.css | 30 +++++++++ .../sass/pages/product/vtex.flex-layout.scss | 37 +++++++++++ .../pages/product/vtex.product-summary.scss | 26 ++++++++ styles/sass/pages/vtex.product-price.scss | 37 +++++++++++ 8 files changed, 276 insertions(+), 11 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 98095ac..a8d7d98 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -54,10 +54,24 @@ color: #000000; border-bottom: 1px solid #000000; } - +:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){ + margin-bottom: 20px; +} .html--pdp-productMain :global(.vtex-store-components-3-x-container){ max-width: 100%; } +:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){ + background: #000000; +} +:global(.vtex-slider-layout-0-x-paginationDotsContainer--pdp-carrousel){ + align-items: center; +} +:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel--isActive){ + min-width: 17px; + min-height: 17px; + border: 0.5px solid black; + background: #ffffff; +} @media screen and (max-width: 375px){ .html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){ min-width: 100% !important; @@ -77,7 +91,6 @@ } .html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){ width: auto; - } .html--pdp-departamens div ul{ flex-direction: column; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0b9249a..af163ab 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -6,6 +6,17 @@ "html#carousel" ] }, + "html#prateleira": { + "props": { + "testId": "vtex-product-sumary" + }, + "children": [ + "product-summary-image#shelfpdp", + "product-summary-name", + "product-list-price#summary", + "product-selling-price#summary" + ] + }, "html#carousel": { "children": ["flex-layout.row#shelfpdp"] }, @@ -31,7 +42,7 @@ }, "infinite": true, "fullWidth": true, - "blockClass": "pdp" + "blockClass": "pdp-carrousel" } }, @@ -40,16 +51,44 @@ "stack-layout#pdp", "product-summary-name", "product-list-price#summary", - "product-installments#summary", - "flex-layout.row#selling-price-savings" + "product-selling-price#summarypdp", + "flex-layout.row#selling-price-savingspdp" ] }, + + "flex-layout.row#selling-price-savingspdp": { + "props": { + "blockClass": "pdp-price", + "colGap": 2, + "preserveLayoutOnMobile": true, + "preventHorizontalStretch": true, + "marginBottom": 4 + }, + "children": [ + "product-selling-price#summary", + "product-price-savings#summary" + ] + }, + "product-summary-name": { + "props": { + "blockClass": "pdp-name" + } + }, "stack-layout#pdp": { "children": [ - "product-summary-image#shelf", + "product-summary-image#shelfpdp", "modal-trigger#quickview" // Check quickview.jsonc ] }, + + "product-summary-image#shelfpdp": { + "props": { + "blockClass": "pdp-imgpdp", + "showBadge": false, + "aspectRatio": "1:1", + "maxHeight": 334.4 + } + }, "html#breadcrumb": { "props": { "tag": "section", @@ -91,9 +130,9 @@ }, "children": ["product-images#description", "product-description"] }, - "product-description":{ - "props":{ - "collapseContent":false + "product-description": { + "props": { + "collapseContent": false } }, "condition-layout.product#availability": { @@ -194,7 +233,7 @@ }, "product-images#description": { "props": { - "maxHeight":872, + "maxHeight": 872, "testid": "product-images", "aspectRatio": { "desktop": "1:1", @@ -235,7 +274,12 @@ "message": "{installmentsNumber} de {installmentValue} sem juros" } }, - + "product-selling-price#summarypdp": { + "props": { + "blockClass": "desconto", + "message": "de {sellingPriceWithTax} por" + } + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 0ee13a7..9ab6e23 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -140,4 +140,37 @@ .flexRowContent--title { align-items: end; flex-direction: column-reverse; +} + +.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) { + top: 33%; +} +@media screen and (max-width: 1024px) { + .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) { + max-width: 11.2px; + max-height: 29.6px; + top: 25%; + padding: 0; + } +} +@media screen and (max-width: 1024px) { + .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) { + width: 4.9344% !important; + height: max-content; + min-height: max-content; + max-width: 274px; + } +} +@media screen and (max-width: 1024px) { + .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel) { + height: 100%; + max-height: 392px; + } +} + +.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) { + max-width: 100%; +} +.flexRow--pdp-price .flexRowContent--pdp-price { + justify-content: center; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 1f87cfd..5ccb422 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -107,4 +107,49 @@ } .installments .installmentsNumber::after { content: "x"; +} + +.sellingPriceValue--summary-pdp { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} +@media screen and (max-width: 1024px) { + .sellingPriceValue--summary-pdp { + font-size: 18px; + line-height: 25px; + } +} + +.sellingPrice--desconto { + display: flex; + justify-content: center; + gap: 5px; + text-decoration-line: line-through; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #BABABA; + margin-bottom: 8px; +} +@media screen and (max-width: 1024px) { + .sellingPrice--desconto { + font-size: 12px; + line-height: 16px; + } +} +.sellingPrice--desconto .sellingPriceValue--desconto { + font-size: 14px; + line-height: 19px; +} +@media screen and (max-width: 1024px) { + .sellingPrice--desconto .sellingPriceValue--desconto { + font-size: 12px; + line-height: 16px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index a6db70e..2484b75 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -54,4 +54,34 @@ } .nameContainer .productNameContainer { text-align: center; +} +@media screen and (max-width: 1024px) { + .nameContainer .productNameContainer--pdp-name { + max-height: 80px; + } +} + +@media screen and (min-width: 1920px) { + .image--pdp-imgpdp { + min-width: 334.4px; + } +} + +.nameContainer--pdp-name { + justify-content: center; +} + +.productBrand--pdp-name { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; +} +@media screen and (max-width: 1024px) { + .productBrand--pdp-name { + font-size: 14px; + line-height: 19px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 07feddb..495e092 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -133,5 +133,42 @@ align-items: end; flex-direction: column-reverse; } +.flexRowContent--pdp-carrousel{ + :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){ + top: 33%; + @media screen and (max-width: 1024px){ + max-width: 11.2px; + max-height: 29.6px; + top: 25%; + padding: 0; + } + } + :global(.vtex-slider-layout-0-x-slide--pdp-carrousel){ + @media screen and (max-width: 1024px){ + width: 4.9344% !important; + height: max-content; + min-height: max-content; + max-width: 274px; + } + } + :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){ + @media screen and (max-width: 1024px){ + height: 100%; + max-height: 392px; + } + } +} +.flexRow--pdp-carrousel{ + :global(.vtex-store-components-3-x-container){ + max-width: 100%; + } + @media screen and (max-width: 1024px){ + } +} +.flexRow--pdp-price{ + .flexRowContent--pdp-price{ + justify-content: center; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index f0c2dc8..defe4de 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -46,4 +46,30 @@ .productNameContainer{ text-align: center; } + + .productNameContainer--pdp-name{ + @media screen and (max-width: 1024px){ + max-height: 80px; + } + } +} +.image--pdp-imgpdp{ + @media screen and (min-width: 1920px){ + min-width: 334.4px; + } +} +.nameContainer--pdp-name{ + justify-content: center; +} +.productBrand--pdp-name{ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + @media screen and (max-width: 1024px){ + font-size: 14px; + line-height: 19px; + } } diff --git a/styles/sass/pages/vtex.product-price.scss b/styles/sass/pages/vtex.product-price.scss index 299d942..907ecbd 100644 --- a/styles/sass/pages/vtex.product-price.scss +++ b/styles/sass/pages/vtex.product-price.scss @@ -102,3 +102,40 @@ } } } +.sellingPriceValue--summary-pdp{ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; + @media screen and (max-width: 1024px){ + font-size: 18px; + line-height: 25px; + } +} +.sellingPrice--desconto{ + display: flex; + justify-content: center; + gap: 5px; + text-decoration-line: line-through; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #BABABA; + margin-bottom: 8px; + @media screen and (max-width: 1024px){ + font-size: 12px; + line-height: 16px; + } + .sellingPriceValue--desconto{ + font-size: 14px; + line-height: 19px; + @media screen and (max-width: 1024px){ + font-size: 12px; + line-height: 16px; + } + } +}