From c085281a6896fed5972f6a65af42f052c4c5762d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Thu, 26 Jan 2023 18:08:57 -0300 Subject: [PATCH] feat(pdp): Adiciona slider layout --- store/blocks/pdp/product.jsonc | 37 ++++++++++-- .../product-summary-list.jsonc | 30 +++------- .../product-summary/product-summary.jsonc | 24 ++++---- styles/css/vtex.product-price.css | 21 +++++++ styles/css/vtex.product-summary.css | 58 +++++++------------ styles/css/vtex.rich-text.css | 13 ++++- styles/css/vtex.slider-layout.css | 56 +++++++++--------- styles/css/vtex.store-components.css | 22 ++++++- .../pages/product/vtex.product-price.scss | 29 ++++++++++ .../pages/product/vtex.product-summary.scss | 16 +++++ styles/sass/pages/product/vtex.rich-text.scss | 12 ++++ .../pages/product/vtex.slider-layout.scss | 29 ++++++++++ .../pages/product/vtex.store-components.scss | 22 ++++++- styles/sass/utils/_vars.scss | 1 + 14 files changed, 262 insertions(+), 108 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 3a4fd7d..3cea114 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,13 +7,40 @@ "tab-layout#details", /*"html#description",*/ /*"flex-layout.row#description",*/ - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + /*"flex-layout.row#specifications-title",*/ + /*"product-specification-group#table",*/ + + "list-context.product-list#prateleira", + /*"shelf.relatedProducts",*/ "product-questions-and-answers" ] }, + "list-context.product-list#prateleira": { + "blocks": ["product-summary.shelf"], + "children": ["rich-text#prateleira", "slider-layout#prateleira"] + }, + "rich-text#prateleira": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar:", + "blockClass": "title-prateleira" + } + }, + "slider-layout#prateleira": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 1 + }, + "infinite": true, + "fullWidth": false, + "blockClass": "prateleira" + } + }, + "tab-layout#details": { "children": ["tab-list#details", "tab-content#details"], "props": { @@ -86,6 +113,7 @@ "product-images#description": { "props": { "displayMode": "first-image", + "zoomMode": "disabled", "blockClass": "description-imagem" } }, @@ -188,8 +216,7 @@ "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0, - "width": "46%" + "rowGap": 0 }, "children": [ "flex-layout.row#product-name", diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..971cd70 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,10 +112,7 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ @@ -144,7 +130,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index bb93cc8..d17137d 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -6,9 +6,9 @@ "flex-layout.col#productRating", "product-summary-space", "product-list-price#summary", - "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "flex-layout.row#selling-price-savings" + /*"product-installments#summary", + "add-to-cart-button"*/ ] }, "flex-layout.col#productRating": { @@ -20,9 +20,9 @@ "stack-layout#prodsum": { "children": [ - "product-summary-image#shelf", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc + "product-summary-image#shelf" + /*"vtex.product-highlights@2.x:product-highlights#collection",*/ + /*"modal-trigger#quickview" // Check quickview.jsonc*/ ] }, @@ -54,19 +54,21 @@ "product-list-price#summary": { "props": { - "blockClass": "summary" + "blockClass": "summary", + "labelListPrice": "teste" } }, "flex-layout.row#selling-price-savings": { "props": { - "colGap": 2, + /*"colGap": 2,*/ "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, - "marginBottom": 4 + /*"marginBottom": 4,*/ + "horizontalAlign": "center" }, "children": [ - "product-selling-price#summary", - "product-price-savings#summary" + "product-selling-price#summary" + /*"product-price-savings#summary"*/ ] }, "product-installments#summary": { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 1ea5198..0d3b6f2 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -23,4 +23,25 @@ .installments--parcelamentos .installmentValue::before { content: "de "; font-weight: 400; +} + +.listPrice--summary { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + margin-bottom: 8px; +} +.listPrice--summary :global(.vtex-product-price-1-x-currencyCode--summary)::before { + content: "de "; +} +.listPrice--summary :global(.vtex-product-price-1-x-listPriceValue--summary):last-child::after { + content: " por"; +} + +.sellingPrice--summary { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..481022f 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,24 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { text-align: center; + padding-top: 8px; + padding-bottom: 8px; +} +.nameContainer .productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; } -.image { - border-radius: 0.25rem; -} +.spacer { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..765a2aa 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,15 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--title-prateleira { + margin-top: 16px; + margin-bottom: 12px; +} +.container--title-prateleira .paragraph--title-prateleira { + margin: 0; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..46fc61f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,33 @@ -.sliderLayoutContainer { - justify-content: center; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.paginationDotsContainer--prateleira { + align-items: center; +} +.paginationDotsContainer--prateleira .paginationDot--prateleira { + background-color: #000000; + margin-left: 6px; + margin-right: 6px; +} +.paginationDotsContainer--prateleira .paginationDot--prateleira--isActive { + background-color: #fff; + border: 0.5px solid #000000; + width: 17px !important; + height: 17px !important; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.slide--prateleira { + margin-right: 8px; + margin-left: 8px; + margin-bottom: 32px; } -.sliderTrackContainer { - max-width: 100%; -} - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.sliderArrows--prateleira { + margin: 14px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 72c4e62..c082c8d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -44,6 +44,7 @@ .productImagesThumb { max-width: 90px; + width: 90px !important; margin-right: 16px; } @@ -289,6 +290,9 @@ border: 1px solid red; } +.subscriberContainer { + position: relative; +} .subscriberContainer .title { font-size: 0; margin: 0; @@ -330,21 +334,24 @@ color: #989898; } .subscriberContainer .content :global(.vtex-input-prefix__group) { - border: none; + border: 0.6px solid #989898; + border-radius: 0%; } .subscriberContainer .content .inputEmail, .subscriberContainer .content .inputName { - border: 0.6px solid #989898; margin: 0; } .subscriberContainer .content .submit { position: absolute; top: 55px; width: 100%; + cursor: pointer; } .subscriberContainer .content .submit :global(.vtex-button) { width: 100%; background-color: #000000; + border: none; + border-radius: 0%; height: 49px; } .subscriberContainer .content .submit :global(.vtex-button__label) { @@ -356,4 +363,15 @@ font-size: 18px; line-height: 25px; color: #fff; +} +.subscriberContainer .content :global(.vtex-input__error) { + margin: 0; + font-size: 12px; + line-height: 16px; +} +.subscriberContainer .success { + position: absolute; + top: 90px; + font-size: 12px; + line-height: 16px; } \ 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 5db2a28..1fbd38f 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -18,3 +18,32 @@ } } } + +//PRATELEIRA PRECOS +.listPrice--summary { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray11; + margin-bottom: 8px; + + :global(.vtex-product-price-1-x-currencyCode--summary) { + &::before { + content: "de "; + } + } + :global(.vtex-product-price-1-x-listPriceValue--summary) { + &:last-child { + &::after { + content: " por"; + } + } + } +} + +.sellingPrice--summary { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-black-100; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..ef441e5 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,16 @@ +.nameContainer { + text-align: center; + padding-top: 8px; + padding-bottom: 8px; + + .productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-black-100; + } +} + +.spacer { + display: none; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..639c62d 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,12 @@ +.container--title-prateleira { + margin-top: 16px; + margin-bottom: 12px; + + .paragraph--title-prateleira { + margin: 0; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-gray8; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..227b96d --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,29 @@ +//DOTS + +.paginationDotsContainer--prateleira { + align-items: center; + + .paginationDot--prateleira { + background-color: $color-black-100; + margin-left: 6px; + margin-right: 6px; + } + + .paginationDot--prateleira--isActive { + background-color: $color-white; + border: 0.5px solid #000000; + width: 17px !important; + height: 17px !important; + } +} + +//SLIDES +.slide--prateleira { + margin-right: 8px; + margin-left: 8px; + margin-bottom: 32px; +} + +.sliderArrows--prateleira { + margin: 14px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8812c36..ca74330 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -35,6 +35,7 @@ .productImagesThumb { max-width: 90px; + width: 90px !important; margin-right: 16px; } @@ -323,6 +324,8 @@ //PRODUTO INDISPONIVEL .subscriberContainer { + position: relative; + .title { font-size: 0; margin: 0; @@ -368,12 +371,12 @@ } :global(.vtex-input-prefix__group) { - border: none; + border: 0.6px solid $color-gray7; + border-radius: 0%; } .inputEmail, .inputName { - border: 0.6px solid $color-gray7; margin: 0; } @@ -381,10 +384,13 @@ position: absolute; top: 55px; width: 100%; + cursor: pointer; :global(.vtex-button) { width: 100%; background-color: $color-black-100; + border: none; + border-radius: 0%; height: 49px; } @@ -399,5 +405,17 @@ } } } + + :global(.vtex-input__error) { + margin: 0; + font-size: 12px; + line-height: 16px; + } + } + .success { + position: absolute; + top: 90px; + font-size: 12px; + line-height: 16px; } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 11a593b..67cc4d0 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -14,6 +14,7 @@ $color-gray7: #989898; $color-gray8: #575757; $color-gray9: #bfbfbf; $color-gray10: #868686; +$color-gray11: #bababa; $color-blue: #4267b2;