From e2106d1552d4fba7756637afd7955a4c5d234d75 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Tue, 24 Jan 2023 18:14:32 -0300 Subject: [PATCH 01/14] feat: home adicionando o css da img e props dos product --- store/blocks/pdp/product.jsonc | 2 ++ styles/css/agenciamagma.store-theme.css | 4 ++-- styles/css/vtex.breadcrumb.css | 12 ++++++++++++ styles/css/vtex.store-components.css | 10 ++++++++-- .../sass/pages/product/agenciamagma.store-theme.scss | 5 ++--- styles/sass/pages/product/vtex.breadcrumb.scss | 3 +++ styles/sass/pages/product/vtex.store-components.scss | 11 ++++++++--- 7 files changed, 37 insertions(+), 10 deletions(-) create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..00bae85 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -87,6 +87,8 @@ }, "product-images": { "props": { + "thumbnailMaxHeight": 90, + "thumbnailsOrientation": "horizontal", "aspectRatio": { "desktop": "auto", "phone": "16:9" diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..c92ee65 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: blue; } .html--pdp-breadcrumb { - background-color: green; + background-color: red; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..ae5381f --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,12 @@ +/* +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 { + background-color: aqua; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..b096c3c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,12 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.productImageTag--main { + max-height: unset !important; +} + +.productImagesThumb { + height: auto !important; + width: 90px !important; + margin-right: 16px !important; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..9d2e34b 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ .html { - background-color: red; + background-color: blue; } .html--pdp-breadcrumb { - background-color: green; + background-color: red; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..4895dfd --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,3 @@ +.container { + background-color: aqua; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..b2b99e5 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,8 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.productImageTag--main { + max-height: unset !important; +} +.productImagesThumb { + height: auto !important; + width: 90px !important; + margin-right: 16px !important; +} -- 2.34.1 From bbf7c874a023b3039e95401333db6bd37c2f4c26 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Tue, 24 Jan 2023 21:21:02 -0300 Subject: [PATCH 02/14] feat: criando os arquivos e o scss da product identifile e flex layout --- store/blocks/pdp/product.jsonc | 3 +- styles/css/vtex.flex-layout.css | 110 ++---------------- styles/css/vtex.product-identifier.css | 27 ++++- styles/css/vtex.store-components.css | 14 +++ .../sass/pages/product/vtex.flex-layout.scss | 5 + .../product/vtex.product-identifier.scss | 24 ++++ .../pages/product/vtex.store-components.scss | 15 +++ 7 files changed, 98 insertions(+), 100 deletions(-) create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 00bae85..74f0e08 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -45,6 +45,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "product-main-container", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -103,12 +104,12 @@ }, "children": [ "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", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..f9e0f4d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,12 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +/* +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 */ +.flexRow--product-main-container :global(.vtex-store-components-3-x-container) { + max-width: 1920px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..a5eceec 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,28 @@ +/* +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 */ .product-identifier--productReference { - margin-bottom: 1rem; + width: 100%; + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + text-align: right; + color: rgba(146, 146, 146, 0.48); } +.product-identifier__label { + display: none; +} +.product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b096c3c..1d4640e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -15,4 +15,18 @@ height: auto !important; width: 90px !important; margin-right: 16px !important; +} + +.productNameContainer--quickview { + text-align: end; +} + +.product-identifier--productReference { + text-align: end; +} +.product-identifier--productReference__label { + display: none; +} +.product-identifier--productReference__separator { + display: none; } \ 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 new file mode 100644 index 0000000..0ba3f49 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,5 @@ +.flexRow--product-main-container { + :global(.vtex-store-components-3-x-container) { + max-width: 1920px; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..fff3b4c --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,24 @@ +.product-identifier { + &--productReference { + width: 100%; + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + + text-align: right; + + color: rgba(146, 146, 146, 0.48); + } + &__label { + display: none; + } + + &__separator { + display: none; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b2b99e5..27b4c2b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -6,3 +6,18 @@ width: 90px !important; margin-right: 16px !important; } + +.productNameContainer--quickview { + text-align: end; +} +.product-identifier--productReference { + text-align: end; + + &__label { + display: none; + } + + &__separator { + display: none; + } +} -- 2.34.1 From 12fee586af354313e6f1fbd0baf43eb63e0d0fef Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Fri, 27 Jan 2023 19:52:32 -0300 Subject: [PATCH 03/14] 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; -- 2.34.1 From 7374b5ecc37a399ef4c33e531340eb42a7cc4b7e Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Tue, 31 Jan 2023 18:25:53 -0300 Subject: [PATCH 04/14] feat: criando o css e da tab-layout estilizando o text e a img --- styles/css/vtex.store-components.css | 21 ++++++++++++ styles/css/vtex.tab-layout.css | 34 +++++++++++++++++++ .../pages/product/vtex.store-components.scss | 24 +++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 28 +++++++++++++++ 4 files changed, 107 insertions(+) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index fce67f8..492789c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -148,4 +148,25 @@ } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel { display: flex; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel :global(.vtex-address-form-4-x-input) { + display: none !important; +} + +.productDescriptionContainer { + margin-left: 32px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + color: #575757; } \ 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..eac9af2 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,34 @@ +/* +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 { + padding: 0 320px !important; +} + +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #bfbfbf; + text-decoration: none; + margin-bottom: 54px; +} + +.t-action { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + /* identical to box height, or 158% */ + display: flex; + align-items: center; + text-align: center; + /* gray-300 */ + color: #bfbfbf; +} \ 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 5d4d742..a20533a 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -167,8 +167,32 @@ .shippingTableLabel { display: flex; + :global(.vtex-address-form-4-x-input) { + display: none !important; + } } } } } } + +//AREA DO TAB LAYOUT CONTAINER +.productDescriptionContainer { + margin-left: 32px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: #929292; + + .productDescriptionTitle { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + color: #575757; + } +} 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..0409dee --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,28 @@ +.container { + padding: 0 320px !important; +} +.listContainer { + display: flex; + justify-content: space-between; + + border-bottom: 1px solid #bfbfbf; + text-decoration: none; + margin-bottom: 54px; +} + +.t-action { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + /* identical to box height, or 158% */ + + display: flex; + align-items: center; + text-align: center; + + /* gray-300 */ + + color: #bfbfbf; +} -- 2.34.1 From f43243d1826bc550b64465aac54a2ad34a663c76 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Thu, 2 Feb 2023 17:15:18 -0300 Subject: [PATCH 05/14] =?UTF-8?q?feat=20:=20criando=20a=20area=20da=20shel?= =?UTF-8?q?f=20para=20come=C3=A7ar=20a=20customizar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/sass/pages/product/vtex.shelf.scss | 13 ++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 26 ++++++++++--------- 2 files changed, 27 insertions(+), 12 deletions(-) create mode 100644 styles/sass/pages/product/vtex.shelf.scss diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..ef1f1a5 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,13 @@ +.vtex-shelf { + :global(.vtex-shelf-1-x-title) { + padding: 16px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + + color: #575757; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 0409dee..47f66f8 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -10,19 +10,21 @@ margin-bottom: 54px; } -.t-action { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - /* identical to box height, or 158% */ +.listItem { + button { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + /* identical to box height, or 158% */ - display: flex; - align-items: center; - text-align: center; + display: flex; + align-items: center; + text-align: center; - /* gray-300 */ + /* gray-300 */ - color: #bfbfbf; + color: #bfbfbf; + } } -- 2.34.1 From a20042166e33742439559dd79be31a0873cf4fd2 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Fri, 3 Feb 2023 21:27:34 -0300 Subject: [PATCH 06/14] feat: criando o footer pronto para o style e criando os files menu footer --- store/blocks/footer/footer-1-desktop.jsonc | 52 +++ store/blocks/footer/footer-2-desktop.jsonc | 24 ++ store/blocks/footer/footer-newsletter.jsonc | 21 + store/blocks/footer/footer.json | 127 ------ store/blocks/footer/footer.jsonc | 18 + store/blocks/footer/menu-link-1.jsonc | 87 ++++ store/blocks/footer/menu-link-2.jsonc | 67 +++ store/blocks/footer/menu-link-3.jsonc | 66 +++ store/blocks/footer/menu.json | 393 ------------------ .../blocks/footer/mobile/footer-mobile.jsonc | 36 ++ store/blocks/footer/mobile/menu-item-1.jsonc | 110 +++++ store/blocks/footer/mobile/menu-mobile.jsonc | 31 ++ store/blocks/pdp/descriptionTabs.jsonc | 1 + store/blocks/pdp/product.jsonc | 26 +- styles/css/vtex.breadcrumb.css | 29 +- styles/css/vtex.shelf.css | 19 + styles/css/vtex.tab-layout.css | 4 +- .../sass/pages/product/vtex.breadcrumb.scss | 30 +- .../sass/pages/product/vtex.tab-layout.scss | 9 +- 19 files changed, 616 insertions(+), 534 deletions(-) create mode 100644 store/blocks/footer/footer-1-desktop.jsonc create mode 100644 store/blocks/footer/footer-2-desktop.jsonc create mode 100644 store/blocks/footer/footer-newsletter.jsonc delete mode 100644 store/blocks/footer/footer.json create mode 100644 store/blocks/footer/footer.jsonc create mode 100644 store/blocks/footer/menu-link-1.jsonc create mode 100644 store/blocks/footer/menu-link-2.jsonc create mode 100644 store/blocks/footer/menu-link-3.jsonc delete mode 100644 store/blocks/footer/menu.json create mode 100644 store/blocks/footer/mobile/footer-mobile.jsonc create mode 100644 store/blocks/footer/mobile/menu-item-1.jsonc create mode 100644 store/blocks/footer/mobile/menu-mobile.jsonc create mode 100644 styles/css/vtex.shelf.css diff --git a/store/blocks/footer/footer-1-desktop.jsonc b/store/blocks/footer/footer-1-desktop.jsonc new file mode 100644 index 0000000..1e2de62 --- /dev/null +++ b/store/blocks/footer/footer-1-desktop.jsonc @@ -0,0 +1,52 @@ +{ + "flex-layout.row#footer-1-desktop": { + "children": [ + "vtex.menu@2.x:menu#link-1", + "vtex.menu@2.x:menu#link-2", + "footer-spacer", + "vtex.menu@2.x:menu#link-3", + "footer-spacer", + "flex-layout.row#footer-social" + ], + "props": { + "blockClass": "menu-row", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "flex-layout.row#footer-social": { + "children": ["social-networks", "accepted-payment-methods"], + "props": { + "blockClass": "menu-row", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "social-networks": { + "props": { + "socialNetworks": [ + { + "name": "Facebook", + "url": "https://www.facebook.com/vtexonline/" + }, + { + "name": "Instagram", + "url": "https://www.instagram.com/vtextruecloud/" + }, + { + "name": "Twitter", + "url": "https://twitter.com/vtexonline" + }, + { + "name": "Youtube", + "url": "https://www.youtube.com/user/VTEXTV" + } + ] + } + }, + "accepted-payment-methods": { + "props": { + "paymentMethods": ["MasterCard", "Visa", "Diners Club"] + } + } +} diff --git a/store/blocks/footer/footer-2-desktop.jsonc b/store/blocks/footer/footer-2-desktop.jsonc new file mode 100644 index 0000000..eaf8db7 --- /dev/null +++ b/store/blocks/footer/footer-2-desktop.jsonc @@ -0,0 +1,24 @@ +{ + "flex-layout.row#footer-2-desktop": { + "children": [ + "rich-text#footer-copyright", + "footer-spacer", + "rich-text#footer-powered" + ], + "props": { + "blockClass": "credits" + } + }, + "rich-text#footer-copyright": { + "props": { + "text": "**Copyright © 2022 M3 Academy. Todos os direitos reservados.** \n R. Helena Coutinho, 41 - Braunes - Nova Friburgo - RJ \n CNPJ: 12.345.678.0009-10", + "blockClass": "footer" + } + }, + "rich-text#footer-powered": { + "props": { + "text": "Powered by [![vtex](assets/test.svg)](/test) Developed by [![vtex](assets/test.svg)](/test)", + "blockClass": "footer" + } + } +} diff --git a/store/blocks/footer/footer-newsletter.jsonc b/store/blocks/footer/footer-newsletter.jsonc new file mode 100644 index 0000000..62f7a2a --- /dev/null +++ b/store/blocks/footer/footer-newsletter.jsonc @@ -0,0 +1,21 @@ +{ + "flex-layout.row#footer-newsletter": { + "children": ["rich-text#footer-newsletter", "newsletter"], + "props": { + "blockClass": "menu-row", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "rich-text#footer-newsletter": { + "props": { + "text": "## Assine nossa newsletter \n Receba ofertas e novidades por e-mail", + "blockClass": "footer" + } + }, + "newsletter": { + "props": { + "hideLabel": true + } + } +} diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json deleted file mode 100644 index c05ac0f..0000000 --- a/store/blocks/footer/footer.json +++ /dev/null @@ -1,127 +0,0 @@ -{ - "footer": { - "blocks": [ - "footer-layout.desktop", - "footer-layout.mobile" - ] - }, - "footer-layout.desktop": { - "children": [ - "flex-layout.row#footer-1-desktop", - "flex-layout.row#footer-2-desktop", - "flex-layout.row#footer-3-desktop" - ] - }, - "flex-layout.row#footer-1-desktop": { - "children": [ - "vtex.menu@2.x:menu#Products", - "vtex.menu@2.x:menu#footer-clothing", - "vtex.menu@2.x:menu#footer-decoration", - "vtex.menu@2.x:menu#footer-bags", - "footer-spacer", - "social-networks" - ], - "props": { - "blockClass": "menu-row", - "paddingTop": 6, - "paddingBottom": 3 - } - }, - "social-networks": { - "props": { - "socialNetworks": [ - { - "name": "Facebook", - "url": "https://www.facebook.com/vtexonline/" - }, - { - "name": "Instagram", - "url": "https://www.instagram.com/vtextruecloud/" - }, - { - "name": "Twitter", - "url": "https://twitter.com/vtexonline" - }, - { - "name": "Youtube", - "url": "https://www.youtube.com/user/VTEXTV" - } - ] - } - }, - "flex-layout.row#footer-2-desktop": { - "children": [ - "accepted-payment-methods" - ], - "props": { - "blockClass": "payment-methods" - } - }, - "accepted-payment-methods": { - "props": { - "paymentMethods": [ - "MasterCard", - "Visa", - "Diners Club" - ] - } - }, - "flex-layout.row#footer-3-desktop": { - "children": [ - "rich-text#footer" - ], - "props": { - "blockClass": "credits" - } - }, - "rich-text#footer": { - "props": { - "text": "All stock and product photos are from photos.icons8.com", - "blockClass": "footer" - } - }, - "footer-layout.mobile": { - "children": [ - "flex-layout.row#1-footer-mobile", - "flex-layout.row#2-footer-mobile" - ] - }, - "flex-layout.row#2-footer-mobile": { - "children": [ - "flex-layout.col#footer-1-mobile" - ], - "props": { - "blockClass": "payment-methods", - "paddingTop": 4, - "paddingBottom": 4 - } - }, - "flex-layout.col#footer-1-mobile": { - "children": [ - "accepted-payment-methods", - "social-networks", - "rich-text#footer-mobile" - ], - "props": { - "blockClass": "payment-methods", - "paddingTop": 4, - "paddingBottom": 4, - "rowGap": 4 - } - }, - "flex-layout.row#1-footer-mobile": { - "props": { - "paddingTop": 4, - "paddingBottom": 4 - }, - "children": [ - "vtex.menu@2.x:menu#footer-mobile" - ] - }, - "rich-text#footer-mobile": { - "props": { - "text": "All stock and product photos are from photos.icons8.com", - "blockClass": "footer" - } - } -} diff --git a/store/blocks/footer/footer.jsonc b/store/blocks/footer/footer.jsonc new file mode 100644 index 0000000..8b13133 --- /dev/null +++ b/store/blocks/footer/footer.jsonc @@ -0,0 +1,18 @@ +{ + "footer": { + "blocks": ["footer-layout.desktop", "footer-layout.mobile"] + }, + "footer-layout.desktop": { + "children": [ + "flex-layout.row#footer-newsletter", + "flex-layout.row#footer-1-desktop", + "flex-layout.row#footer-2-desktop" + ] + }, + "footer-layout.mobile": { + "children": [ + "flex-layout.row#1-footer-mobile", + "flex-layout.row#2-footer-mobile" + ] + } +} diff --git a/store/blocks/footer/menu-link-1.jsonc b/store/blocks/footer/menu-link-1.jsonc new file mode 100644 index 0000000..bdfce66 --- /dev/null +++ b/store/blocks/footer/menu-link-1.jsonc @@ -0,0 +1,87 @@ +{ + "vtex.menu@2.x:menu#link-1": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#footer-link-1-title", + "menu-item#loja", + "menu-item#blackfriday", + "menu-item#sale", + "menu-item#personalization", + "rich-text#footer-link-1-cnpj" + ] + }, + "rich-text#footer-link-1-cnpj": { + "props": { + "text": "CNPJ 12.345.678.0009-10", + "blockClass": "footer-link-1-title" + } + }, + "rich-text#footer-link-1-title": { + "props": { + "text": "Site M3 Academy", + "blockClass": "footer-link-1-title" + } + }, + "menu-item#loja": { + "props": { + "id": "menu-item-loja", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Loja Ebit Ouro", + "text": "Loja Ebit Ouro" + } + } + }, + "menu-item#blackfriday": { + "props": { + "id": "menu-item-black-friday", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "BlackFriday", + "text": "Black Friday" + } + } + }, + "menu-item#sale": { + "props": { + "id": "menu-item-sale", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Sale", + "text": "Sale" + } + } + }, + "menu-item#personalization": { + "props": { + "id": "menu-item-personalization", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Personalization", + "text": "Personalization" + } + } + } +} diff --git a/store/blocks/footer/menu-link-2.jsonc b/store/blocks/footer/menu-link-2.jsonc new file mode 100644 index 0000000..82eae17 --- /dev/null +++ b/store/blocks/footer/menu-link-2.jsonc @@ -0,0 +1,67 @@ +{ + "vtex.menu@2.x:menu#link-2": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#footer-link-1-cnpj", + "menu-item#smartphones", + "menu-item#videogames", + "menu-item#tvs", + "rich-text#footer-link-1-cnpj" + ] + }, + "rich-text#footer-link-1-cnpj": { + "props": { + "text": "CNPJ 12.345.678.0009-10", + "blockClass": "footer-link-1-title" + } + }, + "menu-item#smartphones": { + "props": { + "id": "menu-item-smartphones", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/smartphones", + "noFollow": true, + "tagTitle": "Smartphones", + "text": "Smartphones" + } + } + }, + + "menu-item#videogames": { + "props": { + "id": "menu-item-videogames", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/videogames", + "noFollow": true, + "tagTitle": "Videogames", + "text": "Videogames" + } + } + }, + + "menu-item#tvs": { + "props": { + "id": "menu-item-tvs", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/tvs", + "noFollow": true, + "tagTitle": "TVs", + "text": "TVs" + } + } + } +} diff --git a/store/blocks/footer/menu-link-3.jsonc b/store/blocks/footer/menu-link-3.jsonc new file mode 100644 index 0000000..90f7f5a --- /dev/null +++ b/store/blocks/footer/menu-link-3.jsonc @@ -0,0 +1,66 @@ +{ + "vtex.menu@2.x:menu#link-3": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#link-3-title", + "menu-item#bags", + "menu-item#backpacks", + "menu-item#necessaire" + ] + }, + "rich-text#link-3-title": { + "props": { + "text": "Seja um franqueado" + } + }, + + "menu-item#bags": { + "props": { + "id": "menu-item-bags", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/bags/d", + "noFollow": true, + "tagTitle": "Bags", + "text": "Bags" + } + } + }, + + "menu-item#backpacks": { + "props": { + "id": "menu-item-backpacks", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/bags/backpacks", + "noFollow": true, + "tagTitle": "Backpacks", + "text": "Backpacks" + } + } + }, + + "menu-item#necessaire": { + "props": { + "id": "menu-item-necessaire", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/bags/necessaire", + "noFollow": true, + "tagTitle": "Necessaire", + "text": "Necessaire" + } + } + } +} diff --git a/store/blocks/footer/menu.json b/store/blocks/footer/menu.json deleted file mode 100644 index 7cc85f7..0000000 --- a/store/blocks/footer/menu.json +++ /dev/null @@ -1,393 +0,0 @@ -{ - "vtex.menu@2.x:menu#Products": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#news", - "menu-item#blackfriday", - "menu-item#sale", - "menu-item#personalization" - ] - }, - "menu-item#news": { - "props": { - "id": "menu-item-news", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "#", - "noFollow": false, - "tagTitle": "News", - "text": "News" - } - } - }, - "menu-item#blackfriday": { - "props": { - "id": "menu-item-black-friday", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "#", - "noFollow": false, - "tagTitle": "BlackFriday", - "text": "Black Friday" - } - } - }, - "menu-item#sale": { - "props": { - "id": "menu-item-sale", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "#", - "noFollow": false, - "tagTitle": "Sale", - "text": "Sale" - } - } - }, - "menu-item#personalization": { - "props": { - "id": "menu-item-personalization", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "#", - "noFollow": false, - "tagTitle": "Personalization", - "text": "Personalization" - } - } - }, - - "vtex.menu@2.x:menu#footer-decoration": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#smartphones": { - "props": { - "id": "menu-item-smartphones", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/smartphones", - "noFollow": true, - "tagTitle": "Smartphones", - "text": "Smartphones" - } - } - }, - - "menu-item#videogames": { - "props": { - "id": "menu-item-videogames", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/videogames", - "noFollow": true, - "tagTitle": "Videogames", - "text": "Videogames" - } - } - }, - - "menu-item#tvs": { - "props": { - "id": "menu-item-tvs", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/tvs", - "noFollow": true, - "tagTitle": "TVs", - "text": "TVs" - } - } - }, - - "vtex.menu@2.x:menu#footer-bags": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#bags", - "menu-item#backpacks", - "menu-item#necessaire" - ] - }, - - "menu-item#bags": { - "props": { - "id": "menu-item-bags", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/bags/d", - "noFollow": true, - "tagTitle": "Bags", - "text": "Bags" - } - } - }, - - "menu-item#backpacks": { - "props": { - "id": "menu-item-backpacks", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/bags/backpacks", - "noFollow": true, - "tagTitle": "Backpacks", - "text": "Backpacks" - } - } - }, - - "menu-item#necessaire": { - "props": { - "id": "menu-item-necessaire", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/bags/necessaire", - "noFollow": true, - "tagTitle": "Necessaire", - "text": "Necessaire" - } - } - }, - - "vtex.menu@2.x:menu#footer-clothing": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#clothing", - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" - ] - }, - - "vtex.menu@2.x:menu#footer-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#clothing-mobile", - "menu-item#decoration-mobile", - "menu-item#sale-mobile" - ] - }, - - "menu-item#clothing-mobile": { - "props": { - "id": "menu-item-category-clothing", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/d", - "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"] - }, - "vtex.menu@2.x:submenu.accordion#clothing": { - "children": ["vtex.menu@2.x:menu#clothing-accordion"] - }, - - "vtex.menu@2.x:menu#clothing-accordion": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" - ] - }, - - "menu-item#decoration-mobile": { - "props": { - "itemProps": { - "tagTitle": "Decoration", - "text": "Decoration" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"] - }, - "vtex.menu@2.x:submenu.accordion#decoration": { - "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"] - }, - - "vtex.menu@2.x:menu#footer-decoration-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#sale-mobile": { - "props": { - "itemProps": { - "tagTitle": "Sale", - "text": "Sale" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#sale"] - }, - "vtex.menu@2.x:submenu.accordion#sale": { - "children": ["vtex.menu@2.x:menu#footer-sale-mobile"] - }, - - "vtex.menu@2.x:menu#footer-sale-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#clothing": { - "props": { - "id": "menu-item-category-clothing", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/d", - "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" - } - } - }, - - "menu-item#shorts": { - "props": { - "id": "menu-item-shorts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/shorts", - "noFollow": false, - "tagTitle": "Shorts", - "text": "Shorts" - } - } - }, - - "menu-item#tank-tops": { - "props": { - "id": "menu-item-tank-tops", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/tank-tops", - "noFollow": false, - "tagTitle": "Tank tops", - "text": "Tank tops" - } - } - }, - - "menu-item#shirts": { - "props": { - "id": "menu-item-shirts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/shirts", - "noFollow": false, - "tagTitle": "Shirts", - "text": "Shirts" - } - } - }, - - "menu-item#sweatshirt": { - "props": { - "id": "menu-item-sweat-shirts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/sweatshirt", - "noFollow": false, - "tagTitle": "Sweatshirt", - "text": "Sweatshirt" - } - } - }, - - "menu-item#cropped": { - "props": { - "id": "menu-item-cropped", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/cropped", - "noFollow": false, - "tagTitle": "Cropped", - "text": "Cropped" - } - } - } -} diff --git a/store/blocks/footer/mobile/footer-mobile.jsonc b/store/blocks/footer/mobile/footer-mobile.jsonc new file mode 100644 index 0000000..3a0b8e5 --- /dev/null +++ b/store/blocks/footer/mobile/footer-mobile.jsonc @@ -0,0 +1,36 @@ +{ + "flex-layout.row#2-footer-mobile": { + "children": ["flex-layout.col#footer-1-mobile"], + "props": { + "blockClass": "payment-methods", + "paddingTop": 4, + "paddingBottom": 4 + } + }, + "flex-layout.col#footer-1-mobile": { + "children": [ + "accepted-payment-methods", + "social-networks", + "flex-layout.row#footer-2-desktop" + ], + "props": { + "blockClass": "payment-methods", + "paddingTop": 4, + "paddingBottom": 4, + "rowGap": 4 + } + }, + "flex-layout.row#1-footer-mobile": { + "props": { + "paddingTop": 4, + "paddingBottom": 4 + }, + "children": ["vtex.menu@2.x:menu#footer-mobile"] + }, + "rich-text#footer-mobile": { + "props": { + "text": "All stock and product photos are from photos.icons8.com", + "blockClass": "footer" + } + } +} diff --git a/store/blocks/footer/mobile/menu-item-1.jsonc b/store/blocks/footer/mobile/menu-item-1.jsonc new file mode 100644 index 0000000..46755b9 --- /dev/null +++ b/store/blocks/footer/mobile/menu-item-1.jsonc @@ -0,0 +1,110 @@ +{ + "menu-item#sale-mobile": { + "props": { + "itemProps": { + "tagTitle": "comprar", + "text": "comprar" + } + }, + "blocks": ["vtex.menu@2.x:submenu.accordion#sale"] + }, + "vtex.menu@2.x:submenu.accordion#sale": { + "children": ["vtex.menu@2.x:menu#footer-sale-mobile"] + }, + "vtex.menu@2.x:menu#footer-sale-mobile": { + "props": { + "orientation": "vertical" + }, + "children": ["menu-item#patrick", "menu-item#videogames", "menu-item#tvs"] + }, + "menu-item#patrick": { + "props": { + "id": "menu-item-category-clothing", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/d", + "noFollow": true, + "tagTitle": "Clothing", + "text": "Clothing" + } + } + }, + "menu-item#shorts": { + "props": { + "id": "menu-item-shorts", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/shorts", + "noFollow": false, + "tagTitle": "Shorts", + "text": "Shorts" + } + } + }, + "menu-item#tank-tops": { + "props": { + "id": "menu-item-tank-tops", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/tank-tops", + "noFollow": false, + "tagTitle": "Tank tops", + "text": "Tank tops" + } + } + }, + "menu-item#shirts": { + "props": { + "id": "menu-item-shirts", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/shirts", + "noFollow": false, + "tagTitle": "Shirts", + "text": "Shirts" + } + } + }, + "menu-item#sweatshirt": { + "props": { + "id": "menu-item-sweat-shirts", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/sweatshirt", + "noFollow": false, + "tagTitle": "Sweatshirt", + "text": "Sweatshirt" + } + } + }, + "menu-item#cropped": { + "props": { + "id": "menu-item-cropped", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/cropped", + "noFollow": false, + "tagTitle": "Cropped", + "text": "Cropped" + } + } + } +} diff --git a/store/blocks/footer/mobile/menu-mobile.jsonc b/store/blocks/footer/mobile/menu-mobile.jsonc new file mode 100644 index 0000000..ba816c4 --- /dev/null +++ b/store/blocks/footer/mobile/menu-mobile.jsonc @@ -0,0 +1,31 @@ +{ + "vtex.menu@2.x:menu#footer-mobile": { + "props": { + "orientation": "vertical" + }, + "children": ["menu-item#sale-mobile", "menu-item#decoration-mobile"] + }, + "menu-item#decoration-mobile": { + "props": { + "itemProps": { + "tagTitle": "Decoration", + "text": "Decoration" + } + }, + "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"] + }, + "vtex.menu@2.x:submenu.accordion#decoration": { + "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"] + }, + + "vtex.menu@2.x:menu#footer-decoration-mobile": { + "props": { + "orientation": "vertical" + }, + "children": [ + "menu-item#smartphones", + "menu-item#videogames", + "menu-item#tvs" + ] + } +} diff --git a/store/blocks/pdp/descriptionTabs.jsonc b/store/blocks/pdp/descriptionTabs.jsonc index 3bd3202..f93abe4 100644 --- a/store/blocks/pdp/descriptionTabs.jsonc +++ b/store/blocks/pdp/descriptionTabs.jsonc @@ -20,6 +20,7 @@ }, "tab-list.item#description": { "props": { + "blockClass": "tab-list-button", "tabId": "product-description", "label": "Description", "defaultActiveTab": true diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a80a89b..f87b040 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -139,6 +139,7 @@ "flex-layout.row#product-availability": { "props": { + "blockClass": "product-main-container", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -158,8 +159,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { @@ -178,5 +179,26 @@ "Pinterest": true } } + }, + "shelf.relatedProducts": { + "props": { + "productList": { + "maxItems": 10, + "itemsPerPage": 2, + "minItemsPerPage": 2, + "arrows": true, + "showTitle": false, + "gap": "ph2" + } + }, + "blocks": ["product-summary.shelf#teste"] + }, + "product-summary.shelf#teste": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price", + "product-summary-buy-button" + ] } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index ae5381f..426b1af 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,5 +8,32 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - background-color: aqua; + max-width: 1920px; + margin: 0 auto; +} +.container .link, +.container .term { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-align: center; +} +.container .homeLink { + padding-top: 0; + padding-bottom: 0; +} +.container .homeLink::after { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .homeLink .homeIcon { + display: none; } \ 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..88fbed2 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,19 @@ +/* +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 */ +.vtex-shelf :global(.vtex-shelf-1-x-title) { + padding: 16px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index eac9af2..7035d7d 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -19,16 +19,14 @@ margin-bottom: 54px; } -.t-action { +.listItem--tab-list-button :global(.vtex-button) { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; - /* identical to box height, or 158% */ display: flex; align-items: center; text-align: center; - /* gray-300 */ color: #bfbfbf; } \ 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 4895dfd..47cbe5d 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,3 +1,31 @@ .container { - background-color: aqua; + max-width: 1920px; + margin: 0 auto; + + .link, + .term { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-align: center; + } + .homeLink { + padding-top: 0; + padding-bottom: 0; + &::after { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + .homeIcon { + display: none; + } + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 47f66f8..a49c189 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -10,21 +10,16 @@ margin-bottom: 54px; } -.listItem { - button { +.listItem--tab-list-button { + :global(.vtex-button) { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; - /* identical to box height, or 158% */ - display: flex; align-items: center; text-align: center; - - /* gray-300 */ - color: #bfbfbf; } } -- 2.34.1 From ba3c3f8b0394e6db7fda3685d44d6ccd3f095ec3 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Sat, 4 Feb 2023 16:35:40 -0300 Subject: [PATCH 07/14] feat: pequenas alteracoes no footer em css --- store/blocks/footer/footer-newsletter.jsonc | 5 +++-- store/blocks/footer/menu-link-3.jsonc | 1 - styles/css/vtex.flex-layout.css | 12 ++++++++++++ styles/sass/pages/product/vtex.flex-layout.scss | 17 +++++++++++++++++ 4 files changed, 32 insertions(+), 3 deletions(-) diff --git a/store/blocks/footer/footer-newsletter.jsonc b/store/blocks/footer/footer-newsletter.jsonc index 62f7a2a..cf7a981 100644 --- a/store/blocks/footer/footer-newsletter.jsonc +++ b/store/blocks/footer/footer-newsletter.jsonc @@ -2,7 +2,7 @@ "flex-layout.row#footer-newsletter": { "children": ["rich-text#footer-newsletter", "newsletter"], "props": { - "blockClass": "menu-row", + "blockClass": "menu-row-newsletter", "paddingTop": 6, "paddingBottom": 3 } @@ -10,11 +10,12 @@ "rich-text#footer-newsletter": { "props": { "text": "## Assine nossa newsletter \n Receba ofertas e novidades por e-mail", - "blockClass": "footer" + "blockClass": "menu-row-newsletter-title" } }, "newsletter": { "props": { + "blockClass": "menu-row-label-newsletter", "hideLabel": true } } diff --git a/store/blocks/footer/menu-link-3.jsonc b/store/blocks/footer/menu-link-3.jsonc index 90f7f5a..9b0d8c1 100644 --- a/store/blocks/footer/menu-link-3.jsonc +++ b/store/blocks/footer/menu-link-3.jsonc @@ -15,7 +15,6 @@ "text": "Seja um franqueado" } }, - "menu-item#bags": { "props": { "id": "menu-item-bags", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 79c6498..055f70d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -17,4 +17,16 @@ } .flexRowContent--button-card-add .stretchChildrenWidth:last-child { width: 100% !important; +} + +.flexRow--menu-row-newsletter { + margin-top: 64px !important; + display: flex !important; + background: #000000; + border-bottom: 1px solid #ffffff; +} + +.flexRowContent--menu-row-newsletter { + display: flex !important; + flex-direction: column !important; } \ 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 72d6847..e657c74 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -15,3 +15,20 @@ } } } + +//AREA DA NEWSLATTER STYLE + +.flexRow--menu-row-newsletter { + margin-top: 64px !important; + display: flex !important; + background: #000000; + + border-bottom: 1px solid #ffffff; +} +.flexRowContent--menu-row-newsletter { + display: flex !important; + flex-direction: column !important; +} +// .stretchChildrenWidth { +// width: 100% !important; +// } -- 2.34.1 From 8d93b7473b12521ccbe804c32572caf87d181811 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Mon, 6 Feb 2023 20:59:15 -0300 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20termiando=20o=20estilo=20no=20new?= =?UTF-8?q?sletter=20come=C3=A7ando=20o=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/logo-m3.png | Bin 0 -> 739 bytes assets/logo-vtex.png | Bin 0 -> 1032 bytes store/blocks/footer/footer-2-desktop.jsonc | 6 +-- styles/css/vtex.flex-layout.css | 8 ++++ styles/css/vtex.rich-text.css | 26 +++++++++- styles/css/vtex.store-components.css | 37 ++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 12 +++-- styles/sass/pages/product/vtex.rich-text.scss | 27 +++++++++++ .../pages/product/vtex.store-components.scss | 45 ++++++++++++++++++ 9 files changed, 154 insertions(+), 7 deletions(-) create mode 100644 assets/logo-m3.png create mode 100644 assets/logo-vtex.png diff --git a/assets/logo-m3.png b/assets/logo-m3.png new file mode 100644 index 0000000000000000000000000000000000000000..94b38ca6e048a5d6912c1654cf0e43316fdf41b7 GIT binary patch literal 739 zcmV<90v!E`P)1amw#2gXkTcIV1_(~oQoh8w&QWA=m=vv8j9^Tc+rWMAcBf15mj9n2QiiINp}Mi* zk2b!CJiLWDmtWRQLk7J-JPweC-`czjT74dJ)0)yLa6-D6z;W7)qk|nJ;@uP`qIVTN z|AD=exN;WGCBPLu^lnW%)YH&(SJtKVbJ0+phUq8>c22+#2FmKhc(i`}&VfuiChUql zb80u{0jw7ezBlJMUW>_?C@UgP5CZbB=CDk?mrez~fCc1XO^IfEiZgded^ezhJoH2h z9!$V~3HBZZHtZ7RhLSEPl6s=^;o}uM_h?~UJCy9eY$*S?b;w!gQne>z0cqHP=GZ$> z_FOuaK27+!p$z&ag0g?qxwCgqmo3|%d|S*});B6rd({R*cN VIX<+&#Lxf$002ovPDHLkV1g9BNKOC% literal 0 HcmV?d00001 diff --git a/assets/logo-vtex.png b/assets/logo-vtex.png new file mode 100644 index 0000000000000000000000000000000000000000..ff26605e8ea37767ab2add14e1a7e4709c2b74e7 GIT binary patch literal 1032 zcmV+j1o!)iP)s>g*SvKin2G%2|ut=2U#(#4i z40t($*UlP}`Ddk1=y5Ht%Z-n|RZ@QtlI{A=vV|v4S0?M{+}B=8=h;1z*JmS<^)$p+ zSQE-K#&n86IoC>V=14E?bXIIaohY*GH;49;O4U_)z8m$O%QF1^GrW$1Z_4v%t-D*# z66IP7e*@_?g^9%Zd1DP;vkvaMe5AlRStiR@ zO6HdZE$_i1)3qtn$pPaiE?}|5VF?JJE`TBm7J?&ee|tiKd_!!iL<5anfXHtE)|>LUgcJ&oQTW>(pV(Q z)hhm7#r0;p?&j)(t-G?qTnmVvT;9vVdnlM%1-HFAdN+$9Ji~cvb)VSmrjh~bl8+;CKN1cO3X^wM}3It3cic(}-HWqwG@UpHeti@3TO@U2k3{(9c}U_KvhN z@}Z+8Tg=qe0Z6yjO-@+1Dn5q3#oWUF;5FAs{0jQ}Qi+}==>-fs*^NWK!8A6yXhHuW zritW>S?o-gCGtAtO4fEG4X*A>VUGy=8-|Oyl3idr1~vrUgIz}Q#1xynVPk*8Dm-;C zIc(68j^)t}!)uPsR@Z`#x+;te6h;&)GLt|bDn~giI|}G(Ig3KKTRHTPYuj?Ni~qn< zyV#d~qO$H2<-5C%r;zs`azh3$WMhfC4(Iz*33R%yQ3SYcguf?{lGn30vHAW0000 Date: Tue, 7 Feb 2023 16:27:37 -0300 Subject: [PATCH 09/14] feat: criando o meio do footer botando nomes e blocks --- store/blocks/footer/footer-2-desktop.jsonc | 2 +- store/blocks/footer/menu-link-1.jsonc | 62 +++++++++--- store/blocks/footer/menu-link-2.jsonc | 94 +++++++++++++++---- store/blocks/footer/menu-link-3.jsonc | 44 +++------ store/blocks/footer/mobile/menu-item-1.jsonc | 6 +- store/blocks/footer/mobile/menu-mobile.jsonc | 6 +- styles/css/vtex.flex-layout.css | 6 ++ styles/css/vtex.rich-text.css | 28 ++++++ styles/css/vtex.store-footer.css | 23 ++--- .../sass/pages/product/vtex.flex-layout.scss | 9 ++ styles/sass/pages/product/vtex.rich-text.scss | 29 ++++++ .../sass/pages/product/vtex.store-footer.scss | 6 ++ 12 files changed, 235 insertions(+), 80 deletions(-) create mode 100644 styles/sass/pages/product/vtex.store-footer.scss diff --git a/store/blocks/footer/footer-2-desktop.jsonc b/store/blocks/footer/footer-2-desktop.jsonc index edfa2e2..cd0a629 100644 --- a/store/blocks/footer/footer-2-desktop.jsonc +++ b/store/blocks/footer/footer-2-desktop.jsonc @@ -6,7 +6,7 @@ "rich-text#footer-powered" ], "props": { - "blockClass": "credits" + "blockClass": "footer-credits" } }, "rich-text#footer-copyright": { diff --git a/store/blocks/footer/menu-link-1.jsonc b/store/blocks/footer/menu-link-1.jsonc index bdfce66..d0f6cd3 100644 --- a/store/blocks/footer/menu-link-1.jsonc +++ b/store/blocks/footer/menu-link-1.jsonc @@ -6,9 +6,11 @@ "children": [ "rich-text#footer-link-1-title", "menu-item#loja", - "menu-item#blackfriday", - "menu-item#sale", - "menu-item#personalization", + "menu-item#trocasEdevolucoes", + "menu-item#centralatendimento", + "menu-item#faleconosco", + "menu-item#imprensa", + "menu-item#faleconosco", "rich-text#footer-link-1-cnpj" ] }, @@ -39,9 +41,9 @@ } } }, - "menu-item#blackfriday": { + "menu-item#trocasEdevolucoes": { "props": { - "id": "menu-item-black-friday", + "id": "menu-item-trocasEdevolucoes", "type": "custom", "iconId": null, "highlight": false, @@ -49,14 +51,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "BlackFriday", - "text": "Black Friday" + "tagTitle": "Trocas e devoluções", + "text": "Trocas e devoluções" } } }, - "menu-item#sale": { + "menu-item#centralatendimento": { "props": { - "id": "menu-item-sale", + "id": "menu-item-centralatendimento", "type": "custom", "iconId": null, "highlight": false, @@ -64,14 +66,14 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "Sale", - "text": "Sale" + "tagTitle": "Central de Atendimento", + "text": "Central de Atendimento" } } }, - "menu-item#personalization": { + "menu-item#imprensa": { "props": { - "id": "menu-item-personalization", + "id": "menu-item-imprensa", "type": "custom", "iconId": null, "highlight": false, @@ -79,8 +81,38 @@ "type": "internal", "href": "#", "noFollow": false, - "tagTitle": "Personalization", - "text": "Personalization" + "tagTitle": "Imprensa", + "text": "Imprensa" + } + } + }, + "menu-item#rastreamento": { + "props": { + "id": "menu-item-rastreamento", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Rastreamento", + "text": "Rastreamento" + } + } + }, + "menu-item#faleconosco": { + "props": { + "id": "menu-item-faleconosco", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Fale conosco", + "text": "Fale conosco" } } } diff --git a/store/blocks/footer/menu-link-2.jsonc b/store/blocks/footer/menu-link-2.jsonc index 82eae17..02bae1a 100644 --- a/store/blocks/footer/menu-link-2.jsonc +++ b/store/blocks/footer/menu-link-2.jsonc @@ -4,22 +4,26 @@ "orientation": "vertical" }, "children": [ - "rich-text#footer-link-1-cnpj", - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs", - "rich-text#footer-link-1-cnpj" + "rich-text#footer-link-2-aM3academy", + "menu-item#sejaumfranqueado", + "menu-item#quemsomos", + "menu-item#nossaslojas", + "rich-text#footer-link-2-responsabilidadesocial", + "menu-item#franquias", + "menu-item#proconMG", + "menu-item#PolíticadePrivacidade" ] }, - "rich-text#footer-link-1-cnpj": { + "rich-text#footer-link-2-aM3academy": { "props": { - "text": "CNPJ 12.345.678.0009-10", - "blockClass": "footer-link-1-title" + "text": "A M3 Academy", + "blockClass": "footer-link-2-title" } }, - "menu-item#smartphones": { + + "menu-item#sejaumfranqueado": { "props": { - "id": "menu-item-smartphones", + "id": "menu-item-sejaumfranqueado", "type": "custom", "iconId": null, "highlight": false, @@ -27,15 +31,15 @@ "type": "internal", "href": "/decoration/smartphones", "noFollow": true, - "tagTitle": "Smartphones", - "text": "Smartphones" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, - "menu-item#videogames": { + "menu-item#quemsomos": { "props": { - "id": "menu-item-videogames", + "id": "menu-item-quemsomos", "type": "custom", "iconId": null, "highlight": false, @@ -43,13 +47,13 @@ "type": "internal", "href": "/decoration/videogames", "noFollow": true, - "tagTitle": "Videogames", - "text": "Videogames" + "tagTitle": "Quem somos", + "text": "Quem somos" } } }, - "menu-item#tvs": { + "menu-item#nossaslojas": { "props": { "id": "menu-item-tvs", "type": "custom", @@ -59,8 +63,60 @@ "type": "internal", "href": "/decoration/tvs", "noFollow": true, - "tagTitle": "TVs", - "text": "TVs" + "tagTitle": "Nossas lojas", + "text": "Nossas lojas" + } + } + }, + + "rich-text#footer-link-2-responsabilidadesocial": { + "props": { + "text": "Responsabilidade Social", + "blockClass": "footer-link-2-title" + } + }, + "menu-item#franquias": { + "props": { + "id": "menu-item-franquias", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/franquias", + "noFollow": true, + "tagTitle": "Franquias", + "text": "Franquias" + } + } + }, + "menu-item#proconMG": { + "props": { + "id": "menu-item-proconMG", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/ProconMG", + "noFollow": true, + "tagTitle": "Procon MG", + "text": "Procon MG" + } + } + }, + "menu-item#PolíticadePrivacidade": { + "props": { + "id": "menu-item-PolíticadePrivacidade", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/PolíticadePrivacidade", + "noFollow": true, + "tagTitle": "Política de Privacidade", + "text": "Política de Privacidade" } } } diff --git a/store/blocks/footer/menu-link-3.jsonc b/store/blocks/footer/menu-link-3.jsonc index 9b0d8c1..c815b0e 100644 --- a/store/blocks/footer/menu-link-3.jsonc +++ b/store/blocks/footer/menu-link-3.jsonc @@ -5,60 +5,44 @@ }, "children": [ "rich-text#link-3-title", - "menu-item#bags", - "menu-item#backpacks", - "menu-item#necessaire" + "menu-item#Sejaumfranqueado", + "menu-item#Multimarcas" ] }, "rich-text#link-3-title": { "props": { - "text": "Seja um franqueado" + "text": "Seja um franqueado", + "blockClass": "footer-link-3-title" } }, - "menu-item#bags": { + "menu-item#Sejaumfranqueado": { "props": { - "id": "menu-item-bags", + "id": "menu-item-Sejaumfranqueado", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/bags/d", + "href": "/Sejaumfranqueado/d", "noFollow": true, - "tagTitle": "Bags", - "text": "Bags" + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" } } }, - "menu-item#backpacks": { + "menu-item#Multimarcas": { "props": { - "id": "menu-item-backpacks", + "id": "menu-item-Multimarcas", "type": "custom", "iconId": null, "highlight": false, "itemProps": { "type": "internal", - "href": "/bags/backpacks", + "href": "/Multimarcas/backpacks", "noFollow": true, - "tagTitle": "Backpacks", - "text": "Backpacks" - } - } - }, - - "menu-item#necessaire": { - "props": { - "id": "menu-item-necessaire", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/bags/necessaire", - "noFollow": true, - "tagTitle": "Necessaire", - "text": "Necessaire" + "tagTitle": "Multimarcas", + "text": "Multimarcas" } } } diff --git a/store/blocks/footer/mobile/menu-item-1.jsonc b/store/blocks/footer/mobile/menu-item-1.jsonc index 46755b9..af4163d 100644 --- a/store/blocks/footer/mobile/menu-item-1.jsonc +++ b/store/blocks/footer/mobile/menu-item-1.jsonc @@ -15,7 +15,11 @@ "props": { "orientation": "vertical" }, - "children": ["menu-item#patrick", "menu-item#videogames", "menu-item#tvs"] + "children": [ + "menu-item#sejaumfranqueado", + "menu-item#quemsomos", + "menu-item#nossaslojas" + ] }, "menu-item#patrick": { "props": { diff --git a/store/blocks/footer/mobile/menu-mobile.jsonc b/store/blocks/footer/mobile/menu-mobile.jsonc index ba816c4..b922981 100644 --- a/store/blocks/footer/mobile/menu-mobile.jsonc +++ b/store/blocks/footer/mobile/menu-mobile.jsonc @@ -23,9 +23,9 @@ "orientation": "vertical" }, "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" + "menu-item#sejaumfranqueado", + "menu-item#quemsomos", + "menu-item#nossaslojas" ] } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c2c0851..23dfdab 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -37,4 +37,10 @@ } .flexRowContent--menu-row-newsletter .stretchChildrenWidth { width: 100% !important; +} + +.flexRow--footer-credits { + background-color: #000000 !important; + border-top: 1px solid #ffffff; + padding: 31px 0 15px; } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 929dec4..5763f9d 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -30,4 +30,32 @@ line-height: 25px; text-align: center; color: #929292; +} + +.paragraph--footer-copyright { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 20px; + color: rgba(255, 255, 255, 0.45); + margin-right: 8px; +} + +.paragraph--footer-powered-by { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 12px; + color: #ffffff; + margin-right: 8px; +} + +.image--footer-powered-by { + width: 100%; + max-width: 40px; +} +.image--footer-powered-by:not(:last-child) { + margin-right: 16px; } \ No newline at end of file diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..99ba4ea 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,12 @@ -.row--menu-row { - padding-right: 24px; -} - -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +/* +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 */ +.vtex-store-footer-2-x-footerLayout :global(.vtex-flex-layout-0-x-flexRow--credits) { + background-color: #000000 !important; +} \ 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 8b59f1d..3d5eaa0 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -38,3 +38,12 @@ width: 100% !important; } } + +//STYLE DO FOOTER PAYMENTS + +//STYLE DO FOOTER CREDITS +.flexRow--footer-credits { + background-color: #000000 !important; + border-top: 1px solid #ffffff; + padding: 31px 0 15px; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 21b3008..73044a4 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -25,3 +25,32 @@ color: #929292; } } + +//AREA DO FOOTER CREDITS PARAGRAFO +.paragraph--footer-copyright { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 20px; + color: rgba(255, 255, 255, 0.45); + margin-right: 8px; +} + +.paragraph--footer-powered-by { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 12px; + color: #ffffff; + margin-right: 8px; +} + +.image--footer-powered-by { + width: 100%; + max-width: 40px; + &:not(:last-child) { + margin-right: 16px; + } +} diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss new file mode 100644 index 0000000..6eb8577 --- /dev/null +++ b/styles/sass/pages/product/vtex.store-footer.scss @@ -0,0 +1,6 @@ +//AREA DO FOOTER CREDITS PARA USAR O GLOBAL +.vtex-store-footer-2-x-footerLayout { + :global(.vtex-flex-layout-0-x-flexRow--credits) { + background-color: #000000 !important; + } +} -- 2.34.1 From b6dac0711d515a3f67e54ba5f4c43f61b62dc38b Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Tue, 7 Feb 2023 21:11:38 -0300 Subject: [PATCH 10/14] feat: fazendo o css do footer --- store/blocks/footer/footer-1-desktop.jsonc | 4 ++-- styles/css/vtex.flex-layout.css | 6 ++++++ styles/css/vtex.rich-text.css | 12 ++++++++++++ styles/sass/pages/product/vtex.flex-layout.scss | 8 +++++++- styles/sass/pages/product/vtex.rich-text.scss | 12 ++++++++++++ 5 files changed, 39 insertions(+), 3 deletions(-) diff --git a/store/blocks/footer/footer-1-desktop.jsonc b/store/blocks/footer/footer-1-desktop.jsonc index 1e2de62..68bfb77 100644 --- a/store/blocks/footer/footer-1-desktop.jsonc +++ b/store/blocks/footer/footer-1-desktop.jsonc @@ -9,7 +9,7 @@ "flex-layout.row#footer-social" ], "props": { - "blockClass": "menu-row", + "blockClass": "menu-row-wrapper", "paddingTop": 6, "paddingBottom": 3 } @@ -17,7 +17,7 @@ "flex-layout.row#footer-social": { "children": ["social-networks", "accepted-payment-methods"], "props": { - "blockClass": "menu-row", + "blockClass": "menu-row-wrapper", "paddingTop": 6, "paddingBottom": 3 } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 23dfdab..5ed5767 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -39,6 +39,12 @@ width: 100% !important; } +.flexRow--menu-row-wrapper { + background-color: #000000; + padding-top: 32px; + padding-bottom: 128px; +} + .flexRow--footer-credits { background-color: #000000 !important; border-top: 1px solid #ffffff; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 5763f9d..af5160e 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -32,6 +32,18 @@ color: #929292; } +.paragraph--footer-link-1-title, +.paragraph--footer-link-2-title, +.paragraph--footer-link-3-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 38px; + text-align: center; + color: #ffffff; +} + .paragraph--footer-copyright { font-family: "Open Sans", sans-serif; font-style: normal; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 3d5eaa0..c015e42 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -39,7 +39,13 @@ } } -//STYLE DO FOOTER PAYMENTS +//STYLE DO FOOTER PARTE DO MEIO COM PAYMENTS + +.flexRow--menu-row-wrapper { + background-color: #000000; + padding-top: 32px; + padding-bottom: 128px; +} //STYLE DO FOOTER CREDITS .flexRow--footer-credits { diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 73044a4..506d8fe 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -25,6 +25,18 @@ color: #929292; } } +//AREA DO FOOTER DO MEIO COM PAYMENTS E CARTOES +.paragraph--footer-link-1-title, +.paragraph--footer-link-2-title, +.paragraph--footer-link-3-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 38px; + text-align: center; + color: #ffffff; +} //AREA DO FOOTER CREDITS PARAGRAFO .paragraph--footer-copyright { -- 2.34.1 From 97632d79ee4ae36881a07a645d00ea6946310400 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Thu, 9 Feb 2023 21:46:14 -0300 Subject: [PATCH 11/14] feat: estilizando o button da descripion do produto --- styles/css/vtex.store-components.css | 17 +++++++++++++ styles/css/vtex.tab-layout.css | 22 +++++++++++++---- .../pages/product/vtex.store-components.scss | 19 +++++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 24 +++++++++++++++---- 4 files changed, 74 insertions(+), 8 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8c5df6d..d56541a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -153,6 +153,23 @@ display: none !important; } +.subscriberContainer :global(.vtex-store-components-3-x-title) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + .productDescriptionContainer { margin-left: 32px; font-family: "Open Sans", sans-serif; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 7035d7d..1b28ce3 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -20,13 +20,27 @@ } .listItem--tab-list-button :global(.vtex-button) { - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; - display: flex; - align-items: center; - text-align: center; color: #bfbfbf; + background-color: white; + border: none; + font-family: "Open Sans"; + text-transform: capitalize; +} + +.listItemActive :global(.vtex-button) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #000000; + background-color: white; + border: none; + text-transform: capitalize; + border-bottom: 3px solid #000000; } \ 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 2d733e6..7092027 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -175,6 +175,25 @@ } } } +//AREA DO COMPONENTES QUANDO O PRODUTO ESTA INDISPONIVEL +.subscriberContainer { + :global(.vtex-store-components-3-x-title) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; + } + :global(.vtex-store-components-3-x-subscribeLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} //AREA DO TAB LAYOUT CONTAINER .productDescriptionContainer { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index a49c189..cc77106 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -10,16 +10,32 @@ margin-bottom: 54px; } +//AREA DOS BUTOES DA DESCRIÇOES DO PRODUTO .listItem--tab-list-button { :global(.vtex-button) { - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; - display: flex; - align-items: center; - text-align: center; color: #bfbfbf; + background-color: white; + border: none; + font-family: "Open Sans"; + text-transform: capitalize; + } +} +.listItemActive { + :global(.vtex-button) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #000000; + background-color: white; + border: none; + text-transform: capitalize; + border-bottom: 3px solid #000000; } } -- 2.34.1 From 5d3dce5615abd2b2727b86661dab9039a8ebadcb Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Fri, 10 Feb 2023 12:52:58 -0300 Subject: [PATCH 12/14] feat: criando o comecando a estilizar o @media --- .../product-summary-list.jsonc | 30 +++++-------------- styles/css/vtex.breadcrumb.css | 5 ++++ styles/css/vtex.flex-layout.css | 11 +++++++ styles/css/vtex.tab-layout.css | 7 ++++- .../sass/pages/product/vtex.breadcrumb.scss | 4 +++ .../sass/pages/product/vtex.flex-layout.scss | 9 ++++++ .../sass/pages/product/vtex.tab-layout.scss | 6 +++- 7 files changed, 48 insertions(+), 24 deletions(-) diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..971cd70 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,10 +112,7 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ @@ -144,7 +130,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 426b1af..b5e72be 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -11,6 +11,11 @@ max-width: 1920px; margin: 0 auto; } +@media (max-width: 1440px) { + .container { + padding: 0 40px; + } +} .container .link, .container .term { font-family: "Open Sans", sans-serif; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 5ed5767..d902c63 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,10 +7,21 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@media (max-width: 1440px) { + .flexRow--product-main-container { + padding: 0 40px; + } +} .flexRow--product-main-container :global(.vtex-store-components-3-x-container) { max-width: 1920px; } +@media (max-width: 1440px) { + .flexRowContent { + padding: 0 72px; + } +} + .flexRowContent--button-card-add .stretchChildrenWidth:first-child { max-width: 128px; padding-right: 10px; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 1b28ce3..785341e 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -8,7 +8,12 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding: 0 320px !important; + padding: 0 320px; +} +@media (max-width: 1440px) { + .container { + padding: 0 40px; + } } .listContainer { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 47cbe5d..8cc518c 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -2,6 +2,10 @@ max-width: 1920px; margin: 0 auto; + @media (max-width: 1440px) { + padding: 0 40px; + } + .link, .term { font-family: "Open Sans", sans-serif; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index c015e42..86b9baf 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,8 +1,17 @@ .flexRow--product-main-container { + @media (max-width: 1440px) { + padding: 0 40px; + } + :global(.vtex-store-components-3-x-container) { max-width: 1920px; } } +.flexRowContent { + @media (max-width: 1440px) { + padding: 0 72px; + } +} .flexRowContent--button-card-add { .stretchChildrenWidth { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index cc77106..3fa2263 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,9 @@ .container { - padding: 0 320px !important; + padding: 0 320px; + + @media (max-width: 1440px) { + padding: 0 40px; + } } .listContainer { display: flex; -- 2.34.1 From 2758bf2e9914e709f2117a4c261324b5f9640c65 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Fri, 10 Feb 2023 22:34:00 -0300 Subject: [PATCH 13/14] feat: criando o css e blocks finalizando o css --- manifest.json | 3 +- react/Example.tsx | 3 - react/assets/pix.svg | 38 +++++ react/components/Example/Example.tsx | 9 -- react/components/Pix/index.tsx | 33 +++++ react/components/Pix/styles.module.css | 7 + react/pix.ts | 3 + store/blocks/footer/footer-1-desktop.jsonc | 27 +++- store/blocks/footer/footer-2-desktop.jsonc | 6 +- store/blocks/footer/footer.jsonc | 5 +- .../blocks/footer/mobile/footer-mobile.jsonc | 29 ++-- store/blocks/footer/mobile/menu-item-1.jsonc | 114 --------------- store/blocks/footer/mobile/menu-mobile.jsonc | 25 ++-- store/blocks/home/home.jsonc | 2 - store/blocks/pdp/descriptionTabs.jsonc | 1 + store/blocks/pdp/product-main.jsonc | 96 ++++++++++++ store/blocks/pdp/product.jsonc | 137 ++---------------- store/blocks/pdp/shelf-pdp.jsonc | 53 +++++++ store/blocks/product-price.jsonc | 9 +- .../product-summary/product-summary.jsonc | 4 +- store/interfaces.json | 4 +- styles/css/vtex.breadcrumb.css | 9 -- styles/css/vtex.flex-layout.css | 51 ++++--- styles/css/vtex.product-price.css | 18 ++- styles/css/vtex.product-summary.css | 54 ++----- styles/css/vtex.rich-text.css | 10 ++ styles/css/vtex.shelf.css | 4 + styles/css/vtex.store-components.css | 39 ++++- styles/css/vtex.tab-layout.css | 38 ++--- .../sass/pages/product/vtex.breadcrumb.scss | 7 - .../sass/pages/product/vtex.flex-layout.scss | 56 ++++--- .../pages/product/vtex.product-price.scss | 17 +++ .../pages/product/vtex.product-summary.scss | 10 ++ styles/sass/pages/product/vtex.rich-text.scss | 11 ++ styles/sass/pages/product/vtex.shelf.scss | 3 + .../pages/product/vtex.store-components.scss | 45 +++++- .../sass/pages/product/vtex.tab-layout.scss | 31 ++-- 37 files changed, 572 insertions(+), 439 deletions(-) delete mode 100644 react/Example.tsx create mode 100644 react/assets/pix.svg delete mode 100644 react/components/Example/Example.tsx create mode 100644 react/components/Pix/index.tsx create mode 100644 react/components/Pix/styles.module.css create mode 100644 react/pix.ts delete mode 100644 store/blocks/footer/mobile/menu-item-1.jsonc create mode 100644 store/blocks/pdp/product-main.jsonc create mode 100644 store/blocks/pdp/shelf-pdp.jsonc create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss diff --git a/manifest.json b/manifest.json index a2cde0d..fb9b018 100644 --- a/manifest.json +++ b/manifest.json @@ -65,7 +65,8 @@ "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", "vtex.css-handles": "1.x", - "vtex.product-context": "0.x" + "vtex.product-context": "0.x", + "vtex.list-context": "0.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/Example.tsx b/react/Example.tsx deleted file mode 100644 index 7d550e5..0000000 --- a/react/Example.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Example from "./components/Example/Example"; - -export default Example; \ No newline at end of file diff --git a/react/assets/pix.svg b/react/assets/pix.svg new file mode 100644 index 0000000..9b21249 --- /dev/null +++ b/react/assets/pix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx deleted file mode 100644 index d195271..0000000 --- a/react/components/Example/Example.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Example = () => { - return ( -
Example
- ) -} - -export default Example \ No newline at end of file diff --git a/react/components/Pix/index.tsx b/react/components/Pix/index.tsx new file mode 100644 index 0000000..55ec502 --- /dev/null +++ b/react/components/Pix/index.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' +import styles from './styles.module.css' + +const Pix = () => { + const product = useProduct() + const paymentMethods = product?.selectedItem?.sellers[0].commertialOffer.Installments + const [pricePix] = paymentMethods?.filter(paymentMethod => paymentMethod.Name === 'Pix à vista' && paymentMethod) ?? [] + const originalPrice = product?.selectedItem?.sellers[0].commertialOffer.Price ?? 0 + const priceToPix = pricePix.Value + const discount = originalPrice - priceToPix + const discountPercentage = ((discount / originalPrice) * 100).toFixed(2) + + const formatter = new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL', + maximumFractionDigits: 1 + }); + + return ( +
+
+ Pix +
+
+ {formatter.format(priceToPix)} + {discount > 0 && {discountPercentage}% de desconto} +
+
+ ) +} + +export default Pix diff --git a/react/components/Pix/styles.module.css b/react/components/Pix/styles.module.css new file mode 100644 index 0000000..7880a90 --- /dev/null +++ b/react/components/Pix/styles.module.css @@ -0,0 +1,7 @@ +/* .pix-container { + display: flex; + margin-top: 8px; +} +.pix-image { + margin-right: 26px !important; +} */ diff --git a/react/pix.ts b/react/pix.ts new file mode 100644 index 0000000..1373321 --- /dev/null +++ b/react/pix.ts @@ -0,0 +1,3 @@ +import Pix from "./components/Pix"; + +export default Pix; diff --git a/store/blocks/footer/footer-1-desktop.jsonc b/store/blocks/footer/footer-1-desktop.jsonc index 68bfb77..3ed3492 100644 --- a/store/blocks/footer/footer-1-desktop.jsonc +++ b/store/blocks/footer/footer-1-desktop.jsonc @@ -15,7 +15,32 @@ } }, "flex-layout.row#footer-social": { - "children": ["social-networks", "accepted-payment-methods"], + "children": [ + "flex-layout.col#footer-social", + "flex-layout.col#footer-payment" + ], + "props": { + "blockClass": "menu-row-wrapper", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "flex-layout.col#footer-social": { + "children": ["rich-text#footer-social", "social-networks"], + "props": { + "blockClass": "menu-row-wrapper", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "rich-text#footer-social": { + "props": { + "text": "## social", + "blockClass": "menu-row-newsletter-title" + } + }, + "flex-layout.col#footer-payment": { + "children": ["accepted-payment-methods"], "props": { "blockClass": "menu-row-wrapper", "paddingTop": 6, diff --git a/store/blocks/footer/footer-2-desktop.jsonc b/store/blocks/footer/footer-2-desktop.jsonc index cd0a629..401fcab 100644 --- a/store/blocks/footer/footer-2-desktop.jsonc +++ b/store/blocks/footer/footer-2-desktop.jsonc @@ -1,10 +1,6 @@ { "flex-layout.row#footer-2-desktop": { - "children": [ - "rich-text#footer-copyright", - "footer-spacer", - "rich-text#footer-powered" - ], + "children": ["rich-text#footer-copyright", "rich-text#footer-powered"], "props": { "blockClass": "footer-credits" } diff --git a/store/blocks/footer/footer.jsonc b/store/blocks/footer/footer.jsonc index 8b13133..fbce575 100644 --- a/store/blocks/footer/footer.jsonc +++ b/store/blocks/footer/footer.jsonc @@ -11,8 +11,11 @@ }, "footer-layout.mobile": { "children": [ + "flex-layout.row#footer-newsletter", "flex-layout.row#1-footer-mobile", - "flex-layout.row#2-footer-mobile" + "flex-layout.row#footer-3-mobile", + "flex-layout.row#footer-social", + "flex-layout.row#footer-2-desktop" ] } } diff --git a/store/blocks/footer/mobile/footer-mobile.jsonc b/store/blocks/footer/mobile/footer-mobile.jsonc index 3a0b8e5..601ad57 100644 --- a/store/blocks/footer/mobile/footer-mobile.jsonc +++ b/store/blocks/footer/mobile/footer-mobile.jsonc @@ -1,4 +1,11 @@ { + "flex-layout.row#1-footer-mobile": { + "props": { + "paddingTop": 4, + "paddingBottom": 4 + }, + "children": ["vtex.menu@2.x:menu#footer-mobile"] + }, "flex-layout.row#2-footer-mobile": { "children": ["flex-layout.col#footer-1-mobile"], "props": { @@ -8,11 +15,7 @@ } }, "flex-layout.col#footer-1-mobile": { - "children": [ - "accepted-payment-methods", - "social-networks", - "flex-layout.row#footer-2-desktop" - ], + "children": [], "props": { "blockClass": "payment-methods", "paddingTop": 4, @@ -20,17 +23,19 @@ "rowGap": 4 } }, - "flex-layout.row#1-footer-mobile": { - "props": { - "paddingTop": 4, - "paddingBottom": 4 - }, - "children": ["vtex.menu@2.x:menu#footer-mobile"] - }, "rich-text#footer-mobile": { "props": { "text": "All stock and product photos are from photos.icons8.com", "blockClass": "footer" } + }, + "flex-layout.row#footer-3-mobile": { + "children": ["vtex.menu@2.x:menu#link-3"], + "props": { + "blockClass": "payment-methods", + "paddingTop": 4, + "paddingBottom": 4, + "rowGap": 4 + } } } diff --git a/store/blocks/footer/mobile/menu-item-1.jsonc b/store/blocks/footer/mobile/menu-item-1.jsonc deleted file mode 100644 index af4163d..0000000 --- a/store/blocks/footer/mobile/menu-item-1.jsonc +++ /dev/null @@ -1,114 +0,0 @@ -{ - "menu-item#sale-mobile": { - "props": { - "itemProps": { - "tagTitle": "comprar", - "text": "comprar" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#sale"] - }, - "vtex.menu@2.x:submenu.accordion#sale": { - "children": ["vtex.menu@2.x:menu#footer-sale-mobile"] - }, - "vtex.menu@2.x:menu#footer-sale-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#sejaumfranqueado", - "menu-item#quemsomos", - "menu-item#nossaslojas" - ] - }, - "menu-item#patrick": { - "props": { - "id": "menu-item-category-clothing", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/d", - "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" - } - } - }, - "menu-item#shorts": { - "props": { - "id": "menu-item-shorts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/shorts", - "noFollow": false, - "tagTitle": "Shorts", - "text": "Shorts" - } - } - }, - "menu-item#tank-tops": { - "props": { - "id": "menu-item-tank-tops", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/tank-tops", - "noFollow": false, - "tagTitle": "Tank tops", - "text": "Tank tops" - } - } - }, - "menu-item#shirts": { - "props": { - "id": "menu-item-shirts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/shirts", - "noFollow": false, - "tagTitle": "Shirts", - "text": "Shirts" - } - } - }, - "menu-item#sweatshirt": { - "props": { - "id": "menu-item-sweat-shirts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/sweatshirt", - "noFollow": false, - "tagTitle": "Sweatshirt", - "text": "Sweatshirt" - } - } - }, - "menu-item#cropped": { - "props": { - "id": "menu-item-cropped", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/cropped", - "noFollow": false, - "tagTitle": "Cropped", - "text": "Cropped" - } - } - } -} diff --git a/store/blocks/footer/mobile/menu-mobile.jsonc b/store/blocks/footer/mobile/menu-mobile.jsonc index b922981..17b3bdb 100644 --- a/store/blocks/footer/mobile/menu-mobile.jsonc +++ b/store/blocks/footer/mobile/menu-mobile.jsonc @@ -5,6 +5,18 @@ }, "children": ["menu-item#sale-mobile", "menu-item#decoration-mobile"] }, + "menu-item#sale-mobile": { + "props": { + "itemProps": { + "tagTitle": "comprar", + "text": "comprar" + } + }, + "blocks": ["vtex.menu@2.x:submenu.accordion#sale-mobile"] + }, + "vtex.menu@2.x:submenu.accordion#sale-mobile": { + "children": ["vtex.menu@2.x:menu#link-1"] + }, "menu-item#decoration-mobile": { "props": { "itemProps": { @@ -15,17 +27,6 @@ "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"] }, "vtex.menu@2.x:submenu.accordion#decoration": { - "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"] - }, - - "vtex.menu@2.x:menu#footer-decoration-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#sejaumfranqueado", - "menu-item#quemsomos", - "menu-item#nossaslojas" - ] + "children": ["vtex.menu@2.x:menu#link-2"] } } diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..df8c1f3 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,6 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", diff --git a/store/blocks/pdp/descriptionTabs.jsonc b/store/blocks/pdp/descriptionTabs.jsonc index f93abe4..914ed77 100644 --- a/store/blocks/pdp/descriptionTabs.jsonc +++ b/store/blocks/pdp/descriptionTabs.jsonc @@ -28,6 +28,7 @@ }, "tab-list.item#description2": { "props": { + "blockClass": "tab-list-button", "tabId": "product-description2", "label": "Description" } diff --git a/store/blocks/pdp/product-main.jsonc b/store/blocks/pdp/product-main.jsonc new file mode 100644 index 0000000..e9c8900 --- /dev/null +++ b/store/blocks/pdp/product-main.jsonc @@ -0,0 +1,96 @@ +{ + "condition-layout.product#availability": { + "props": { + "conditions": [ + { + "subject": "isProductAvailable" + } + ], + "Then": "flex-layout.row#product-main", + "Else": "flex-layout.row#product-availability" + } + }, + "flex-layout.row#product-main": { + "props": { + "blockClass": "product-main-container", + "colGap": 7, + "rowGap": 7, + "marginTop": 4, + "marginBottom": 7, + "paddingTop": 7, + "paddingBottom": 7 + }, + "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + }, + "flex-layout.col#stack": { + "children": ["stack-layout"], + "props": { + "width": "60%", + "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"] + }, + "product-images": { + "props": { + "thumbnailMaxHeight": 90, + "thumbnailsOrientation": "horizontal", + "aspectRatio": { + "desktop": "auto", + "phone": "16:9" + }, + "displayThumbnailsArrows": true + } + }, + "product-specification-badges": { + "props": { + "specificationGroupName": "Group", + "specificationName": "On Sale", + "visibleWhen": "True", + "displayValue": "SPECIFICATION_NAME" + } + }, + "flex-layout.col#right-col": { + "props": { + "preventVerticalStretch": true, + "rowGap": 0 + }, + "children": [ + "flex-layout.row#product-name", + "product-identifier.product", + "product-rating-summary", + "flex-layout.row#selling-price", + "product-installments", + "price-pix-custom", + "sku-selector", + "product-assembly-options", + "product-gifts", + "flex-layout.row#buy-button", + "availability-subscriber", + "shipping-simulator" + ] + }, + "flex-layout.row#product-name": { + "props": { + "marginBottom": 3 + }, + "children": ["vtex.store-components:product-name"] + }, + "sku-selector": { + "props": { + "variationsSpacing": 3, + "showValueNameForImageVariation": true + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f87b040..7e45953 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,15 +1,21 @@ { "store.product": { "children": [ - "html#breadcrumb", + "flex-layout.row#breadcrumb", "condition-layout.product#availability", - "tab-layout#product-description", + "flex-layout.row#product-description", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + "flex-layout.row#pdp", "product-questions-and-answers" ] }, + "flex-layout.row#breadcrumb": { + "props": { + "blockClass": "breadcrumb-container" + }, + "children": ["html#breadcrumb"] + }, "html#breadcrumb": { "props": { "tag": "section", @@ -26,108 +32,12 @@ "text": "##### Product Specifications" } }, - - "condition-layout.product#availability": { + "flex-layout.row#product-description": { "props": { - "conditions": [ - { - "subject": "isProductAvailable" - } - ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" - } - }, - "flex-layout.row#product-main": { - "props": { - "blockClass": "product-main-container", - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 + "blockClass": "product-description-container" }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["tab-layout#product-description"] }, - - "product-specification-badges": { - "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } - }, - - "flex-layout.col#stack": { - "children": ["stack-layout"], - "props": { - "width": "60%", - "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"] - }, - "product-images": { - "props": { - "thumbnailMaxHeight": 90, - "thumbnailsOrientation": "horizontal", - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true - } - }, - "flex-layout.col#right-col": { - "props": { - "preventVerticalStretch": true, - "rowGap": 0 - }, - "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "product-rating-summary", - "flex-layout.row#selling-price", - "product-installments", - // "flex-layout.row#list-price-savings", - // "product-separator", - "sku-selector", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", - "availability-subscriber", - "shipping-simulator" - // "share#default" - ] - }, - - "flex-layout.row#product-name": { - "props": { - "marginBottom": 3 - }, - "children": ["vtex.store-components:product-name"] - }, - - "sku-selector": { - "props": { - "variationsSpacing": 3, - "showValueNameForImageVariation": true - } - }, - "flex-layout.row#buy-button": { "props": { "marginTop": 4, @@ -136,7 +46,6 @@ }, "children": ["product-quantity", "add-to-cart-button"] }, - "flex-layout.row#product-availability": { "props": { "blockClass": "product-main-container", @@ -169,7 +78,6 @@ }, "children": ["availability-subscriber"] }, - "share#default": { "props": { "social": { @@ -179,26 +87,5 @@ "Pinterest": true } } - }, - "shelf.relatedProducts": { - "props": { - "productList": { - "maxItems": 10, - "itemsPerPage": 2, - "minItemsPerPage": 2, - "arrows": true, - "showTitle": false, - "gap": "ph2" - } - }, - "blocks": ["product-summary.shelf#teste"] - }, - "product-summary.shelf#teste": { - "children": [ - "product-summary-image", - "product-summary-name", - "product-summary-price", - "product-summary-buy-button" - ] } } diff --git a/store/blocks/pdp/shelf-pdp.jsonc b/store/blocks/pdp/shelf-pdp.jsonc new file mode 100644 index 0000000..a30c451 --- /dev/null +++ b/store/blocks/pdp/shelf-pdp.jsonc @@ -0,0 +1,53 @@ +{ + "flex-layout.row#pdp": { + "props": { + "title": "Shelf pdp", + "blockClass": "shelf-pdp" + }, + "children": [ + "rich-text#nuestro-top", + "list-context.product-list#nuestro-top" + ] + }, + "rich-text#nuestro-top": { + "props": { + "text": "Você também pode gostar:", + "blockClass": "nuestro-shelf-title" + } + }, + "list-context.product-list#nuestro-top": { + "blocks": ["product-summary.shelf#pdp"], + "children": ["slider-layout#shelf-pdp"], + "props": { + "orderBy": "OrderByTopSaleDESC", + "collection": "320" + } + }, + + "product-summary-price": { + "props": { + "showInstallments": false + } + }, + + "product-summary.shelf#pdp": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price" + // "product-summary-buy-button" + ] + }, + "slider-layout#shelf-pdp": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": false, + "fullWidth": false, + "blockClass": "shelf" + } + } +} diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..779175f 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +17,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..bb93cc8 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..8c26a01 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -1,6 +1,6 @@ { - "example-component": { - "component": "Example" + "price-pix-custom": { + "component": "pix" }, "html": { "component": "html", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index b5e72be..b044aad 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -7,15 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.container { - max-width: 1920px; - margin: 0 auto; -} -@media (max-width: 1440px) { - .container { - padding: 0 40px; - } -} .container .link, .container .term { font-family: "Open Sans", sans-serif; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d902c63..129d99c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,21 +7,16 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -@media (max-width: 1440px) { - .flexRow--product-main-container { - padding: 0 40px; - } -} -.flexRow--product-main-container :global(.vtex-store-components-3-x-container) { +.flexRow--product-main-container :global(.vtex-store-components-3-x-container), +.flexRow--product-description-container :global(.vtex-store-components-3-x-container), +.flexRow--breadcrumb-container :global(.vtex-store-components-3-x-container), +.flexRow--shelf-pdp :global(.vtex-store-components-3-x-container), +.flexRow--menu-row-wrapper :global(.vtex-store-components-3-x-container), +.flexRow--menu-row-newsletter :global(.vtex-store-components-3-x-container), +.flexRow--footer-credits :global(.vtex-store-components-3-x-container) { max-width: 1920px; + padding: 0 40px; } - -@media (max-width: 1440px) { - .flexRowContent { - padding: 0 72px; - } -} - .flexRowContent--button-card-add .stretchChildrenWidth:first-child { max-width: 128px; padding-right: 10px; @@ -30,20 +25,36 @@ width: 100% !important; } +.flexRowContent--button-card-add :global(.vtex-button) { + background-color: #000000; + border: none; + border-radius: 0; + padding: 12px; +} + +.flexRowContent--shelf-pdp { + display: flex; + flex-direction: column; +} +.flexRowContent--shelf-pdp .stretchChildrenWidth { + width: 100% !important; + margin-bottom: 32px; +} + .flexRow--menu-row-newsletter { - margin-top: 64px !important; - display: flex !important; + margin-top: 64px; background: #000000; border-bottom: 1px solid #ffffff; } -.flexRow--menu-row-newsletter :global(.vtex-store-components-3-x-container) { - width: 100% !important; - max-width: 775px !important; +.flexRow--menu-row-newsletter .flexRowContent--menu-row-newsletter { + width: 100%; + max-width: 775px; + margin: 0 auto; } .flexRowContent--menu-row-newsletter { - display: flex !important; - flex-direction: column !important; + display: flex; + flex-direction: column; padding: 32px 0 16px; } .flexRowContent--menu-row-newsletter .stretchChildrenWidth { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index ede88c7..e7f0ab0 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -7,6 +7,20 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.strike { - text-decoration: none; +.sellingPriceValue { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..a3c4f3b 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,18 @@ -.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; - } -} - +/* +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 */ .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + display: flex; + justify-content: center; + padding: 16px 0 8px 0; } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +.priceContainer { + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index af5160e..81ea5d5 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,6 +7,16 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.wrapper--nuestro-shelf-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: auto; + color: #575757; +} + .container--menu-row-newsletter-title { display: flex; justify-content: center; diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css index 88fbed2..d86b1e2 100644 --- a/styles/css/vtex.shelf.css +++ b/styles/css/vtex.shelf.css @@ -16,4 +16,8 @@ line-height: 38px; text-align: center; color: #575757; +} + +.shelfContentContainer { + padding: 0 40px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d56541a..76652cf 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -27,7 +27,7 @@ } .skuSelectorName { - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; font-size: 14px; @@ -84,14 +84,21 @@ } .shippingContainer :global(.vtex-button) { position: absolute; - top: 25px; + top: 24px; left: 230px; - padding: 12px; + padding: 15px; width: max-content; + background-color: #000000; + border: none; } .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { font-size: 0; padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 19px; + color: #929292; } .shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { content: "OK"; @@ -149,11 +156,14 @@ .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel { display: flex; } +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { + display: none; +} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel :global(.vtex-address-form-4-x-input) { display: none !important; } -.subscriberContainer :global(.vtex-store-components-3-x-title) { +.subscriberContainer .title { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 700; @@ -161,7 +171,7 @@ line-height: 19px; color: #868686; } -.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) { +.subscriberContainer .subscribeLabel { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -169,6 +179,22 @@ line-height: 19px; color: #929292; } +.subscriberContainer .content { + flex-wrap: wrap; +} +.subscriberContainer .content .input { + width: 50%; + flex: 1; +} +.subscriberContainer .content .inputEmail { + margin-right: 0; +} +.subscriberContainer .content .submit { + width: 100%; +} +.subscriberContainer .content .submit :global(.vtex-button) { + width: 100%; +} .productDescriptionContainer { margin-left: 32px; @@ -187,6 +213,9 @@ line-height: 32px; color: #575757; } +.productDescriptionContainer .productDescriptionText .container { + padding: 0; +} .container--menu-row-label-newsletter { padding: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 785341e..f8efc76 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -7,15 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.container { - padding: 0 320px; -} -@media (max-width: 1440px) { - .container { - padding: 0 40px; - } -} - .listContainer { display: flex; justify-content: space-between; @@ -24,6 +15,11 @@ margin-bottom: 54px; } +.listItem--tab-list-button { + padding: 0; + margin: 0 0 -1px 0; + display: flex; +} .listItem--tab-list-button :global(.vtex-button) { font-family: "Open Sans", sans-serif; font-style: normal; @@ -33,19 +29,25 @@ color: #bfbfbf; background-color: white; border: none; - font-family: "Open Sans"; text-transform: capitalize; + border-radius: 0; + border-bottom: 1px solid #bfbfbf; +} +@media (max-width: 1440px) { + .listItem--tab-list-button :global(.vtex-button) { + font-size: 18px; + } } +.listItemActive { + margin: 0 0 -2px 0; +} .listItemActive :global(.vtex-button) { - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; color: #000000; - background-color: white; - border: none; - text-transform: capitalize; border-bottom: 3px solid #000000; +} +@media (max-width: 1440px) { + .listItemActive :global(.vtex-button) { + font-size: 18px; + } } \ 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 8cc518c..104ec37 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,11 +1,4 @@ .container { - max-width: 1920px; - margin: 0 auto; - - @media (max-width: 1440px) { - padding: 0 40px; - } - .link, .term { font-family: "Open Sans", sans-serif; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 86b9baf..41c9f45 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,15 +1,16 @@ -.flexRow--product-main-container { - @media (max-width: 1440px) { - padding: 0 40px; - } - +.flexRow--product-main-container, +.flexRow--product-description-container, +.flexRow--breadcrumb-container, +.flexRow--shelf-pdp, +.flexRow--menu-row-wrapper, +.flexRow--menu-row-newsletter, +.flexRow--footer-credits { :global(.vtex-store-components-3-x-container) { max-width: 1920px; - } -} -.flexRowContent { - @media (max-width: 1440px) { - padding: 0 72px; + padding: 0 40px; + + @media (max-width: 1440px) { + } } } @@ -24,23 +25,39 @@ } } } +.flexRowContent--button-card-add { + :global(.vtex-button) { + background-color: #000000; + border: none; + border-radius: 0; + padding: 12px; + } +} + +.flexRowContent--shelf-pdp { + display: flex; + flex-direction: column; + .stretchChildrenWidth { + width: 100% !important; + margin-bottom: 32px; + } +} //AREA DA NEWSLATTER STYLE - .flexRow--menu-row-newsletter { - margin-top: 64px !important; - display: flex !important; + margin-top: 64px; background: #000000; - border-bottom: 1px solid #ffffff; - :global(.vtex-store-components-3-x-container) { - width: 100% !important; - max-width: 775px !important; + + .flexRowContent--menu-row-newsletter { + width: 100%; + max-width: 775px; + margin: 0 auto; } } .flexRowContent--menu-row-newsletter { - display: flex !important; - flex-direction: column !important; + display: flex; + flex-direction: column; padding: 32px 0 16px; .stretchChildrenWidth { @@ -49,7 +66,6 @@ } //STYLE DO FOOTER PARTE DO MEIO COM PAYMENTS - .flexRow--menu-row-wrapper { background-color: #000000; padding-top: 32px; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..ded7ef7 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,17 @@ +//AREA DO PREÇO DO PRODUTO +.sellingPriceValue { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} +.installments { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} 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..9352c05 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,10 @@ +// AREA DA DESCRIÇAO DOS PRODUTOS DA SHELF + +.nameContainer { + display: flex; + justify-content: center; + padding: 16px 0 8px 0; +} +.priceContainer { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 506d8fe..035a5ee 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1,3 +1,14 @@ +//AREA DO TITLE DA SHELF +.wrapper--nuestro-shelf-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: auto; + color: #575757; +} + //AREA DA RICH TEXT DA NEWSLETEER .container--menu-row-newsletter-title { display: flex; diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss index ef1f1a5..a0c3501 100644 --- a/styles/sass/pages/product/vtex.shelf.scss +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -11,3 +11,6 @@ color: #575757; } } +.shelfContentContainer { + padding: 0 40px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7092027..ed1463e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -15,7 +15,7 @@ flex-direction: column-reverse; } .skuSelectorName { - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; font-size: 14px; @@ -85,20 +85,28 @@ transform: rotate(95deg); } } - +//AREA DO CEP COM OS INPUT E BUTTON .shippingContainer { position: relative; :global(.vtex-button) { position: absolute; - top: 25px; + top: 24px; left: 230px; - padding: 12px; + padding: 15px; width: max-content; + background-color: #000000; + border: none; :global(.vtex-button__label) { font-size: 0; padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + + line-height: 19px; + color: #929292; &::after { content: "OK"; @@ -167,6 +175,9 @@ .shippingTableLabel { display: flex; + .shippingTableRadioBtn { + display: none; + } :global(.vtex-address-form-4-x-input) { display: none !important; } @@ -177,7 +188,7 @@ } //AREA DO COMPONENTES QUANDO O PRODUTO ESTA INDISPONIVEL .subscriberContainer { - :global(.vtex-store-components-3-x-title) { + .title { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 700; @@ -185,7 +196,7 @@ line-height: 19px; color: #868686; } - :global(.vtex-store-components-3-x-subscribeLabel) { + .subscribeLabel { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -193,6 +204,22 @@ line-height: 19px; color: #929292; } + .content { + flex-wrap: wrap; + .input { + width: 50%; + flex: 1; + } + .inputEmail { + margin-right: 0; + } + .submit { + width: 100%; + :global(.vtex-button) { + width: 100%; + } + } + } } //AREA DO TAB LAYOUT CONTAINER @@ -214,6 +241,12 @@ line-height: 32px; color: #575757; } + + .productDescriptionText { + .container { + padding: 0; + } + } } // AREA DA NEWSLATTER INPUT - BUTTON .container--menu-row-label-newsletter { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 3fa2263..ba15378 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,10 +1,4 @@ -.container { - padding: 0 320px; - - @media (max-width: 1440px) { - padding: 0 40px; - } -} +//AREA DO PRODUTO E DESCRIÇAO E CONTAINER .listContainer { display: flex; justify-content: space-between; @@ -16,6 +10,9 @@ //AREA DOS BUTOES DA DESCRIÇOES DO PRODUTO .listItem--tab-list-button { + padding: 0; + margin: 0 0 -1px 0; + display: flex; :global(.vtex-button) { font-family: "Open Sans", sans-serif; font-style: normal; @@ -25,21 +22,23 @@ color: #bfbfbf; background-color: white; border: none; - font-family: "Open Sans"; text-transform: capitalize; + border-radius: 0; + border-bottom: 1px solid #bfbfbf; + + @media (max-width: 1440px) { + font-size: 18px; + } } } .listItemActive { + margin: 0 0 -2px 0; :global(.vtex-button) { - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; color: #000000; - background-color: white; - border: none; - text-transform: capitalize; border-bottom: 3px solid #000000; + + @media (max-width: 1440px) { + font-size: 18px; + } } } -- 2.34.1 From 6326a4e5b3506a3fa8d4e04b11b75dfd5338938a Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Fri, 10 Feb 2023 23:43:37 -0300 Subject: [PATCH 14/14] feat: fazendo ate onde deu, Obrigado M3 Academy --- store/blocks/footer/footer-1-desktop.jsonc | 13 +++++++++++-- store/blocks/pdp/product-main.jsonc | 6 ++++++ styles/css/vtex.flex-layout.css | 5 +++++ styles/sass/pages/product/vtex.flex-layout.scss | 5 +++++ 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/store/blocks/footer/footer-1-desktop.jsonc b/store/blocks/footer/footer-1-desktop.jsonc index 3ed3492..d7b1d66 100644 --- a/store/blocks/footer/footer-1-desktop.jsonc +++ b/store/blocks/footer/footer-1-desktop.jsonc @@ -35,12 +35,21 @@ }, "rich-text#footer-social": { "props": { - "text": "## social", + "text": "## Nos siga", + "blockClass": "menu-row-newsletter-title" + } + }, + "rich-text#footer-social-payments": { + "props": { + "text": "## Formas de pagamento", "blockClass": "menu-row-newsletter-title" } }, "flex-layout.col#footer-payment": { - "children": ["accepted-payment-methods"], + "children": [ + "rich-text#footer-social-payments", + "accepted-payment-methods" + ], "props": { "blockClass": "menu-row-wrapper", "paddingTop": 6, diff --git a/store/blocks/pdp/product-main.jsonc b/store/blocks/pdp/product-main.jsonc index e9c8900..887182d 100644 --- a/store/blocks/pdp/product-main.jsonc +++ b/store/blocks/pdp/product-main.jsonc @@ -39,6 +39,12 @@ "product-specification-badges" ] }, + // "html#imagens": { + // "props": { + // "testId": "product-images" + // }, + // "children": ["product-images"] + // }, "flex-layout.row#product-image": { "children": ["product-images"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 129d99c..1f1b01a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -71,4 +71,9 @@ background-color: #000000 !important; border-top: 1px solid #ffffff; padding: 31px 0 15px; +} + +.flexRowContent--menu-row-social-wrapper { + display: flex; + flex-direction: column; } \ 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 41c9f45..0fe44f2 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -78,3 +78,8 @@ border-top: 1px solid #ffffff; padding: 31px 0 15px; } + +.flexRowContent--menu-row-social-wrapper { + display: flex; + flex-direction: column; +} -- 2.34.1