From 1fd0405b4cd3f598267a9962c4151c2ffb0b65b4 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Wed, 25 Jan 2023 19:35:24 -0300 Subject: [PATCH 01/20] feat: adiciona breadcrumb estilizado --- manifest.json | 1 - react/components/Html/index.tsx | 1 + react/components/Html/styles.css | 3 + store/blocks/minicart.jsonc | 3 +- store/blocks/pdp/product.jsonc | 44 ++++-- store/blocks/product-summary/quickview.json | 8 + styles/css/agenciamagma.store-theme.css | 8 +- styles/css/vtex.breadcrumb.css | 41 +++++ styles/css/vtex.flex-layout.css | 111 ++------------ styles/css/vtex.numeric-stepper-container.css | 12 ++ styles/css/vtex.numeric-stepper.css | 12 ++ styles/css/vtex.product-identifier.css | 24 ++- styles/css/vtex.product-price.css | 106 +++++-------- styles/css/vtex.product-quantity.css | 12 ++ styles/css/vtex.store-components.css | 111 +++++++++++++- .../product/agenciamagma.store-theme.scss | 7 +- .../sass/pages/product/vtex.flex-layout.scss | 4 + .../product/vtex.product-identifier.scss | 19 +++ .../pages/product/vtex.product-price.scss | 45 ++++++ .../pages/product/vtex.store-components.scss | 143 +++++++++++++++++- styles/sass/pages/vtex.breadcrumb.scss | 38 +++++ styles/sass/utils/_vars.scss | 7 +- 22 files changed, 568 insertions(+), 192 deletions(-) create mode 100644 react/components/Html/styles.css create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/css/vtex.numeric-stepper-container.css create mode 100644 styles/css/vtex.numeric-stepper.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/vtex.breadcrumb.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/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..384d7d8 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import './styles.css'; const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..1713533 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,3 @@ +[class*=".html--breadcrumb"] { + background: red; +} diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..910f936 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,7 +2,8 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "blockClass": "button-buy-product" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..ca34288 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,8 @@ "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", - "product-questions-and-answers" + "product-questions-and-answers", + "newsletter" ] }, "html#breadcrumb": { @@ -91,7 +92,10 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "showNavigationArrows": false, + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { @@ -101,20 +105,35 @@ }, "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", + "flex-layout.row#quantity-buy-button", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + ] + }, + + "html#product-name": { + "props": { + "blockClass": "product-name" + }, + "children": [ + "product-identifier.product" + ] + }, + + "flex-layout.row#quantity-buy-button": { + "props": { + "blockClass": "quantity-buy-button" + }, + "children": [ + "product-quantity", + "flex-layout.row#buy-button" ] }, @@ -128,14 +147,17 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "sku-size" } }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "width": "73%", + "blockClass": "buy-button-row" }, "children": ["add-to-cart-button"] }, diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..299591f 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -139,5 +139,13 @@ "blockClass": "quickview", "showNavigationArrows": true } + }, + + "product-quantity": { + "props": { + "size": "large", + "width": "28%", + "showLabel": false + } } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..7f9bd41 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,13 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: none; } .html--pdp-breadcrumb { - background-color: green; + background-color: none; +} + +.homeLink { + display: none; } \ 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..d5f8a99 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,41 @@ +/* +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 */ +.homeIcon { + display: none; +} + +.arrow--1 .caretIcon { + display: none; +} + +.link--1 { + font-size: 0px; +} +.link--1::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link--2 { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..da613fe 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,13 @@ -.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 */ +.flexRowContent--buy-button-row :global(.vtex-button) { + background: #000000; + border: none; +} \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper-container.css b/styles/css/vtex.numeric-stepper-container.css new file mode 100644 index 0000000..5f0389d --- /dev/null +++ b/styles/css/vtex.numeric-stepper-container.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 */ +.numeric-stepper__input { + background: black; +} \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper.css b/styles/css/vtex.numeric-stepper.css new file mode 100644 index 0000000..5f0389d --- /dev/null +++ b/styles/css/vtex.numeric-stepper.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 */ +.numeric-stepper__input { + background: black; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..56d8b8b 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,23 @@ -.product-identifier--productReference { - margin-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 */ +.product-identifier__label { + display: none; } +.product-identifier__separator { + display: none; +} +.product-identifier__value { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..14a1626 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,45 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - +/* +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 */ .sellingPriceValue { - font-size: 2.25rem; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; + font-size: 0; } - -.savings { - font-weight: 500; - color: #79B03A; +.installments .installmentsNumber--36 { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; +.installments .installmentsNumber--36::after { + content: " x de "; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } - -.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; +.installments .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } +.installments .installmentValue::after { + content: " sem juros"; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ 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..5f0389d --- /dev/null +++ b/styles/css/vtex.product-quantity.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 */ +.numeric-stepper__input { + background: black; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..54fb376 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,5 +8,114 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; + background: #000000; + color: #fff; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background: #fff; +} +:global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) { + font-size: 16px; + line-height: 22px; + color: #000000; +} + +:global(.vtex-numeric-stepper__plus-button) { + background: #fff; +} +:global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 22px; + color: #000000; +} + +.productNameContainer { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor { + order: 2; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTRAS CORES"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-size: 14px; + line-height: 19px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + border-radius: 50%; + width: 40px; + height: 40px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + top: -2px; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + border-color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTROS TAMANHOS"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorImageValue { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross { + left: 3px; + top: 2px; + right: 5px; + bottom: 3px; + transform: rotateY(180deg); +} + +.skuSelectorItem--sku-size-selected .skuSelectorItemTextValue-sku-size { + color: #000000; +} + +.skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); } \ 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..53e0d02 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,11 @@ .html { - background-color: red; + background-color: none; } .html--pdp-breadcrumb { - background-color: green; + background-color: none; } +.homeLink { + display: none; +} 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..c7ac053 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,4 @@ +.flexRowContent--buy-button-row :global(.vtex-button) { + background: $black; + border: none; +} 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..91bc644 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,19 @@ +.product-identifier { + + &__label { + display: none; + } + + &__separator { + display: none; + } + + &__value { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + } +} 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..cd9b429 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,45 @@ +.sellingPriceValue { + font-weight: 700; + font-size: 25px; + line-height: 38px; + + color: $black; +} + +.installments { + font-size: 0; + + .installmentsNumber--36 { + font-weight: 700; + font-size: 16px; + line-height: 22px; + + color: $gray; + + &::after { + content: " x de "; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; + } + } + + .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + + color: $gray; + + &::after { + content: " sem juros"; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..71d4e1d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,140 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: $black; + color: $white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background: $white; + + :global(.vtex-numeric-stepper__minus-button__text) { + font-size: 16px; + line-height: 22px; + + color: $black; + } +} + +:global(.vtex-numeric-stepper__plus-button) { + background: $white; + + :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 22px; + + color: $black; + } +} + +.productNameContainer { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: $gray-100; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; + + .skuSelectorSubcontainer--cor { + order: 2; + + .frameAround, + .skuSelectorImageValue, + .skuSelectorInternalBox { + border-radius: 50%; + } + + .frameAround { + border-color: $black; + } + + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTRAS CORES"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + + color: $gray; + } + } + + .skuSelectorSelectorImageValue { + display: none; + } + } + } + + .skuSelectorSubcontainer--tamanho { + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + + font-size: 14px; + line-height: 19px; + } + + .frameAround, + .skuSelectorInternalBox { + border-radius: 50%; + width: 40px; + height: 40px; + } + + .frameAround { + top: -2px; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + border-color: $black; + } + + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTROS TAMANHOS"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + + color: $gray; + } + } + + .skuSelectorImageValue { + display: none; + } + } + + .diagonalCross { + left: 3px; + top: 2px; + right: 5px; + bottom: 3px; + transform: rotateY(180deg); + } + } +} + +.skuSelectorItem--sku-size-selected { + .skuSelectorItemTextValue-sku-size { + color: $black; + } +} + +.skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); +} diff --git a/styles/sass/pages/vtex.breadcrumb.scss b/styles/sass/pages/vtex.breadcrumb.scss new file mode 100644 index 0000000..6fa78c9 --- /dev/null +++ b/styles/sass/pages/vtex.breadcrumb.scss @@ -0,0 +1,38 @@ +.homeIcon { + display: none; +} + +.arrow--1 { + .caretIcon { + display: none; + } +} + +.link--1 { + font-size: 0px; + + &::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; + } +} + +.link--2 { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; +} + +.term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..b430298 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,6 +1,11 @@ $color-black: #292929; +$black: #000000; + +$white: #fff; + +$gray: #929292; +$gray-100: #575757; -$color-white: #fff; $color-gray: #6c6c6c; $color-gray2: #7d7d7d; From 50ca7ed273d4557d74f6b004108379dddb4424be Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Wed, 25 Jan 2023 21:53:27 -0300 Subject: [PATCH 02/20] feat: adicona cep --- store/blocks/pdp/product.jsonc | 14 ++- store/blocks/product-summary/quickview.json | 8 -- styles/css/agenciamagma.store-theme.css | 4 - styles/css/vtex.add-to-cart-button.css | 20 ++++ styles/css/vtex.flex-layout.css | 10 ++ styles/css/vtex.store-components.css | 74 +++++++++++++++ .../product/agenciamagma.store-theme.scss | 4 - .../product/vtex.add-to-cart-button.scss | 12 +++ .../pages/{ => product}/vtex.breadcrumb.scss | 0 .../sass/pages/product/vtex.flex-layout.scss | 10 ++ .../pages/product/vtex.store-components.scss | 94 +++++++++++++++++++ 11 files changed, 231 insertions(+), 19 deletions(-) create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss rename styles/sass/pages/{ => product}/vtex.breadcrumb.scss (100%) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ca34288..0e3cb58 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -79,7 +79,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + // "width": "60%", "rowGap": 0 } }, @@ -111,7 +111,7 @@ "product-installments", "product-separator", "sku-selector", - "flex-layout.row#quantity-buy-button", + "flex-layout.row#buy-button", "product-gifts", "availability-subscriber", "shipping-simulator" @@ -159,7 +159,7 @@ "width": "73%", "blockClass": "buy-button-row" }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] }, "flex-layout.row#product-availability": { @@ -203,5 +203,13 @@ "Pinterest": true } } + }, + + "product-quantity": { + "props": { + "size": "large", + "width": "28%", + "showLabel": false + } } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 299591f..723d4a0 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -139,13 +139,5 @@ "blockClass": "quickview", "showNavigationArrows": true } - }, - - "product-quantity": { - "props": { - "size": "large", - "width": "28%", - "showLabel": false - } } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 7f9bd41..ee7a3be 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -13,8 +13,4 @@ .html--pdp-breadcrumb { background-color: none; -} - -.homeLink { - display: none; } \ No newline at end of file diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..f95575a --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,20 @@ +@charset "UTF-8"; +/* +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 */ +.buttonText { + font-size: 0; +} +.buttonText::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index da613fe..b31dc4c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -10,4 +10,14 @@ .flexRowContent--buy-button-row :global(.vtex-button) { background: #000000; border: none; + border-radius: 0; + width: 100%; +} + +.strechChildrenWidth { + width: 640px; +} + +.flexRowContent--buy-button-row { + height: 49px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 54fb376..11109a2 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -118,4 +118,78 @@ .skuSelectorItemTextValue { color: rgba(185, 185, 185, 0.6); +} + +.productImageTag { + max-width: 664px; +} + +.address-form__field .input__label { + font-size: 40px; +} + +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 32px; + padding: 0; + margin-top: 25px; + text-decoration: underline; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + color: #000000; +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-button) { + position: relative; + right: 148px; + height: 49px; + width: 49px; + margin-top: 27px; + font-size: 0; + border: 0; + border-radius: 0; + background: #000000; + cursor: pointer; +} +.shippingContainer :global(.vtex-button)::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; +} +.shippingContainer :global(.vtex-button__label) { + height: fit-content; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; } \ 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 53e0d02..7eb71d6 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -5,7 +5,3 @@ .html--pdp-breadcrumb { background-color: none; } - -.homeLink { - display: none; -} diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..e5924ac --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,12 @@ +.buttonText { + font-size: 0; + + &::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $white; + } +} diff --git a/styles/sass/pages/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss similarity index 100% rename from styles/sass/pages/vtex.breadcrumb.scss rename to styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index c7ac053..656e0bd 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,4 +1,14 @@ .flexRowContent--buy-button-row :global(.vtex-button) { background: $black; border: none; + border-radius: 0; + width: 100%; +} + +.strechChildrenWidth { + width: 640px; +} + +.flexRowContent--buy-button-row { + height: 49px; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 71d4e1d..d40766b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -138,3 +138,97 @@ .skuSelectorItemTextValue { color: rgba(185, 185, 185, 0.6); } + +.productImageTag { + max-width: 664px; +} + +.address-form__field { + .input__label { + font-size: 40px; + } +} + +// CEP +.shippingContainer { + display: flex; + + :global(.vtex-address-form__postalCode) { + display: flex; + } + + :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 32px; + padding: 0; + margin-top: 25px; + text-decoration: underline; + + font-weight: 400; + font-size: 12px; + line-height: 16px; + + display: flex; + align-items: center; + + :last-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + + color: $black; + } + } + + :global(.vtex__icon-external-link) { + display: none; + } + + :global(.vtex-button) { + position: relative; + right: 148px; + height: 49px; + width: 49px; + margin-top: 27px; + + font-size: 0; + border: 0; + border-radius: 0; + background: $black; + cursor: pointer; + + &::after { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + color: $white; + } + } + + :global(.vtex-button__label) { + height: fit-content; + } + + :global(.vtex-input__label) { + font-size: 0px; + + &::after { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; + } + } +} + From 08819e3af8993824ce31286c3a11669c91e08fdb Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Wed, 25 Jan 2023 23:12:22 -0300 Subject: [PATCH 03/20] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o?= =?UTF-8?q?=20cep?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 54 +++++++++++++- .../pages/product/vtex.store-components.scss | 71 ++++++++++++++++++- styles/sass/utils/_vars.scss | 1 + 3 files changed, 124 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 11109a2..fabfdbb 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -95,7 +95,7 @@ font-size: 0; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { - content: "OUTROS TAMANHOS"; + content: "OUTROS TAMANHOS:"; font-size: 14px; line-height: 19px; font-weight: 400; @@ -192,4 +192,56 @@ font-size: 14px; line-height: 19px; color: #929292; +} + +.shippingTable { + display: flex; + flex-direction: column; +} +.shippingTable .shippingTableHead { + display: block; +} +.shippingTable .shippingTableRow { + display: flex; + flex-direction: row; +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #202020; +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { + display: flex; + order: 3; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: #202020; +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { + display: flex; + order: 2; + font-size: 0; +} +.shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +.shippingTableBody .shippingtableRow { + display: flex; + flex-direction: row; +} +.shippingTableBody .shippingTableCellDeliveryEstimate { + display: flex; + order: 3; +} +.shippingTableBody .shippingTableRadioBtn { + display: none; } \ 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 d40766b..1b33eda 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -105,7 +105,7 @@ font-size: 0; &::after { - content: "OUTROS TAMANHOS"; + content: "OUTROS TAMANHOS:"; font-size: 14px; line-height: 19px; font-weight: 400; @@ -232,3 +232,72 @@ } } +// ENTREGA + +.shippingTable { + display: flex; + flex-direction: column; + + .shippingTableHead { + display: block; + } + + .shippingTableRow { + display: flex; + flex-direction: row; + + .shippingTableHeadDeliveryName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + + color: $black-100; + } + + .shippingTableHeadDeliveryEstimate { + display: flex; + order: 3; + + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + + color: $black-100; + } + + .shippingTableHeadDeliveryPrice { + display: flex; + order: 2; + + font-size: 0; + + &::after { + content: "FRETE"; + + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $black-100; + } + } + } +} + +.shippingTableBody { + .shippingtableRow { + display: flex; + flex-direction: row; + } + + .shippingTableCellDeliveryEstimate { + display: flex; + order: 3; + } + + .shippingTableRadioBtn { + display: none; + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index b430298..18a84ed 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,5 @@ $color-black: #292929; +$black-100: #202020; $black: #000000; $white: #fff; From 57ae2ef075d8e1b5943774de179750b8616b5e15 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Fri, 27 Jan 2023 11:05:43 -0300 Subject: [PATCH 04/20] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o?= =?UTF-8?q?=20das=20imagens=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/index.tsx | 2 +- react/components/Html/styles.css | 13 ++- store/blocks/pdp/product.jsonc | 18 +++- styles/configs/style.json | 24 ++--- styles/css/agenciamagma.store-theme.css | 1 + styles/css/global.css | 9 ++ styles/css/vtex.add-to-cart-button.css | 3 + styles/css/vtex.breadcrumb.css | 13 ++- styles/css/vtex.flex-layout.css | 1 + styles/css/vtex.product-identifier.css | 1 + styles/css/vtex.product-price.css | 5 +- styles/css/vtex.rich-text.css | 1 + styles/css/vtex.store-components.css | 84 ++++++++++++++- .../sass/pages/product/vtex.breadcrumb.scss | 10 +- .../pages/product/vtex.product-price.scss | 2 +- .../pages/product/vtex.store-components.scss | 102 +++++++++++++++++- styles/sass/utils/_vars.scss | 5 + 17 files changed, 270 insertions(+), 24 deletions(-) create mode 100644 styles/css/global.css diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index 384d7d8..5c84865 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; -import './styles.css'; +import "./styles.css"; const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 1713533..e28c0d3 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,3 +1,12 @@ -[class*=".html--breadcrumb"] { - background: red; +[class*="html--buy-button"] { + display: flex; + gap: 10px; + margin-bottom: 5px; +} + +[class*="html--buy-button"] :global(.vtex-button) { + height: 49px; + background: black; + border: none; + border-radius: 0; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0e3cb58..64cac5c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -67,6 +67,7 @@ ] }, + "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -111,13 +112,21 @@ "product-installments", "product-separator", "sku-selector", - "flex-layout.row#buy-button", + "html#buy-button", + // "flex-layout.row#buy-button", "product-gifts", "availability-subscriber", "shipping-simulator" ] }, + "html#buy-button": { + "props": { + "blockClass": "buy-button" + }, + "children": ["product-quantity", "add-to-cart-button"] + }, + "html#product-name": { "props": { "blockClass": "product-name" @@ -211,5 +220,12 @@ "width": "28%", "showLabel": false } + }, + + "product-installments": { + "props": { + "installmentsCriteria": "max-quality-without-interest", + "blockClass": "fees" + } } } diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..ee3264d 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -253,84 +253,84 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index ee7a3be..f41484c 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Cores */ /* Grid breakpoints */ .html { background-color: none; diff --git a/styles/css/global.css b/styles/css/global.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/global.css @@ -0,0 +1,9 @@ +/* +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 */ \ No newline at end of file diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css index f95575a..2f88b42 100644 --- a/styles/css/vtex.add-to-cart-button.css +++ b/styles/css/vtex.add-to-cart-button.css @@ -7,6 +7,9 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ /* Grid breakpoints */ .buttonText { font-size: 0; diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index d5f8a99..93dea49 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -6,17 +6,28 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Cores */ /* Grid breakpoints */ -.homeIcon { +.container { + padding-right: 40px; + padding-left: 40px; +} + +.homeIcon, +.homeLink { display: none; } +.arrow--1 { + padding-left: 0; +} .arrow--1 .caretIcon { display: none; } .link--1 { font-size: 0px; + padding-left: 0; } .link--1::after { content: "Home"; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index b31dc4c..a98c7ee 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Cores */ /* Grid breakpoints */ .flexRowContent--buy-button-row :global(.vtex-button) { background: #000000; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 56d8b8b..89eb756 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Cores */ /* Grid breakpoints */ .product-identifier__label { display: none; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 14a1626..a59cc19 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -6,6 +6,9 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ /* Grid breakpoints */ .sellingPriceValue { font-weight: 700; @@ -15,7 +18,7 @@ } .installments { - font-size: 0; + font-size: 0px; } .installments .installmentsNumber--36 { font-weight: 700; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..6ccf30f 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Cores */ /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index fabfdbb..7fab1eb 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,6 +6,9 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ /* Grid breakpoints */ .newsletter { background: #000000; @@ -15,10 +18,12 @@ :global(.vtex-numeric-stepper__input) { border-right: none; border-left: none; + border-color: #cccccc; } :global(.vtex-numeric-stepper__minus-button) { background: #fff; + border-color: #cccccc; } :global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) { font-size: 16px; @@ -28,6 +33,7 @@ :global(.vtex-numeric-stepper__plus-button) { background: #fff; + border-color: #cccccc; } :global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) { font-size: 16px; @@ -35,6 +41,10 @@ color: #000000; } +.container { + padding: 0 40px; +} + .productNameContainer { font-weight: 300; font-size: 20px; @@ -43,6 +53,25 @@ color: #575757; } +.productImage .productImageTag { + max-height: unset !important; +} + +.carouselGaleryThumbs { + margin-top: 16px; +} + +.productImagesThumb { + width: unset !important; + margin-bottom: 0 !important; + margin-right: 16px; +} +.productImagesThumb .thumbImg { + max-width: 90px; + width: 100%; + height: 90px; +} + .skuSelectorContainer { display: flex; flex-direction: column; @@ -105,12 +134,45 @@ display: none; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross { - left: 3px; - top: 2px; + left: 8px; + top: 5px; right: 5px; bottom: 3px; transform: rotateY(180deg); } +.skuSelectorContainer .skuSelectorItem--selected .skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000000; +} +.skuSelectorContainer .skuSelectorItem--selected .diagonalCross { + color: #000000; +} +.skuSelectorContainer .skuSelectorItemImage--sku-size .diagonalCross { + left: 4px; + top: 5px; + right: 3px; + bottom: 3px; + transform: rotateY(180deg); +} + +.subscriberContainer { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.submit :global(.vtex-button) { + background: #000000; + height: 40px; + margin-top: -1px; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; +} .skuSelectorItem--sku-size-selected .skuSelectorItemTextValue-sku-size { color: #000000; @@ -197,6 +259,8 @@ .shippingTable { display: flex; flex-direction: column; + border: none; + margin-top: 0; } .shippingTable .shippingTableHead { display: block; @@ -233,10 +297,26 @@ line-height: 19px; color: #202020; } +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableCellDeliveryName { + width: 23.9263%; + padding: 0 0 15px 0; +} +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableCellDeliveryEstimate { + width: 41.7177%; + padding: 0 0 15px 0; +} +.shippingTable .shippingTableCellDeliveryPrice, +.shippingTable .shippingTableHeadDeliveryPrice { + width: 14.7239%; + padding: 0 0 15px 0; +} .shippingTableBody .shippingtableRow { display: flex; flex-direction: row; + text-align: left; } .shippingTableBody .shippingTableCellDeliveryEstimate { display: flex; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 6fa78c9..452f605 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,8 +1,15 @@ -.homeIcon { +.container { + padding-right: 40px; + padding-left: 40px; +} + +.homeIcon, +.homeLink { display: none; } .arrow--1 { + padding-left: 0; .caretIcon { display: none; } @@ -10,6 +17,7 @@ .link--1 { font-size: 0px; + padding-left: 0; &::after { content: "Home"; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index cd9b429..a4c9e8f 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -7,7 +7,7 @@ } .installments { - font-size: 0; + font-size: 0px; .installmentsNumber--36 { font-weight: 700; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1b33eda..894c491 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -6,10 +6,12 @@ :global(.vtex-numeric-stepper__input) { border-right: none; border-left: none; + border-color: $gray-200; } :global(.vtex-numeric-stepper__minus-button) { background: $white; + border-color: $gray-200; :global(.vtex-numeric-stepper__minus-button__text) { font-size: 16px; @@ -21,6 +23,7 @@ :global(.vtex-numeric-stepper__plus-button) { background: $white; + border-color: $gray-200; :global(.vtex-numeric-stepper__plus-button__text) { font-size: 16px; @@ -30,14 +33,43 @@ } } +// TITULO E IMAGENS +.container { + padding: 0 40px; +} + .productNameContainer { font-weight: 300; font-size: 20px; line-height: 34px; text-align: right; + color: $gray-100; } +.productImage { + .productImageTag { + max-height: unset !important; + } +} + +.carouselGaleryThumbs { +margin-top: 16px; +} + +.productImagesThumb { + width: unset !important; + margin-bottom: 0 !important; + margin-right: 16px; + + .thumbImg { + max-width: 90px; + width: 100%; + height: 90px; + } +} + +// sku Tamanho e Cor .skuSelectorContainer { display: flex; flex-direction: column; @@ -120,13 +152,58 @@ } .diagonalCross { - left: 3px; - top: 2px; + left: 8px; + top: 5px; right: 5px; bottom: 3px; transform: rotateY(180deg); } } + + .skuSelectorItem--selected { + .skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $black; + } + + .diagonalCross { + color: $black; + } + } + + .skuSelectorItemImage--sku-size { + .diagonalCross { + left: 4px; + top: 5px; + right: 3px; + bottom: 3px; + transform: rotateY(180deg); + } + } +} + +.subscriberContainer { + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; +} + +.submit { + :global(.vtex-button) { + background: $black; + height: 40px; + margin-top: -1px; + + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: $white; + } } .skuSelectorItem--sku-size-selected { @@ -237,6 +314,8 @@ .shippingTable { display: flex; flex-direction: column; + border: none; + margin-top: 0; .shippingTableHead { display: block; @@ -284,12 +363,31 @@ } } } + + .shippingTableHeadDeliveryName, +.shippingTableCellDeliveryName { + width: 23.9263%; + padding: 0 0 15px 0; +} + +.shippingTableHeadDeliveryEstimate, +.shippingTableCellDeliveryEstimate { + width: 41.7177%; + padding: 0 0 15px 0; +} + +.shippingTableCellDeliveryPrice, +.shippingTableHeadDeliveryPrice { + width: 14.7239%; + padding: 0 0 15px 0; +} } .shippingTableBody { .shippingtableRow { display: flex; flex-direction: row; + text-align: left; } .shippingTableCellDeliveryEstimate { diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 18a84ed..1bf6970 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,7 @@ +/* Fontes */ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); + +/* Cores */ $color-black: #292929; $black-100: #202020; $black: #000000; @@ -6,6 +10,7 @@ $white: #fff; $gray: #929292; $gray-100: #575757; +$gray-200: #cccccc; $color-gray: #6c6c6c; From b52ac3883653a82e4dace7ab4830a81c294c2923 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Fri, 27 Jan 2023 20:21:52 -0300 Subject: [PATCH 05/20] =?UTF-8?q?feat:=20adiciona=20layout=20de=20descri?= =?UTF-8?q?=C3=A7=C3=A3o=20e=20imagem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 157 ++++++++++++++++++++++-- styles/css/agenciamagma.store-theme.css | 2 + styles/css/vtex.breadcrumb.css | 2 + styles/css/vtex.flex-layout.css | 2 + styles/css/vtex.product-identifier.css | 2 + styles/css/vtex.rich-text.css | 2 + 6 files changed, 154 insertions(+), 13 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 64cac5c..8c283df 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,10 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + "tab-layout#product", + // "flex-layout.row#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers", "newsletter" @@ -27,12 +28,7 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -136,16 +132,151 @@ ] }, - "flex-layout.row#quantity-buy-button": { + // DESCRIÇÃO DE PRODUTOS + "tab-layout#product": { "props": { - "blockClass": "quantity-buy-button" + "blockClass": "structure", + "defaultActiveTabId": "product1" + }, + "children": ["tab-list#product", "tab-content#product"] + }, + + "tab-list#product": { + "props": { + "blockClass": "tab" }, "children": [ - "product-quantity", - "flex-layout.row#buy-button" + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" ] }, + "tab-list.item#product1": { + "props": { + "blockClass": "tab-render", + "tabId": "product1", + "label": "Drescrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#product2": { + "props": { + "blockClass": "tab-render", + "tabId": "product2", + "label": "Descrição" + } + }, + "tab-list.item#product3": { + "props": { + "blockClass": "tab-render", + "tabId": "product3", + "label": "Descrição" + } + }, + "tab-list.item#product4": { + "props": { + "blockClass": "tab-render", + "tabId": "product4", + "label": "Descrição" + } + }, + "tab-list.item#product5": { + "props": { + "blockClass": "tab-render", + "tabId": "product5", + "label": "Descrição" + } + }, + + "tab-content#product": { + "props": { + "blockClass": "content" + }, + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] + }, + + "tab-content.item#product1": { + "props": { + "tabId": "product1", + "blockClass": "content-render" + }, + "children": ["flex-layout.row#description"] + }, + + "tab-content.item#product2": { + "props": { + "tabId": "product2", + "blockClass": "content-render" + }, + "children": ["flex-layout.row#description"] + }, + + "tab-content.item#product3": { + "props": { + "tabId": "product3", + "blockClass": "content-render" + }, + "children": ["flex-layout.row#description"] + }, + + "tab-content.item#product4": { + "props": { + "tabId": "product4", + "blockClass": "content-render" + }, + "children": ["flex-layout.row#description"] + }, + + "tab-content.item#product5": { + "props": { + "tabId": "product5", + "blockClass": "content-render" + }, + "children": ["flex-layout.row#description"] + }, + + "flex-layout.col#imageDescriptionContainer": { + "props": { + "blockClass": "image-description", + "width": "50%" + }, + "children": ["product-images#imageDescription"] + }, + + "product-images#imageDescription": { + "props": { + "displayMode": "first-image", + "blockClass": "img-description" + } + }, + + "flex-layout.row#description": { + "props": { + "marginBottom": 7 + }, + "children": ["flex-layout.col#imageDescriptionContainer", "product-description"] + }, + + // "flex-layout.row#quantity-buy-button": { + // "props": { + // "blockClass": "quantity-buy-button" + // }, + // "children": [ + // "product-quantity", + // "flex-layout.row#buy-button" + // ] + // }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index f41484c..9dd0fcc 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,6 +6,8 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Cores */ /* Grid breakpoints */ .html { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 93dea49..8b19a74 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -6,6 +6,8 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Cores */ /* Grid breakpoints */ .container { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a98c7ee..24d5340 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -6,6 +6,8 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Cores */ /* Grid breakpoints */ .flexRowContent--buy-button-row :global(.vtex-button) { diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 89eb756..83412a1 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -6,6 +6,8 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Cores */ /* Grid breakpoints */ .product-identifier__label { diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 6ccf30f..bbd296e 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,5 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Cores */ /* Grid breakpoints */ \ No newline at end of file From e42f8649ab3adde88578a4989136ee5342481eb7 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Mon, 30 Jan 2023 12:11:04 -0300 Subject: [PATCH 06/20] feat: adiciona carrossel --- store/blocks/pdp/product.jsonc | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8c283df..46c3964 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,11 +7,13 @@ // "flex-layout.row#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + // "shelf.relatedProducts", + "list-context.product-list#carousel-list", "product-questions-and-answers", "newsletter" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -158,7 +160,7 @@ "props": { "blockClass": "tab-render", "tabId": "product1", - "label": "Drescrição", + "label": "Descrição", "defaultActiveTab": true } }, @@ -277,6 +279,34 @@ // ] // }, + // CARROSSEL DE PRODUTOS + "list-context.product-list#carousel-list": { + "blocks": ["product-summary.shelf#carousel-shelf"], + "children": ["slider-layout#carousel"] + }, + + "product-summary.shelf#carousel-shelf": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price" + ] + }, + + "slider-layout#carousel": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 1, + "phone": 1 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + }, + + "flex-layout.row#product-name": { "props": { "marginBottom": 3 From cd29ec6d06b3591e77f3781f8c59b8f1c7d8b573 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Mon, 30 Jan 2023 16:15:00 -0300 Subject: [PATCH 07/20] feat: adiciona bloco custumizado pix --- assets/pix-logo-vitor-soares.png | Bin 0 -> 1405 bytes react/Pix.tsx | 2 + react/components/Pix-bloco/Pix.tsx | 30 ++++++ react/components/Pix-bloco/style.module.css | 3 + react/typings/css.d.ts | 4 + react/typings/global.d.ts | 7 ++ react/typings/graphql.d.ts | 6 ++ react/typings/storefront.d.ts | 15 +++ react/typings/vtex.css-handles.ts | 1 + react/typings/vtex.order-manager.d.ts | 103 ++++++++++++++++++++ react/typings/vtex.render-runtime.d.ts | 38 ++++++++ react/typings/vtex.styleguide.d.ts | 9 ++ store/blocks/pdp/product.jsonc | 1 + store/interfaces.json | 4 + 14 files changed, 223 insertions(+) create mode 100644 assets/pix-logo-vitor-soares.png create mode 100644 react/Pix.tsx create mode 100644 react/components/Pix-bloco/Pix.tsx create mode 100644 react/components/Pix-bloco/style.module.css create mode 100644 react/typings/css.d.ts create mode 100644 react/typings/global.d.ts create mode 100644 react/typings/graphql.d.ts create mode 100644 react/typings/storefront.d.ts create mode 100644 react/typings/vtex.css-handles.ts create mode 100644 react/typings/vtex.order-manager.d.ts create mode 100644 react/typings/vtex.render-runtime.d.ts create mode 100644 react/typings/vtex.styleguide.d.ts diff --git a/assets/pix-logo-vitor-soares.png b/assets/pix-logo-vitor-soares.png new file mode 100644 index 0000000000000000000000000000000000000000..df6f8510d35c2f02e59224d0b182c91b1eac6ba1 GIT binary patch literal 1405 zcmV-@1%mpCP)X1^@s6g&p|Z00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPxv4WkRbOTEySXfXIOZr!B)iT>N%>1UOXQmb0A}yWNk{^w&@oV+BufKf{ za}-W%`1q$}sol?Ggc9{v17 zksRm9%dB`XM@Mw$por z{cIWt18Y*pd*$*H%pmcUfIUKB$kMs^ZFm20i;#{A`TR(r9e|Koee}zZXZ%<+bjF`P z*Mut|1CA0wK`DJEwo*sx#(RdHDVPNgc}P=v<|TDKgJC%Cc_oA)5R3}yQ4mC35E08E z$+%MdP` zbL7^>oZKWBfOupT)S-Q^G07G?M6X~{V7vfBfn6B~VPMWMFrY2C0g~X1mXZdcesP&Z z33*g&u`MzT(zMC@?vqIn22!vJbC63qNouyZ5~>RUsF}~_s^KzOaL>2L*-MO=>W?f@ zlK`62*t5@Esq-WMY3*vD)XYceix9#xfzd(xTFxO+b&zNH7~&*xfp-XH(MAT(A@TBv zZ!<=64j_c)EZeOp3PPx!XFxRyhGVtfQih(uxHxesI9f0oi`rnuVB{TyE$sUb-#jbA z6(vXTKmGP*n@DZupBJaCC*axvtTBW}6ogO$gHKxw<828Su$o`*om?Hh#kDxfXE18# zh}t2#!4n}8hJvFHUp-rc7)j7_Tt70P@;#)btUBG?$kih&EA)KdZ4I~6F}6hy?w0aX zT)g@)O1fi~*gN`nmA)88N^{b~D%%?v(GCa42D^DJvNa0@ZL!X0_KMWu&Nqx!D*|?0 z2gD^e^0^}1Ksn)y*E=RZlq`_%L$dASsbPbM)|xqch$o@P^^TkOaqrckj}1^(6QX z+ez8*@3Dy)i5VD^n30?3ED*vN5e~|AJG@1jWZ*-?xr1p9hD-J0`MG=SB>Xg3Oa|v} zUF;A|E8xCtol5zG zM8b0vd1BXQ2%)Xau0(wvK%IbXJ2E=!N&SEyYp98&TR^ti9XK&$-%kqwc>+J-1wcmv zK_-AVgHzDx#U^k2yGcc|$K8fO)p>Wwde@Y^y>`is@}}G>{}25O_OJ)WrGO_Z00000 LNkvXXu0mjf#*&S? literal 0 HcmV?d00001 diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..b617656 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,2 @@ +import Pix from "./components/Pix-bloco/Pix"; +export default Pix; diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx new file mode 100644 index 0000000..3648654 --- /dev/null +++ b/react/components/Pix-bloco/Pix.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +import { useProduct } from "vtex.product-context"; +import styles from "./style.module.css"; + +const Pix = () => { + const productContextValue = useProduct(); + + const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + + const discountValue = (Number(productPrice) * 10) / 100; + + const totalValue = Number(productPrice) - Number(discountValue); + + return ( +
+
+
+ desconto +
+
+

R${totalValue.toFixed(2)}

+

10 % de desconto

+
+
+
+ ); +}; + +export default Pix; diff --git a/react/components/Pix-bloco/style.module.css b/react/components/Pix-bloco/style.module.css new file mode 100644 index 0000000..1bc0701 --- /dev/null +++ b/react/components/Pix-bloco/style.module.css @@ -0,0 +1,3 @@ +.wrapper { + /* background-color: red; */ +} diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..c5862b6 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts new file mode 100644 index 0000000..17b4165 --- /dev/null +++ b/react/typings/global.d.ts @@ -0,0 +1,7 @@ +export interface TimeSplit { + hours: string + minutes: string + seconds: string +} + +type GenericObject = Record diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts new file mode 100644 index 0000000..84017d3 --- /dev/null +++ b/react/typings/graphql.d.ts @@ -0,0 +1,6 @@ +declare module "*.graphql" { + import { DocumentNode } from "graphql"; + + const value: DocumentNode; + export default value; +} diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts new file mode 100644 index 0000000..4689dc6 --- /dev/null +++ b/react/typings/storefront.d.ts @@ -0,0 +1,15 @@ +import { FunctionComponent } from "react"; + +declare global { + interface StorefrontFunctionComponent

+ extends FunctionComponent

{ + getSchema?(props: P): GenericObject + schema?: GenericObject + } + + interface StorefrontComponent

+ extends Component { + getSchema?(props: P): GenericObject + schema: GenericObject + } +} diff --git a/react/typings/vtex.css-handles.ts b/react/typings/vtex.css-handles.ts new file mode 100644 index 0000000..4f191a0 --- /dev/null +++ b/react/typings/vtex.css-handles.ts @@ -0,0 +1 @@ +declare module "vtex.css-handles" diff --git a/react/typings/vtex.order-manager.d.ts b/react/typings/vtex.order-manager.d.ts new file mode 100644 index 0000000..b563ce5 --- /dev/null +++ b/react/typings/vtex.order-manager.d.ts @@ -0,0 +1,103 @@ +/* eslint-disable no-inner-declarations */ +declare module "vtex.order-manager/OrderQueue" { + export * from "vtex.order-manager/react/OrderQueue"; + export { default } from "vtex.order-manager/react/OrderQueue"; + + export const QueueStatus = { + PENDING: "Pending", + FULFILLED: "Fulfilled", + } as const; +} + +declare module "vtex.order-manager/OrderForm" { + import { createContext, useContext } from "react"; + import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants"; + import type { Context, OrderForm } from "@vtex/order-manager/src/typings"; + + type DefaultOrderForm = typeof DEFAULT_ORDER_FORM; + type DefaultOrderFormOmited = Omit; + type DefaultOrderFormUpdated = DefaultOrderFormOmited & { + items: OrderFormItem[] | null; + }; + + export const OrderFormContext = createContext>({ + orderForm: DefaultOrderFormUpdated, + setOrderForm: noop, + error: undefined, + loading: false, + }); + + function useOrderForm() { + const context = useContext(OrderFormContext); + + if (context === undefined) { + throw new Error( + "useOrderForm must be used within a OrderFormProvider" + ); + } + return context as Context; + } + + export type OrderFormItem = { + additionalInfo: { + brandName: string; + __typename: string; + }; + attachments: Array; + attachmentOfferings: Array; + bundleItems: Array; + parentAssemblyBinding: any; + parentItemIndex: any; + sellingPriceWithAssemblies: any; + options: any; + availability: string; + detailUrl: string; + id: string; + imageUrls: Record; + listPrice: number; + manualPrice: any; + measurementUnit: string; + modalType: any; + name: string; + offerings: Array; + price: number; + priceTags: Array; + productCategories: Record; + productCategoryIds: string; + productRefId: string; + productId: string; + quantity: number; + seller: string; + sellingPrice: number; + skuName: string; + skuSpecifications: Array; + unitMultiplier: number; + uniqueId: string; + refId: string; + isGift: boolean; + priceDefinition: { + calculatedSellingPrice: number; + total: number; + sellingPrices: Array<{ + quantity: number; + value: number; + __typename: string; + }>; + __typename: string; + }; + __typename: string; + }; + + export { OrderFormProvider, useOrderForm }; + declare const _default: { + OrderFormProvider: import("react").FC>; + useOrderForm: typeof useOrderForm; + }; + export default _default; +} + +declare module "vtex.order-manager/constants" { + export * from "vtex.order-manager/react/constants"; +} + + diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts new file mode 100644 index 0000000..bfb1e97 --- /dev/null +++ b/react/typings/vtex.render-runtime.d.ts @@ -0,0 +1,38 @@ +/* Typings for `render-runtime` */ +declare module "vtex.render-runtime" { + import { ComponentType, ReactElement, ReactType } from "react"; + + export interface NavigationOptions { + page: string + params?: any + } + + export interface RenderContextProps { + runtime: { + navigate: (options: NavigationOptions) => void + } + } + + interface ExtensionPointProps { + id: string + [key: string]: any + } + + export const ExtensionPoint: ComponentType; + + interface ChildBlockProps { + id: string + } + + export const ChildBlock: ComponentType; + export const useChildBlock = () => GenericObject; + + export const Helmet: ReactElement; + export const Link: ReactType; + export const NoSSR: ReactElement; + export const RenderContextConsumer: ReactElement; + export const canUseDOM: boolean; + export const withRuntimeContext: ( + Component: ComponentType + ) => ComponentType; +} diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts new file mode 100644 index 0000000..6f1f00a --- /dev/null +++ b/react/typings/vtex.styleguide.d.ts @@ -0,0 +1,9 @@ +declare module "vtex.styleguide" { + import { ComponentType } from "react"; + + export const Input: ComponentType; + + interface InputProps { + [key: string]: any + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 46c3964..2c3ed0d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -108,6 +108,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments", + "Pix", "product-separator", "sku-selector", "html#buy-button", diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..849cdc8 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + + "Pix": { + "component": "Pix" } } From 5a92b0b2ffe2f7b639b6390eb4aeff09ce94bf9b Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Mon, 30 Jan 2023 16:23:41 -0300 Subject: [PATCH 08/20] feat: adiciona placeholder no cep --- react/components/Pix-bloco/Pix.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx index 3648654..36c4a0e 100644 --- a/react/components/Pix-bloco/Pix.tsx +++ b/react/components/Pix-bloco/Pix.tsx @@ -1,9 +1,18 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useProduct } from "vtex.product-context"; import styles from "./style.module.css"; const Pix = () => { + + useEffect(() => { + const cepInput = document.querySelector(".vtex-address-form-4-x-input"); + + cepInput?.setAttribute("placeholder", "Digite seu CEP"); + + console.log(cepInput); + }); + const productContextValue = useProduct(); const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; From d987535bad5265127e1c0844878436fd094c54dd Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Tue, 31 Jan 2023 18:43:32 -0300 Subject: [PATCH 09/20] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o?= =?UTF-8?q?=20descri=C3=A7=C3=A3o=20e=20produto=20indisponivel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Pix-bloco/Pix.tsx | 2 +- react/components/Pix-bloco/style.module.css | 27 +++- store/blocks/pdp/product.jsonc | 16 +-- styles/css/vtex.breadcrumb.css | 3 +- styles/css/vtex.flex-layout.css | 13 ++ styles/css/vtex.product-identifier.css | 1 + styles/css/vtex.store-components.css | 91 +++++++++++++- styles/css/vtex.tab-layout.css | 48 ++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 3 +- .../sass/pages/product/vtex.flex-layout.scss | 13 ++ .../product/vtex.product-identifier.scss | 1 + .../pages/product/vtex.store-components.scss | 116 +++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 47 +++++++ styles/sass/utils/_vars.scss | 3 + 14 files changed, 365 insertions(+), 19 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx index 36c4a0e..63e5ebe 100644 --- a/react/components/Pix-bloco/Pix.tsx +++ b/react/components/Pix-bloco/Pix.tsx @@ -23,7 +23,7 @@ const Pix = () => { return (

-
+
desconto
diff --git a/react/components/Pix-bloco/style.module.css b/react/components/Pix-bloco/style.module.css index 1bc0701..d36fdf4 100644 --- a/react/components/Pix-bloco/style.module.css +++ b/react/components/Pix-bloco/style.module.css @@ -1,3 +1,26 @@ -.wrapper { - /* background-color: red; */ +.container-flex { + display: flex; + flex-direction: row; + align-items: center; + gap: 26px; + margin-top: 8px; + margin-bottom: 16px; +} + +.value { + font-weight: 700; + font-size: 18px; + line-height: 25px; + margin: 0; + + color: rgba(0, 0, 0, 0.58); +} + +.text { + font-weight: 300; + font-size: 13px; + line-height: 18px; + margin: 0; + + color: #929292; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 2c3ed0d..48ad871 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -44,6 +44,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "container-main-content", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -109,11 +110,11 @@ "flex-layout.row#selling-price", "product-installments", "Pix", - "product-separator", + // "product-separator", "sku-selector", "html#buy-button", // "flex-layout.row#buy-button", - "product-gifts", + // "product-gifts", "availability-subscriber", "shipping-simulator" ] @@ -250,8 +251,7 @@ "flex-layout.col#imageDescriptionContainer": { "props": { - "blockClass": "image-description", - "width": "50%" + "blockClass": "image-description" }, "children": ["product-images#imageDescription"] }, @@ -265,7 +265,8 @@ "flex-layout.row#description": { "props": { - "marginBottom": 7 + "marginBottom": 7, + "preventHorizontalStretch": true }, "children": ["flex-layout.col#imageDescriptionContainer", "product-description"] }, @@ -335,6 +336,7 @@ "flex-layout.row#product-availability": { "props": { + "blockClass": "container-main-content", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -354,8 +356,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": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 8b19a74..7ba6a2a 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -11,8 +11,7 @@ /* Cores */ /* Grid breakpoints */ .container { - padding-right: 40px; - padding-left: 40px; + padding: 0 40px 16px; } .homeIcon, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 24d5340..ec1ba35 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -23,4 +23,17 @@ .flexRowContent--buy-button-row { height: 49px; +} + +:global(.vtex-flex-layout-0-x-flexRow--container-main-content) { + padding: 0 40px; +} + +:global(.vtex-flex-layout-0-x-flexRowContent) { + padding: 0; + margin: 0; +} + +:global(.vtex-flex-layout-0-x-flexCol--image-description) { + padding-right: 32px; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 83412a1..fb15ed4 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -23,4 +23,5 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); + padding-bottom: 24px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7fab1eb..5d2e382 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -10,6 +11,10 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Cores */ /* Grid breakpoints */ +.container { + padding: 0; +} + .newsletter { background: #000000; color: #fff; @@ -41,8 +46,8 @@ color: #000000; } -.container { - padding: 0 40px; +.thumbImg { + border-radius: 8px; } .productNameContainer { @@ -50,10 +55,12 @@ font-size: 20px; line-height: 34px; text-align: right; + margin-bottom: 8px; color: #575757; } .productImage .productImageTag { + width: unset !important; max-height: unset !important; } @@ -77,6 +84,7 @@ flex-direction: column; } .skuSelectorContainer .skuSelectorSubcontainer--cor { + margin-bottom: 16px; order: 2; } .skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround, @@ -100,6 +108,9 @@ .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue { display: none; } +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { padding: 0; margin: auto; @@ -156,6 +167,9 @@ bottom: 3px; transform: rotateY(180deg); } +.skuSelectorContainer .skuSelectorItem--sku-size { + margin: 0 16px 0 0; +} .subscriberContainer { font-weight: 400; @@ -190,6 +204,13 @@ font-size: 40px; } +:global(.vtex-store-components-3-x-skuSelectorNameContainer) { + margin: 0; +} +:global(.vtex-store-components-3-x-skuSelectorNameContainer) :global(.vtex-store-components-3-x-skuSelectorOptionsList) { + margin: 0; +} + .shippingContainer { display: flex; } @@ -256,6 +277,10 @@ color: #929292; } +:global(.vtex-address-form__field--small) { + padding-bottom: 16px; +} + .shippingTable { display: flex; flex-direction: column; @@ -274,6 +299,7 @@ font-size: 14px; line-height: 19px; text-transform: uppercase; + padding-right: 112px; color: #202020; } .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { @@ -324,4 +350,65 @@ } .shippingTableBody .shippingTableRadioBtn { display: none; +} + +.subscriberContainer .title { + font-size: 0; +} +.subscriberContainer .title::after { + content: "Produto Indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .title .subscribeLabel { + font-size: 0; +} +.subscriberContainer .title .subscribeLabel::after { + content: "Deseja saber quando estiver disponível"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .form .content { + display: grid; + grid-template-areas: " nome email" " submit submit"; + justify-content: inherit; + gap: 8px; +} +.subscriberContainer .form .content .inputName { + grid-area: nome; +} +.subscriberContainer .form .content .inputEmail { + grid-area: email; +} +.subscriberContainer .form .content .submit { + grid-area: submit; + width: 100%; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + height: 49px; + cursor: pointer; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label)::after { + content: "avise-me"; + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; +} + +.productDescriptionContainer .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: 8px; + 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..afbe7a8 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,48 @@ +/* +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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.container--structure { + padding: 0 40px; +} + +.contentContainer { + padding: 0 32px; +} + +.listContainer { + border-bottom: 1px solid #b9b9b9; + height: 43px; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; +} +.listContainer .listItem :global(.vtex-button):hover { + background-color: transparent; +} +.listContainer .listItem :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: #bfbfbf; + text-transform: capitalize; + padding: 0.25em 10px 0.32em; +} +.listContainer .listItemActive :global(.vtex-button) { + background-color: #fff; + border: none; +} +.listContainer .listItemActive :global(.vtex-button__label) { + color: #000000; + background-color: #fff; + border-bottom: 2px solid #000000; + padding: 0; +} \ 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 452f605..378f809 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,5 @@ .container { - padding-right: 40px; - padding-left: 40px; + padding: 0 40px 16px ; } .homeIcon, diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 656e0bd..cfedcb3 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -12,3 +12,16 @@ .flexRowContent--buy-button-row { height: 49px; } + +:global(.vtex-flex-layout-0-x-flexRow--container-main-content) { + padding: 0 40px; +} + +:global(.vtex-flex-layout-0-x-flexRowContent) { + padding: 0; + margin: 0; +} + +:global(.vtex-flex-layout-0-x-flexCol--image-description) { + padding-right: 32px; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 91bc644..2843d55 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -15,5 +15,6 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); + padding-bottom: 24px; } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 894c491..6ef9d21 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,7 @@ +.container { + padding: 0; +} + .newsletter { background: $black; color: $white; @@ -33,22 +37,24 @@ } } -// TITULO E IMAGENS -.container { - padding: 0 40px; +.thumbImg { + border-radius: 8px; } +// TITULO E IMAGENS .productNameContainer { font-weight: 300; font-size: 20px; line-height: 34px; text-align: right; + margin-bottom: 8px; color: $gray-100; } .productImage { .productImageTag { + width: unset !important; max-height: unset !important; } } @@ -75,6 +81,7 @@ margin-top: 16px; flex-direction: column; .skuSelectorSubcontainer--cor { + margin-bottom: 16px; order: 2; .frameAround, @@ -108,6 +115,8 @@ margin-top: 16px; } .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorItemTextValue { padding: 0; margin: auto; @@ -183,6 +192,9 @@ margin-top: 16px; transform: rotateY(180deg); } } + .skuSelectorItem--sku-size { + margin: 0 16px 0 0; + } } .subscriberContainer { @@ -226,6 +238,14 @@ margin-top: 16px; } } +:global(.vtex-store-components-3-x-skuSelectorNameContainer) { + margin: 0; + + :global(.vtex-store-components-3-x-skuSelectorOptionsList) { + margin: 0; + } +} + // CEP .shippingContainer { display: flex; @@ -309,6 +329,10 @@ margin-top: 16px; } } +:global(.vtex-address-form__field--small) { + padding-bottom: 16px; +} + // ENTREGA .shippingTable { @@ -330,6 +354,7 @@ margin-top: 16px; font-size: 14px; line-height: 19px; text-transform: uppercase; + padding-right: 112px; color: $black-100; } @@ -399,3 +424,88 @@ margin-top: 16px; display: none; } } + +// PRODUTO INDISPONÍVEL +.subscriberContainer { + + .title { + font-size: 0; + + &::after { + content: "Produto Indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + color: $gray-300; + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray-300; + } + } + } + + .form { + .content { + display: grid; + grid-template-areas: " nome email" + " submit submit"; + justify-content: inherit; + gap: 8px; + + .inputName { + grid-area: nome; + } + + .inputEmail { + grid-area: email; + } + + .submit { + grid-area: submit; + width: 100%; + + :global(.vtex-button) { + width: 100%; + height: 49px; + cursor: pointer; + } + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + text-transform: uppercase; + font-weight: 600; + font-size: 18px; + line-height: 25px; + + color: $white; + } + } + } + } + } +} + +// DESCRIÇÃO +.productDescriptionContainer { + .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + margin-bottom: 8px; + + color: $gray-100; + } +} 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..f7bbd67 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,47 @@ +.container--structure { + padding: 0 40px; +} + +.contentContainer { + padding: 0 32px; +} + +.listContainer { + border-bottom: 1px solid $gray-500; + height: 43px; + justify-content: space-between; + padding: 0 64px; + margin-bottom: 32px; + + .listItem { + :global(.vtex-button) { + + &:hover { + background-color: transparent; + } + } + + :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 18px; + color: $gray-400; + text-transform: capitalize; + padding: 0.25em 10px 0.32em; + } + } + + .listItemActive { + :global(.vtex-button) { + background-color: $white; + border: none; + } + + :global(.vtex-button__label) { + color: $black; + background-color: $white; + border-bottom: 2px solid $black; + padding: 0; + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 1bf6970..e1fc183 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -11,6 +11,9 @@ $white: #fff; $gray: #929292; $gray-100: #575757; $gray-200: #cccccc; +$gray-300: #868686; +$gray-400: #bfbfbf; +$gray-500: #b9b9b9; $color-gray: #6c6c6c; From c8c8d5ab4239134a5e4c21f371bd2fc605d1ad4c Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Tue, 31 Jan 2023 19:28:50 -0300 Subject: [PATCH 10/20] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o?= =?UTF-8?q?=20do=20bloco=20customizavel=20pix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 10 ++++++++++ styles/css/vtex.tab-layout.css | 12 ++++++++++++ .../sass/pages/product/vtex.store-components.scss | 9 +++++++++ styles/sass/pages/product/vtex.tab-layout.scss | 13 +++++++++++++ 4 files changed, 44 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5d2e382..9e88af1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -354,6 +354,8 @@ .subscriberContainer .title { font-size: 0; + line-height: 0; + margin: 0; } .subscriberContainer .title::after { content: "Produto Indisponível"; @@ -372,21 +374,29 @@ line-height: 19px; color: #868686; } +.subscriberContainer .form { + margin-bottom: 16px; +} .subscriberContainer .form .content { display: grid; grid-template-areas: " nome email" " submit submit"; justify-content: inherit; gap: 8px; + margin-top: 15px; } .subscriberContainer .form .content .inputName { grid-area: nome; + margin-bottom: 0; } .subscriberContainer .form .content .inputEmail { grid-area: email; + margin-bottom: 0; } .subscriberContainer .form .content .submit { grid-area: submit; width: 100%; + margin-top: 7px; + margin-bottom: 0; } .subscriberContainer .form .content .submit :global(.vtex-button) { width: 100%; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index afbe7a8..0d3647e 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -13,6 +14,16 @@ .container--structure { padding: 0 40px; } +.container--structure::after { + content: "Você também pode gostar:"; + display: block; + text-align: center; + font-weight: 400; + font-size: 24px; + line-height: 38px; + padding: 16px 0 32px 0; + color: #575757; +} .contentContainer { padding: 0 32px; @@ -38,6 +49,7 @@ } .listContainer .listItemActive :global(.vtex-button) { background-color: #fff; + width: 114px; border: none; } .listContainer .listItemActive :global(.vtex-button__label) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6ef9d21..1cf9466 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -430,6 +430,8 @@ margin-top: 16px; .title { font-size: 0; + line-height: 0; + margin: 0; &::after { content: "Produto Indisponível"; @@ -455,24 +457,31 @@ margin-top: 16px; } .form { + margin-bottom: 16px; + .content { display: grid; grid-template-areas: " nome email" " submit submit"; justify-content: inherit; gap: 8px; + margin-top: 15px; .inputName { grid-area: nome; + margin-bottom: 0; } .inputEmail { grid-area: email; + margin-bottom: 0; } .submit { grid-area: submit; width: 100%; + margin-top: 7px; + margin-bottom: 0; :global(.vtex-button) { width: 100%; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index f7bbd67..5e2f99c 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,17 @@ .container--structure { padding: 0 40px; + + &::after { + content: "Você também pode gostar:"; + display: block; + text-align: center; + font-weight: 400; + font-size: 24px; + line-height: 38px; + padding: 16px 0 32px 0; + + color: $gray-100; + } } .contentContainer { @@ -34,6 +46,7 @@ .listItemActive { :global(.vtex-button) { background-color: $white; + width: 114px; border: none; } From 199f93a15f65187a2136b74e8cf2553f38f0ecb7 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Wed, 1 Feb 2023 16:56:52 -0300 Subject: [PATCH 11/20] =?UTF-8?q?feat:=20adiciona=20estliza=C3=A7=C3=A3o?= =?UTF-8?q?=20carrossel=20e=20arrows?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/left-arrow-vitor-soares.png | Bin 0 -> 322 bytes assets/left-arrow-vitor-soares.svg | 3 + assets/right-arrow-vitor-soares.png | Bin 0 -> 316 bytes store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.product-summary.css | 84 +++++++++++------- styles/css/vtex.slider-layout.css | 68 +++++++++----- styles/css/vtex.tab-layout.css | 1 + .../pages/product/vtex.product-summary.scss | 60 +++++++++++++ .../pages/product/vtex.slider-layout.scss | 50 +++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 1 + styles/sass/utils/_vars.scss | 2 + 11 files changed, 218 insertions(+), 53 deletions(-) create mode 100644 assets/left-arrow-vitor-soares.png create mode 100644 assets/left-arrow-vitor-soares.svg create mode 100644 assets/right-arrow-vitor-soares.png create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/assets/left-arrow-vitor-soares.png b/assets/left-arrow-vitor-soares.png new file mode 100644 index 0000000000000000000000000000000000000000..ef0f194732ccc9cacf0f9a5b60f791abd76e579f GIT binary patch literal 322 zcmeAS@N?(olHy`uVBq!ia0vp^JU}eZ!3HERo9kQxQk(@Ik;M!Q+`=Ht$S`Y;1W=H% zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>l@47srqa#aTn$BGl{P` zVQch=cUfHLj;0ok=DCj|CbR$CG__X#)ZC)=ceL^q0+gq3W92+pGQXio@?C&IBIim* z>uU!4{SVK2cJ_yE>DS{QLiSBz7nx$Eq|0<%>PQl+NRC~5lcfKGYiIfG+V@xr>mdKI;Vst05dapZvX%Q literal 0 HcmV?d00001 diff --git a/assets/left-arrow-vitor-soares.svg b/assets/left-arrow-vitor-soares.svg new file mode 100644 index 0000000..217a30d --- /dev/null +++ b/assets/left-arrow-vitor-soares.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/right-arrow-vitor-soares.png b/assets/right-arrow-vitor-soares.png new file mode 100644 index 0000000000000000000000000000000000000000..ad6850acd529b4b4341188bc8dd89d5bc9f34526 GIT binary patch literal 316 zcmeAS@N?(olHy`uVBq!ia0vp^JU}eZ!3HERo9kQxQk(@Ik;M!Q+`=Ht$S`Y;1W=H% zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>kHf7srqa#;qY6c@H@V7@uNFY?f{mtYh)A z+QfLXA%{UV*6jpGrsmBCK{+d{9pUe$h8z*soTjsML-D?D(S(Kro%fW*o`zR`oKa=W zdQIWfiW)8NYautM?Eft?`FVTMY8#FFr>r@qh-v%YYIHGZ&Yr(|W|YMQ|JcoJ2Mb+*sbc+3IqzJoljwhQSOwy@gz7J4hDIX%n3P@J9pVW6xASoq}l_T9v<_JR++s zW>LhP{O&-^7k17(8A5 KT-G@yGywoR6?9Sn literal 0 HcmV?d00001 diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 48ad871..6c6a155 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -299,7 +299,7 @@ "props": { "itemsPerPage": { "desktop": 4, - "tablet": 1, + "tablet": 3, "phone": 1 }, "infinite": true, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..fca2bdb 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,62 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - 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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ +.imageNormal { + width: 314px; + height: 314px; } .brandName { - font-weight: 600; + font-weight: 400; font-size: 18px; - color: #2E2E2E; + line-height: 25px; + color: #000000; } -.container { - text-align: start; +.nameContainer { + padding: 16px 0 8px 0; } -.imageContainer { - text-align: center; +.priceContainer { + padding: 0; +} +.priceContainer .listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; +} +.priceContainer .listPriceContainer::after { + content: "por"; +} +.priceContainer .listPriceContainer .listPrice { + padding: 0 4px 0 0; +} +.priceContainer .sellingPriceLabel { + display: none; +} +.priceContainer .installmentContainer { + display: none; +} +.priceContainer .price_sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} +.priceContainer .sellingPriceContainer { + padding: 0 0 32px 0; } -.image { - border-radius: 0.25rem; -} +.element { + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..281d59a 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,59 @@ +/* +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 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ +/* Grid breakpoints */ .sliderLayoutContainer { - justify-content: center; + margin-bottom: 64px; + padding: 0 67px; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; +.imageContainer { + max-width: 314px; + width: 100%; + height: 314px; + background: #EDEDED; } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + align-items: center; + gap: 12px; +} +.paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000000; + margin: 0; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +:global(.vtex-slider-layout-0-x-paginationDot--isActive) { + width: 17px !important; + height: 17px !important; + background-color: #fff !important; + border: 0.5px solid #000000; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderRightArrow { + visibility: hidden; } +.sliderRightArrow::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); + padding: 0 40px 0 0; +} + +.sliderLeftArrow { + visibility: hidden; +} +.sliderLeftArrow::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); + padding: 0 0 0 40px; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0d3647e..12389a6 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -51,6 +51,7 @@ background-color: #fff; width: 114px; border: none; + padding: 0; } .listContainer .listItemActive :global(.vtex-button__label) { color: #000000; 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..6e46bb8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,60 @@ +.imageNormal { + width: 314px; + height: 314px; +} + +.brandName { + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $black; +} + +.nameContainer { + padding: 16px 0 8px 0; +} + +.priceContainer { + padding: 0; + + .listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray-700; + + &::after { + content: "por"; + } + + .listPrice { + padding: 0 4px 0 0; + } + } + + .sellingPriceLabel { + display: none; + } + + .installmentContainer { + display: none; + } + + .price_sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + + color: $black; + } + + .sellingPriceContainer { + padding: 0 0 32px 0; + } +} + +.element { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..1cc3f9d --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,50 @@ +.sliderLayoutContainer { + margin-bottom: 64px; + padding: 0 67px; +} + +.imageContainer { + max-width: 314px; + width: 100%; + height: 314px; + background: $gray-600; +} + +.paginationDotsContainer { + align-items: center; + gap: 12px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: $black; + margin: 0; + } +} + +:global(.vtex-slider-layout-0-x-paginationDot--isActive) { + width: 17px !important; + height: 17px !important; + background-color: $white !important; + border: 0.5px solid $black; +} + +.sliderRightArrow { + visibility: hidden; + + &::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); + padding: 0 40px 0 0; + } +} + +.sliderLeftArrow { +visibility: hidden; + + &::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); + padding: 0 0 0 40px; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 5e2f99c..4816103 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -48,6 +48,7 @@ background-color: $white; width: 114px; border: none; + padding: 0; } :global(.vtex-button__label) { diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index e1fc183..5cc7813 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -14,6 +14,8 @@ $gray-200: #cccccc; $gray-300: #868686; $gray-400: #bfbfbf; $gray-500: #b9b9b9; +$gray-600: #EDEDED; +$gray-700: #bababa; $color-gray: #6c6c6c; From fe082e670b840dda6ab10ec992ced55c96446a9b Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Thu, 2 Feb 2023 14:18:16 -0300 Subject: [PATCH 12/20] feat: adiciona responsividade 4k e aumento de perfomance componente cep --- react/components/Pix-bloco/Pix.tsx | 11 +- store/blocks/pdp/product.jsonc | 8 + styles/css/vtex.flex-layout.css | 6 + styles/css/vtex.product-identifier.css | 5 + styles/css/vtex.slider-layout.css | 8 + styles/css/vtex.store-components.css | 124 +++++++++++++++- styles/css/vtex.tab-layout.css | 6 + .../sass/pages/product/vtex.flex-layout.scss | 6 + .../product/vtex.product-identifier.scss | 4 + .../pages/product/vtex.slider-layout.scss | 8 + .../pages/product/vtex.store-components.scss | 139 +++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 8 + styles/sass/utils/_vars.scss | 9 +- 13 files changed, 327 insertions(+), 15 deletions(-) diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx index 63e5ebe..ce55d3f 100644 --- a/react/components/Pix-bloco/Pix.tsx +++ b/react/components/Pix-bloco/Pix.tsx @@ -4,14 +4,15 @@ import { useProduct } from "vtex.product-context"; import styles from "./style.module.css"; const Pix = () => { - useEffect(() => { - const cepInput = document.querySelector(".vtex-address-form-4-x-input"); + setTimeout(() => { + const cepInput = document.querySelector(".vtex-address-form-4-x-input"); - cepInput?.setAttribute("placeholder", "Digite seu CEP"); + cepInput?.setAttribute("placeholder", "Digite seu CEP"); - console.log(cepInput); - }); + console.log(cepInput); + }, 1000); + }, []); const productContextValue = useProduct(); diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6c6a155..735252c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -291,6 +291,7 @@ "children": [ "product-summary-image", "product-summary-name", + "product-summary-space", "product-summary-price" ] }, @@ -391,5 +392,12 @@ "installmentsCriteria": "max-quality-without-interest", "blockClass": "fees" } + }, + + "newsletter": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ec1ba35..c555563 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -36,4 +36,10 @@ :global(.vtex-flex-layout-0-x-flexCol--image-description) { padding-right: 32px; +} + +@media only screen and (max-width: 1025px) { + :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { + flex-direction: column; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index fb15ed4..0957d76 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -24,4 +24,9 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); padding-bottom: 24px; +} +@media only screen and (max-width: 1025px) { + .product-identifier__value { + justify-content: unset; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 281d59a..0cbad80 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -14,6 +14,9 @@ margin-bottom: 64px; padding: 0 67px; } +.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderTrack--carousel) { + gap: 16px; +} .imageContainer { max-width: 314px; @@ -56,4 +59,9 @@ visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); padding: 0 0 0 40px; +} +@media only screen and (max-width: 1025px) { + .sliderLeftArrow::before { + display: block; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9e88af1..25240bc 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -14,10 +14,14 @@ .container { padding: 0; } +@media only screen and (min-width: 1920px) { + .container { + margin: 0 !important; + } +} -.newsletter { - background: #000000; - color: #fff; +.discountInsideContainer { + display: none; } :global(.vtex-numeric-stepper__input) { @@ -58,6 +62,11 @@ margin-bottom: 8px; color: #575757; } +@media only screen and (max-width: 1025px) { + .productNameContainer { + text-align: unset; + } +} .productImage .productImageTag { width: unset !important; @@ -302,6 +311,11 @@ padding-right: 112px; color: #202020; } +@media only screen and (min-width: 1920px) { + .shippingTable .shippingTableRow .shippingTableHeadDeliveryName { + padding-right: 122px; + } +} .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { display: flex; order: 3; @@ -348,6 +362,14 @@ display: flex; order: 3; } +.shippingTableBody .shippingTableCellDeliveryName, +.shippingTableBody .currencyContainer, +.shippingTableBody .shippingTableCellDeliveryEstimate { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} .shippingTableBody .shippingTableRadioBtn { display: none; } @@ -421,4 +443,100 @@ line-height: 32px; margin-bottom: 8px; color: #575757; +} +@media only screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 32px; + margin-bottom: 16px; + } +} +@media only screen and (max-width: 1025px) { + .productDescriptionContainer .productDescriptionTitle { + padding-top: 16px; + } +} +.productDescriptionContainer .productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media only screen and (min-width: 1920px) { + .productDescriptionContainer .productDescriptionText { + font-size: 18px; + line-height: 25px; + } +} +@media only screen and (max-width: 1025px) { + .productDescriptionContainer .productDescriptionText { + border-bottom: 1px solid #bfbfbf; + padding-bottom: 16px; + } +} + +.newsletter { + display: flex; + align-items: flex-end; + justify-content: center; + height: 175px; + background: #000000; + color: #fff; +} +.newsletter .container { + display: flex; + justify-content: center; + max-width: unset; + width: 53.75%; +} +.newsletter .container .form { + padding-bottom: 16px; +} +.newsletter .container .form .label { + display: flex; + flex-direction: column; + gap: 16px; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.newsletter .input-group { + display: flex; +} +.newsletter .form { + width: 100%; + margin: 0; +} +.newsletter .buttonContainer { + padding: 0; +} +.newsletter :global(.vtex-button) { + border: none; + border-bottom: 3px solid #bfbfbf; + border-radius: 0; + background-color: transparent; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; +} +.newsletter :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid #cccccc; +} +.newsletter :global(.vtex-styleguide-9-x-input) { + padding: 0; + background-color: transparent; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 12389a6..b2a3b1e 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -58,4 +58,10 @@ background-color: #fff; border-bottom: 2px solid #000000; padding: 0; +} + +@media only screen and (max-width: 1025px) { + :global(.vtex-tab-layout-0-x-contentItem--content-render) :global(.vtex-flex-layout-0-x-flexRowContent) { + 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 cfedcb3..ad0361c 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -25,3 +25,9 @@ :global(.vtex-flex-layout-0-x-flexCol--image-description) { padding-right: 32px; } + +:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { + @include mq(md, max) { + flex-direction: column; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 2843d55..50fd3da 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -16,5 +16,9 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); padding-bottom: 24px; + + @include mq(md, max) { + justify-content: unset; + } } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 1cc3f9d..575d622 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,6 +1,10 @@ .sliderLayoutContainer { margin-bottom: 64px; padding: 0 67px; + + :global(.vtex-slider-layout-0-x-sliderTrack--carousel) { + gap: 16px; + } } .imageContainer { @@ -46,5 +50,9 @@ visibility: hidden; visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); padding: 0 0 0 40px; + + @include mq(md, max) { + display: block; + } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1cf9466..6c36e6e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,10 +1,13 @@ .container { padding: 0; + + @include mq(xl, min) { + margin: 0 !important; + } } -.newsletter { - background: $black; - color: $white; +.discountInsideContainer { + display: none; } :global(.vtex-numeric-stepper__input) { @@ -50,6 +53,10 @@ margin-bottom: 8px; color: $gray-100; + + @include mq(md, max) { + text-align: unset; + } } .productImage { @@ -357,6 +364,10 @@ margin-top: 16px; padding-right: 112px; color: $black-100; + + @include mq(xl, min) { + padding-right: 122px; + } } .shippingTableHeadDeliveryEstimate { @@ -420,6 +431,16 @@ margin-top: 16px; order: 3; } + .shippingTableCellDeliveryName, + .currencyContainer, + .shippingTableCellDeliveryEstimate { + font-weight: 400; + font-size: 12px; + line-height: 16px; + + color: $gray-900; + } + .shippingTableRadioBtn { display: none; } @@ -516,5 +537,117 @@ margin-top: 16px; margin-bottom: 8px; color: $gray-100; + + @include mq(xl, min) { + font-size: 32px; + margin-bottom: 16px; + } + + @include mq(md, max) { + padding-top: 16px; + } + } + + .productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; + + @include mq(xl, min) { + font-size: 18px; + line-height: 25px; + } + + @include mq(md, max) { + border-bottom: 1px solid $gray-400; + padding-bottom: 16px; + } + } +} + +// NEWSLETTER +.newsletter { + display: flex; + align-items: flex-end; + justify-content: center; + height: 175px; + + background: $black; + color: $white; + + .container { + display: flex; + justify-content: center; + max-width: unset; + width: 53.75%; + // padding-top: 32px; + // margin: 0; + + .form { + padding-bottom: 16px; + + .label { + display: flex; + flex-direction: column; + gap: 16px; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + color: $white; + + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $gray; + } + } + } + } + + .input-group { + display: flex; + } + + .form { + width: 100%; + margin: 0; + } + + .buttonContainer { + padding: 0; + } + + :global(.vtex-button ) { + border: none; + border-bottom: 3px solid $gray-400; + border-radius: 0; + background-color: transparent; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + color: $white; + } + + :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid $gray-800; + } + + :global(.vtex-styleguide-9-x-input) { + padding: 0; + background-color: transparent; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: $gray; } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4816103..574be81 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -59,3 +59,11 @@ } } } + +:global(.vtex-tab-layout-0-x-contentItem--content-render) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + @include mq(md, max) { + flex-direction: column; + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 5cc7813..7670dd6 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -16,6 +16,8 @@ $gray-400: #bfbfbf; $gray-500: #b9b9b9; $gray-600: #EDEDED; $gray-700: #bababa; +$gray-800: #cccccc; +$gray-900: #afafaf; $color-gray: #6c6c6c; @@ -32,10 +34,9 @@ $color-green: #4caf50; $grid-breakpoints: ( xs: 0, cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + mobile: 768px, + md: 1026px, + xl: 1920px ) !default; $z-index: ( From 4ecde7b8d751387ff67d9d73217b35e9a931c243 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Fri, 3 Feb 2023 12:23:54 -0300 Subject: [PATCH 13/20] =?UTF-8?q?feat:=20adiciona=20estiliza=C3=A7=C3=A3o?= =?UTF-8?q?=20responsiva=20nos=20inputs=20e=20imagens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 7 ++ styles/css/vtex.flex-layout.css | 10 ++- styles/css/vtex.product-summary.css | 4 +- styles/css/vtex.store-components.css | 40 +++++++--- styles/css/vtex.tab-layout.css | 75 +++++++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 9 ++- .../pages/product/vtex.product-summary.scss | 4 +- .../pages/product/vtex.store-components.scss | 41 +++++++--- .../sass/pages/product/vtex.tab-layout.scss | 63 ++++++++++++++++ 9 files changed, 228 insertions(+), 25 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index e28c0d3..f3463a8 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -9,4 +9,11 @@ background: black; border: none; border-radius: 0; + width: 99.432%; +} + +@media only screen and (max-width: 1024px) { + [class*="html--buy-button"] :global(.vtex-button) { + width: 100%; + } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c555563..de19421 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -17,8 +17,14 @@ width: 100%; } -.strechChildrenWidth { - width: 640px; +.stretchChildrenWidth { + margin: 0; +} +@media only screen and (max-width: 1025px) { + .stretchChildrenWidth { + width: 100% !important; + padding: 0 !important; + } } .flexRowContent--buy-button-row { diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index fca2bdb..cf24fad 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -11,8 +11,10 @@ /* Cores */ /* Grid breakpoints */ .imageNormal { - width: 314px; + width: 105%; height: 314px; + max-height: unset; + max-width: 314px; } .brandName { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 25240bc..882850c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -28,6 +28,7 @@ border-right: none; border-left: none; border-color: #cccccc; + width: 32px; } :global(.vtex-numeric-stepper__minus-button) { @@ -69,8 +70,17 @@ } .productImage .productImageTag { - width: unset !important; - max-height: unset !important; + width: 103% !important; + height: 100%; + max-height: 664px !important; + object-fit: contain; + max-width: 664px !important; +} +@media only screen and (max-width: 1025px) { + .productImage .productImageTag { + max-height: 100% !important; + max-width: 100% !important; + } } .carouselGaleryThumbs { @@ -208,6 +218,12 @@ .productImageTag { max-width: 664px; } +@media only screen and (max-width: 1025px) { + .productImageTag { + max-width: 100%; + max-height: max-content; + } +} .address-form__field .input__label { font-size: 40px; @@ -486,10 +502,18 @@ display: flex; justify-content: center; max-width: unset; - width: 53.75%; + width: 100%; } .newsletter .container .form { + max-width: 774px; + width: 100%; padding-bottom: 16px; + margin: 0; +} +@media only screen and (max-width: 1025px) { + .newsletter .container .form { + max-width: 1024px; + } } .newsletter .container .form .label { display: flex; @@ -507,12 +531,10 @@ line-height: 25px; color: #929292; } -.newsletter .input-group { - display: flex; -} -.newsletter .form { - width: 100%; - margin: 0; +@media only screen and (max-width: 1025px) { + .newsletter :global(.vtex-store-components-3-x-inputGroup) { + padding: 16px 16px 0; + } } .newsletter .buttonContainer { padding: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index b2a3b1e..4e3fcbb 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -28,6 +28,11 @@ .contentContainer { padding: 0 32px; } +@media only screen and (max-width: 1025px) { + .contentContainer { + padding: 16px 0 0 0; + } +} .listContainer { border-bottom: 1px solid #b9b9b9; @@ -36,6 +41,37 @@ padding: 0 64px; margin-bottom: 32px; } +@media only screen and (min-width: 1920px) { + .listContainer { + height: 49px; + } +} +@media only screen and (max-width: 1025px) { + .listContainer { + border-top: 1px solid #b9b9b9; + flex-direction: column; + height: fit-content; + padding: 16px 0 0 0; + margin: 0; + } +} +@media only screen and (max-width: 1025px) { + .listContainer .listItem { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } +} +.listContainer .listItem :global(.vtex-button) { + border: none; +} +@media only screen and (max-width: 1025px) { + .listContainer .listItem :global(.vtex-button) { + width: 100%; + } +} .listContainer .listItem :global(.vtex-button):hover { background-color: transparent; } @@ -47,18 +83,57 @@ text-transform: capitalize; padding: 0.25em 10px 0.32em; } +@media only screen and (min-width: 1920px) { + .listContainer .listItem :global(.vtex-button__label) { + font-size: 24px; + line-height: 24px; + } +} +@media only screen and (max-width: 1025px) { + .listContainer .listItem :global(.vtex-button__label) { + text-align: left; + flex-direction: column; + height: fit-content; + padding: 0 !important; + font-size: 18px; + line-height: 18px; + } +} +@media only screen and (max-width: 1025px) { + .listContainer .listItemActive { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } +} .listContainer .listItemActive :global(.vtex-button) { background-color: #fff; width: 114px; border: none; padding: 0; } +@media only screen and (max-width: 1025px) { + .listContainer .listItemActive :global(.vtex-button) { + width: 100%; + } +} .listContainer .listItemActive :global(.vtex-button__label) { color: #000000; background-color: #fff; border-bottom: 2px solid #000000; padding: 0; } +@media only screen and (max-width: 1025px) { + .listContainer .listItemActive :global(.vtex-button__label) { + flex-direction: column; + text-align: left; + height: fit-content; + padding: 0; + border-bottom: none; + } +} @media only screen and (max-width: 1025px) { :global(.vtex-tab-layout-0-x-contentItem--content-render) :global(.vtex-flex-layout-0-x-flexRowContent) { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index ad0361c..edf6b53 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -5,8 +5,13 @@ width: 100%; } -.strechChildrenWidth { - width: 640px; +.stretchChildrenWidth { + margin: 0; + + @include mq(md, max) { + width: 100% !important; + padding: 0 !important; + } } .flexRowContent--buy-button-row { diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 6e46bb8..0a03754 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,6 +1,8 @@ .imageNormal { - width: 314px; + width: 105%; height: 314px; + max-height: unset; + max-width: 314px; } .brandName { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6c36e6e..6643104 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -14,6 +14,7 @@ border-right: none; border-left: none; border-color: $gray-200; + width: 32px; } :global(.vtex-numeric-stepper__minus-button) { @@ -61,8 +62,19 @@ .productImage { .productImageTag { - width: unset !important; - max-height: unset !important; + width: 103% !important; + height: 100%; + max-height: 664px !important; + object-fit: contain; + max-width: 664px !important; + + @include mq(md, max) { + max-height: 100% !important; + max-width: 100% !important; + } + + // width: unset !important; + // max-height: unset !important; } } @@ -237,6 +249,11 @@ margin-top: 16px; .productImageTag { max-width: 664px; + + @include mq(md, max) { + max-width: 100%; + max-height: max-content; + } } .address-form__field { @@ -581,12 +598,19 @@ margin-top: 16px; display: flex; justify-content: center; max-width: unset; - width: 53.75%; + width: 100%; // padding-top: 32px; // margin: 0; .form { + max-width: 774px; + width: 100%; padding-bottom: 16px; + margin: 0; + + @include mq(md, max) { + max-width: 1024px; + } .label { display: flex; @@ -610,13 +634,10 @@ margin-top: 16px; } } - .input-group { - display: flex; - } - - .form { - width: 100%; - margin: 0; + :global(.vtex-store-components-3-x-inputGroup) { + @include mq(md, max) { + padding: 16px 16px 0; + } } .buttonContainer { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 574be81..4d8c9f4 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -16,6 +16,10 @@ .contentContainer { padding: 0 32px; + + @include mq(md, max) { + padding: 16px 0 0 0; + } } .listContainer { @@ -25,8 +29,33 @@ padding: 0 64px; margin-bottom: 32px; + @include mq(xl, min) { + height: 49px; + } + + @include mq(md, max) { + border-top: 1px solid $gray-500; + flex-direction: column; + height: fit-content; + padding: 16px 0 0 0; + margin: 0; + } + .listItem { + @include mq(md, max) { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } + :global(.vtex-button) { + border: none; + + @include mq(md, max) { + width: 100%; + } &:hover { background-color: transparent; @@ -40,15 +69,41 @@ color: $gray-400; text-transform: capitalize; padding: 0.25em 10px 0.32em; + + @include mq(xl, min) { + font-size: 24px; + line-height: 24px; + } + + @include mq(md, max) { + text-align: left; + flex-direction: column; + height: fit-content; + padding: 0 !important; + font-size: 18px; + line-height: 18px; + } } } .listItemActive { + @include mq(md, max) { + align-self: flex-start; + flex-direction: column; + height: fit-content; + padding: 0 0 16px; + margin: 0; + } + :global(.vtex-button) { background-color: $white; width: 114px; border: none; padding: 0; + + @include mq(md, max) { + width: 100%; + } } :global(.vtex-button__label) { @@ -56,6 +111,14 @@ background-color: $white; border-bottom: 2px solid $black; padding: 0; + + @include mq(md, max) { + flex-direction: column; + text-align: left; + height: fit-content; + padding: 0; + border-bottom: none; + } } } } From e9adb8d3f7827c79dc503e63433e45dd57f89bcf Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Fri, 3 Feb 2023 20:23:39 -0300 Subject: [PATCH 14/20] feat: adiciona responsividade mobile --- react/components/Html/styles.css | 11 +++++++++ react/components/Pix-bloco/Pix.tsx | 2 +- styles/css/vtex.flex-layout.css | 5 ++++ styles/css/vtex.product-quantity.css | 9 +++++-- styles/css/vtex.product-summary.css | 24 +++++++++++++++++++ styles/css/vtex.store-components.css | 3 +++ styles/css/vtex.tab-layout.css | 6 +++++ .../sass/pages/product/vtex.flex-layout.scss | 4 ++++ .../pages/product/vtex.product-quantity.scss | 5 ++++ .../pages/product/vtex.product-summary.scss | 20 ++++++++++++++++ .../pages/product/vtex.store-components.scss | 3 +++ .../sass/pages/product/vtex.tab-layout.scss | 5 ++++ styles/sass/utils/_vars.scss | 2 +- 13 files changed, 95 insertions(+), 4 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index f3463a8..944866e 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -17,3 +17,14 @@ width: 100%; } } + +@media only screen and (max-width: 768px) { + [class*="html--buy-button"] { + flex-direction: column; + margin-bottom: 16px; + } + + [class*="html--buy-button"] :global(.vtex-button) { + height: 74px; + } +} diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx index ce55d3f..6aff3ed 100644 --- a/react/components/Pix-bloco/Pix.tsx +++ b/react/components/Pix-bloco/Pix.tsx @@ -29,7 +29,7 @@ const Pix = () => { desconto
-

R${totalValue.toFixed(2)}

+

R${totalValue.toFixed(2).replace(".", ",")}

10 % de desconto

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index de19421..6b102dd 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -43,6 +43,11 @@ :global(.vtex-flex-layout-0-x-flexCol--image-description) { padding-right: 32px; } +@media only screen and (max-width: 1025px) { + :global(.vtex-flex-layout-0-x-flexCol--image-description) { + padding-right: 0; + } +} @media only screen and (max-width: 1025px) { :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 5f0389d..06b8643 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -6,7 +6,12 @@ 1800px + : Big desktop */ /* Media Query M3 */ +/* Fontes */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Cores */ /* Grid breakpoints */ -.numeric-stepper__input { - background: black; +@media only screen and (max-width: 767px) { + .quantitySelectorContainer { + margin-bottom: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index cf24fad..f1c2740 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -16,6 +16,12 @@ max-height: unset; max-width: 314px; } +@media only screen and (max-width: 1025px) { + .imageNormal { + height: 291.2px; + max-width: 291.2px; + } +} .brandName { font-weight: 400; @@ -23,6 +29,12 @@ line-height: 25px; color: #000000; } +@media only screen and (max-width: 1025px) { + .brandName { + font-size: 14px; + line-height: 19px; + } +} .nameContainer { padding: 16px 0 8px 0; @@ -37,6 +49,12 @@ line-height: 19px; color: #bababa; } +@media only screen and (max-width: 1025px) { + .priceContainer .listPriceContainer { + font-size: 12px; + line-height: 16px; + } +} .priceContainer .listPriceContainer::after { content: "por"; } @@ -55,6 +73,12 @@ line-height: 33px; color: #000000; } +@media only screen and (max-width: 1025px) { + .priceContainer .price_sellingPrice { + font-size: 18px; + line-height: 25px; + } +} .priceContainer .sellingPriceContainer { padding: 0 0 32px 0; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 882850c..238f3ad 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -468,6 +468,7 @@ } @media only screen and (max-width: 1025px) { .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; padding-top: 16px; } } @@ -485,6 +486,8 @@ } @media only screen and (max-width: 1025px) { .productDescriptionContainer .productDescriptionText { + font-size: 14px; + line-height: 19px; border-bottom: 1px solid #bfbfbf; padding-bottom: 16px; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 4e3fcbb..e86e4af 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -24,6 +24,12 @@ padding: 16px 0 32px 0; color: #575757; } +@media only screen and (max-width: 1025px) { + .container--structure::after { + font-size: 20px; + line-height: 32px; + } +} .contentContainer { padding: 0 32px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index edf6b53..82b2f97 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -29,6 +29,10 @@ :global(.vtex-flex-layout-0-x-flexCol--image-description) { padding-right: 32px; + + @include mq(md, max) { + padding-right: 0; + } } :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { 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..d243d3f --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,5 @@ +.quantitySelectorContainer { + @include mq(sm, max) { + margin-bottom: 0; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 0a03754..a8ac20e 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -3,6 +3,11 @@ height: 314px; max-height: unset; max-width: 314px; + + @include mq(md, max) { + height: 291.2px; + max-width: 291.2px; + } } .brandName { @@ -11,6 +16,11 @@ line-height: 25px; color: $black; + + @include mq(md, max) { + font-size: 14px; + line-height: 19px; + } } .nameContainer { @@ -27,6 +37,11 @@ color: $gray-700; + @include mq(md, max) { + font-size: 12px; + line-height: 16px; + } + &::after { content: "por"; } @@ -50,6 +65,11 @@ line-height: 33px; color: $black; + + @include mq(md, max) { + font-size: 18px; + line-height: 25px; + } } .sellingPriceContainer { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6643104..1b8ba22 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -561,6 +561,7 @@ margin-top: 16px; } @include mq(md, max) { + font-size: 20px; padding-top: 16px; } } @@ -578,6 +579,8 @@ margin-top: 16px; } @include mq(md, max) { + font-size: 14px; + line-height: 19px; border-bottom: 1px solid $gray-400; padding-bottom: 16px; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4d8c9f4..e641240 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -11,6 +11,11 @@ padding: 16px 0 32px 0; color: $gray-100; + + @include mq(md, max) { + font-size: 20px; + line-height: 32px; + } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 7670dd6..3c6ea2e 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -34,7 +34,7 @@ $color-green: #4caf50; $grid-breakpoints: ( xs: 0, cstm: 400, - mobile: 768px, + sm: 768px, md: 1026px, xl: 1920px ) !default; From 731ec32b45b44bdef102be84933fa07a26cf1137 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Tue, 7 Feb 2023 10:10:21 -0300 Subject: [PATCH 15/20] feat: adiciona testId --- store/blocks/pdp/product.jsonc | 14 +++++++++----- styles/css/vtex.store-components.css | 1 + .../sass/pages/product/vtex.store-components.scss | 3 ++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 735252c..a4516b5 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -60,7 +60,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#images", "product-bookmark", "product-specification-badges" ] @@ -83,14 +83,17 @@ "rowGap": 0 } }, - "flex-layout.row#product-image": { + "html#images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, "product-images": { "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, "showNavigationArrows": false, "showPaginationDots": false, @@ -259,7 +262,8 @@ "product-images#imageDescription": { "props": { "displayMode": "first-image", - "blockClass": "img-description" + "blockClass": "img-description", + "zoomMode": "disabled" } }, @@ -304,7 +308,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "always", "blockClass": "carousel" } }, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 238f3ad..35694a3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -84,6 +84,7 @@ } .carouselGaleryThumbs { + display: block; margin-top: 16px; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1b8ba22..61efec1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -79,7 +79,8 @@ } .carouselGaleryThumbs { -margin-top: 16px; + display: block; + margin-top: 16px; } .productImagesThumb { From 342774490f71026f6a050ba8dec324af682ec5c3 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Tue, 7 Feb 2023 12:19:24 -0300 Subject: [PATCH 16/20] feat: adiciona responsividade imagens tablet --- react/components/Html/styles.css | 8 ++++ store/blocks/pdp/product.jsonc | 31 ++++++++-------- styles/css/vtex.store-components.css | 36 +++++++++++++++++- styles/css/vtex.tab-layout.css | 17 +++++++++ .../pages/product/vtex.store-components.scss | 37 ++++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 16 ++++++++ 6 files changed, 127 insertions(+), 18 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 944866e..56f5fff 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -12,10 +12,18 @@ width: 99.432%; } +[class*="description-container"] { + display: flex; +} + @media only screen and (max-width: 1024px) { [class*="html--buy-button"] :global(.vtex-button) { width: 100%; } + + [class*="description-container"] { + flex-direction: column; + } } @media only screen and (max-width: 768px) { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a4516b5..205725a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,7 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#product", - // "flex-layout.row#description", + // "html#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", // "shelf.relatedProducts", @@ -217,7 +217,7 @@ "tabId": "product1", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, "tab-content.item#product2": { @@ -225,7 +225,7 @@ "tabId": "product2", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, "tab-content.item#product3": { @@ -233,7 +233,7 @@ "tabId": "product3", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, "tab-content.item#product4": { @@ -241,7 +241,7 @@ "tabId": "product4", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, "tab-content.item#product5": { @@ -249,15 +249,15 @@ "tabId": "product5", "blockClass": "content-render" }, - "children": ["flex-layout.row#description"] + "children": ["html#description"] }, - "flex-layout.col#imageDescriptionContainer": { - "props": { - "blockClass": "image-description" - }, - "children": ["product-images#imageDescription"] - }, + // "html#imageDescriptionContainer": { + // "props": { + // "blockClass": "image-description" + // }, + // "children": ["product-images#imageDescription"] + // }, "product-images#imageDescription": { "props": { @@ -267,12 +267,11 @@ } }, - "flex-layout.row#description": { + "html#description": { "props": { - "marginBottom": 7, - "preventHorizontalStretch": true + "blockClass": "description-container" }, - "children": ["flex-layout.col#imageDescriptionContainer", "product-description"] + "children": ["product-images#imageDescription", "product-description"] }, // "flex-layout.row#quantity-buy-button": { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 35694a3..67f83b5 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -306,12 +306,18 @@ :global(.vtex-address-form__field--small) { padding-bottom: 16px; } +@media only screen and (max-width: 767px) { + :global(.vtex-address-form__field--small) { + flex-direction: column; + } +} .shippingTable { display: flex; flex-direction: column; border: none; margin-top: 0; + padding: 0; } .shippingTable .shippingTableHead { display: block; @@ -325,7 +331,6 @@ font-size: 14px; line-height: 19px; text-transform: uppercase; - padding-right: 112px; color: #202020; } @media only screen and (min-width: 1920px) { @@ -358,16 +363,19 @@ .shippingTable .shippingTableCellDeliveryName { width: 23.9263%; padding: 0 0 15px 0; + text-align: initial; } .shippingTable .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableCellDeliveryEstimate { width: 41.7177%; padding: 0 0 15px 0; + text-align: initial; } .shippingTable .shippingTableCellDeliveryPrice, .shippingTable .shippingTableHeadDeliveryPrice { width: 14.7239%; padding: 0 0 15px 0; + text-align: initial; } .shippingTableBody .shippingtableRow { @@ -454,6 +462,15 @@ color: #fff; } +.productDescriptionContainer { + width: 100%; + padding-left: 32px; +} +@media only screen and (max-width: 1025px) { + .productDescriptionContainer { + padding-left: 0; + } +} .productDescriptionContainer .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -494,6 +511,23 @@ } } +:global(.vtex-store-components-3-x-productImagesContainer--first-image) { + max-width: 632px; + width: 100%; + height: 632px; +} +@media only screen and (max-width: 1025px) { + :global(.vtex-store-components-3-x-productImagesContainer--first-image) { + max-width: unset; + height: 944px; + } +} +@media only screen and (max-width: 767px) { + :global(.vtex-store-components-3-x-productImagesContainer--first-image) { + height: unset; + } +} + .newsletter { display: flex; align-items: flex-end; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index e86e4af..0556c5a 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -30,6 +30,23 @@ line-height: 32px; } } +.container--structure :global(.vtex-store-components-3-x-productImageTag) { + width: 100% !important; + max-height: 632px !important; + max-width: 632px !important; +} +@media only screen and (max-width: 1025px) { + .container--structure :global(.vtex-store-components-3-x-productImageTag) { + max-width: unset !important; + max-height: 944px !important; + } +} +@media only screen and (max-width: 767px) { + .container--structure :global(.vtex-store-components-3-x-productImageTag) { + max-width: unset !important; + max-height: unset !important; + } +} .contentContainer { padding: 0 32px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 61efec1..a8a2ce7 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -356,6 +356,10 @@ :global(.vtex-address-form__field--small) { padding-bottom: 16px; + + @include mq(sm, max) { + flex-direction: column; + } } // ENTREGA @@ -365,6 +369,7 @@ flex-direction: column; border: none; margin-top: 0; + padding: 0; .shippingTableHead { display: block; @@ -379,7 +384,6 @@ font-size: 14px; line-height: 19px; text-transform: uppercase; - padding-right: 112px; color: $black-100; @@ -422,18 +426,21 @@ .shippingTableCellDeliveryName { width: 23.9263%; padding: 0 0 15px 0; + text-align: initial; } .shippingTableHeadDeliveryEstimate, .shippingTableCellDeliveryEstimate { width: 41.7177%; padding: 0 0 15px 0; + text-align: initial; } .shippingTableCellDeliveryPrice, .shippingTableHeadDeliveryPrice { width: 14.7239%; padding: 0 0 15px 0; + text-align: initial; } } @@ -548,6 +555,13 @@ // DESCRIÇÃO .productDescriptionContainer { + width: 100%; + padding-left: 32px; + + @include mq(md, max) { + padding-left: 0; + } + .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -586,6 +600,27 @@ padding-bottom: 16px; } } + + + // :global(.vtex-store-components-3-x-productDescriptionContainer) { + // width: 100% !important; + // padding-left: 32px; + // } +} + +:global(.vtex-store-components-3-x-productImagesContainer--first-image) { + max-width: 632px; + width: 100%; + height: 632px; + + @include mq(md, max) { + max-width: unset; + height: 944px; + } + + @include mq(sm, max) { + height: unset; + } } // NEWSLETTER diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e641240..8f43707 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -17,6 +17,22 @@ line-height: 32px; } } + + :global(.vtex-store-components-3-x-productImageTag) { + width: 100% !important; + max-height: 632px !important; + max-width: 632px !important; + + @include mq(md, max) { + max-width: unset !important; + max-height: 944px !important; + } + + @include mq(sm, max) { + max-width: unset !important; + max-height: unset !important; + } + } } .contentContainer { From e049d978c50fb6efa0eef13e1177d34a139c7435 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Thu, 9 Feb 2023 00:42:27 -0300 Subject: [PATCH 17/20] feat: adiciona testID 3 a 14 --- react/components/Html/styles.css | 10 +- store/blocks/minicart.jsonc | 10 ++ store/blocks/pdp/product.jsonc | 132 ++++++++++++++---- styles/css/vtex.flex-layout.css | 9 +- styles/css/vtex.product-summary.css | 6 + styles/css/vtex.store-components.css | 114 ++++++++++++--- styles/css/vtex.tab-layout.css | 6 +- .../sass/pages/product/vtex.flex-layout.scss | 8 +- .../pages/product/vtex.product-summary.scss | 5 + .../pages/product/vtex.store-components.scss | 126 +++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 2 +- styles/sass/utils/_vars.scss | 4 +- 12 files changed, 366 insertions(+), 66 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 56f5fff..2cef6d9 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -9,13 +9,17 @@ background: black; border: none; border-radius: 0; - width: 99.432%; + width: 100%; } [class*="description-container"] { display: flex; } +[class*="add-to-cart-button"] { + width: 100%; +} + @media only screen and (max-width: 1024px) { [class*="html--buy-button"] :global(.vtex-button) { width: 100%; @@ -35,4 +39,8 @@ [class*="html--buy-button"] :global(.vtex-button) { height: 74px; } + + [class*="html--shipping-simulator"] { + padding-bottom: 8px; + } } diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 910f936..ce6a4ec 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -7,6 +7,16 @@ } }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "add-to-cart-button" + }, + "children": [ + "add-to-cart-button" + ] + }, + "minicart.v2": { "props": { "customPixelEventId": "add-to-cart-button" diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 205725a..e59db9b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#product", + "html#tab-layout", // "html#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", @@ -89,6 +89,7 @@ }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { @@ -101,25 +102,27 @@ "thumbnailsOrientation": "horizontal" } }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#identifier", "product-rating-summary", - "flex-layout.row#selling-price", - "product-installments", - "Pix", + // "flex-layout.row#selling-price", + "html#selling-price", + "html#product-installments", + "html#pix", // "product-separator", - "sku-selector", + "html#sku-selector", "html#buy-button", // "flex-layout.row#buy-button", // "product-gifts", "availability-subscriber", - "shipping-simulator" + "html#shipping-simulator" ] }, @@ -127,19 +130,57 @@ "props": { "blockClass": "buy-button" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] }, - "html#product-name": { + "html#identifier": { "props": { - "blockClass": "product-name" + "blockClass": "product-name", + "testId": "product-code" }, "children": [ "product-identifier.product" ] }, + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": [ + "product-selling-price" + ] + }, + + "html#pix": { + "props": { + "testId": "pix-price" + }, + "children": [ + "Pix" + ] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shipping-simulator" + }, + "children": [ + "shipping-simulator" + ] + }, + // DESCRIÇÃO DE PRODUTOS + "html#tab-layout": { + "props": { + "testId": "product-description" + }, + "children": [ + "tab-layout#product" + ] + }, + "tab-layout#product": { "props": { "blockClass": "structure", @@ -274,12 +315,13 @@ "children": ["product-images#imageDescription", "product-description"] }, + // "flex-layout.row#quantity-buy-button": { // "props": { // "blockClass": "quantity-buy-button" // }, // "children": [ - // "product-quantity", + // "html#product-quantity", // "flex-layout.row#buy-button" // ] // }, @@ -287,7 +329,7 @@ // CARROSSEL DE PRODUTOS "list-context.product-list#carousel-list": { "blocks": ["product-summary.shelf#carousel-shelf"], - "children": ["slider-layout#carousel"] + "children": ["html#slider"] }, "product-summary.shelf#carousel-shelf": { @@ -299,12 +341,33 @@ ] }, + // "html#shelf": { + // "props": { + // "testId": "vtex-product-summary" + // }, + // "children": [ + // "product-summary-image", + // "product-summary-name", + // "product-list-price", + // "product-selling-price" + // ] + // }, + + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": [ + "slider-layout#carousel" + ] + }, + "slider-layout#carousel": { "props": { "itemsPerPage": { "desktop": 4, "tablet": 3, - "phone": 1 + "phone": 2 }, "infinite": true, "showNavigationArrows": "always", @@ -313,19 +376,23 @@ }, - "flex-layout.row#product-name": { + "html#product-name": { "props": { - "marginBottom": 3 + "testId": "product-name" }, "children": ["vtex.store-components:product-name"] }, - "sku-selector": { + "html#sku-selector": { "props": { "variationsSpacing": 3, "showValueNameForImageVariation": true, - "blockClass": "sku-size" - } + "blockClass": "sku-size", + "testId": "sku-selector" + }, + "children": [ + "sku-selector" + ] }, "flex-layout.row#buy-button": { @@ -335,7 +402,7 @@ "width": "73%", "blockClass": "buy-button-row" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] }, "flex-layout.row#product-availability": { @@ -358,10 +425,10 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#identifier", "flex-layout.row#availability", - "sku-selector" + "html#sku-selector" ] }, "flex-layout.row#availability": { @@ -382,6 +449,15 @@ } }, + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": [ + "product-quantity" + ] + }, + "product-quantity": { "props": { "size": "large", @@ -390,11 +466,15 @@ } }, - "product-installments": { + "html#product-installments": { "props": { "installmentsCriteria": "max-quality-without-interest", - "blockClass": "fees" - } + "blockClass": "fees", + "testId": "product-installments" + }, + "children": [ + "product-installments" + ] }, "newsletter": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 6b102dd..722e326 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -18,12 +18,15 @@ } .stretchChildrenWidth { + padding: 0 !important; margin: 0; + width: 100% !important; + max-width: 664px !important; } @media only screen and (max-width: 1025px) { .stretchChildrenWidth { + max-width: unset !important; width: 100% !important; - padding: 0 !important; } } @@ -49,8 +52,12 @@ } } +:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { + gap: 32px; +} @media only screen and (max-width: 1025px) { :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { flex-direction: column; + gap: 0; } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index f1c2740..1d34f91 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -22,6 +22,12 @@ max-width: 291.2px; } } +@media only screen and (max-width: 767px) { + .imageNormal { + height: 124.8px; + width: 100%; + } +} .brandName { font-weight: 400; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 67f83b5..173a5f8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -70,7 +70,7 @@ } .productImage .productImageTag { - width: 103% !important; + width: 100% !important; height: 100%; max-height: 664px !important; object-fit: contain; @@ -83,12 +83,30 @@ } } +.productImagesGallerySlide { + max-width: 664px !important; + width: 100% !important; +} +@media only screen and (max-width: 1025px) { + .productImagesGallerySlide { + max-width: none !important; + width: none !important; + } +} + .carouselGaleryThumbs { display: block; margin-top: 16px; + margin-bottom: 16px; +} +@media only screen and (max-width: 1025px) { + .carouselGaleryThumbs { + margin-bottom: 32px; + } } .productImagesThumb { + height: 90px !important; width: unset !important; margin-bottom: 0 !important; margin-right: 16px; @@ -171,6 +189,9 @@ bottom: 3px; transform: rotateY(180deg); } +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemImageValue { + max-width: 100%; +} .skuSelectorContainer .skuSelectorItem--selected .skuSelectorItemTextValue { font-weight: 400; font-size: 14px; @@ -237,7 +258,15 @@ margin: 0; } +:global(.vtex-store-components-3-x-skuSelectorSubcontainer) .diagonalCross { + top: 7px; + right: 2px; + left: 1px; + bottom: 6px; +} + .shippingContainer { + position: relative; display: flex; } .shippingContainer :global(.vtex-address-form__postalCode) { @@ -248,6 +277,16 @@ height: 49px; border-radius: 0; } +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-input-prefix__group) { + width: 100%; + } +} +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + display: none; + } +} .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { position: relative; left: 32px; @@ -260,6 +299,15 @@ display: flex; align-items: center; } +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + margin-top: 0; + left: auto; + right: 0; + bottom: 0; + } +} .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { font-weight: 400; font-size: 12px; @@ -282,6 +330,12 @@ background: #000000; cursor: pointer; } +@media only screen and (max-width: 767px) { + .shippingContainer :global(.vtex-button) { + min-width: 49px; + right: 0; + } +} .shippingContainer :global(.vtex-button)::after { content: "OK"; font-weight: 600; @@ -309,6 +363,8 @@ @media only screen and (max-width: 767px) { :global(.vtex-address-form__field--small) { flex-direction: column; + width: 100%; + padding-bottom: 24px; } } @@ -326,6 +382,11 @@ display: flex; flex-direction: row; } +@media only screen and (max-width: 399px) { + .shippingTable .shippingTableRow { + padding-top: 8px; + } +} .shippingTable .shippingTableRow .shippingTableHeadDeliveryName { font-weight: 400; font-size: 14px; @@ -338,6 +399,12 @@ padding-right: 122px; } } +@media only screen and (max-width: 399px) { + .shippingTable .shippingTableRow .shippingTableHeadDeliveryName { + width: auto; + margin-right: 32px; + } +} .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { display: flex; order: 3; @@ -347,11 +414,23 @@ text-transform: uppercase; color: #202020; } +@media only screen and (max-width: 399px) { + .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { + width: auto; + margin-right: 32px; + } +} .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { display: flex; order: 2; font-size: 0; } +@media only screen and (max-width: 399px) { + .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { + width: auto; + margin-right: 32px; + } +} .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after { content: "FRETE"; font-weight: 400; @@ -398,6 +477,17 @@ .shippingTableBody .shippingTableRadioBtn { display: none; } +@media only screen and (max-width: 399px) { + .shippingTableBody .shippingTableCellDeliveryName { + width: 82px; + margin-right: 20px; + } +} +@media only screen and (max-width: 399px) { + .shippingTableBody .shippingTableCellDeliveryPrice { + margin-right: 32px; + } +} .subscriberContainer .title { font-size: 0; @@ -431,6 +521,11 @@ gap: 8px; margin-top: 15px; } +@media only screen and (max-width: 1025px) { + .subscriberContainer .form .content { + max-width: unset; + } +} .subscriberContainer .form .content .inputName { grid-area: nome; margin-bottom: 0; @@ -511,23 +606,6 @@ } } -:global(.vtex-store-components-3-x-productImagesContainer--first-image) { - max-width: 632px; - width: 100%; - height: 632px; -} -@media only screen and (max-width: 1025px) { - :global(.vtex-store-components-3-x-productImagesContainer--first-image) { - max-width: unset; - height: 944px; - } -} -@media only screen and (max-width: 767px) { - :global(.vtex-store-components-3-x-productImagesContainer--first-image) { - height: unset; - } -} - .newsletter { display: flex; align-items: flex-end; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0556c5a..0130c89 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -30,19 +30,19 @@ line-height: 32px; } } -.container--structure :global(.vtex-store-components-3-x-productImageTag) { +.container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { width: 100% !important; max-height: 632px !important; max-width: 632px !important; } @media only screen and (max-width: 1025px) { - .container--structure :global(.vtex-store-components-3-x-productImageTag) { + .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { max-width: unset !important; max-height: 944px !important; } } @media only screen and (max-width: 767px) { - .container--structure :global(.vtex-store-components-3-x-productImageTag) { + .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { max-width: unset !important; max-height: unset !important; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 82b2f97..a6db590 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -6,11 +6,14 @@ } .stretchChildrenWidth { + padding: 0 !important; margin: 0; + width: 100% !important; + max-width: 664px !important; @include mq(md, max) { + max-width: unset !important; width: 100% !important; - padding: 0 !important; } } @@ -36,7 +39,10 @@ } :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { + gap: 32px; + @include mq(md, max) { flex-direction: column; + gap: 0; } } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index a8ac20e..63b4fbb 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -8,6 +8,11 @@ height: 291.2px; max-width: 291.2px; } + + @include mq(sm, max) { + height: 124.8px; + width: 100%; + } } .brandName { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index a8a2ce7..e4edfcd 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -62,7 +62,7 @@ .productImage { .productImageTag { - width: 103% !important; + width: 100% !important; height: 100%; max-height: 664px !important; object-fit: contain; @@ -78,12 +78,28 @@ } } +.productImagesGallerySlide { + max-width: 664px !important; + width: 100% !important; + + @include mq(md, max) { + max-width: none !important; + width: none !important; + } +} + .carouselGaleryThumbs { display: block; margin-top: 16px; + margin-bottom: 16px; + + @include mq(md, max) { + margin-bottom: 32px; + } } .productImagesThumb { + height: 90px !important; width: unset !important; margin-bottom: 0 !important; margin-right: 16px; @@ -187,6 +203,10 @@ bottom: 3px; transform: rotateY(180deg); } + + .skuSelectorItemImageValue { + max-width: 100%; + } } .skuSelectorItem--selected { @@ -271,8 +291,27 @@ } } +:global(.vtex-store-components-3-x-skuSelectorSubcontainer) { + .diagonalCross { + top: 7px; + right: 2px; + left: 1px; + bottom: 6px; + } +} + +// :global(.vtex-store-components-3-x-skuSelectorItemImage) { +// .diagonalCross { +// top: 8px; +// right: 3px; +// left: 3px; +// bottom: 7px; +// } +// } + // CEP .shippingContainer { + position: relative; display: flex; :global(.vtex-address-form__postalCode) { @@ -283,6 +322,16 @@ width: 280px; height: 49px; border-radius: 0; + + @include mq(sm, max) { + width: 100%; + } + + :global(.vtex-input__suffix) { + @include mq(sm, max) { + display: none; + } + } } :global(.vtex-address-form__postalCode-forgottenURL) { @@ -299,6 +348,14 @@ display: flex; align-items: center; + @include mq(sm, max) { + position: absolute; + margin-top: 0; + left: auto; + right: 0; + bottom: 0; + } + :last-child { font-weight: 400; font-size: 12px; @@ -326,6 +383,11 @@ background: $black; cursor: pointer; + @include mq(sm, max) { + min-width: 49px; + right: 0; + } + &::after { content: "OK"; font-weight: 600; @@ -359,6 +421,8 @@ @include mq(sm, max) { flex-direction: column; + width: 100%; + padding-bottom: 24px; } } @@ -379,6 +443,10 @@ display: flex; flex-direction: row; + @include mq(xs, max) { + padding-top: 8px; + } + .shippingTableHeadDeliveryName { font-weight: 400; font-size: 14px; @@ -390,6 +458,11 @@ @include mq(xl, min) { padding-right: 122px; } + + @include mq(xs, max) { + width: auto; + margin-right: 32px; + } } .shippingTableHeadDeliveryEstimate { @@ -402,6 +475,11 @@ text-transform: uppercase; color: $black-100; + + @include mq(xs, max) { + width: auto; + margin-right: 32px; + } } .shippingTableHeadDeliveryPrice { @@ -410,6 +488,11 @@ font-size: 0; + @include mq(xs, max) { + width: auto; + margin-right: 32px; + } + &::after { content: "FRETE"; @@ -469,6 +552,19 @@ .shippingTableRadioBtn { display: none; } + + .shippingTableCellDeliveryName { + @include mq(xs, max) { + width: 82px; + margin-right: 20px; + } + } + + .shippingTableCellDeliveryPrice { + @include mq(xs, max) { + margin-right: 32px; + } + } } // PRODUTO INDISPONÍVEL @@ -513,6 +609,10 @@ gap: 8px; margin-top: 15px; + @include mq(md, max) { + max-width: unset; + } + .inputName { grid-area: nome; margin-bottom: 0; @@ -608,20 +708,20 @@ // } } -:global(.vtex-store-components-3-x-productImagesContainer--first-image) { - max-width: 632px; - width: 100%; - height: 632px; +// :global(.vtex-store-components-3-x-productImagesContainer--first-image) { +// max-width: 632px; +// width: 100%; +// height: 632px; - @include mq(md, max) { - max-width: unset; - height: 944px; - } +// @include mq(md, max) { +// max-width: unset; +// height: 944px; +// } - @include mq(sm, max) { - height: unset; - } -} +// @include mq(sm, max) { +// height: unset; +// } +// } // NEWSLETTER .newsletter { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 8f43707..ada818a 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -18,7 +18,7 @@ } } - :global(.vtex-store-components-3-x-productImageTag) { + :global(.vtex-store-components-3-x-productImageTag--img-description--main) { width: 100% !important; max-height: 632px !important; max-width: 632px !important; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 3c6ea2e..f987a63 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -32,8 +32,8 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, + xss: 0, + xs: 400px, sm: 768px, md: 1026px, xl: 1920px From fb773d6f672372265c0fc2d536c50e98d31b9ace Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Thu, 9 Feb 2023 12:17:44 -0300 Subject: [PATCH 18/20] feat: adiciona responsividade mobile --- styles/css/vtex.slider-layout.css | 21 +++++++++ styles/css/vtex.store-components.css | 43 +++++++++++++++++-- styles/css/vtex.tab-layout.css | 3 +- .../pages/product/vtex.slider-layout.scss | 17 ++++++++ .../pages/product/vtex.store-components.scss | 37 ++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 3 +- 6 files changed, 112 insertions(+), 12 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 0cbad80..d1c8ac2 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -14,6 +14,17 @@ margin-bottom: 64px; padding: 0 67px; } +@media only screen and (max-width: 1025px) { + .sliderLayoutContainer { + padding: 0 63px; + } +} +@media only screen and (max-width: 767px) { + .sliderLayoutContainer { + padding: 0 59px; + margin-bottom: 32px; + } +} .sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderTrack--carousel) { gap: 16px; } @@ -51,6 +62,11 @@ content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); padding: 0 40px 0 0; } +@media only screen and (max-width: 767px) { + .sliderRightArrow::after { + padding: 0 48px 0 0; + } +} .sliderLeftArrow { visibility: hidden; @@ -64,4 +80,9 @@ .sliderLeftArrow::before { display: block; } +} +@media only screen and (max-width: 767px) { + .sliderLeftArrow::before { + padding: 0 0 0 48px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 173a5f8..3688634 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -402,7 +402,7 @@ @media only screen and (max-width: 399px) { .shippingTable .shippingTableRow .shippingTableHeadDeliveryName { width: auto; - margin-right: 32px; + margin-right: 48px; } } .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { @@ -428,7 +428,7 @@ @media only screen and (max-width: 399px) { .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { width: auto; - margin-right: 32px; + margin-right: 40px; } } .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after { @@ -479,12 +479,13 @@ } @media only screen and (max-width: 399px) { .shippingTableBody .shippingTableCellDeliveryName { - width: 82px; - margin-right: 20px; + width: 97px; + margin-right: 21px; } } @media only screen and (max-width: 399px) { .shippingTableBody .shippingTableCellDeliveryPrice { + width: 55px; margin-right: 32px; } } @@ -614,6 +615,11 @@ background: #000000; color: #fff; } +@media only screen and (max-width: 767px) { + .newsletter { + height: 220px; + } +} .newsletter .container { display: flex; justify-content: center; @@ -631,6 +637,11 @@ max-width: 1024px; } } +@media only screen and (max-width: 767px) { + .newsletter .container .form { + padding-bottom: 32px; + } +} .newsletter .container .form .label { display: flex; flex-direction: column; @@ -647,11 +658,23 @@ line-height: 25px; color: #929292; } +@media only screen and (max-width: 767px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} @media only screen and (max-width: 1025px) { .newsletter :global(.vtex-store-components-3-x-inputGroup) { padding: 16px 16px 0; } } +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-store-components-3-x-inputGroup) { + display: flex; + padding: 0; + } +} .newsletter .buttonContainer { padding: 0; } @@ -665,6 +688,12 @@ line-height: 19px; color: #fff; } +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-button) { + font-size: 14px; + line-height: 19px; + } +} .newsletter :global(.vtex-input-prefix__group) { border: none; border-radius: 0; @@ -677,4 +706,10 @@ font-size: 18px; line-height: 25px; color: #929292; +} +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0130c89..9db8182 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -24,10 +24,9 @@ padding: 16px 0 32px 0; color: #575757; } -@media only screen and (max-width: 1025px) { +@media only screen and (max-width: 767px) { .container--structure::after { font-size: 20px; - line-height: 32px; } } .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 575d622..1312782 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -2,6 +2,15 @@ margin-bottom: 64px; padding: 0 67px; + @include mq(md, max) { + padding: 0 63px; + } + + @include mq(sm, max) { + padding: 0 59px; + margin-bottom: 32px; + } + :global(.vtex-slider-layout-0-x-sliderTrack--carousel) { gap: 16px; } @@ -40,6 +49,10 @@ visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); padding: 0 40px 0 0; + + @include mq(sm, max) { + padding: 0 48px 0 0; + } } } @@ -54,5 +67,9 @@ visibility: hidden; @include mq(md, max) { display: block; } + + @include mq(sm, max) { + padding: 0 0 0 48px; + } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e4edfcd..3ce4f72 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -461,7 +461,7 @@ @include mq(xs, max) { width: auto; - margin-right: 32px; + margin-right: 48px; } } @@ -490,7 +490,7 @@ @include mq(xs, max) { width: auto; - margin-right: 32px; + margin-right: 40px; } &::after { @@ -555,13 +555,14 @@ .shippingTableCellDeliveryName { @include mq(xs, max) { - width: 82px; - margin-right: 20px; + width: 97px; + margin-right: 21px; } } .shippingTableCellDeliveryPrice { @include mq(xs, max) { + width: 55px; margin-right: 32px; } } @@ -733,6 +734,10 @@ background: $black; color: $white; + @include mq(sm, max) { + height: 220px; + } + .container { display: flex; justify-content: center; @@ -751,6 +756,10 @@ max-width: 1024px; } + @include mq(sm, max) { + padding-bottom: 32px; + } + .label { display: flex; flex-direction: column; @@ -768,6 +777,11 @@ line-height: 25px; color: $gray; + + @include mq(sm, max) { + font-size: 16px; + line-height: 22px; + } } } } @@ -777,6 +791,11 @@ @include mq(md, max) { padding: 16px 16px 0; } + + @include mq(sm, max) { + display: flex; + padding: 0; + } } .buttonContainer { @@ -793,6 +812,11 @@ line-height: 19px; color: $white; + + @include mq(sm, max) { + font-size: 14px; + line-height: 19px; + } } :global(.vtex-input-prefix__group) { @@ -809,5 +833,10 @@ line-height: 25px; color: $gray; + + @include mq(sm, max) { + font-size: 12px; + line-height: 16px; + } } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index ada818a..199df68 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -12,9 +12,8 @@ color: $gray-100; - @include mq(md, max) { + @include mq(sm, max) { font-size: 20px; - line-height: 32px; } } From e957f88ecb049ca245715299eb6452060a96c198 Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Thu, 9 Feb 2023 14:07:51 -0300 Subject: [PATCH 19/20] feat: adiciona responsividade 2560px --- react/components/Html/styles.css | 12 ++++++++ store/blocks/pdp/product.jsonc | 3 +- styles/css/vtex.breadcrumb.css | 5 ++++ styles/css/vtex.flex-layout.css | 7 ++++- styles/css/vtex.product-summary.css | 1 + styles/css/vtex.slider-layout.css | 22 +++++---------- styles/css/vtex.store-components.css | 11 ++++---- styles/css/vtex.tab-layout.css | 13 ++++++--- .../sass/pages/product/vtex.breadcrumb.scss | 4 +++ .../sass/pages/product/vtex.flex-layout.scss | 6 +++- .../pages/product/vtex.product-summary.scss | 6 ++++ .../pages/product/vtex.slider-layout.scss | 28 +++++++++++-------- .../pages/product/vtex.store-components.scss | 14 ++++------ .../sass/pages/product/vtex.tab-layout.scss | 12 +++++--- 14 files changed, 93 insertions(+), 51 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 2cef6d9..6384192 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -14,12 +14,17 @@ [class*="description-container"] { display: flex; + gap: 32px; } [class*="add-to-cart-button"] { width: 100%; } +[class*="html--product-summary"] { + padding: 0 40px; +} + @media only screen and (max-width: 1024px) { [class*="html--buy-button"] :global(.vtex-button) { width: 100%; @@ -27,6 +32,7 @@ [class*="description-container"] { flex-direction: column; + gap: 0; } } @@ -44,3 +50,9 @@ padding-bottom: 8px; } } + +@media only screen and (min-width: 1920px) { + [class*="html--product-summary"] { + padding: 0 360px; + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e59db9b..999c3ec 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -355,7 +355,8 @@ "html#slider": { "props": { - "testId": "product-summary-list" + "testId": "product-summary-list", + "blockClass": "product-summary" }, "children": [ "slider-layout#carousel" diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 7ba6a2a..697e686 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,6 +13,11 @@ .container { padding: 0 40px 16px; } +@media only screen and (min-width: 1920px) { + .container { + padding: 0 360px 16px; + } +} .homeIcon, .homeLink { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 722e326..9898f0c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -21,7 +21,7 @@ padding: 0 !important; margin: 0; width: 100% !important; - max-width: 664px !important; + max-width: unset !important; } @media only screen and (max-width: 1025px) { .stretchChildrenWidth { @@ -37,6 +37,11 @@ :global(.vtex-flex-layout-0-x-flexRow--container-main-content) { padding: 0 40px; } +@media only screen and (min-width: 1920px) { + :global(.vtex-flex-layout-0-x-flexRow--container-main-content) { + padding: 0 360px; + } +} :global(.vtex-flex-layout-0-x-flexRowContent) { padding: 0; diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 1d34f91..0e7e548 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -15,6 +15,7 @@ height: 314px; max-height: unset; max-width: 314px; + object-fit: contain; } @media only screen and (max-width: 1025px) { .imageNormal { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index d1c8ac2..6e813b8 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -12,16 +12,16 @@ /* Grid breakpoints */ .sliderLayoutContainer { margin-bottom: 64px; - padding: 0 67px; + padding: 0 16px; } @media only screen and (max-width: 1025px) { .sliderLayoutContainer { - padding: 0 63px; + padding: 0 12px; } } @media only screen and (max-width: 767px) { .sliderLayoutContainer { - padding: 0 59px; + padding: 0 8px; margin-bottom: 32px; } } @@ -56,33 +56,25 @@ .sliderRightArrow { visibility: hidden; + padding: 0; + margin: 0; } .sliderRightArrow::after { visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); - padding: 0 40px 0 0; -} -@media only screen and (max-width: 767px) { - .sliderRightArrow::after { - padding: 0 48px 0 0; - } } .sliderLeftArrow { visibility: hidden; + padding: 0; + margin: 0; } .sliderLeftArrow::before { visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); - padding: 0 0 0 40px; } @media only screen and (max-width: 1025px) { .sliderLeftArrow::before { display: block; } -} -@media only screen and (max-width: 767px) { - .sliderLeftArrow::before { - padding: 0 0 0 48px; - } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3688634..2ad95ba 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,6 +13,8 @@ /* Grid breakpoints */ .container { padding: 0; + max-width: 100% !important; + width: 100%; } @media only screen and (min-width: 1920px) { .container { @@ -72,9 +74,9 @@ .productImage .productImageTag { width: 100% !important; height: 100%; - max-height: 664px !important; + max-height: unset !important; object-fit: contain; - max-width: 664px !important; + max-width: 100% !important; } @media only screen and (max-width: 1025px) { .productImage .productImageTag { @@ -84,7 +86,7 @@ } .productImagesGallerySlide { - max-width: 664px !important; + max-width: 100% !important; width: 100% !important; } @media only screen and (max-width: 1025px) { @@ -238,7 +240,7 @@ } .productImageTag { - max-width: 664px; + max-width: 100%; } @media only screen and (max-width: 1025px) { .productImageTag { @@ -560,7 +562,6 @@ .productDescriptionContainer { width: 100%; - padding-left: 32px; } @media only screen and (max-width: 1025px) { .productDescriptionContainer { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 9db8182..1b96dcc 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -14,6 +14,11 @@ .container--structure { padding: 0 40px; } +@media only screen and (min-width: 1920px) { + .container--structure { + padding: 0 360px; + } +} .container--structure::after { content: "Você também pode gostar:"; display: block; @@ -31,8 +36,8 @@ } .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { width: 100% !important; - max-height: 632px !important; - max-width: 632px !important; + max-height: 100% !important; + max-width: 100% !important; } @media only screen and (max-width: 1025px) { .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { @@ -108,7 +113,7 @@ @media only screen and (min-width: 1920px) { .listContainer .listItem :global(.vtex-button__label) { font-size: 24px; - line-height: 24px; + line-height: 26px; } } @media only screen and (max-width: 1025px) { @@ -118,7 +123,7 @@ height: fit-content; padding: 0 !important; font-size: 18px; - line-height: 18px; + line-height: 38px; } } @media only screen and (max-width: 1025px) { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 378f809..b5caa69 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,5 +1,9 @@ .container { padding: 0 40px 16px ; + + @include mq(xl, min) { + padding: 0 360px 16px; + } } .homeIcon, diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index a6db590..61d7ea8 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -9,7 +9,7 @@ padding: 0 !important; margin: 0; width: 100% !important; - max-width: 664px !important; + max-width: unset !important; @include mq(md, max) { max-width: unset !important; @@ -23,6 +23,10 @@ :global(.vtex-flex-layout-0-x-flexRow--container-main-content) { padding: 0 40px; + + @include mq(xl, min) { + padding: 0 360px; + } } :global(.vtex-flex-layout-0-x-flexRowContent) { diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 63b4fbb..23edb64 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,8 +1,14 @@ +// .imageContainer { +// width: 314px; +// height: 314px; +// } + .imageNormal { width: 105%; height: 314px; max-height: unset; max-width: 314px; + object-fit: contain; @include mq(md, max) { height: 291.2px; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 1312782..9cd6442 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,13 +1,13 @@ .sliderLayoutContainer { margin-bottom: 64px; - padding: 0 67px; + padding: 0 16px; @include mq(md, max) { - padding: 0 63px; + padding: 0 12px; } @include mq(sm, max) { - padding: 0 59px; + padding: 0 8px; margin-bottom: 32px; } @@ -44,32 +44,36 @@ .sliderRightArrow { visibility: hidden; + padding: 0; + margin: 0; &::after { visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); - padding: 0 40px 0 0; - @include mq(sm, max) { - padding: 0 48px 0 0; - } + + // @include mq(sm, max) { + // padding: 0 48px 0 0; + // } } } .sliderLeftArrow { -visibility: hidden; + visibility: hidden; + padding: 0; + margin: 0; &::before { visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/left-arrow-vitor-soares.png); - padding: 0 0 0 40px; + @include mq(md, max) { display: block; } - @include mq(sm, max) { - padding: 0 0 0 48px; - } + // @include mq(sm, max) { + // padding: 0 0 0 48px; + // } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3ce4f72..e0cc20d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,5 +1,7 @@ .container { padding: 0; + max-width: 100% !important; + width: 100%; @include mq(xl, min) { margin: 0 !important; @@ -64,22 +66,19 @@ .productImageTag { width: 100% !important; height: 100%; - max-height: 664px !important; + max-height: unset !important; object-fit: contain; - max-width: 664px !important; + max-width: 100% !important; @include mq(md, max) { max-height: 100% !important; max-width: 100% !important; } - - // width: unset !important; - // max-height: unset !important; } } .productImagesGallerySlide { - max-width: 664px !important; + max-width: 100% !important; width: 100% !important; @include mq(md, max) { @@ -269,7 +268,7 @@ } .productImageTag { - max-width: 664px; + max-width: 100%; @include mq(md, max) { max-width: 100%; @@ -657,7 +656,6 @@ // DESCRIÇÃO .productDescriptionContainer { width: 100%; - padding-left: 32px; @include mq(md, max) { padding-left: 0; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 199df68..634e43b 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,6 +1,10 @@ .container--structure { padding: 0 40px; + @include mq(xl, min) { + padding: 0 360px; + } + &::after { content: "Você também pode gostar:"; display: block; @@ -19,8 +23,8 @@ :global(.vtex-store-components-3-x-productImageTag--img-description--main) { width: 100% !important; - max-height: 632px !important; - max-width: 632px !important; + max-height: 100% !important; + max-width: 100% !important; @include mq(md, max) { max-width: unset !important; @@ -92,7 +96,7 @@ @include mq(xl, min) { font-size: 24px; - line-height: 24px; + line-height: 26px; } @include mq(md, max) { @@ -101,7 +105,7 @@ height: fit-content; padding: 0 !important; font-size: 18px; - line-height: 18px; + line-height: 38px; } } } From 7d8d3568e6cfb3ea68ea96e6bfee3cfeacdba94d Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Thu, 9 Feb 2023 14:43:48 -0300 Subject: [PATCH 20/20] =?UTF-8?q?feat:=20adiciona=20testID=2015=20e=20esti?= =?UTF-8?q?liza=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 34 +++++++++++-------- styles/css/vtex.product-price.css | 26 ++++++++++++++ styles/css/vtex.product-summary.css | 4 +++ .../pages/product/vtex.product-price.scss | 29 ++++++++++++++++ .../pages/product/vtex.product-summary.scss | 4 +++ 5 files changed, 82 insertions(+), 15 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 999c3ec..65fd3f5 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -334,24 +334,28 @@ "product-summary.shelf#carousel-shelf": { "children": [ - "product-summary-image", - "product-summary-name", - "product-summary-space", - "product-summary-price" + "html#shelf" ] }, - // "html#shelf": { - // "props": { - // "testId": "vtex-product-summary" - // }, - // "children": [ - // "product-summary-image", - // "product-summary-name", - // "product-list-price", - // "product-selling-price" - // ] - // }, + "html#shelf": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-space", + "product-list-price", + "product-selling-price" + ] + }, + + "product-list-price": { + "props": { + "message": "de {listPriceValue} por" + } + }, "html#slider": { "props": { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index a59cc19..4129fa2 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -45,4 +45,30 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.listPrice { + display: block; + font-size: 14px; + line-height: 19px; + margin-bottom: 8px; + color: #bababa; +} +@media only screen and (max-width: 1025px) { + .listPrice { + font-size: 12px; + line-height: 16px; + } +} + +:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) .sellingPriceValue { + font-size: 24px; + line-height: 33px; + color: #000000; +} +@media only screen and (max-width: 1025px) { + :global(.vtex-product-price-1-x-sellingPrice--hasListPrice) .sellingPriceValue { + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0e7e548..79622dd 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -92,4 +92,8 @@ .element { padding: 0; +} + +:global(.vtex-product-summary-2-x-clearLink) { + padding-bottom: 32px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index a4c9e8f..974cf26 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -43,3 +43,32 @@ } } } + +// CARROSSEL +.listPrice { + display: block; + font-size: 14px; + line-height: 19px; + margin-bottom: 8px; + + color: $gray-700; + + @include mq(md, max) { + font-size: 12px; + line-height: 16px; + } +} + +:global(.vtex-product-price-1-x-sellingPrice--hasListPrice) { + .sellingPriceValue { + font-size: 24px; + line-height: 33px; + + color: $black; + + @include mq(md, max) { + font-size: 18px; + line-height: 25px; + } + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 23edb64..444f2c8 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -91,3 +91,7 @@ .element { padding: 0; } + +:global(.vtex-product-summary-2-x-clearLink) { + padding-bottom: 32px; +}