From 07e782dee6dd8a308da37b72b10fa39b6771d6c0 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Fri, 27 Jan 2023 16:32:01 -0300 Subject: [PATCH] feat(pdp/shelf/tab-layout): created initial blocks and styles for medium, small devices --- .../pdp/product-specifications-table.jsonc | 191 ++++++++++++------ store/blocks/pdp/product.jsonc | 72 +++++-- .../product-summary/product-summary.jsonc | 22 +- styles/configs/style.json | 4 +- styles/css/vtex.flex-layout.css | 25 +++ styles/css/vtex.product-summary.css | 26 ++- styles/css/vtex.shelf.css | 16 ++ styles/css/vtex.store-components.css | 3 + styles/css/vtex.tab-layout.css | 26 +++ .../pages/product/vtex-product-quantity.scss | 0 .../sass/pages/product/vtex.flex-layout.scss | 29 +++ .../pages/product/vtex.product-summary.scss | 44 ++++ styles/sass/pages/product/vtex.shelf.scss | 9 + .../pages/product/vtex.store-components.scss | 4 + .../sass/pages/product/vtex.tab-layout.scss | 24 +++ 15 files changed, 384 insertions(+), 111 deletions(-) create mode 100644 styles/css/vtex.shelf.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex-product-quantity.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.shelf.scss create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index add3a64..783a69f 100644 --- a/store/blocks/pdp/product-specifications-table.jsonc +++ b/store/blocks/pdp/product-specifications-table.jsonc @@ -1,83 +1,146 @@ { - "product-specification-group#table": { + "tab-layout#product-specification": { "children": [ - "flex-layout.row#spec-group" + "tab-list#product-specification", + "tab-content#product-specification" ] }, - "flex-layout.row#spec-group": { + + "tab-list#product-specification": { "props": { - "blockClass": "productSpecificationGroup" + "blockClass": "ProductSpecificationTabList" }, + "children": [ - "flex-layout.col#spec-group" + "tab-list.item#specification-1", + "tab-list.item#specification-2", + "tab-list.item#specification-3", + "tab-list.item#specification-4" ] }, - "flex-layout.col#spec-group": { - "children": [ - "flex-layout.row#spec-group-name", - "product-specification" - ] - }, - "flex-layout.row#spec-group-name": { + + "tab-list.item#specification-1": { "props": { - "blockClass": "productSpecificationGroupName" - }, - "children": [ - "product-specification-text#group" - ] - }, - "product-specification": { - "children": [ - "flex-layout.row#spec-item" - ] - }, - "flex-layout.row#spec-item": { - "props": { - "blockClass": "productSpecification" - }, - "children": [ - "flex-layout.col#spec-name", - "flex-layout.col#spec-value" - ] - }, - "flex-layout.col#spec-name": { - "props": { - "blockClass": "productSpecificationName", - "width": { - "mobile": "50%", - "desktop": "25%" - } - }, - "children": [ - "product-specification-text#specification" - ] - }, - "flex-layout.col#spec-value": { - "props": { - "blockClass": "productSpecificationValue" - }, - "children": [ - "product-specification-values" - ] - }, - "product-specification-values": { - "children": [ - "product-specification-text#value" - ] - }, - "product-specification-text#group": { - "props": { - "message": "{groupName}" + "tabId": "descriptionSpecificationsId", + "label": "Descrição", + "defaultActiveTab": true } }, - "product-specification-text#specification": { + "tab-list.item#specification-2": { "props": { - "message": "{specificationName}" + "tabId": "productTableSpecificationsId", + "label": "Especificações" } }, - "product-specification-text#value": { + + "tab-list.item#specification-3": { "props": { - "message": "{specificationValue}" + "tabId": "productVendorId", + "label": "Vendedor" + } + }, + + "tab-list.item#specification-4": { + "props": { + "tabId": "productLocationId", + "label": "Localização" + } + }, + + "tab-content#product-specification": { + "children": [ + "tab-content.item#specification-1", + "tab-content.item#specification-2", + "tab-content.item#specification-3", + "tab-content.item#specification-4" + ] + }, + "tab-content.item#specification-1": { + "children": ["flex-layout.row#product-specification-1"], + "props": { + "tabId": "descriptionSpecificationsId" + } + }, + "tab-content.item#specification-2": { + "children": ["flex-layout.row#product-specification-2"], + "props": { + "tabId": "productTableSpecificationsId" + } + }, + + "tab-content.item#specification-3": { + "children": ["flex-layout.row#product-specification-1"], + "props": { + "tabId": "productVendorId" + } + }, + + "tab-content.item#specification-4": { + "children": ["flex-layout.row#product-specification-2"], + "props": { + "tabId": "productLocationId" + } + }, + + "flex-layout.row#product-specification-1": { + "props": { + "blockClass": "productSpecificationItemContainer", + "colGap": 7, + "marginTop": 7, + "rowGap": 5 + }, + + "children": [ + "product-images#product-specification", + "flex-layout.row#description-1" + ] + }, + + "flex-layout.row#product-specification-2": { + "props": { + "blockClass": "productSpecificationItemContainer", + "colGap": 7, + "marginTop": 7, + "rowGap": 5 + }, + + "children": [ + "product-images#product-specification", + "flex-layout.row#description-2" + ] + }, + + "product-images#product-specification": { + "props": { + "aspectRatio": "1:1", + "displayMode": "first-image" + } + }, + + "flex-layout.row#description-1": { + "props": { + "marginBottom": 7 + }, + "children": ["product-description#product-specification-1"] + }, + + "flex-layout.row#description-2": { + "props": { + "marginBottom": 7 + }, + "children": ["product-description#product-specification-2"] + }, + + "product-description#product-specification-1": { + "props": { + "collapseContent": false + } + }, + + "product-description#product-specification-2": { + "props": { + "collapseContent": false, + "title": "Descrição" } } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6306a44..783b677 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,14 +3,38 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "tab-layout#product-specification", + "shelf.relatedProducts#pdp-shelf-related", "newsletter", "product-questions-and-answers" ] }, + + "shelf.relatedProducts#pdp-shelf-related": { + "blocks": ["product-summary.shelf#pdp-shelf-related"], + "props": { + "productList": { + "titleText": "Você também pode gostar:" + } + } + }, + + "product-summary.shelf#pdp-shelf-related": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price" + ] + }, + "product-summary-price": {}, + + "product-summary-image": { + "props": { + "showBadge": false, + "aspectRatio": "1:1" + } + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -77,20 +101,6 @@ ] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { - "props": { - "text": "##### Product Specifications" - } - }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -139,6 +149,13 @@ ] }, + "product-installments": { + "props": { + "markers": ["discount"], + "message": "{installmentsNumber}x {installmentValue}{hasInterest, select, true { {interestRate} de juros} false { sem juros}}" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 5, @@ -178,9 +195,24 @@ "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "productAddToCart" }, - "children": ["add-to-cart-button"] + "children": ["html#add-to-cart-button"] + }, + + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button#pdp-add-to-cart-button"] + }, + + "add-to-cart-button#pdp-add-to-cart-button": { + "props": { + "text": "Adicionar à sacola", + "blockClass": "productAddToCartButton" + } }, "flex-layout.row#product-availability": { diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..5b440b6 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -1,14 +1,11 @@ { - "product-summary.shelf": { + "product-summary.shelf#pdp-product-summary": { "children": [ "stack-layout#prodsum", "product-summary-name", - "flex-layout.col#productRating", - "product-summary-space", "product-list-price#summary", "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "product-installments#summary" ] }, "flex-layout.col#productRating": { @@ -19,11 +16,7 @@ }, "stack-layout#prodsum": { - "children": [ - "product-summary-image#shelf", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc - ] + "children": ["product-summary-image#shelf"] }, "product-summary-image#shelf": { @@ -64,10 +57,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price#summary", - "product-price-savings#summary" - ] + "children": ["product-selling-price#summary"] }, "product-installments#summary": { "props": { @@ -81,9 +71,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/styles/configs/style.json b/styles/configs/style.json index e86501f..63b6e82 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -270,8 +270,8 @@ }, "heading-3": { "fontFamily": "Open Sans, arial, sans-serif", - "fontWeight": "700", - "fontSize": "1.75rem", + "fontWeight": "400", + "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 63032cd..064c332 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -119,4 +119,29 @@ .flexCol--productName { align-items: flex-end; } +} + +.flexRowContent--productAddToCart :global(.vtex-button) { + height: 72px; + line-height: 24.51px; +} +@media screen and (min-width: 1025px) { + .flexRowContent--productAddToCart :global(.vtex-button) { + height: 49px; + } +} +.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-button__label) { + justify-content: stretch; + padding: 12px 64px; +} +.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + flex-grow: 1; + width: 100%; +} +.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) { + width: 99%; +} + +.flexRow--productSpecificationItemContainer { + padding: 0 40px; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..ff5bfe8 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,4 +1,14 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { +/* +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 */ +.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, +.skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { border-radius: 50%; } @@ -16,21 +26,21 @@ display: none; } } - .nameContainer { - justify-content: start; padding-top: 1rem; padding-bottom: 1rem; } .brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; + color: #2e2e2e; } .container { - text-align: start; + text-align: center; +} + +.priceContainer { + padding-top: 0; } .imageContainer { @@ -39,4 +49,4 @@ .image { border-radius: 0.25rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..24736ea --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,16 @@ +/* +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 */ +.relatedProducts { + padding: 0 40px; +} + +.shelfContentContainer :global(.vtex-slider-0-x-sliderFrame) { + gap: 12px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 548fb87..6c65dc9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -25,6 +25,9 @@ margin-left: 16px; margin-bottom: 0; } +.productImagesThumb .thumbImg { + border-radius: 8px; +} .productImagesThumb:first-child { margin-left: 0; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..55a55ef --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,26 @@ +/* +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 */ +@media screen and (max-width: 1024px) { + .listContainer--ProductSpecificationTabList { + width: 100%; + padding: 0 40px; + flex-direction: column; + flex-wrap: nowrap; + } + .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { + width: 100%; + } + .listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) { + justify-content: start; + } +} +.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) { + text-transform: capitalize !important; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex-product-quantity.scss b/styles/sass/pages/product/vtex-product-quantity.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 3b46bc2..8bf7a3b 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -115,3 +115,32 @@ align-items: flex-end; } } + +.flexRowContent--productAddToCart { + :global(.vtex-button) { + height: 72px; + line-height: 24.51px; + + @media screen and (min-width: 1025px) { + height: 49px; + } + + :global(.vtex-button__label) { + justify-content: stretch; + padding: 12px 64px; + } + + :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + flex-grow: 1; + width: 100%; + } + + :global(.vtex-add-to-cart-button-0-x-buttonText) { + width: 99%; + } + } +} + +.flexRow--productSpecificationItemContainer { + padding: 0 40px; +} 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..a44c3bf --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,44 @@ +.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; + } +} + +.nameContainer { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.brandName { + color: #2e2e2e; +} + +.container { + text-align: center; +} + +.priceContainer { + padding-top: 0; +} + +.imageContainer { + text-align: center; +} + +.image { + border-radius: 0.25rem; +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..d5a39b4 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,9 @@ +.relatedProducts { + padding: 0 40px; +} + +.shelfContentContainer { + :global(.vtex-slider-0-x-sliderFrame) { + gap: 12px; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 18d7d23..f38e0d2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -16,6 +16,10 @@ margin-left: 16px; margin-bottom: 0; + .thumbImg { + border-radius: 8px; + } + &:first-child { margin-left: 0; } 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..bc98f15 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,24 @@ +.listContainer--ProductSpecificationTabList { + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 40px; + flex-direction: column; + flex-wrap: nowrap; + + .listItem { + :global(.vtex-button) { + width: 100%; + + :global(.vtex-button__label) { + justify-content: start; + } + } + } + } + + .listItem { + :global(.vtex-button) { + text-transform: capitalize !important; + } + } +}