From 1d972c38f2919a1c5b272e0b39a54fecee29ff0d Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 10:45:27 -0300 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20Adicionado=20o=20estilo=20da=20desc?= =?UTF-8?q?ri=C3=A7=C3=A3o=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 55 ++++++++++++++-- styles/css/vtex.store-components.css | 17 +++++ styles/css/vtex.tab-layout.css | 62 ++++++++++++++++++- .../pages/product/vtex.store-components.scss | 20 ++++++ .../sass/pages/product/vtex.tab-layout.scss | 54 ++++++++++++++++ 5 files changed, 203 insertions(+), 5 deletions(-) create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b41d781..59b8a51 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -126,7 +126,6 @@ "flex-layout.row#cart", "product-assembly-options", "product-gifts", - "availability-subscriber", "shipping-simulator" ] @@ -200,7 +199,13 @@ } }, "tab-list#product": { - "children": ["tab-list.item#product1", "tab-list.item#product2"] + "children": [ + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" + ] }, "tab-list.item#product1": { "props": { @@ -215,8 +220,32 @@ "label": "Descrição" } }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição" + } + }, + "tab-list.item#product5": { + "props": { + "tabId": "product5", + "label": "Descrição" + } + }, "tab-content#product": { - "children": ["tab-content.item#product1", "tab-content.item#product2"] + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] }, "tab-content.item#product1": { "children": ["product-images#descricao", "product-description"], @@ -225,11 +254,29 @@ } }, "tab-content.item#product2": { - "children": ["product-description"], + "children": ["product-images#descricao", "product-description"], "props": { "tabId": "product2" } }, + "tab-content.item#product3": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product3" + } + }, + "tab-content.item#product4": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product4" + } + }, + "tab-content.item#product5": { + "children": ["product-images#descricao", "product-description"], + "props": { + "tabId": "product5" + } + }, "list-context.product-list#shelf": { "blocks": ["product-summary.shelf#shelf"], "children": ["slider-layout#shelf-products"] diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 17fb098..4945797 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -157,4 +157,21 @@ position: relative; left: 70px; top: 8px; +} + +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +.productDescriptionContainer .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index ae31ca0..d63cf56 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -1,4 +1,64 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +.container { + margin-bottom: 16px; +} + +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; +} +.listContainer .listItem { + padding: 0; + margin: 0; +} +.listContainer .listItem :global(.vtex-button) { + background: white; + border: none; + border-radius: 0; +} +.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #bfbfbf; + text-transform: initial; +} +.listContainer .listItemActive :global(.vtex-button) { + background: white; + border-bottom: 2px solid #000000; + border-radius: 0; +} +.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #000000; + text-transform: initial; +} + .contentItem { display: flex; flex-direction: row; -} + gap: 32px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index cd73e7c..f66a67b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -159,3 +159,23 @@ top: 8px; } } + +//Estilização da descrição do produto +.productDescriptionContainer { + .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + } + .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..e91615b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,54 @@ +.container { + margin-bottom: 16px; +} +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #b9b9b9; + margin-bottom: 32px; + .listItem { + padding: 0; + margin: 0; + :global(.vtex-button) { + background: white; + border: none; + border-radius: 0; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #bfbfbf; + text-transform: initial; + } + } + } + .listItemActive { + :global(.vtex-button) { + background: white; + border-bottom: 2px solid #000000; + border-radius: 0; + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + color: #000000; + text-transform: initial; + } + } + } +} +.contentItem { + display: flex; + flex-direction: row; + gap: 32px; +} From aeea58a8c67e29f9f9b36f9cb57b20a9133109d6 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 12:07:19 -0300 Subject: [PATCH 2/5] feat: Adicionando os estilos do shelf --- store/blocks/pdp/product.jsonc | 21 ++++++-- styles/css/vtex.rich-text.css | 10 +++- styles/css/vtex.slider-layout.css | 49 ++++++++----------- styles/sass/pages/product/vtex.rich-text.scss | 9 ++++ .../pages/product/vtex.slider-layout.scss | 12 +++++ 5 files changed, 68 insertions(+), 33 deletions(-) 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 59b8a51..dbdd649 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -9,7 +9,10 @@ "list-context.product-list#shelf", "newsletter", "product-questions-and-answers" - ] + ], + "props": { + "blockClass": "productAll" + } }, "html#breadcrumb": { "props": { @@ -279,10 +282,22 @@ }, "list-context.product-list#shelf": { "blocks": ["product-summary.shelf#shelf"], - "children": ["slider-layout#shelf-products"] + "children": ["rich-text#shelf", "slider-layout#shelf-products"] + }, + "rich-text#shelf": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar: ", + "blockClass": "shelfTitle" + } }, "product-summary.shelf#shelf": { - "children": ["product-summary-image#shelf", "product-summary-price"] + "children": [ + "product-summary-image#shelf", + "product-summary-name", + "product-summary-price" + ] }, "slider-layout#shelf-products": { "props": { diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index f5ba8ae..f03cef1 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,4 +7,12 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--shelfTitle { + font-family: "Open Sans"; + font-style: normal; + 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..72afeb0 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,22 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ +/*.sliderLayoutContainer { + margin: 0 40px 0 40px; + .sliderRightArrow { + right: 100px; + } +}*/ .sliderLayoutContainer { + width: 95%; + padding: 0 16px 0 16px; + display: flex; justify-content: center; -} - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.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; -} +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..91c03e5 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,9 @@ +.container--shelfTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + color: #575757; +} 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..8052275 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,12 @@ +/*.sliderLayoutContainer { + margin: 0 40px 0 40px; + .sliderRightArrow { + right: 100px; + } +}*/ +.sliderLayoutContainer { + width: 95%; + padding: 0 16px 0 16px; + display: flex; + justify-content: center; +} From 1c414418014ead382b2204a942d5226f47ec23b5 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 13:33:02 -0300 Subject: [PATCH 3/5] feat: Adicionado o estilo do newsletter --- store/blocks/pdp/product.jsonc | 17 +++++-- styles/css/vtex.store-components.css | 50 +++++++++++++++++++ .../pages/product/vtex.store-components.scss | 50 +++++++++++++++++++ 3 files changed, 113 insertions(+), 4 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dbdd649..c85f564 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -137,7 +137,7 @@ "props": { "blockClass": "cart" }, - "children": ["product-quantity", "flex-layout.row#buy-button"] + "children": ["product-quantity#qtd", "flex-layout.row#buy-button"] }, "flex-layout.row#product-name": { "props": { @@ -152,11 +152,20 @@ "showValueNameForImageVariation": true } }, - + "product-quantity#qtd": { + "props": { + "width": "25%", + "size": "regular", + "blockClass": "buyQtd" + } + //"children": ["product-quantity"] + }, "flex-layout.row#buy-button": { "props": { - "width": "80%", - "blockClass": "buyButton" + "blockClass": "buyButton", + "marginTop": "4", + "marginBottom": "7", + "paddingRight": "0" }, "children": ["add-to-cart-button"] diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4945797..b40abe3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -174,4 +174,54 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.newsletter { + margin-top: 64px; +} +.newsletter .container { + display: flex; + height: 175px; + padding: 0 0 0 0; + background: black; + align-items: center; + justify-content: center; +} +.newsletter .container .label { + display: flex; + flex-direction: column; + font-size: 0; +} +.newsletter .container .label::before { + content: "Assine nossa Newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; +} +.newsletter .container .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} +.newsletter .container :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + width: 774px; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; +} +.newsletter .container :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f66a67b..9f70129 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -179,3 +179,53 @@ color: #929292; } } + +.newsletter { + margin-top: 64px; + .container { + display: flex; + height: 175px; + padding: 0 0 0 0; + background: black; + align-items: center; + justify-content: center; + .label { + display: flex; + flex-direction: column; + font-size: 0; + &::before { + content: "Assine nossa Newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + } + } + :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + width: 774px; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + } + } +} From 557d8de30af30c08ec5ce05507b590d62a411145 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 16:33:22 -0300 Subject: [PATCH 4/5] feat: Adicionado os estilos do breadcrumb --- styles/css/vtex.breadcrumb.css | 23 ++++++++++++-- .../sass/pages/product/vtex.breadcrumb.scss | 30 +++++++++++++++---- 2 files changed, 44 insertions(+), 9 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index dc77e8c..aaf448f 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,10 +8,27 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ -.homeIcon { +.container { + margin-left: 40px; +} +.container .homeIcon { display: none; } - -.homeLink::after { +.container .Link, +.container .term { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .homeLink::after { content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 80c6236..5452501 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,8 +1,26 @@ -.homeIcon { - display: none; -} -.homeLink { - &::after { - content: "Home"; +.container { + margin-left: 40px; + .homeIcon { + display: none; + } + .Link, + .term { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + .homeLink { + &::after { + content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } } } From 3ffb27280c2b2910a8de1ad57e3bf4e453f4ed58 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 16:51:24 -0300 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20Adicionado=20estilo=20do=20bot?= =?UTF-8?q?=C3=A3o=20do=20newsletter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 22 ++++++++++++++++++ .../pages/product/vtex.store-components.scss | 23 +++++++++++++++++++ 2 files changed, 45 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b40abe3..55f8050 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -224,4 +224,26 @@ .newsletter .container :global(.vtex-styleguide-9-x-input) { background: transparent; padding: 0 0 0 0; +} +.newsletter .container :global(.vtex-button) { + position: relative; + left: 145px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; +} +.newsletter .container :global(.vtex-button):hover { + border-bottom: 5px solid #bfbfbf; +} +.newsletter .container :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + border: 1px solid #000000; + text-transform: uppercase; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9f70129..756b124 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -227,5 +227,28 @@ background: transparent; padding: 0 0 0 0; } + :global(.vtex-button) { + position: relative; + left: 145px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; + } + + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + border: 1px solid #000000; + text-transform: uppercase; + } + } } }