From 12fee586af354313e6f1fbd0baf43eb63e0d0fef Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Fri, 27 Jan 2023 19:52:32 -0300 Subject: [PATCH] feat:criando o css do - tamanho - cor - buttons - e adicionando a area description do produto --- manifest.json | 1 - store/blocks/pdp/descriptionTabs.jsonc | 68 ++++++++ store/blocks/pdp/product.jsonc | 48 +++--- styles/css/vtex.flex-layout.css | 8 + styles/css/vtex.product-identifier.css | 1 - styles/css/vtex.product-price.css | 91 ++-------- styles/css/vtex.product-quantity.css | 51 ++++++ styles/css/vtex.store-components.css | 129 +++++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 12 ++ .../product/vtex.product-identifier.scss | 3 - .../pages/product/vtex.product-quantity.scss | 48 ++++++ .../pages/product/vtex.store-components.scss | 163 +++++++++++++++++- styles/sass/utils/_vars.scss | 22 +-- 13 files changed, 512 insertions(+), 133 deletions(-) create mode 100644 store/blocks/pdp/descriptionTabs.jsonc create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/store/blocks/pdp/descriptionTabs.jsonc b/store/blocks/pdp/descriptionTabs.jsonc new file mode 100644 index 0000000..3bd3202 --- /dev/null +++ b/store/blocks/pdp/descriptionTabs.jsonc @@ -0,0 +1,68 @@ +{ + "tab-layout#product-description": { + "children": [ + "tab-list#product-description", + "tab-content#product-description" + ], + "props": { + "blockClass": "product-description", + "defaultActiveTabId": "product-description" + } + }, + "tab-list#product-description": { + "children": [ + "tab-list.item#description", + "tab-list.item#description2", + "tab-list.item#description2", + "tab-list.item#description2", + "tab-list.item#description2" + ] + }, + "tab-list.item#description": { + "props": { + "tabId": "product-description", + "label": "Description", + "defaultActiveTab": true + } + }, + "tab-list.item#description2": { + "props": { + "tabId": "product-description2", + "label": "Description" + } + }, + "tab-content#product-description": { + "children": [ + "tab-content.item#product-description", + "tab-content.item#product-description2" + ] + }, + "tab-content.item#product-description": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product-description" + } + }, + "tab-content.item#product-description2": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product-description2" + } + }, + "flex-layout.row#description": { + "props": { + "marginBottom": 7 + }, + "children": ["product-images#description", "product-description"] + }, + "product-images#description": { + "props": { + "displayMode": "first-image" + } + }, + "product-description": { + "props": { + "collapseContent": true + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 74f0e08..a80a89b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,9 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + "tab-layout#product-description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] @@ -26,12 +26,7 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -56,17 +51,6 @@ "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, - "stack-layout": { - "props": { - "blockClass": "product" - }, - "children": [ - "flex-layout.row#product-image", - "product-bookmark", - "product-specification-badges" - ] - }, - "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -83,6 +67,16 @@ "rowGap": 0 } }, + "stack-layout": { + "props": { + "blockClass": "product" + }, + "children": [ + "flex-layout.row#product-image", + "product-bookmark", + "product-specification-badges" + ] + }, "flex-layout.row#product-image": { "children": ["product-images"] }, @@ -106,18 +100,17 @@ "flex-layout.row#product-name", "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", + // "flex-layout.row#list-price-savings", + // "product-separator", "sku-selector", - "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, @@ -138,9 +131,10 @@ "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "button-card-add" }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] }, "flex-layout.row#product-availability": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f9e0f4d..79c6498 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,4 +9,12 @@ /* Grid breakpoints */ .flexRow--product-main-container :global(.vtex-store-components-3-x-container) { max-width: 1920px; +} + +.flexRowContent--button-card-add .stretchChildrenWidth:first-child { + max-width: 128px; + padding-right: 10px; +} +.flexRowContent--button-card-add .stretchChildrenWidth:last-child { + width: 100% !important; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index a5eceec..57b5e5d 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -16,7 +16,6 @@ font-weight: 400; font-size: 14px; line-height: 19px; - /* identical to box height */ text-align: right; color: rgba(146, 146, 146, 0.48); } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..ede88c7 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,12 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; - font-weight: 700; -} - -.installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} +/* +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 */ +.strike { + text-decoration: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..57fad8b --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,51 @@ +/* +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 */ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer { + margin: 0; + height: 100%; +} +.quantitySelectorContainer .quantitySelectorStepper { + height: 100%; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) { + height: 100%; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) { + height: 100%; + border: 1px solid #cccccc; + padding: 0 16px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 100%; + border: none; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button), +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) { + width: max-content !important; + height: 100%; + border: none; + border-radius: 0; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text), +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + display: flex; + align-items: center; + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 1d4640e..fce67f8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -21,12 +21,131 @@ text-align: end; } -.product-identifier--productReference { - text-align: end; +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; } -.product-identifier--productReference__label { + +.skuSelectorName { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorItem { + border-radius: 50%; + width: 50px; + height: 50px; +} +.skuSelectorItem:not(:last-child) { + margin-right: 16px; +} +.skuSelectorItem .valueWrapper { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorItem:hover .frameAround { + border: 2px solid #000000; +} +.skuSelectorItem:hover .valueWrapper { + color: #000000; +} +.skuSelectorItem .frameAround { + border-radius: 50%; + border: 1px solid #989898; +} + +.skuSelectorItem--selected .frameAround { + border: 2px solid #000000; +} +.skuSelectorItem--selected .valueWrapper { + color: #000000; +} + +.skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorInternalBox:hover { + border: none; +} +.skuSelectorInternalBox .diagonalCross { + background-image: linear-gradient(to top right, transparent 50%, rgba(0, 0, 0, 0.5) 53%, currentColor 54%, currentColor 52%, transparent 0%); + transform: rotate(95deg); +} + +.shippingContainer { + position: relative; +} +.shippingContainer :global(.vtex-button) { + position: absolute; + top: 25px; + left: 230px; + padding: 12px; + width: max-content; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + padding: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #ffffff; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding-bottom: 16px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + max-width: 280px; + margin-right: 32px; + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + height: 49px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { display: none; } -.product-identifier--productReference__separator { - display: none; +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTable { + max-width: 320px; + margin: 0; + border: none; +} +.shippingTable .shippingTableHead { + display: table-header-group !important; + width: 100%; +} +.shippingTable .shippingTableHead .shippingTableRow { + text-align: left; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding: 0 16px 0 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel { + display: flex; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 0ba3f49..72d6847 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -3,3 +3,15 @@ max-width: 1920px; } } + +.flexRowContent--button-card-add { + .stretchChildrenWidth { + &:first-child { + max-width: 128px; + padding-right: 10px; + } + &:last-child { + width: 100% !important; + } + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index fff3b4c..f2f3d20 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -8,10 +8,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - /* identical to box height */ - text-align: right; - color: rgba(146, 146, 146, 0.48); } &__label { 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..a2c64d9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,48 @@ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer { + margin: 0; + height: 100%; + + .quantitySelectorStepper { + height: 100%; + + :global(.vtex-numeric-stepper-wrapper) { + height: 100%; + + :global(.vtex-numeric-stepper-container) { + height: 100%; + border: 1px solid #cccccc; + padding: 0 16px; + + :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 100%; + border: none; + } + + :global(.vtex-numeric-stepper__plus-button), + :global(.vtex-numeric-stepper__minus-button) { + width: max-content !important; + height: 100%; + border: none; + border-radius: 0; + } + + :global(.vtex-numeric-stepper__minus-button__text), + :global(.vtex-numeric-stepper__plus-button__text) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + display: flex; + align-items: center; + color: #000000; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 27b4c2b..5d4d742 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -10,14 +10,165 @@ .productNameContainer--quickview { text-align: end; } -.product-identifier--productReference { - text-align: end; +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorName { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} - &__label { - display: none; +.skuSelectorItem { + border-radius: 50%; + width: 50px; + height: 50px; + + &:not(:last-child) { + margin-right: 16px; } - &__separator { - display: none; + .valueWrapper { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + &:hover { + .frameAround { + border: 2px solid #000000; + } + + .valueWrapper { + color: #000000; + } + } + + .frameAround { + border-radius: 50%; + border: 1px solid #989898; + } +} + +.skuSelectorItem--selected { + .frameAround { + border: 2px solid #000000; + } + + .valueWrapper { + color: #000000; + } +} + +.skuSelectorInternalBox { + border-radius: 50%; + + &:hover { + border: none; + } + + .diagonalCross { + background-image: linear-gradient( + to top right, + transparent 50%, + rgba(0, 0, 0, 0.5) 53%, + currentColor 54%, + currentColor 52%, + transparent 0% + ); + transform: rotate(95deg); + } +} + +.shippingContainer { + position: relative; + + :global(.vtex-button) { + position: absolute; + top: 25px; + left: 230px; + padding: 12px; + width: max-content; + + :global(.vtex-button__label) { + font-size: 0; + padding: 0; + + &::after { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #ffffff; + } + } + } + + :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding-bottom: 16px; + + :global(.vtex-input) { + max-width: 280px; + margin-right: 32px; + padding: 0; + + :global(.vtex-input-prefix__group) { + height: 49px; + + :global(.vtex-input__suffix) { + display: none; + } + + :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; + } + } + } + } +} + +.shippingTable { + max-width: 320px; + margin: 0; + border: none; + + .shippingTableHead { + display: table-header-group !important; + width: 100%; + + .shippingTableRow { + text-align: left; + } + } + + .shippingTableBody { + .shippingTableRow { + .shippingTableCell { + padding: 0 16px 0 0; + + .shippingTableLabel { + display: flex; + } + } + } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..10b3c3e 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -14,18 +14,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;