diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b41d781..c85f564 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": { @@ -126,7 +129,6 @@ "flex-layout.row#cart", "product-assembly-options", "product-gifts", - "availability-subscriber", "shipping-simulator" ] @@ -135,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": { @@ -150,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"] @@ -200,7 +211,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 +232,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,17 +266,47 @@ } }, "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"] + "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.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/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/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 17fb098..55f8050 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -157,4 +157,93 @@ 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; +} + +.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; +} +.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/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.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; + } } } 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; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index cd73e7c..756b124 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -159,3 +159,96 @@ 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; + } +} + +.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; + } + :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; + } + } + } +} 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; +}