From dae5d86043435b23a430ece4a798c469263c7465 Mon Sep 17 00:00:00 2001 From: amanda almeida Date: Sat, 28 Jan 2023 23:37:04 -0300 Subject: [PATCH] =?UTF-8?q?feat(description):=20adiciona=20altera=C3=A7?= =?UTF-8?q?=C3=B5es=20e=20css=20da=20descri=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-tab-layout.jsonc | 103 ++++++++++++++++++ store/blocks/pdp/product.jsonc | 21 +--- styles/css/vtex.breadcrumb.css | 6 +- styles/css/vtex.store-components.css | 34 +++++- styles/css/vtex.tab-layout.css | 73 +++++++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 24 ++-- .../pages/product/vtex.store-components.scss | 38 ++++++- .../sass/pages/product/vtex.tab-layout.scss | 82 ++++++++++++++ 8 files changed, 350 insertions(+), 31 deletions(-) create mode 100644 store/blocks/pdp/product-tab-layout.jsonc 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-tab-layout.jsonc b/store/blocks/pdp/product-tab-layout.jsonc new file mode 100644 index 0000000..43ce76d --- /dev/null +++ b/store/blocks/pdp/product-tab-layout.jsonc @@ -0,0 +1,103 @@ +{ + "image#image1": { + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-1200-auto?v=637781133812700000&width=1200&height=auto&aspect=true" + } + }, + + "product-description": { + "props": { + "collapseContent": false + } + }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + "tab-list#description": { + "props": { + "blockClass": "description" + }, + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição" + } + }, + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição" + } + }, + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição" + } + }, + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição" + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + "tab-content.item#description1": { + "children": ["image#image1", "product-description"], + "props": { + "tabId": "description1" + } + }, + "tab-content.item#description2": { + "children": ["image#image1", "product-description"], + "props": { + "tabId": "description2" + } + }, + "tab-content.item#description3": { + "children": ["image#image1", "product-description"], + "props": { + "tabId": "description3" + } + }, + "tab-content.item#description4": { + "children": ["image#image1", "product-description"], + "props": { + "tabId": "description4" + } + }, + "tab-content.item#description5": { + "children": ["image#image1", "product-description"], + "props": { + "tabId": "description5" + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 668b5bc..ef8297c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + "tab-layout#description", "shelf.relatedProducts", "product-questions-and-answers" ] @@ -16,25 +16,6 @@ }, "children": ["breadcrumb"] }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["html#product-image", "product-description"] - }, - - "html#product-image": { - "children": ["product-images#description"] - }, - - "product-images#description": { - "props": { - "blockClass": "product-images-description", - "thumbnailVisibility": "hidden", - "showNavigationArrows": false, - "showPaginationDots": false - } - }, "condition-layout.product#availability": { "props": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 4cf87e8..f736210 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -16,6 +16,7 @@ .homeLink::after { content: "Home"; font-size: 14px; + padding-right: 0.25rem; } .homeIcon, @@ -32,7 +33,6 @@ .link--1::after { content: "Sapatos"; font-size: 14px; - padding-left: 0.25rem; padding-right: 0.25rem; } @@ -40,4 +40,8 @@ font-weight: 400; font-size: 14px; line-height: 19px; +} + +.arrow { + padding: 0; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 996df71..c37ed8a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -29,7 +29,6 @@ .carouselGaleryCursor { margin: 0; - margin-bottom: 16px; padding: 0; } @@ -293,6 +292,28 @@ display: none; } +.imageElement { + width: 50%; + max-height: 632px; +} + +.productDescriptionContainer { + width: 50%; +} + +.productDescriptionTitle { + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + font-size: 16px; + line-height: 22px; + color: #929292; +} + @media screen and (max-width: 1024px) { .productImageTag--main { max-height: 994px !important; @@ -300,6 +321,17 @@ .productNameContainer { text-align: start; } + .imageElement { + width: 100%; + max-height: 944px; + } + .productDescriptionContainer { + width: 100%; + } + .productDescriptionText { + padding-bottom: 16px; + border-bottom: 1px solid #B9B9B9; + } } @media screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..da01683 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,73 @@ +/* +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 */ +.container--description { + padding: 0 40px; +} +.container--description .listContainer--description { + display: flex; + justify-content: space-between; + padding: 0 80px; + border-bottom: 1px solid #B9B9B9; +} +.container--description .listContainer--description .listItem { + margin: 0; + padding: 0; +} +.container--description .listContainer--description .listItem :global(.vtex-button) { + border: 0; + padding-top: 16px; +} +.container--description .listContainer--description .listItem :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + display: flex; + align-items: center; + text-align: center; + padding: 0 !important; + color: #BFBFBF; +} +.container--description .listContainer--description .listItemActive :global(.vtex-button) { + border: 0; + border-bottom: 2px solid #000000; + background-color: transparent; + font-weight: 400; +} +.container--description .listContainer--description .listItemActive :global(.vtex-button__label) { + color: #000000; +} + +.contentItem { + display: flex; + gap: 32px; + padding: 32px 32px 0; +} + +@media screen and (max-width: 1024px) { + .container--description { + margin-top: 16px; + } + .container--description .listContainer--description { + flex-direction: column; + border: 1px solid #B9B9B9; + border-width: 1px 0; + padding: 0 0 16px; + } + .container--description .listContainer--description .listItemActive :global(.vtex-button) { + border-bottom: 0; + } + .contentItem { + flex-direction: column; + padding: 0; + margin-top: 16px; + gap: 16px; + } +} \ 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 d85a67c..7dfbdee 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -4,9 +4,12 @@ padding: 0 40px; } -.homeLink::after { - content: "Home"; - font-size: 14px; +.homeLink { + &::after { + content: "Home"; + font-size: 14px; + padding-right: 0.25rem; + } } .homeIcon, @@ -20,11 +23,12 @@ height: 23px; } -.link--1::after { - content: "Sapatos"; - font-size: 14px; - padding-left: 0.25rem; - padding-right: 0.25rem; +.link--1 { + &::after { + content: "Sapatos"; + font-size: 14px; + padding-right: 0.25rem; + } } :global(.vtex-breadcrumb-1-x-container) { @@ -32,3 +36,7 @@ font-size: 14px; line-height: 19px; } + +.arrow { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 72d1f0a..8e8e884 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -20,7 +20,6 @@ .carouselGaleryCursor { margin: 0; - margin-bottom: 16px; padding: 0; } @@ -331,6 +330,29 @@ } } +.imageElement { + width: 50%; + max-height: 632px; +} + +.productDescriptionContainer { + width: 50%; +} + +.productDescriptionTitle { + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + font-size: 16px; + line-height: 22px; + + color: #929292; +} + @media screen and (min-width: 1920px) {} @@ -343,6 +365,20 @@ .productNameContainer { text-align: start; } + + .imageElement { + width: 100%; + max-height: 944px; + } + + .productDescriptionContainer { + width: 100%; + } + + .productDescriptionText { + padding-bottom: 16px; + border-bottom: 1px solid #B9B9B9; + } } @media screen and (max-width: 768px) { 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..55f65df --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,82 @@ +.container--description { + padding: 0 40px; + + .listContainer--description { + display: flex; + justify-content: space-between; + padding: 0 80px; + border-bottom: 1px solid #B9B9B9; + + + .listItem { + margin: 0; + padding: 0; + + :global(.vtex-button) { + border: 0; + padding-top: 16px; + } + + :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + display: flex; + align-items: center; + text-align: center; + padding: 0 !important; + color: #BFBFBF; + } + + } + + .listItemActive { + :global(.vtex-button) { + border: 0; + border-bottom: 2px solid #000000; + background-color: transparent; + font-weight: 400; + } + + :global(.vtex-button__label) { + color: #000000; + } + + } + } +} + +.contentItem { + display: flex; + gap: 32px; + padding: 32px 32px 0; +} + +@media screen and (max-width: 1024px) { + + .container--description { + margin-top: 16px; + + .listContainer--description { + flex-direction: column; + border: 1px solid #B9B9B9; + border-width: 1px 0; + padding: 0 0 16px; + + + .listItemActive { + :global(.vtex-button) { + border-bottom: 0; + } + } + } + } + + .contentItem { + flex-direction: column; + padding: 0; + margin-top: 16px; + gap: 16px; + } +}