From 529f0db0095c203653b256254349dcd8672814d0 Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Sat, 28 Jan 2023 19:19:19 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Cria=20bloco=20de=20descri=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 164 +++++++++++++++--- styles/css/vtex.store-components.css | 35 +++- styles/css/vtex.styleguide.css | 17 ++ styles/css/vtex.tab-layout.css | 55 ++++++ .../pages/product/vtex.store-components.scss | 47 ++++- .../sass/pages/product/vtex.tab-layout.scss | 77 ++++++++ styles/sass/utils/_vars.scss | 1 + 7 files changed, 367 insertions(+), 29 deletions(-) create mode 100644 styles/css/vtex.styleguide.css create mode 100644 styles/css/vtex.tab-layout.css 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 cc5cfb1..0c24007 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,10 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + "tab-layout", "shelf.relatedProducts", "product-questions-and-answers", "newsletter" @@ -68,14 +69,14 @@ ] }, - "product-specification-badges": { - "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } - }, + // "product-specification-badges": { + // "props": { + // "specificationGroupName": "Group", + // "specificationName": "On Sale", + // "visibleWhen": "True", + // "displayValue": "SPECIFICATION_NAME" + // } + // }, "flex-layout.col#stack": { "children": ["stack-layout"], @@ -110,7 +111,6 @@ "flex-layout.row#selling-price", "product-installments", "sku-selector", - // "flex-layout.row#buy-button", "html#buy-button", "product-gifts", "availability-subscriber", @@ -148,15 +148,6 @@ "children": ["product-quantity#size", "add-to-cart-button"] }, - // "flex-layout.row#buy-button": { - // "props": { - // "marginTop": 4, - // "marginBottom": 7, - // "blockClass": "buy-button" - // }, - // "children": ["product-quantity#size", "add-to-cart-button"] - // }, - "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -197,6 +188,137 @@ } }, + "tab-layout": { + "children": ["tab-list", "tab-content"], + "props": { + "blockClass": "tabLayout" + } + }, + + "tab-list": { + "children": [ + "tab-list.item#1", + "tab-list.item#2", + "tab-list.item#3", + "tab-list.item#4", + "tab-list.item#5" + ], + "props": { + "blockClass": "tabList" + } + }, + + "tab-content": { + "children": [ + "tab-content.item#1", + "tab-content.item#2", + "tab-content.item#3", + "tab-content.item#4", + "tab-content.item#5" + ], + "props": { + "blockClass": "tabContent" + } + }, + + "tab-list.item#1": { + "props": { + "tabId": "description#1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#2": { + "props": { + "tabId": "description#2", + "label": "Descrição" + } + }, + + "tab-list.item#3": { + "props": { + "tabId": "description#3", + "label": "Descrição" + } + }, + + "tab-list.item#4": { + "props": { + "tabId": "description#4", + "label": "Descrição" + } + }, + + "tab-list.item#5": { + "props": { + "tabId": "description#5", + "label": "Descrição" + } + }, + + "tab-content.item#1": { + "children": ["product-images", "rich-text#1"], + "props": { + "tabId": "description#1" + } + }, + "tab-content.item#2": { + "children": ["product-images", "rich-text#2"], + "props": { + "tabId": "description#2" + } + }, + "tab-content.item#3": { + "children": ["product-images", "rich-text#3"], + "props": { + "tabId": "description#3" + } + }, + "tab-content.item#4": { + "children": ["product-images", "rich-text#4"], + "props": { + "tabId": "description#4" + } + }, + "tab-content.item#5": { + "children": ["product-images", "rich-text#5"], + "props": { + "tabId": "description#5" + } + }, + + "rich-text#1": { + "props": { + "text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.", + "textPosition": "CENTER" + } + }, + "rich-text#2": { + "props": { + "text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.", + "textPosition": "CENTER" + } + }, + "rich-text#3": { + "props": { + "text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.", + "textPosition": "CENTER" + } + }, + "rich-text#4": { + "props": { + "text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.", + "textPosition": "CENTER" + } + }, + "rich-text#5": { + "props": { + "text": "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.", + "textPosition": "CENTER" + } + }, + "newsletter": { "props": { "label": "Assine nossa newsletter \n Receba ofertas e novidades por e-mail", diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 962e553..689f6d3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -25,8 +26,7 @@ } .container { - margin: 0 36px; - padding: 0 4px; + padding: 0 40px; } @media screen and (min-width: 112.5em) { .container { @@ -308,4 +308,35 @@ } .shippingTable .shippingTableRadioBtn { display: none; +} + +.subscriberContainer .title { + font-size: 0; + margin: 0; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .form :global(.vtex-input-prefix__group) { + border-radius: 0; + border: 1px solid #989898; +} +.subscriberContainer .form :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; } \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css new file mode 100644 index 0000000..8f117f8 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,17 @@ +/* +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 */ +.subscriberContainer .hideDecorators::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; +} +.subscriberContainer :global(.vtex-styleguide-9-x-input) { + border: 1px solid red; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..c47bf34 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,55 @@ +/* +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 */ +:global(.vtex-tab-layout-0-x-container) { + padding: 0 40px; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList { + border-bottom: 1px solid #bfbfbf; + height: 43px; + justify-content: space-between; + padding: 0 70px; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button):hover { + height: 43px; + border: none; + background-color: white; + padding: 0; + margin: 0; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: #bfbfbf; + text-transform: capitalize; + padding: 0; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label):hover { + background-color: #fff; + padding: 0; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button) { + background-color: white; + border: none; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) { + color: #000000; + background-color: #fff; + border-bottom: 2px solid #000000; + padding: 0; +} +:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label):hover { + border-bottom: 2px solid #000000; +} +:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) :global(.vtex-tab-layout-0-x-contentItem) .paragraph { + font-weight: 400; + font-size: 16px; + line-height: 22px; +} \ 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 f1b89a4..b35c956 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -25,8 +25,7 @@ } .container { - margin: 0 36px; - padding: 0 4px; + padding: 0 40px; @media screen and (min-width: 112.5em) { margin: 6px 356px; @@ -86,10 +85,6 @@ // height: 48px; } - // .skuSelectorInternalBox { - // border-color: $gray-800; - // } - .frameAround { border-color: $black; } @@ -360,3 +355,43 @@ display: none; } } + +.subscriberContainer { + .title { + font-size: 0; + margin: 0; + + &::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $gray-50; + } + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-50; + } + } + + .form { + :global(.vtex-input-prefix__group) { + border-radius: 0; + border: 1px solid $gray-800; + + :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + } + } +} 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..e4a4e9e --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,77 @@ +:global(.vtex-tab-layout-0-x-container) { + padding: 0 40px; + + .listContainer--tabList { + border-bottom: 1px solid $gray-100; + height: 43px; + justify-content: space-between; + padding: 0 70px; + + .listItem { + :global(.vtex-button) { + &:hover { + height: 43px; + border: none; + background-color: white; + padding: 0; + margin: 0; + } + } + + :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: $gray-100; + text-transform: capitalize; + padding: 0; + + &:hover { + background-color: $white; + padding: 0; + } + } + } + + .listItemActive { + :global(.vtex-button) { + background-color: white; + border: none; + + } + :global(.vtex-button__label) { + color: $black; + background-color: $white; + border-bottom: 2px solid $black; + padding: 0; + + &:hover { + border-bottom: 2px solid $black; + } + } + } + } + + :global(.vtex-tab-layout-0-x-contentContainer) { + + :global(.vtex-tab-layout-0-x-contentItem) { + .paragraph { + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + } + + // .contentItem { + // display: flex; + // flex-direction: row; + + // .productImageTag { + // width: 50%; + // } + // } + // .carouselGaleryThumbs { + // display: none; + // } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 4541348..7e8167d 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -2,6 +2,7 @@ $white: #fff; +$gray-50: #868686; $gray-100: #bfbfbf; $gray-200: #b9b9b9; $gray-300: #bababa;