From 7971f1888c4d74412db3f01f478000c8e1691168 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 26 Jan 2023 07:16:46 -0300 Subject: [PATCH 01/33] =?UTF-8?q?feat:=20faz=20a=20estiliza=C3=A7=C3=A3o?= =?UTF-8?q?=20do=20bloco=20=20breadcrumb?= 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 | 3 ++ styles/configs/font-faces.css | 5 +++ styles/configs/style.json | 24 ++++++------- styles/css/agenciamagma.store-theme.css | 4 +-- styles/css/vtex.breadcrumb.css | 34 +++++++++++++++++++ .../product/agenciamagma.store-theme.scss | 5 ++- .../sass/pages/product/vtex.breadcrumb.scss | 32 +++++++++++++++++ 8 files changed, 92 insertions(+), 17 deletions(-) create mode 100644 react/components/Html/styles.css create mode 100644 styles/configs/font-faces.css create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..5f9d79c 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,8 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css"; + const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..6b78ad6 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,3 @@ +[class*="html--pdp-breadcrumb"] { + background-color: #FFFFFF; +} diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..dcda541 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,5 @@ + +@font-face { + font-family: 'Open Sans', sans-serif; + src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap'); +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..2f02809 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 5e37ba5..395ab15 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: #FFFFFF; } .html--pdp-breadcrumb { - background-color: green; + background-color: #FFFFFF; } \ 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..18b33b9 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,34 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.container { + padding: 0 40px; +} +.container .homeIcon { + display: none; +} +.container .homeLink::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .link, +.container .term { + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .link { + color: #929292; +} +.container .term { + color: #000000; +} \ 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..c4c4c7c 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ .html { - background-color: red; + background-color: #FFFFFF; } .html--pdp-breadcrumb { - background-color: green; + background-color: #FFFFFF; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..286ae2b --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,32 @@ +.container { + padding: 0 40px; + + .homeIcon { + display: none; + } + + .homeLink { + &::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + + .link, + .term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .link { + color: #929292; + } + + .term { + color: #000000; + } +} -- 2.34.1 From 681b3f85341bb8b0f839ec506be050ec8ccfb276 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 27 Jan 2023 10:46:17 -0300 Subject: [PATCH 02/33] =?UTF-8?q?feat:=20faz=20a=20estiliza=C3=A7=C3=A3o?= =?UTF-8?q?=20do=20bloco=20product-images?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 24 ++-- styles/css/vtex.breadcrumb.css | 1 + styles/css/vtex.flex-layout.css | 112 +++--------------- styles/css/vtex.store-components.css | 54 +++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 1 + .../sass/pages/product/vtex.flex-layout.scss | 9 ++ .../pages/product/vtex.store-components.scss | 44 ++++++- 7 files changed, 139 insertions(+), 106 deletions(-) create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..33db0f8 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#product-image", "product-bookmark", "product-specification-badges" ] @@ -78,26 +78,32 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", "rowGap": 0 } }, - "flex-layout.row#product-image": { + "html#product-image": { + "props":{ + "tag": "div", + "testId": "product-images", + "blockClass": "product-image" + }, "children": ["product-images"] }, "product-images": { "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true + "aspectRatio": "1:1", + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal", + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailAspectRatio": "1:1" } }, "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "blockClass": "right-col" }, "children": [ "flex-layout.row#product-name", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 18b33b9..3042684 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,6 +9,7 @@ /* Grid breakpoints */ .container { padding: 0 40px; + margin-bottom: 16px; } .container .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..e989d37 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,18 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.flexRowContent { + padding-top: 0; + padding-bottom: 0; + margin: 0; } -@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; -} +.stretchChildrenWidth { + width: 100% !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..470eb35 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,58 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.container { + padding: 0 40px; +} + +.thumbImg, +.figure, +.carouselThumbBorder { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: 90px !important; + height: 90px !important; + margin: 0 16px 0 0; +} + +.productImageTag, +.productImageTag--main { + max-width: 100%; + max-height: 100% !important; + margin-bottom: 16px; +} + +.carouselGaleryThumbs, +.carouselGaleryCursor, +.carouselContainer, +.productImagesContainer, +.productImagesContainer--carousel, +.content { + max-width: 664px; + margin: 0; +} +@media screen and (min-width: 1920px) { + .carouselGaleryThumbs, + .carouselGaleryCursor, + .carouselContainer, + .productImagesContainer, + .productImagesContainer--carousel, + .content { + max-width: 904px; + } +} +@media screen and ((min-width: 1025px) and (max-width: 1200px)) { + .carouselGaleryThumbs, + .carouselGaleryCursor, + .carouselContainer, + .productImagesContainer, + .productImagesContainer--carousel, + .content { + max-width: 500px; + } } \ 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 286ae2b..111fa01 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,5 +1,6 @@ .container { padding: 0 40px; + margin-bottom: 16px; .homeIcon { 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..287fa78 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,9 @@ +.flexRowContent { + padding-top: 0; + padding-bottom: 0; + margin: 0; +} + +.stretchChildrenWidth { + width: 100% !important; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..331c289 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,45 @@ .newsletter{ background: red; -} \ No newline at end of file +} + +.container { + padding: 0 40px; +} + +.thumbImg, +.figure, +.carouselThumbBorder { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: 90px !important; + height: 90px !important; + margin: 0 16px 0 0; +} + +.productImageTag, +.productImageTag--main { + max-width: 100%; + max-height: 100% !important; + margin-bottom: 16px; +} + +.carouselGaleryThumbs, +.carouselGaleryCursor, +.carouselContainer, +.productImagesContainer, +.productImagesContainer--carousel, +.content { + max-width: 664px; + margin: 0; + + @media screen and (min-width: 1920px) { + max-width: 904px; + } + + @media screen and ((min-width: 1025px) and (max-width: 1200px)) { + max-width: 500px; + } +} -- 2.34.1 From 7c8106100c0ccdd907956fa888e47f42549d5389 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 31 Jan 2023 08:16:49 -0300 Subject: [PATCH 03/33] refactor: altera cor elemento --- styles/css/vtex.breadcrumb.css | 6 ++---- styles/sass/pages/product/vtex.breadcrumb.scss | 7 ++----- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 3042684..d017362 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -27,9 +27,7 @@ font-size: 14px; line-height: 19px; } -.container .link { - color: #929292; -} +.container .link, .container .term { - color: #000000; + color: #929292; } \ 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 111fa01..0fc79a2 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -23,11 +23,8 @@ line-height: 19px; } - .link { + .link, + .term { color: #929292; } - - .term { - color: #000000; - } } -- 2.34.1 From af3a27ec2a6e2d26c216d660fad2b2cbc8a559d6 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 31 Jan 2023 20:20:46 -0300 Subject: [PATCH 04/33] =?UTF-8?q?feat:=20feito=20estiliza=C3=A7=C3=A3o=20d?= =?UTF-8?q?os=20blocos=20product-name,=20product-identifier.product=20,pro?= =?UTF-8?q?duct-selling-price=20e=20product-installments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 4 +- styles/css/vtex.product-identifier.css | 28 +++++- styles/css/vtex.product-price.css | 93 ++++--------------- styles/css/vtex.store-components.css | 30 ++++++ .../product/vtex.product-identifier.scss | 18 ++++ .../pages/product/vtex.product-price.scss | 13 +++ .../pages/product/vtex.store-components.scss | 31 +++++++ 7 files changed, 137 insertions(+), 80 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 33db0f8..f624186 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -107,12 +107,10 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..1453a03 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,27 @@ -.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, +.product-identifier__separator { + display: none; } + +.product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier { + display: flex; + justify-content: right; + margin-top: 8px; + margin-bottom: 24px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b41b0ed 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,22 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.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 */ +.sellingPrice--hasListPrice { font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 470eb35..e1d1e8c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -63,4 +63,34 @@ .content { max-width: 500px; } +} + +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +.productNameContainer--quickview { + text-align: right; +} + +/*.productDescriptionContainer { + + +}*/ +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file 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..98022d1 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,18 @@ +.product-identifier__label, +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier { + display: flex; + justify-content: right; + margin-top: 8px; + margin-bottom: 24px; +} 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..4ec1fff --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,13 @@ +.sellingPrice--hasListPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 331c289..b9c3a55 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -43,3 +43,34 @@ max-width: 500px; } } + +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +.productNameContainer--quickview{ + text-align: right; +} + +/*.productDescriptionContainer { + + +}*/ + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} -- 2.34.1 From aa056c6a4ea9498d5dfd7920ab908bd70262b57a Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 31 Jan 2023 22:24:18 -0300 Subject: [PATCH 05/33] feat: cria e estiliza o bloco product-installments#m3 --- store/blocks/pdp/product.jsonc | 11 ++++++++++- styles/css/vtex.product-price.css | 7 +++++-- styles/sass/pages/product/vtex.product-price.scss | 7 +++++-- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f624186..6a42453 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -110,7 +110,7 @@ "product-identifier.product", "product-rating-summary", "flex-layout.row#selling-price", - "product-installments", + "product-installments#m3", "sku-selector", "product-quantity", "product-assembly-options", @@ -122,6 +122,15 @@ ] }, + "product-installments#m3": { + "props": { + "markers": ["highlight"], + "blockClass": "m3-custom-installments", + "message": "{installmentsNumber} x de {installmentValue} sem juros", + "installmentsCriteria": "max-quantity-without-interest" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index b41b0ed..cb88bd8 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -14,9 +14,12 @@ color: #000000; } -.installments { - font-weight: 700; +.installments--m3-custom-installments { font-size: 16px; line-height: 22px; color: #929292; +} + +.installments-highlight--m3-custom-installments { + font-weight: 700; } \ 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 4ec1fff..82c2f52 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -5,9 +5,12 @@ color: #000000; } -.installments { - font-weight: 700; +.installments--m3-custom-installments { font-size: 16px; line-height: 22px; color: #929292; } + +.installments-highlight--m3-custom-installments { + font-weight: 700; +} -- 2.34.1 From 14f815665be10ad2fa5e2d5f8e18aa6616f4a834 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 1 Feb 2023 14:50:01 -0300 Subject: [PATCH 06/33] feat: estiliza o bloco sku-selector --- store/blocks/pdp/product.jsonc | 17 +++- styles/css/vtex.store-components.css | 89 ++++++++++++++++- .../pages/product/vtex.store-components.scss | 95 ++++++++++++++++++- 3 files changed, 189 insertions(+), 12 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a42453..1cb3c10 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -111,7 +111,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments#m3", - "sku-selector", + "html#sku-selector-m3", "product-quantity", "product-assembly-options", "product-gifts", @@ -141,10 +141,21 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "imageHeight": 48, + "imageWidth": 48 } }, + "html#sku-selector-m3": { + "props":{ + "tag": "section", + "testId": "sku-selector", + "blockClass": "sku-selector-m3" + }, + "children": ["sku-selector"] + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, @@ -174,7 +185,7 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", + "html#sku-selector-m3", "flex-layout.row#availability" ] }, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e1d1e8c..adabe57 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -77,10 +77,6 @@ text-align: right; } -/*.productDescriptionContainer { - - -}*/ .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -93,4 +89,89 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; + margin-bottom: 16px; +} + +.skuSelectorName, +.skuSelectorNameSeparator, +.skuSelectorSelectorImageValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} + +.skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid #989898; + position: relative; +} + +.skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) { + width: 46px; + height: 46px; +} + +.frameAround { + display: none; +} + +.skuSelectorItem { + width: 40px; + height: 40px; +} + +.skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + justify-content: center; + align-items: center; + color: rgba(185, 185, 185, 0.6); + width: 20px; +} + +.skuSelectorItemImage { + display: flex; + justify-content: center; + align-items: center; + border: none; +} + +.skuSelectorItem--selected { + border: 2px solid #000000; + border-radius: 50%; +} +.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { + color: #000000; +} + +.skuSelectorOptionsList { + gap: 16px; + margin: 0; +} + +.diagonalCross { + background-image: none; + border: 1px solid #D5D5D5; + transform: rotate(-45deg); + position: absolute; + left: -80%; + right: -10.46%; + top: 82.5%; + bottom: 17.5%; +} + +.skuSelectorSubcontainer { + margin: 0; } \ 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 b9c3a55..96a83a4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -56,11 +56,6 @@ text-align: right; } -/*.productDescriptionContainer { - - -}*/ - .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -74,3 +69,93 @@ line-height: 22px; color: #929292; } + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; + margin-bottom: 16px; +} + +.skuSelectorName, +.skuSelectorNameSeparator, +.skuSelectorSelectorImageValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} + +.skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid #989898; + position: relative; +} + +.skuSelectorItemImage { + :global(.vtex-store-components-3-x-skuSelectorInternalBox) { + width: 46px; + height: 46px; + } +} + +.frameAround { + display: none; +} + +.skuSelectorItem { + width: 40px; + height: 40px; +} + +.skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + justify-content: center; + align-items: center; + color: rgba(185, 185, 185, 0.6); + width: 20px; +} + +.skuSelectorItemImage { + display: flex; + justify-content: center; + align-items: center; + border: none; +} + +.skuSelectorItem--selected{ + border: 2px solid #000000; + border-radius: 50%; + + :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { + color: #000000; + } +} + +.skuSelectorOptionsList { + gap: 16px; + margin: 0; +} + +.diagonalCross { + background-image: none; + + border: 1px solid #D5D5D5; + transform: rotate(-45deg); + + position: absolute; + left: -80%; + right: -10.46%; + top: 82.5%; + bottom: 17.5%; +} + +.skuSelectorSubcontainer { + margin: 0; +} -- 2.34.1 From 59f1c1aa4d054f07c005cf5e59c356b1eadd2dd3 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 1 Feb 2023 19:57:33 -0300 Subject: [PATCH 07/33] feat: estiliza o bloco add-to-cart-button --- react/components/Html/styles.css | 9 +++++++++ store/blocks/minicart.jsonc | 12 +++++++++++- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.add-to-cart-button.css | 14 ++++++++++++++ .../pages/product/vtex.add-to-cart-button.scss | 5 +++++ 5 files changed, 40 insertions(+), 2 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 diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 6b78ad6..fd5dfc1 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,3 +1,12 @@ [class*="html--pdp-breadcrumb"] { background-color: #FFFFFF; } + + +[class*="html--add-to-cart-button"] button { + background-color: #000000; + border: none; + width: 526px; + height: 49px; + padding: 12px 64px; +} diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..7c1adff 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,10 +2,20 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "text": "ADICIONAR À SACOLA" } }, + "html#add-to-cart-button": { + "props":{ + "tag": "div", + "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 1cb3c10..7f4039c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -161,7 +161,7 @@ "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": ["html#add-to-cart-button"] }, "flex-layout.row#product-availability": { 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..ac2b82e --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,14 @@ +/* +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-weight: 400; + font-size: 18px; + line-height: 25px; +} \ No newline at end of file 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..7601fdf --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,5 @@ +.buttonText { + font-weight: 400; + font-size: 18px; + line-height: 25px; +} -- 2.34.1 From 7334a77bf75d610e153c3a3ec72a6f2b3d7b1f43 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 1 Feb 2023 21:52:20 -0300 Subject: [PATCH 08/33] =?UTF-8?q?feat:=20estiliza=20o=20bloco=20product-qu?= =?UTF-8?q?antity=20e=20cria=20um=20bloco=20html=20pra=20unir=20os=20bloco?= =?UTF-8?q?s=20do=20product-quantity=20e=20do=20bot=C3=A3o=20de=20adiciona?= =?UTF-8?q?r=20ao=20carrinho?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 28 ++++++++++++++- store/blocks/pdp/product.jsonc | 36 +++++++++++++++++-- styles/css/vtex.add-to-cart-button.css | 5 +-- styles/css/vtex.product-quantity.css | 16 +++++++++ .../product/vtex.add-to-cart-button.scss | 5 +-- .../pages/product/vtex.product-quantity.scss | 7 ++++ 6 files changed, 90 insertions(+), 7 deletions(-) create mode 100644 styles/css/vtex.product-quantity.css 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 fd5dfc1..d92df91 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -4,9 +4,35 @@ [class*="html--add-to-cart-button"] button { - background-color: #000000; + background-color: #000000 !important; border: none; width: 526px; height: 49px; padding: 12px 64px; } + +[class*="html--product-quantity-cart-button"] { + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 16px; +} + +[class*="html--product-quantity-cart-button"] input{ + height: 49px; + + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +[class*="html--product-quantity-cart-button"] button{ + height: 49px; + background-color: #FFFFFF; + + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #000000; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 7f4039c..4f44f58 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,7 @@ "product-questions-and-answers" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -18,20 +19,24 @@ }, "children": ["breadcrumb"] }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, + "rich-text#specifications": { "props": { "text": "##### Product Specifications" } }, + "flex-layout.row#description": { "props": { "marginBottom": 7 }, "children": ["product-description"] }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -43,6 +48,7 @@ "Else": "flex-layout.row#product-availability" } }, + "flex-layout.row#product-main": { "props": { "colGap": 7, @@ -81,6 +87,7 @@ "rowGap": 0 } }, + "html#product-image": { "props":{ "tag": "div", @@ -89,6 +96,7 @@ }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": "1:1", @@ -99,6 +107,27 @@ "thumbnailAspectRatio": "1:1" } }, + + "html#product-quantity": { + "props": { + "tag": "div", + "testId": "product-quantity", + "blockClass": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "html#product-quantity-cart-button": { + "props": { + "tag": "div", + "blockClass": "product-quantity-cart-button" + }, + "children": [ + "html#product-quantity", + "flex-layout.row#buy-button" + ] + }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -112,10 +141,11 @@ "flex-layout.row#selling-price", "product-installments#m3", "html#sku-selector-m3", - "product-quantity", + "html#product-quantity-cart-button", + /*"html#product-quantity",*/ "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + /*"flex-layout.row#buy-button",*/ "availability-subscriber", "shipping-simulator", "share#default" @@ -176,6 +206,7 @@ "flex-layout.col#right-col-availability" ] }, + "flex-layout.col#right-col-availability": { "props": { "preventVerticalStretch": true, @@ -189,6 +220,7 @@ "flex-layout.row#availability" ] }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css index ac2b82e..cd1bd0d 100644 --- a/styles/css/vtex.add-to-cart-button.css +++ b/styles/css/vtex.add-to-cart-button.css @@ -9,6 +9,7 @@ /* Grid breakpoints */ .buttonText { font-weight: 400; - font-size: 18px; - line-height: 25px; + font-size: 18px !important; + line-height: 25px !important; + color: #FFFFFF !important; } \ 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..c4370df --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,16 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer { + margin: 0; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss index 7601fdf..e94a41b 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -1,5 +1,6 @@ .buttonText { font-weight: 400; - font-size: 18px; - line-height: 25px; + font-size: 18px !important; + line-height: 25px !important; + color: #FFFFFF !important; } 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..44042f3 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,7 @@ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer { + margin: 0; +} -- 2.34.1 From 85e35e7df5b881687b1bd41ed07499f208efb049 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 2 Feb 2023 20:03:37 -0300 Subject: [PATCH 09/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 30 +++++- store/blocks/pdp/product-assembly.jsonc | 2 +- store/blocks/pdp/product.jsonc | 92 +++++++++---------- styles/css/vtex.breadcrumb.css | 5 +- styles/css/vtex.flex-layout.css | 4 - styles/css/vtex.store-components.css | 38 +------- styles/css/vtex.styleguide.css | 13 +++ .../sass/pages/product/vtex.breadcrumb.scss | 5 +- .../sass/pages/product/vtex.flex-layout.scss | 4 - .../pages/product/vtex.store-components.scss | 26 +----- .../sass/pages/product/vtex.styleguide.scss | 4 + 11 files changed, 104 insertions(+), 119 deletions(-) create mode 100644 styles/css/vtex.styleguide.css create mode 100644 styles/sass/pages/product/vtex.styleguide.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index d92df91..94d1a1a 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -2,24 +2,48 @@ background-color: #FFFFFF; } +[class*="html--product-main"] { + width: 94.4444%; + margin: 0 auto; + display: grid; + grid-template-columns: 48.8% 51.2%; +} + +[class*="html--stack"] { + grid-area: 1/1; +} + +[class*="html--right-col"] { + grid-area: 1/2; + margin-left: 32px; +} + +[class*="html--buy-button"] { + width: 100%; +} [class*="html--add-to-cart-button"] button { background-color: #000000 !important; border: none; - width: 526px; + width: 100%; height: 49px; - padding: 12px 64px; + padding-top: 12px; + padding-bottom: 12px; } [class*="html--product-quantity-cart-button"] { display: flex; flex-direction: row; - gap: 10px; margin-bottom: 16px; + gap: 10px; + + width: 100%; + height: 49px; } [class*="html--product-quantity-cart-button"] input{ height: 49px; + width: 32px; font-weight: 400; font-size: 16px; diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..e0db42f 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -3,7 +3,7 @@ "props": { "position": "bottom" }, - "children": ["flex-layout.row#buy-button"] + "children": ["html#buy-button"] }, "product-assembly-options": { "children": [ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4f44f58..234803a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,8 +3,8 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", + "html#description", + "html#specifications-title", "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" @@ -20,7 +20,11 @@ "children": ["breadcrumb"] }, - "flex-layout.row#specifications-title": { + "html#specifications-title": { + "props": { + "tag": "div", + "blockClass": "specifications-title" + }, "children": ["rich-text#specifications"] }, @@ -30,9 +34,10 @@ } }, - "flex-layout.row#description": { + "html#description": { "props": { - "marginBottom": 7 + "tag": "div", + "blockClass": "description" }, "children": ["product-description"] }, @@ -44,21 +49,17 @@ "subject": "isProductAvailable" } ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" + "Then": "html#product-main", + "Else": "html#product-availability" } }, - "flex-layout.row#product-main": { + "html#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 + "tag": "section", + "blockClass": "product-main" }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["html#stack", "html#right-col"] }, "stack-layout": { @@ -81,11 +82,12 @@ } }, - "flex-layout.col#stack": { - "children": ["stack-layout"], + "html#stack": { "props": { - "rowGap": 0 - } + "tag": "section", + "blockClass": "stack" + }, + "children": ["stack-layout"] }, "html#product-image": { @@ -124,28 +126,25 @@ }, "children": [ "html#product-quantity", - "flex-layout.row#buy-button" + "html#buy-button" ] }, - "flex-layout.col#right-col": { + "html#right-col": { "props": { - "preventVerticalStretch": true, - "rowGap": 0, + "tag": "section", "blockClass": "right-col" }, "children": [ - "flex-layout.row#product-name", + "html#product-name", "product-identifier.product", "product-rating-summary", "flex-layout.row#selling-price", "product-installments#m3", "html#sku-selector-m3", "html#product-quantity-cart-button", - /*"html#product-quantity",*/ "product-assembly-options", "product-gifts", - /*"flex-layout.row#buy-button",*/ "availability-subscriber", "shipping-simulator", "share#default" @@ -161,9 +160,10 @@ } }, - "flex-layout.row#product-name": { + "html#product-name": { "props": { - "marginBottom": 3 + "tag": "div", + "blockClass": "product-name" }, "children": ["vtex.store-components:product-name"] }, @@ -186,44 +186,42 @@ "children": ["sku-selector"] }, - "flex-layout.row#buy-button": { + "html#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7 + "tag": "div", + "blockClass": "buy-button" }, "children": ["html#add-to-cart-button"] }, - "flex-layout.row#product-availability": { + "html#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "tag": "div", + "blockClass": "product-availability" }, "children": [ - "flex-layout.col#stack", - "flex-layout.col#right-col-availability" + "html#stack", + "html#right-col-availability" ] }, - "flex-layout.col#right-col-availability": { + "html#right-col-availability": { "props": { - "preventVerticalStretch": true, - "rowGap": 0, - "blockClass": "info-availability" + "blockClass": "info-availability", + "tag": "div" }, "children": [ - "flex-layout.row#product-name", + "html#product-name", "product-identifier.product", "html#sku-selector-m3", - "flex-layout.row#availability" + "html#availability" ] }, - - "flex-layout.row#availability": { + + "html#availability": { "props": { - "blockClass": "message-availability" + "blockClass": "message-availability", + "tag": "div" }, "children": ["availability-subscriber"] }, diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index d017362..6d190eb 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,8 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding: 0 40px; - margin-bottom: 16px; + width: 94.4444%; + margin: 0 auto 16px; + padding: 0; } .container .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e989d37..04f2fb1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,8 +11,4 @@ padding-top: 0; padding-bottom: 0; margin: 0; -} - -.stretchChildrenWidth { - width: 100% !important; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index adabe57..cfa70d8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -11,10 +11,6 @@ background: red; } -.container { - padding: 0 40px; -} - .thumbImg, .figure, .carouselThumbBorder { @@ -28,6 +24,10 @@ margin: 0 16px 0 0; } +.carouselGaleryThumbs { + margin: 0 !important; +} + .productImageTag, .productImageTag--main { max-width: 100%; @@ -35,36 +35,6 @@ margin-bottom: 16px; } -.carouselGaleryThumbs, -.carouselGaleryCursor, -.carouselContainer, -.productImagesContainer, -.productImagesContainer--carousel, -.content { - max-width: 664px; - margin: 0; -} -@media screen and (min-width: 1920px) { - .carouselGaleryThumbs, - .carouselGaleryCursor, - .carouselContainer, - .productImagesContainer, - .productImagesContainer--carousel, - .content { - max-width: 904px; - } -} -@media screen and ((min-width: 1025px) and (max-width: 1200px)) { - .carouselGaleryThumbs, - .carouselGaleryCursor, - .carouselContainer, - .productImagesContainer, - .productImagesContainer--carousel, - .content { - max-width: 500px; - } -} - .productBrand--quickview { font-weight: 300; font-size: 20px; diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css new file mode 100644 index 0000000..defa404 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,13 @@ +/* +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 */ +.hideDecorators { + border-left: none; + border-right: none; +} \ 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 0fc79a2..dd788b0 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,7 @@ .container { - padding: 0 40px; - margin-bottom: 16px; + width: 94.4444%; + margin: 0 auto 16px; + padding: 0; .homeIcon { display: none; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 287fa78..e6e8fb3 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -3,7 +3,3 @@ padding-bottom: 0; margin: 0; } - -.stretchChildrenWidth { - width: 100% !important; -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 96a83a4..bfafd18 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,10 +2,6 @@ background: red; } -.container { - padding: 0 40px; -} - .thumbImg, .figure, .carouselThumbBorder { @@ -19,6 +15,10 @@ margin: 0 16px 0 0; } +.carouselGaleryThumbs { + margin: 0 !important; +} + .productImageTag, .productImageTag--main { max-width: 100%; @@ -26,24 +26,6 @@ margin-bottom: 16px; } -.carouselGaleryThumbs, -.carouselGaleryCursor, -.carouselContainer, -.productImagesContainer, -.productImagesContainer--carousel, -.content { - max-width: 664px; - margin: 0; - - @media screen and (min-width: 1920px) { - max-width: 904px; - } - - @media screen and ((min-width: 1025px) and (max-width: 1200px)) { - max-width: 500px; - } -} - .productBrand--quickview { font-weight: 300; font-size: 20px; diff --git a/styles/sass/pages/product/vtex.styleguide.scss b/styles/sass/pages/product/vtex.styleguide.scss new file mode 100644 index 0000000..02a5904 --- /dev/null +++ b/styles/sass/pages/product/vtex.styleguide.scss @@ -0,0 +1,4 @@ +.hideDecorators { + border-left: none; + border-right: none; +} -- 2.34.1 From 57d8ce54bbcfad31398611b53d3abfdfacc18067 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 2 Feb 2023 20:13:30 -0300 Subject: [PATCH 10/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.breadcrumb.css | 4 ++-- styles/sass/pages/product/vtex.breadcrumb.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 6d190eb..1a06a0b 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,8 +9,8 @@ /* Grid breakpoints */ .container { width: 94.4444%; - margin: 0 auto 16px; - padding: 0; + margin: 0 auto; + padding: 0 0 16px 0; } .container .homeIcon { display: none; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index dd788b0..80548a9 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,7 +1,7 @@ .container { width: 94.4444%; - margin: 0 auto 16px; - padding: 0; + margin: 0 auto; + padding: 0 0 16px 0; .homeIcon { display: none; -- 2.34.1 From c15689a33881012c0c82cd398f1b4bc0b8b5c6ea Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 3 Feb 2023 02:14:49 -0300 Subject: [PATCH 11/33] feat: estiliza o bloco shipping-simulator --- react/components/Html/styles.css | 15 +++++ store/blocks/pdp/product.jsonc | 11 +++- styles/css/vtex.store-components.css | 51 ++++++++++++++++ .../pages/product/vtex.store-components.scss | 61 +++++++++++++++++++ 4 files changed, 137 insertions(+), 1 deletion(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 94d1a1a..fbdc8cd 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -60,3 +60,18 @@ line-height: 22px; color: #000000; } + +[class*="html--shipping-simulator"] button { + background-color: #000000; + border: none; + width: 49px; + height: 49px; +} + +[class*="html--shipping-simulator"] a { + color: #000000; +} + +[class*="html--shipping-simulator"] svg { + display: none; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 234803a..deabf01 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -146,11 +146,20 @@ "product-assembly-options", "product-gifts", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, + "html#shipping-simulator": { + "props": { + "tag": "div", + "testId": "shipping-simulator", + "blockClass": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "product-installments#m3": { "props": { "markers": ["highlight"], diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index cfa70d8..7578c0b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -144,4 +144,55 @@ .skuSelectorSubcontainer { margin: 0; +} + +.shippingContainer { + display: flex; + align-items: flex-end; + position: relative; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "Calcular Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "Ok"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #FFFFFF; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + padding: 0; + position: absolute; + top: 43px; + left: 312px; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; + width: 231px; +} +.shippingContainer :global(.vtex-input__error) { + position: absolute; + margin: 2px; } \ 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 bfafd18..19abef6 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -141,3 +141,64 @@ .skuSelectorSubcontainer { margin: 0; } + +.shippingContainer { + display: flex; + align-items: flex-end; + + position: relative; + + :global(.vtex-input__label) { + font-size: 0; + + &::after { + content: "Calcular Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "Ok"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #FFFFFF; + text-transform: uppercase; + } + } + + :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding: 0; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + padding: 0; + + position: absolute; + top: 43px; + left: 312px; + } + + :global(.vtex-input-prefix__group ) { + height: 49px; + width: 231px; + } + + :global(.vtex-input__error) { + position: absolute; + margin: 2px; + } +} -- 2.34.1 From 8ccd7cd95dc11065a061943650e4065644ebce16 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 3 Feb 2023 14:58:57 -0300 Subject: [PATCH 12/33] =?UTF-8?q?feat:=20estiliza=20o=20bloco=20shipping-s?= =?UTF-8?q?imulator=20nos=20elementos=20de=20entrega,=20frete=20e=20prazo?= =?UTF-8?q?=20e=20retira=20borda=20arredondada=20dos=20bot=C3=B5es=20e=20i?= =?UTF-8?q?nput?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 6 ++ styles/css/vtex.store-components.css | 71 ++++++++++++++++++ .../pages/product/vtex.store-components.scss | 72 +++++++++++++++++++ 3 files changed, 149 insertions(+) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index fbdc8cd..bdc6e00 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -24,6 +24,7 @@ [class*="html--add-to-cart-button"] button { background-color: #000000 !important; + border-radius: 0; border: none; width: 100%; height: 49px; @@ -59,13 +60,18 @@ font-size: 16px; line-height: 22px; color: #000000; + border-radius: 0; } [class*="html--shipping-simulator"] button { background-color: #000000; + border-radius: 0; border: none; width: 49px; height: 49px; + + position: absolute; + left: 228px; } [class*="html--shipping-simulator"] a { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7578c0b..fc13735 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -191,8 +191,79 @@ .shippingContainer :global(.vtex-input-prefix__group) { height: 49px; width: 231px; + border-radius: 0; } .shippingContainer :global(.vtex-input__error) { position: absolute; margin: 2px; +} + +.shippingTable { + margin: 16px 0 0 0; + padding: 0; + border: none; +} + +.shippingTableHead { + display: table-header-group; + text-align: left; +} + +.shippingTableHeadDeliveryName, +.shippingTableHeadDeliveryEstimate { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + margin-bottom: 15px; +} + +.shippingTableHeadDeliveryPrice { + font-size: 0; +} +.shippingTableHeadDeliveryPrice::after { + content: "Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + margin-bottom: 15px; +} + +.shippingTableRow { + display: grid; + grid-template-columns: 20% 15% 65%; +} + +.shippingTableCellDeliveryName, +.shippingTableCellDeliveryName { + grid-area: 1/1; +} + +.shippingTableHeadDeliveryEstimate, +.shippingTableCellDeliveryEstimate { + grid-area: 1/3; +} + +.shippingTableHeadDeliveryPrice, +.shippingTableCellDeliveryPrice { + grid-area: 1/2; +} + +.shippingTableCellDeliveryName, +.shippingTableCellDeliveryEstimate, +.shippingTableCellDeliveryPrice { + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #AFAFAF; + padding: 0 0 15px 0; +} + +.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 19abef6..9708c7f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -195,6 +195,7 @@ :global(.vtex-input-prefix__group ) { height: 49px; width: 231px; + border-radius: 0; } :global(.vtex-input__error) { @@ -202,3 +203,74 @@ margin: 2px; } } + +.shippingTable { + margin: 16px 0 0 0; + padding: 0; + border: none; +} + +.shippingTableHead { + display: table-header-group; + text-align: left; +} + +.shippingTableHeadDeliveryName, +.shippingTableHeadDeliveryEstimate { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + margin-bottom: 15px; +} + +.shippingTableHeadDeliveryPrice { + font-size: 0; + + &::after { + content: "Frete"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + margin-bottom: 15px; + } +} + +.shippingTableRow { + display: grid; + grid-template-columns: 20% 15% 65%; +} + +.shippingTableCellDeliveryName, +.shippingTableCellDeliveryName{ + grid-area: 1/1; +} + +.shippingTableHeadDeliveryEstimate, +.shippingTableCellDeliveryEstimate { + grid-area: 1/3; +} + +.shippingTableHeadDeliveryPrice, +.shippingTableCellDeliveryPrice { + grid-area: 1/2; +} + +.shippingTableCellDeliveryName, +.shippingTableCellDeliveryEstimate, +.shippingTableCellDeliveryPrice { + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #AFAFAF; + padding: 0 0 15px 0; +} + +.shippingTableRadioBtn { + display: none; +} -- 2.34.1 From 0ecadd329bdad2360932359d4925e621d797e1f4 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 3 Feb 2023 16:57:10 -0300 Subject: [PATCH 13/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 6 ++++-- store/blocks/pdp/product.jsonc | 10 +++++----- styles/css/vtex.store-components.css | 17 ++++++++++++---- .../pages/product/vtex.store-components.scss | 20 +++++++++++++++---- 4 files changed, 38 insertions(+), 15 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index bdc6e00..d9fd8e6 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -2,7 +2,8 @@ background-color: #FFFFFF; } -[class*="html--product-main"] { +[class*="html--product-main"], +[class*="html--product-availability"] { width: 94.4444%; margin: 0 auto; display: grid; @@ -13,7 +14,8 @@ grid-area: 1/1; } -[class*="html--right-col"] { +[class*="html--right-col"], +[class*="html--info-availability"] { grid-area: 1/2; margin-left: 32px; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index deabf01..0fd888d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -205,7 +205,7 @@ "html#product-availability": { "props": { - "tag": "div", + "tag": "section", "blockClass": "product-availability" }, "children": [ @@ -216,14 +216,14 @@ "html#right-col-availability": { "props": { - "blockClass": "info-availability", - "tag": "div" + "tag": "section", + "blockClass": "info-availability" }, "children": [ "html#product-name", "product-identifier.product", - "html#sku-selector-m3", - "html#availability" + "html#availability", + "html#sku-selector-m3" ] }, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index fc13735..eb482ed 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -67,6 +67,9 @@ margin-top: 16px; margin-bottom: 16px; } +.skuSelectorContainer :global(.vtex-store-components-3-x-skuSelectorItemImageValue) { + border-radius: 50%; +} .skuSelectorName, .skuSelectorNameSeparator, @@ -87,8 +90,8 @@ } .skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) { - width: 46px; - height: 46px; + width: 100%; + height: 100%; } .frameAround { @@ -125,6 +128,12 @@ .skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { color: #000000; } +.skuSelectorItem--selected :global(.vtex-store-components-3-x-diagonalCross) { + border: 2px solid #000000; +} +.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorInternalBox) { + border: none; +} .skuSelectorOptionsList { gap: 16px; @@ -136,8 +145,8 @@ border: 1px solid #D5D5D5; transform: rotate(-45deg); position: absolute; - left: -80%; - right: -10.46%; + left: -100%; + right: -20%; top: 82.5%; bottom: 17.5%; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9708c7f..c0f2ce4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -57,6 +57,10 @@ flex-direction: column-reverse; margin-top: 16px; margin-bottom: 16px; + + :global(.vtex-store-components-3-x-skuSelectorItemImageValue) { + border-radius: 50%; + } } .skuSelectorName, @@ -79,8 +83,8 @@ .skuSelectorItemImage { :global(.vtex-store-components-3-x-skuSelectorInternalBox) { - width: 46px; - height: 46px; + width: 100%; + height: 100%; } } @@ -118,6 +122,14 @@ :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { color: #000000; } + + :global(.vtex-store-components-3-x-diagonalCross) { + border: 2px solid #000000; + } + + :global(.vtex-store-components-3-x-skuSelectorInternalBox) { + border: none; + } } .skuSelectorOptionsList { @@ -132,8 +144,8 @@ transform: rotate(-45deg); position: absolute; - left: -80%; - right: -10.46%; + left: -100%; + right: -20%; top: 82.5%; bottom: 17.5%; } -- 2.34.1 From 9f5f7d753a87b552dc08b3dab7d6d8855eba1489 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 3 Feb 2023 19:14:51 -0300 Subject: [PATCH 14/33] feat: estiliza o bloco info-availability --- react/components/Html/styles.css | 8 ++ styles/css/vtex.store-components.css | 81 +++++++++++++++++ .../pages/product/vtex.store-components.scss | 87 ++++++++++++++++++- 3 files changed, 175 insertions(+), 1 deletion(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index d9fd8e6..e11aa1a 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -83,3 +83,11 @@ [class*="html--shipping-simulator"] svg { display: none; } + +[class*="html--message-availability"] form { + margin: 0; +} + +[class*="html--info-availability"] .html--sku-selector-m3 { + margin-top: 80px; +} diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index eb482ed..271cc9f 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 @@ -275,4 +276,84 @@ .shippingTableRadioBtn { display: none; +} + +.title { + font-size: 0; + margin: 0; +} +.title::before { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} + +.subscribeLabel { + font-size: 0; +} +.subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + margin-bottom: 16px; +} + +.content { + margin: 0; + position: relative; + gap: 8px; +} + +.input, +.submit { + margin: 0; +} + +.submit { + position: absolute; + top: 58px; + width: 100%; +} +.submit :global(.vtex-button) { + height: 49px; + width: 100%; + background: #000000; +} +.submit :global(.vtex-button__label) { + font-size: 0; +} +.submit :global(.vtex-button__label)::before { + content: "Avise-me"; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + color: #FFFFFF; +} + +.input { + /* + &::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } + */ +} +.input :global(.vtex-input__error) { + position: absolute; + top: 32px; +} + +.subscriberContainer { + width: 60.07%; } \ 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 c0f2ce4..9a41780 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,5 +1,5 @@ .newsletter{ - background: red; + background: red; } .thumbImg, @@ -286,3 +286,88 @@ .shippingTableRadioBtn { display: none; } + +.title { + font-size: 0; + margin: 0; + + &::before { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } +} + +.subscribeLabel { + font-size: 0; + + &::before { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + margin-bottom: 16px; + } +} + +.content { + margin: 0; + position: relative; + gap: 8px; +} + +.input, +.submit { + margin: 0; +} + +.submit { + position: absolute; + top: 58px; + width: 100%; + + :global(.vtex-button) { + height: 49px; + width: 100%; + background: #000000; + } + + :global(.vtex-button__label) { + font-size: 0; + + &::before { + content: "Avise-me"; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + color: #FFFFFF; + } + } +} + +.input { +/* + &::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } +*/ + :global(.vtex-input__error) { + position: absolute; + top: 32px; + } +} + +.subscriberContainer { + width: 60.07%; +} -- 2.34.1 From 5bd79ff2446bec27ac7aa1c80f74cd7db0d4e906 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 3 Feb 2023 19:23:47 -0300 Subject: [PATCH 15/33] feat: Retira o bloco share#default --- store/blocks/pdp/product.jsonc | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0fd888d..b2dfb36 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -146,8 +146,7 @@ "product-assembly-options", "product-gifts", "availability-subscriber", - "html#shipping-simulator", - "share#default" + "html#shipping-simulator" ] }, -- 2.34.1 From 096d44dcf921dd486f8df2333a8d19e8df0bba5e Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 3 Feb 2023 19:35:34 -0300 Subject: [PATCH 16/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 16 +++++----------- .../pages/product/vtex.store-components.scss | 15 ++++++--------- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 271cc9f..47d10e4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -130,7 +130,7 @@ color: #000000; } .skuSelectorItem--selected :global(.vtex-store-components-3-x-diagonalCross) { - border: 2px solid #000000; + border: 1.5px solid #000000; } .skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorInternalBox) { border: none; @@ -321,6 +321,7 @@ position: absolute; top: 58px; width: 100%; + border-radius: 0; } .submit :global(.vtex-button) { height: 49px; @@ -339,20 +340,13 @@ color: #FFFFFF; } -.input { - /* - &::placeholder { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #989898; - } - */ -} .input :global(.vtex-input__error) { position: absolute; top: 32px; } +.input :global(.vtex-input-prefix__group) { + border-radius: 0; +} .subscriberContainer { width: 60.07%; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9a41780..d02b066 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -124,7 +124,7 @@ } :global(.vtex-store-components-3-x-diagonalCross) { - border: 2px solid #000000; + border: 1.5px solid #000000; } :global(.vtex-store-components-3-x-skuSelectorInternalBox) { @@ -332,6 +332,7 @@ position: absolute; top: 58px; width: 100%; + border-radius: 0; :global(.vtex-button) { height: 49px; @@ -354,18 +355,14 @@ } .input { -/* - &::placeholder { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #989898; - } -*/ :global(.vtex-input__error) { position: absolute; top: 32px; } + + :global(.vtex-input-prefix__group) { + border-radius: 0; + } } .subscriberContainer { -- 2.34.1 From ef7d81520321d68358ac520854dd49c7e1f2b0ab Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 4 Feb 2023 15:52:27 -0300 Subject: [PATCH 17/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 13 +++++ styles/css/vtex.product-customizer.css | 16 ++++++ styles/css/vtex.store-components.css | 42 ++++++++++++++-- .../product/vtex.product-customizer.scss | 7 +++ .../pages/product/vtex.store-components.scss | 50 +++++++++++++++++-- 5 files changed, 121 insertions(+), 7 deletions(-) create mode 100644 styles/css/vtex.product-customizer.css create mode 100644 styles/sass/pages/product/vtex.product-customizer.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index e11aa1a..a2d88b3 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -20,6 +20,10 @@ margin-left: 32px; } +[class*="html--right-col"] .vtex-store-components-3-x-container { + padding: 0; +} + [class*="html--buy-button"] { width: 100%; } @@ -32,6 +36,7 @@ height: 49px; padding-top: 12px; padding-bottom: 12px; + display: block !important; } [class*="html--product-quantity-cart-button"] { @@ -63,6 +68,8 @@ line-height: 22px; color: #000000; border-radius: 0; + + display: block !important; } [class*="html--shipping-simulator"] button { @@ -74,6 +81,7 @@ position: absolute; left: 228px; + display: block !important; } [class*="html--shipping-simulator"] a { @@ -91,3 +99,8 @@ [class*="html--info-availability"] .html--sku-selector-m3 { margin-top: 80px; } + +/* Para ocultar o botão embalar para presente */ +[class*="html--right-col"] button { + display: none; +} diff --git a/styles/css/vtex.product-customizer.css b/styles/css/vtex.product-customizer.css new file mode 100644 index 0000000..61fbe89 --- /dev/null +++ b/styles/css/vtex.product-customizer.css @@ -0,0 +1,16 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.productAssemblyGroupNameRow { + display: none; +} + +.textInputValue { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 47d10e4..33e040b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -48,6 +48,7 @@ text-align: right; } +/* .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -61,7 +62,7 @@ line-height: 22px; color: #929292; } - +*/ .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -73,8 +74,7 @@ } .skuSelectorName, -.skuSelectorNameSeparator, -.skuSelectorSelectorImageValue { +.skuSelectorNameSeparator { font-weight: 400; font-size: 14px; line-height: 19px; @@ -82,6 +82,10 @@ text-transform: uppercase; } +.skuSelectorSelectorImageValue { + display: none; +} + .skuSelectorInternalBox { width: 40px; height: 40px; @@ -102,6 +106,7 @@ .skuSelectorItem { width: 40px; height: 40px; + margin: 0; } .skuSelectorItemTextValue { @@ -125,6 +130,7 @@ .skuSelectorItem--selected { border: 2px solid #000000; border-radius: 50%; + margin: 0; } .skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { color: #000000; @@ -152,10 +158,40 @@ bottom: 17.5%; } +.skuSelectorTextContainer { + margin: 0 0 8px 0; +} + .skuSelectorSubcontainer { margin: 0; } +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + margin-bottom: 8px; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorName::before { + content: "OUTRAS CORES"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorSubcontainer--cor .skuSelectorTextContainer { + margin-top: 10px; +} + .shippingContainer { display: flex; align-items: flex-end; diff --git a/styles/sass/pages/product/vtex.product-customizer.scss b/styles/sass/pages/product/vtex.product-customizer.scss new file mode 100644 index 0000000..9124c03 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-customizer.scss @@ -0,0 +1,7 @@ +.productAssemblyGroupNameRow { + display: none; +} + +.textInputValue { + display: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index d02b066..23c77d9 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -37,7 +37,7 @@ .productNameContainer--quickview{ text-align: right; } - +/* .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -51,7 +51,7 @@ line-height: 22px; color: #929292; } - +*/ .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -64,8 +64,7 @@ } .skuSelectorName, -.skuSelectorNameSeparator, -.skuSelectorSelectorImageValue { +.skuSelectorNameSeparator { font-weight: 400; font-size: 14px; line-height: 19px; @@ -73,6 +72,10 @@ text-transform: uppercase; } +.skuSelectorSelectorImageValue { + display: none; +} + .skuSelectorInternalBox { width: 40px; height: 40px; @@ -95,6 +98,7 @@ .skuSelectorItem { width: 40px; height: 40px; + margin: 0; } .skuSelectorItemTextValue { @@ -118,6 +122,7 @@ .skuSelectorItem--selected{ border: 2px solid #000000; border-radius: 50%; + margin: 0; :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { color: #000000; @@ -150,10 +155,47 @@ bottom: 17.5%; } +.skuSelectorTextContainer { + margin: 0 0 8px 0; +} + .skuSelectorSubcontainer { margin: 0; } +.skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + + &::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + margin-bottom: 8px; + } + } +} + +.skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + + &::before { + content: "OUTRAS CORES"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + + .skuSelectorTextContainer { + margin-top: 10px; + } +} + .shippingContainer { display: flex; align-items: flex-end; -- 2.34.1 From 99c9445b7b0beab739ad00099b262d28ad44f1cd Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Mon, 6 Feb 2023 19:39:04 -0300 Subject: [PATCH 18/33] feat: cria e estiliza o componente do pix --- react/Pix.tsx | 1 + react/components/Html/styles.css | 7 ++++ react/components/Pix/Pix.tsx | 33 +++++++++++++++++++ react/components/Pix/styles.css | 26 +++++++++++++++ store/blocks/pdp/product.jsonc | 9 +++++ store/interfaces.json | 3 ++ styles/css/vtex.store-components.css | 5 ++- .../pages/product/vtex.store-components.scss | 6 +++- 8 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 react/Pix.tsx create mode 100644 react/components/Pix/Pix.tsx create mode 100644 react/components/Pix/styles.css diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..4811319 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1 @@ +export { default } from "./components/Pix/Pix"; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index a2d88b3..26ae228 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -104,3 +104,10 @@ [class*="html--right-col"] button { display: none; } + +[class*="html--pix"] { + display: flex; + align-items: center; + margin-top: 8px; + margin-bottom: 16px; +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..02744f7 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { useProduct } from 'vtex.product-context'; + +import styles from './styles.css'; + +const Pix = () => { + + const productContextValue = useProduct(); + //console.log(productContextValue); + + const price = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + + const discount = (Number(price) * (10 / 100)); + + const pixValue = (Number(price) - Number(discount)); + + return ( + <> + Imagem Pix + +
+

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

+

10 % de desconto

+
+ + ); +} + +export default Pix; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..c7a39c9 --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,26 @@ +.pixImage { + margin-right: 26px; + width: 66px; + height: 24px; +} + +.pixText { + display: flex; + flex-direction: column; +} + +.pixPrice { + margin: 0; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.pixDiscount { + margin: 0; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b2dfb36..3ff38ce 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -130,6 +130,14 @@ ] }, + "html#pix-price": { + "props": { + "blockClass": "pix", + "testId": "pix-price" + }, + "children": ["pix-component"] + }, + "html#right-col": { "props": { "tag": "section", @@ -141,6 +149,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments#m3", + "html#pix-price", "html#sku-selector-m3", "html#product-quantity-cart-button", "product-assembly-options", diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..7a7dfed 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-component": { + "component": "Pix" } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 33e040b..e4fd5f5 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -63,10 +63,13 @@ color: #929292; } */ +.skuSelectorNameContainer { + margin: 0; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; - margin-top: 16px; margin-bottom: 16px; } .skuSelectorContainer :global(.vtex-store-components-3-x-skuSelectorItemImageValue) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 23c77d9..64347d3 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -52,10 +52,14 @@ color: #929292; } */ + +.skuSelectorNameContainer { + margin: 0; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; - margin-top: 16px; margin-bottom: 16px; :global(.vtex-store-components-3-x-skuSelectorItemImageValue) { -- 2.34.1 From d1bac48b00ddafbbc1878b1edebbce1346b28c64 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Mon, 6 Feb 2023 19:55:12 -0300 Subject: [PATCH 19/33] =?UTF-8?q?feat:=20Oculta=20os=20blocos=20de=20espec?= =?UTF-8?q?ifica=C3=A7=C3=B5es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 3ff38ce..a65f466 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,8 +4,8 @@ "html#breadcrumb", "condition-layout.product#availability", "html#description", - "html#specifications-title", - "product-specification-group#table", + //"html#specifications-title", + //"product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] -- 2.34.1 From dddacbaad3db370def5f597b96eb62f184a4d56a Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Mon, 6 Feb 2023 20:05:11 -0300 Subject: [PATCH 20/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 1 + store/blocks/pdp/product.jsonc | 1 + 2 files changed, 2 insertions(+) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 26ae228..632206c 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -8,6 +8,7 @@ margin: 0 auto; display: grid; grid-template-columns: 48.8% 51.2%; + padding-bottom: 16px; } [class*="html--stack"] { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a65f466..40a6caa 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -156,6 +156,7 @@ "product-gifts", "availability-subscriber", "html#shipping-simulator" + //"share#default" ] }, -- 2.34.1 From 17fffc09024155920a8751e7a1d2b59ab7867180 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Mon, 6 Feb 2023 21:13:07 -0300 Subject: [PATCH 21/33] =?UTF-8?q?fix:=20corrige=20problema=20de=20localiza?= =?UTF-8?q?=C3=A7=C3=A3o=20de=20m=C3=B3dulo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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 +++ 8 files changed, 183 insertions(+) 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/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 + } +} -- 2.34.1 From f535767a228c28949e38024f37ce48aa4c08e190 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 7 Feb 2023 15:41:49 -0300 Subject: [PATCH 22/33] =?UTF-8?q?feat:=20faz=20adapta=C3=A7=C3=B5es=20para?= =?UTF-8?q?=20telas=20mobile,=20tablet=20e=20ultrawide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 66 +++++++++++++++++-- styles/css/vtex.add-to-cart-button.css | 5 ++ styles/css/vtex.breadcrumb.css | 15 +++++ styles/css/vtex.product-identifier.css | 5 ++ styles/css/vtex.store-components.css | 34 ++++++++++ .../product/vtex.add-to-cart-button.scss | 4 ++ .../sass/pages/product/vtex.breadcrumb.scss | 10 +++ .../product/vtex.product-identifier.scss | 4 ++ .../pages/product/vtex.store-components.scss | 30 +++++++++ 9 files changed, 168 insertions(+), 5 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 632206c..f6dd5d4 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -10,6 +10,27 @@ grid-template-columns: 48.8% 51.2%; padding-bottom: 16px; } +@media screen and (min-width: 1920px) { + [class*="html--product-main"], + [class*="html--product-availability"] { + width: 71.2%; + grid-template-columns: 50.5% 49.5%; + } +} +@media screen and (max-width: 1024px) { + [class*="html--product-main"], + [class*="html--product-availability"] { + display: flex; + flex-direction: column; + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + [class*="html--product-main"], + [class*="html--product-availability"] { + width: 79%; + } +} [class*="html--stack"] { grid-area: 1/1; @@ -20,9 +41,10 @@ grid-area: 1/2; margin-left: 32px; } - -[class*="html--right-col"] .vtex-store-components-3-x-container { - padding: 0; +@media screen and (max-width: 1024px) { + [class*="html--right-col"] { + margin-left: 0; + } } [class*="html--buy-button"] { @@ -40,6 +62,12 @@ display: block !important; } +@media screen and (max-width: 768px) { + [class*="html--add-to-cart-button"] button { + height: 74px !important; + } +} + [class*="html--product-quantity-cart-button"] { display: flex; flex-direction: row; @@ -50,6 +78,12 @@ height: 49px; } +@media screen and (max-width: 768px){ + [class*="html--product-quantity-cart-button"] { + flex-direction: column; + } +} + [class*="html--product-quantity-cart-button"] input{ height: 49px; width: 32px; @@ -73,18 +107,35 @@ display: block !important; } +@media screen and (max-width: 768px) { + [class*="html--shipping-simulator"] { + padding-top: 81px; + } +} + [class*="html--shipping-simulator"] button { background-color: #000000; border-radius: 0; border: none; width: 49px; - height: 49px; + height: 49px !important; position: absolute; - left: 228px; display: block !important; } +@media screen and (min-width: 769px) { + [class*="html--shipping-simulator"] button { + left: 228px; + } +} + +@media screen and (max-width: 768px) { + [class*="html--shipping-simulator"] button { + right: 0; + } +} + [class*="html--shipping-simulator"] a { color: #000000; } @@ -112,3 +163,8 @@ margin-top: 8px; margin-bottom: 16px; } + +[class*="html--description"] { + position: relative; + top: 9px; +} diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css index cd1bd0d..d7b55f2 100644 --- a/styles/css/vtex.add-to-cart-button.css +++ b/styles/css/vtex.add-to-cart-button.css @@ -12,4 +12,9 @@ font-size: 18px !important; line-height: 25px !important; color: #FFFFFF !important; +} +@media screen and (max-width: 768px) { + .buttonText { + width: 168px; + } } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 1a06a0b..c46f445 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -12,6 +12,21 @@ margin: 0 auto; padding: 0 0 16px 0; } +@media screen and (min-width: 1920px) { + .container { + width: 71.2%; + } +} +@media screen and ((min-width: 769) and (max-width: 1024px)) { + .container { + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + .container { + width: 79%; + } +} .container .homeIcon { display: none; } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 1453a03..09e7e42 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -24,4 +24,9 @@ justify-content: right; margin-top: 8px; margin-bottom: 24px; +} +@media screen and (max-width: 1024px) { + .product-identifier { + justify-content: left; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e4fd5f5..1fef91d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -12,6 +12,11 @@ background: red; } +.container { + padding-left: 0; + padding-right: 0; +} + .thumbImg, .figure, .carouselThumbBorder { @@ -28,6 +33,11 @@ .carouselGaleryThumbs { margin: 0 !important; } +@media screen and (max-width: 639px) { + .carouselGaleryThumbs { + display: inline-flex; + } +} .productImageTag, .productImageTag--main { @@ -47,6 +57,12 @@ .productNameContainer--quickview { text-align: right; } +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: left; + padding-top: 32px; + } +} /* .productDescriptionTitle { @@ -227,6 +243,11 @@ align-items: center; padding: 0; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + width: 79vw; + } +} .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { font-weight: 400; font-size: 12px; @@ -237,11 +258,24 @@ top: 43px; left: 312px; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + top: 85px; + width: 79vw; + left: 0; + text-align: right; + } +} .shippingContainer :global(.vtex-input-prefix__group) { height: 49px; width: 231px; border-radius: 0; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-input-prefix__group) { + width: 79vw; + } +} .shippingContainer :global(.vtex-input__error) { position: absolute; margin: 2px; diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss index e94a41b..7914ef6 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -3,4 +3,8 @@ font-size: 18px !important; line-height: 25px !important; color: #FFFFFF !important; + + @media screen and (max-width: 768px){ + width: 168px; + } } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 80548a9..9653a40 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -3,6 +3,16 @@ margin: 0 auto; padding: 0 0 16px 0; + @media screen and (min-width: 1920px) { + width: 71.2%; + } + @media screen and ((min-width: 769) and (max-width: 1024px)) { + width: 92.1875%; + } + @media screen and (max-width: 768px) { + width: 79%; + } + .homeIcon { display: none; } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 98022d1..cc67671 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -15,4 +15,8 @@ justify-content: right; margin-top: 8px; margin-bottom: 24px; + + @media screen and (max-width: 1024px) { + justify-content: left; + } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 64347d3..7a85604 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,6 +2,11 @@ background: red; } +.container { + padding-left: 0; + padding-right: 0; +} + .thumbImg, .figure, .carouselThumbBorder { @@ -17,6 +22,10 @@ .carouselGaleryThumbs { margin: 0 !important; + + @media screen and (max-width: 639px) { + display: inline-flex; + } } .productImageTag, @@ -36,7 +45,13 @@ .productNameContainer--quickview{ text-align: right; + + @media screen and (max-width: 1024px) { + text-align: left; + padding-top: 32px; + } } + /* .productDescriptionTitle { font-weight: 400; @@ -236,6 +251,10 @@ display: flex; align-items: center; padding: 0; + + @media screen and (max-width: 768px) { + width: 79vw; + } } :global(.vtex-address-form__postalCode-forgottenURL) { @@ -248,12 +267,23 @@ position: absolute; top: 43px; left: 312px; + + @media screen and (max-width: 768px) { + top: 85px; + width: 79vw; + left: 0; + text-align: right; + } } :global(.vtex-input-prefix__group ) { height: 49px; width: 231px; border-radius: 0; + + @media screen and (max-width: 768px) { + width: 79vw; + } } :global(.vtex-input__error) { -- 2.34.1 From 9949801df3248d613fa8cfcca1c1b36d4065b09e Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 7 Feb 2023 16:39:38 -0300 Subject: [PATCH 23/33] feat: adiciona testId --- store/blocks/pdp/product.jsonc | 22 +++++++++++++++++++--- store/blocks/product-price.jsonc | 9 ++++++++- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 40a6caa..81ea377 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -138,6 +138,14 @@ "children": ["pix-component"] }, + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + "html#right-col": { "props": { "tag": "section", @@ -145,10 +153,10 @@ }, "children": [ "html#product-name", - "product-identifier.product", + "html#codigo", "product-rating-summary", "flex-layout.row#selling-price", - "product-installments#m3", + "html#product-installments", "html#pix-price", "html#sku-selector-m3", "html#product-quantity-cart-button", @@ -178,9 +186,17 @@ } }, + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments#m3"] + }, + "html#product-name": { "props": { "tag": "div", + "testId": "product-name", "blockClass": "product-name" }, "children": ["vtex.store-components:product-name"] @@ -230,7 +246,7 @@ }, "children": [ "html#product-name", - "product-identifier.product", + "html#codigo", "html#availability", "html#sku-selector-m3" ] diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..35e911d 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -1,4 +1,11 @@ { + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["product-selling-price"] + }, + "flex-layout.row#selling-price": { "props": { "colGap": 2, @@ -7,7 +14,7 @@ "marginBottom": 4 }, "children": [ - "product-selling-price" + "html#selling-price" ] }, -- 2.34.1 From 279b673fbb517475d46aecab40b24b180381f03b Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 8 Feb 2023 01:00:20 -0300 Subject: [PATCH 24/33] =?UTF-8?q?feat:=20cria=20e=20estiliza=20os=20blocos?= =?UTF-8?q?=20da=20descri=C3=A7=C3=A3o=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 47 ++++- store/blocks/pdp/product.jsonc | 163 ++++++++++++++++-- styles/css/vtex.breadcrumb.css | 2 +- styles/css/vtex.store-components.css | 42 +++-- styles/css/vtex.tab-layout.css | 80 +++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 2 +- .../pages/product/vtex.store-components.scss | 44 +++-- .../sass/pages/product/vtex.tab-layout.scss | 69 ++++++++ 8 files changed, 402 insertions(+), 47 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/Html/styles.css b/react/components/Html/styles.css index f6dd5d4..f1004bc 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -13,8 +13,8 @@ @media screen and (min-width: 1920px) { [class*="html--product-main"], [class*="html--product-availability"] { - width: 71.2%; - grid-template-columns: 50.5% 49.5%; + width: 71.875%; + grid-template-columns: 50% 50%; } } @media screen and (max-width: 1024px) { @@ -165,6 +165,45 @@ } [class*="html--description"] { - position: relative; - top: 9px; + width: 100%; + margin-left: 32px; +} + +[class*="html--product-description"] { + display: flex; +} + +[class*="html--product-description"] .contentItem{ + display: flex; + flex-direction: row; +} + +[class*="html--product-description"] button { + font-weight: 400; + font-size: 18px; + line-height: 38px; + background-color: transparent; + border: transparent; + color: #BFBFBF; + height: 38px; +} +[class*="html--product-description"] button:hover { + border: transparent; + background-color: transparent; + color: #929292; + + transform: translateY(1px); +} + +[class*="html--description2"] h2::after { + content: " 2"; +} +[class*="html--description3"] h2::after { + content: " 3"; +} +[class*="html--description4"] h2::after { + content: " 4"; +} +[class*="html--description5"] h2::after { + content: " 5"; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 81ea377..d6657d4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "html#description", + "html#product-description", //"html#specifications-title", //"product-specification-group#table", "shelf.relatedProducts", @@ -20,17 +20,25 @@ "children": ["breadcrumb"] }, - "html#specifications-title": { - "props": { - "tag": "div", - "blockClass": "specifications-title" - }, - "children": ["rich-text#specifications"] - }, + //"html#specifications-title": { + // "props": { + // "tag": "div", + // "blockClass": "specifications-title" + // }, + // "children": ["rich-text#specifications"] + //}, - "rich-text#specifications": { + //"rich-text#specifications": { + // "props": { + // "text": "##### Product Specifications" + // } + //}, + + "product-images#description": { "props": { - "text": "##### Product Specifications" + "blockClass": "image-description", + "aspectRatio": "1:1", + "displayMode": "first-image" } }, @@ -41,6 +49,34 @@ }, "children": ["product-description"] }, + "html#description2": { + "props": { + "tag": "div", + "blockClass": "description2" + }, + "children": ["product-description"] + }, + "html#description3": { + "props": { + "tag": "div", + "blockClass": "description3" + }, + "children": ["product-description"] + }, + "html#description4": { + "props": { + "tag": "div", + "blockClass": "description4" + }, + "children": ["product-description"] + }, + "html#description5": { + "props": { + "tag": "div", + "blockClass": "description5" + }, + "children": ["product-description"] + }, "condition-layout.product#availability": { "props": { @@ -269,5 +305,112 @@ "Pinterest": true } } + }, + + "html#product-description": { + "props": { + "blockClass": "product-description", + "tag": "section", + "testId": "product-description" + }, + "children": ["tab-layout#product"] + }, + + "tab-layout#product": { + "props": { + "defaultActiveTabId": "product1", + "blockClass": "product" + }, + "children": ["tab-list#product", "tab-content#product"] + }, + + "tab-list#product": { + "props": { + "blockClass": "list-product" + }, + "children": [ + "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": { + "tabId": "product1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#product2": { + "props": { + "tabId": "product2", + "label": "Descrição 2" + } + }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição 3" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição 4" + } + }, + "tab-list.item#product5": { + "props": { + "tabId": "product5", + "label": "Descrição 5" + } + }, + + "tab-content#product": { + "props": { + "blockClass": "content-product" + }, + "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" + }, + "children": ["product-images#description", "html#description"] + }, + "tab-content.item#product2": { + "props": { + "tabId": "product2" + }, + "children": ["product-images#description", "html#description2"] + }, + "tab-content.item#product3": { + "props": { + "tabId": "product3" + }, + "children": ["product-images#description", "html#description3"] + }, + "tab-content.item#product4": { + "props": { + "tabId": "product4" + }, + "children": ["product-images#description", "html#description4"] + }, + "tab-content.item#product5": { + "props": { + "tabId": "product5" + }, + "children": ["product-images#description", "html#description5"] } + } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index c46f445..51d64b7 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -14,7 +14,7 @@ } @media screen and (min-width: 1920px) { .container { - width: 71.2%; + width: 71.875%; } } @media screen and ((min-width: 769) and (max-width: 1024px)) { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 1fef91d..98c95e7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -64,21 +64,6 @@ } } -/* -.productDescriptionTitle { - font-weight: 400; - font-size: 24px; - line-height: 32px; - color: #575757; -} - -.productDescriptionText { - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; -} -*/ .skuSelectorNameContainer { margin: 0; } @@ -423,4 +408,31 @@ .subscriberContainer { width: 60.07%; +} + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + height: 40px; + margin-bottom: 8px; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.listContainer--list-product { + display: flex; + justify-content: space-between; +} + +.productImageTag--image-description--main { + width: 100% !important; + margin: 0; + display: inline-block; } \ 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..c6007ff --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,80 @@ +/* +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 */ +.contentItem { + display: flex; +} + +.listContainer--list-product { + width: 94.4444%; + justify-content: space-around; + margin-left: auto; + margin-right: auto; + border-bottom: 1px solid #BFBFBF; +} +@media screen and (min-width: 1920px) { + .listContainer--list-product { + width: 71.875%; + } +} +@media screen and ((min-width: 769) and (max-width: 1024px)) { + .listContainer--list-product { + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + .listContainer--list-product { + width: 79%; + } +} + +.contentContainer--content-product { + width: 90%; + margin-left: auto; + margin-right: auto; + padding-top: 32px; +} +@media screen and (min-width: 1920px) { + .contentContainer--content-product { + width: 69.375%; + } +} +@media screen and ((min-width: 769) and (max-width: 1024px)) { + .contentContainer--content-product { + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + .contentContainer--content-product { + width: 79%; + } +} + +.listItem { + margin: 0; + padding: 0; +} + +.listItemActive { + border-bottom: 2px solid #000000; +} +.listItemActive :last-child { + background-color: transparent; + color: #000000; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.listItemActive :last-child:hover { + border-bottom: none; + color: #000000; + transform: none; +} \ 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 9653a40..d9edce3 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -4,7 +4,7 @@ padding: 0 0 16px 0; @media screen and (min-width: 1920px) { - width: 71.2%; + width: 71.875%; } @media screen and ((min-width: 769) and (max-width: 1024px)) { width: 92.1875%; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7a85604..c5bd2de 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -52,22 +52,6 @@ } } -/* -.productDescriptionTitle { - font-weight: 400; - font-size: 24px; - line-height: 32px; - color: #575757; -} - -.productDescriptionText { - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; -} -*/ - .skuSelectorNameContainer { margin: 0; } @@ -444,3 +428,31 @@ .subscriberContainer { width: 60.07%; } + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + height: 40px; + margin-bottom: 8px; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + + + .listContainer--list-product { + display: flex; + justify-content: space-between; + } + + .productImageTag--image-description--main { + width: 100% !important; + margin: 0; + display: inline-block; + } 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..3f25a22 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,69 @@ +.contentItem { + display: flex; +} + +.listContainer--list-product{ + width: 94.4444%; + justify-content: space-around; + margin-left: auto; + margin-right: auto; + + border-bottom: 1px solid #BFBFBF; + + @media screen and (min-width: 1920px) { + width: 71.875%; + } + + @media screen and ((min-width: 769) and (max-width: 1024px)) { + width: 92.1875%; + } + + @media screen and (max-width: 768px) { + width: 79%; + } +} + +.contentContainer--content-product { + width: 90%; + margin-left: auto; + margin-right: auto; + + padding-top: 32px; + + @media screen and (min-width: 1920px) { + width: 69.375%; + } + + @media screen and ((min-width: 769) and (max-width: 1024px)) { + width: 92.1875%; + } + + @media screen and (max-width: 768px) { + width: 79%; + } +} + +.listItem { + margin: 0; + padding: 0; +} + +.listItemActive { + border-bottom: 2px solid #000000; + + :last-child { + background-color: transparent; + color: #000000; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-top: 0 !important; + padding-bottom: 0 !important; + + &:hover { + border-bottom: none; + color: #000000; + transform: none; + } + } +} -- 2.34.1 From 15b7fae3e1cd84fa120c41a61a38885b94cd402b Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 8 Feb 2023 03:19:50 -0300 Subject: [PATCH 25/33] =?UTF-8?q?feat:=20faz=20adapta=C3=A7=C3=B5es=20para?= =?UTF-8?q?=20telas=20mobile,=20tablet=20e=20ultrawide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 23 ++++++++ styles/css/vtex.store-components.css | 56 ++++++++++++++++++- styles/css/vtex.tab-layout.css | 31 ++++++++++ .../pages/product/vtex.store-components.scss | 46 ++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 26 +++++++++ 5 files changed, 180 insertions(+), 2 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index f1004bc..7ddc590 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -168,10 +168,28 @@ width: 100%; margin-left: 32px; } +@media screen and (max-width: 1024px) { + [class*="html--description"] { + margin-left: 0; + margin-top: 16px; + } +} [class*="html--product-description"] { display: flex; } +@media screen and ((min-width: 769) and (max-width: 1024px)) { + [class*="html--product-description"] { + margin-top: 16px; + } +} +@media screen and (max-width: 768px) { + [class*="html--product-description"] { + position: relative; + top: 9px; + margin-top: 16px; + } +} [class*="html--product-description"] .contentItem{ display: flex; @@ -187,6 +205,11 @@ color: #BFBFBF; height: 38px; } +@media screen and (min-width: 1920px) { + [class*="html--product-description"] button { + font-size: 24px; + } +} [class*="html--product-description"] button:hover { border: transparent; background-color: transparent; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 98c95e7..4c889a6 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -271,6 +271,16 @@ padding: 0; border: none; } +@media screen and (max-width: 1024px) { + .shippingTable { + margin-top: 32px; + } +} +@media screen and (max-width: 768px) { + .shippingTable { + padding-top: 16px; + } +} .shippingTableHead { display: table-header-group; @@ -304,6 +314,21 @@ display: grid; grid-template-columns: 20% 15% 65%; } +@media screen and (min-width: 1025px) and (max-width: 1100px) { + .shippingTableRow { + grid-template-columns: 25% 20% 65%; + } +} +@media screen and (min-width: 461px) and (max-width: 768px) { + .shippingTableRow { + grid-template-columns: 32% 25% 43%; + } +} +@media screen and (max-width: 460px) { + .shippingTableRow { + grid-template-columns: 37% 25% 38%; + } +} .shippingTableCellDeliveryName, .shippingTableCellDeliveryName { @@ -329,7 +354,12 @@ display: flex; align-items: center; color: #AFAFAF; - padding: 0 0 15px 0; + padding: 0; +} + +.shippingTableBody { + display: grid; + gap: 16px; } .shippingTableRadioBtn { @@ -418,6 +448,17 @@ height: 40px; margin-bottom: 8px; } +@media screen and (min-width: 1920px) { + .productDescriptionTitle { + font-size: 32px; + margin-bottom: 16px; + } +} +@media screen and (max-width: 1024px) { + .productDescriptionTitle { + font-size: 20px; + } +} .productDescriptionText { font-weight: 400; @@ -425,6 +466,19 @@ line-height: 22px; color: #929292; } +@media screen and (min-width: 1920px) { + .productDescriptionText { + font-size: 18px; + line-height: 25px; + } +} +@media screen and (max-width: 1024px) { + .productDescriptionText { + font-size: 14px; + line-height: 19px; + padding-bottom: 16px; + } +} .listContainer--list-product { display: flex; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index c6007ff..4b2663d 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -10,6 +10,11 @@ .contentItem { display: flex; } +@media screen and (max-width: 1024px) { + .contentItem { + flex-direction: column; + } +} .listContainer--list-product { width: 94.4444%; @@ -28,6 +33,15 @@ width: 92.1875%; } } +@media screen and (max-width: 1024px) { + .listContainer--list-product { + flex-direction: column; + border-top: 1px solid #BFBFBF; + gap: 16px; + padding-top: 16px; + padding-bottom: 16px; + } +} @media screen and (max-width: 768px) { .listContainer--list-product { width: 79%; @@ -43,6 +57,7 @@ @media screen and (min-width: 1920px) { .contentContainer--content-product { width: 69.375%; + padding-top: 64px; } } @media screen and ((min-width: 769) and (max-width: 1024px)) { @@ -50,6 +65,12 @@ width: 92.1875%; } } +@media screen and (max-width: 1024px) { + .contentContainer--content-product { + padding-top: 16px; + border-bottom: 1px solid #BFBFBF; + } +} @media screen and (max-width: 768px) { .contentContainer--content-product { width: 79%; @@ -64,6 +85,11 @@ .listItemActive { border-bottom: 2px solid #000000; } +@media screen and (max-width: 1024px) { + .listItemActive { + border-bottom: none; + } +} .listItemActive :last-child { background-color: transparent; color: #000000; @@ -73,6 +99,11 @@ padding-top: 0 !important; padding-bottom: 0 !important; } +@media screen and (min-width: 1920px) { + .listItemActive :last-child { + font-size: 24px; + } +} .listItemActive :last-child:hover { border-bottom: none; color: #000000; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c5bd2de..06e105c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -280,6 +280,13 @@ margin: 16px 0 0 0; padding: 0; border: none; + + @media screen and (max-width: 1024px) { + margin-top: 32px; + } + @media screen and (max-width: 768px) { + padding-top: 16px; + } } .shippingTableHead { @@ -314,6 +321,18 @@ .shippingTableRow { display: grid; grid-template-columns: 20% 15% 65%; + + @media screen and (min-width: 1025px) and (max-width: 1100px) { + grid-template-columns: 25% 20% 65%; + } + + @media screen and (min-width: 461px) and (max-width: 768px) { + grid-template-columns: 32% 25% 43%; + } + + @media screen and (max-width: 460px) { + grid-template-columns: 37% 25% 38%; + } } .shippingTableCellDeliveryName, @@ -340,7 +359,12 @@ display: flex; align-items: center; color: #AFAFAF; - padding: 0 0 15px 0; + padding: 0; +} + +.shippingTableBody { + display: grid; + gap: 16px; } .shippingTableRadioBtn { @@ -436,6 +460,15 @@ color: #575757; height: 40px; margin-bottom: 8px; + + @media screen and (min-width: 1920px) { + font-size: 32px; + margin-bottom: 16px; + } + + @media screen and (max-width: 1024px) { + font-size: 20px; + } } .productDescriptionText { @@ -443,6 +476,17 @@ font-size: 16px; line-height: 22px; color: #929292; + + @media screen and (min-width: 1920px) { + font-size: 18px; + line-height: 25px; + } + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + padding-bottom: 16px; + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 3f25a22..ca01323 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,9 @@ .contentItem { display: flex; + + @media screen and (max-width: 1024px) { + flex-direction: column; + } } .listContainer--list-product{ @@ -18,6 +22,14 @@ width: 92.1875%; } + @media screen and (max-width: 1024px) { + flex-direction: column; + border-top: 1px solid #BFBFBF; + gap: 16px; + padding-top: 16px; + padding-bottom: 16px; + } + @media screen and (max-width: 768px) { width: 79%; } @@ -32,12 +44,18 @@ @media screen and (min-width: 1920px) { width: 69.375%; + padding-top: 64px; } @media screen and ((min-width: 769) and (max-width: 1024px)) { width: 92.1875%; } + @media screen and (max-width: 1024px) { + padding-top: 16px; + border-bottom: 1px solid #BFBFBF; + } + @media screen and (max-width: 768px) { width: 79%; } @@ -51,6 +69,10 @@ .listItemActive { border-bottom: 2px solid #000000; + @media screen and (max-width: 1024px) { + border-bottom: none; + } + :last-child { background-color: transparent; color: #000000; @@ -60,6 +82,10 @@ padding-top: 0 !important; padding-bottom: 0 !important; + @media screen and (min-width: 1920px) { + font-size: 24px; + } + &:hover { border-bottom: none; color: #000000; -- 2.34.1 From 98e024c5553680a369a1da94bb76a6122be0cee8 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 8 Feb 2023 17:02:25 -0300 Subject: [PATCH 26/33] feat: aplica e estiliza o placeholder do cep --- react/components/Pix/Pix.tsx | 21 +++++++++++++------ styles/css/vtex.store-components.css | 6 ++++++ .../pages/product/vtex.store-components.scss | 9 ++++++++ 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 02744f7..f968dcc 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -1,18 +1,27 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useProduct } from 'vtex.product-context'; import styles from './styles.css'; const Pix = () => { - const productContextValue = useProduct(); - //console.log(productContextValue); + // CEP Placeholder -------------------------------------------------------------- - const price = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + useEffect(() => { + const inputCep = document.querySelector(".vtex-address-form-4-x-input"); - const discount = (Number(price) * (10 / 100)); + inputCep?.setAttribute("placeholder", "Digite seu CEP"); + }); - const pixValue = (Number(price) - Number(discount)); + // Pix -------------------------------------------------------------------------- + + const productContextValue = useProduct(); + //console.log(productContextValue); + const price = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + + const discount = (Number(price) * (10 / 100)); + + const pixValue = (Number(price) - Number(discount)); return ( <> diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4c889a6..56fa195 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -265,6 +265,12 @@ position: absolute; margin: 2px; } +.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #AFAFAF; +} .shippingTable { margin: 16px 0 0 0; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 06e105c..4771002 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -274,6 +274,15 @@ position: absolute; margin: 2px; } + + :global(.vtex-address-form-4-x-input) { + &::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #AFAFAF; + } + } } .shippingTable { -- 2.34.1 From bc1d744b30272cacfd24630deeaf1379331df29b Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 8 Feb 2023 18:28:49 -0300 Subject: [PATCH 27/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 24 +++++++++++++++++ styles/css/vtex.breadcrumb.css | 8 ++++++ styles/css/vtex.store-components.css | 6 +++++ styles/css/vtex.store-footer.css | 23 ++++++++-------- styles/css/vtex.telemarketing.css | 12 +++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 8 ++++++ .../pages/product/vtex.store-components.scss | 27 ++++++++++++------- .../sass/pages/product/vtex.store-footer.scss | 3 +++ .../pages/product/vtex.telemarketing.scss | 3 +++ 9 files changed, 93 insertions(+), 21 deletions(-) create mode 100644 styles/css/vtex.telemarketing.css create mode 100644 styles/sass/pages/product/vtex.store-footer.scss create mode 100644 styles/sass/pages/product/vtex.telemarketing.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 7ddc590..253f204 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -61,6 +61,12 @@ padding-bottom: 12px; display: block !important; } +[class*="html--add-to-cart-button"] button:hover { + filter: opacity(88%); +} +[class*="html--add-to-cart-button"] button:active { + filter: opacity(100%); +} @media screen and (max-width: 768px) { [class*="html--add-to-cart-button"] button { @@ -106,6 +112,12 @@ display: block !important; } +[class*="html--product-quantity-cart-button"] button:hover { + color: #929292; +} +[class*="html--product-quantity-cart-button"] button:active { + color: #000000; +} @media screen and (max-width: 768px) { [class*="html--shipping-simulator"] { @@ -123,6 +135,12 @@ position: absolute; display: block !important; } +[class*="html--shipping-simulator"] button:hover { + filter: opacity(88%); +} +[class*="html--shipping-simulator"] button:active { + filter: opacity(100%); +} @media screen and (min-width: 769px) { [class*="html--shipping-simulator"] button { @@ -139,6 +157,12 @@ [class*="html--shipping-simulator"] a { color: #000000; } +[class*="html--shipping-simulator"] a:hover { + color: #929292; +} +[class*="html--shipping-simulator"] a:active { + color: #000000; +} [class*="html--shipping-simulator"] svg { display: none; diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 51d64b7..a563234 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -46,4 +46,12 @@ .container .link, .container .term { color: #929292; +} +.container .link:hover, +.container .term:hover { + color: #808080; +} +.container .link:active, +.container .term:active { + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 56fa195..59ac01a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -97,6 +97,9 @@ border: 1px solid #989898; position: relative; } +.skuSelectorInternalBox:hover { + border: 1.5px solid #949494; +} .skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) { width: 100%; @@ -123,6 +126,9 @@ color: rgba(185, 185, 185, 0.6); width: 20px; } +.skuSelectorItemTextValue:hover { + color: #949494; +} .skuSelectorItemImage { display: flex; diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..582b7af 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,12 @@ -.row--menu-row { - padding-right: 24px; -} - -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.footerLayout { + padding: 0 16px !important; +} \ No newline at end of file diff --git a/styles/css/vtex.telemarketing.css b/styles/css/vtex.telemarketing.css new file mode 100644 index 0000000..a8a6b87 --- /dev/null +++ b/styles/css/vtex.telemarketing.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 */ +.telemarketingBar { + padding: 0 16px !important; +} \ 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 d9edce3..ab7aaf2 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -37,5 +37,13 @@ .link, .term { color: #929292; + + &:hover { + color: #808080; + } + + &:active { + color: #929292; + } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4771002..cd66f19 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -85,6 +85,10 @@ border-radius: 50%; border: 1px solid #989898; position: relative; + + &:hover { + border: 1.5px solid #949494; + } } .skuSelectorItemImage { @@ -113,6 +117,10 @@ align-items: center; color: rgba(185, 185, 185, 0.6); width: 20px; + + &:hover { + color: #949494; + } } .skuSelectorItemImage { @@ -498,14 +506,13 @@ } } +.listContainer--list-product { + display: flex; + justify-content: space-between; +} - .listContainer--list-product { - display: flex; - justify-content: space-between; - } - - .productImageTag--image-description--main { - width: 100% !important; - margin: 0; - display: inline-block; - } +.productImageTag--image-description--main { + width: 100% !important; + margin: 0; + display: inline-block; +} diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss new file mode 100644 index 0000000..9588ced --- /dev/null +++ b/styles/sass/pages/product/vtex.store-footer.scss @@ -0,0 +1,3 @@ +.footerLayout { + padding: 0 16px !important; +} diff --git a/styles/sass/pages/product/vtex.telemarketing.scss b/styles/sass/pages/product/vtex.telemarketing.scss new file mode 100644 index 0000000..d043b38 --- /dev/null +++ b/styles/sass/pages/product/vtex.telemarketing.scss @@ -0,0 +1,3 @@ +.telemarketingBar { + padding: 0 16px !important; +} -- 2.34.1 From 5180468182edf2a69733c359cde967b87dd3044e Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 9 Feb 2023 00:33:44 -0300 Subject: [PATCH 28/33] feat: cria e estiliza o bloco para newsletter --- react/components/Html/styles.css | 58 +++++++++++++++++++ store/blocks/pdp/product.jsonc | 42 +++++++++++--- styles/css/vtex.rich-text.css | 21 ++++++- styles/css/vtex.store-components.css | 45 ++++++++++++++ styles/sass/pages/product/vtex.rich-text.scss | 18 ++++++ .../pages/product/vtex.store-components.scss | 43 ++++++++++++++ 6 files changed, 217 insertions(+), 10 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 253f204..2e1b580 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -254,3 +254,61 @@ [class*="html--description5"] h2::after { content: " 5"; } + +[class*="html--newsletter"] { + padding: 64px 0 32px 0; +} + +[class*="html--newsletter"] input { + background-color: transparent; + + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media screen and (max-width: 1024px) { + [class*="html--newsletter"] input { + font-size: 12px; + line-height: 16px; + } +} + +[class*="html--newsletter"] button { + background-color: transparent; + border: none; + border-radius: 0; + + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #FFFFFF; + + border-bottom: 2px solid #FFFFFF; +} +@media screen and ((min-width: 640px) and (max-width: 1024px)) { + [class*="html--newsletter"] button { + font-size: 14px; + line-height: 19px; + } +} +@media screen and (max-width: 639px) { + [class*="html--newsletter"] button { + font-size: 14px; + line-height: 19px; + position: absolute; + right: 0; + top: -31px; + } +} + +[class*="html--newsletter"] div { + border: none; +} +@media screen and (max-width: 639px) { + [class*="html--newsletter"] div { + position: relative; + } +} + diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d6657d4..bed0089 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,8 @@ //"html#specifications-title", //"product-specification-group#table", "shelf.relatedProducts", - "product-questions-and-answers" + "product-questions-and-answers", + "html#newsletter" ] }, @@ -109,14 +110,14 @@ ] }, - "product-specification-badges": { - "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } - }, + //"product-specification-badges": { + // "props": { + // "specificationGroupName": "Group", + // "specificationName": "On Sale", + // "visibleWhen": "True", + // "displayValue": "SPECIFICATION_NAME" + // } + //}, "html#stack": { "props": { @@ -411,6 +412,29 @@ "tabId": "product5" }, "children": ["product-images#description", "html#description5"] + }, + + "newsletter#newsletter-product": { + "props": { + "blockClass": "newsletter-product", + "label": "Receba ofertas e novidades por e-mail", + "placeholder": "Digite seu e-mail", + "submit": "ENVIAR" + } + }, + + "rich-text#newsletter-title": { + "props": { + "text": "Assine nossa newsletter", + "blockClass": "newsletter-title" + } + }, + + "html#newsletter": { + "props": { + "blockClass": "newsletter" + }, + "children": ["rich-text#newsletter-title" , "newsletter#newsletter-product"] } } diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..9ffc771 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,23 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--newsletter-title { + background-color: #000000; + justify-content: center; +} + +.paragraph--newsletter-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #FFFFFF; + margin: 32px 0 0 0; + height: 38px; +} +@media screen and (max-width: 1024px) { + .paragraph--newsletter-title { + margin-top: 64px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 59ac01a..95863ce 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -501,4 +501,49 @@ width: 100% !important; margin: 0; display: inline-block; +} + +.label--newsletter-product { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media screen and (max-width: 1024px) { + .label--newsletter-product { + font-size: 16px; + line-height: 22px; + } +} + +.inputGroup--newsletter-product { + border-bottom: 1px solid #929292 !important; +} + +.newsletter--newsletter-product .container { + padding: 16px 0; + margin: 0 auto; + background-color: #000000; +} +@media screen and (max-width: 1024px) { + .newsletter--newsletter-product .container { + padding: 16px 0 29px 0; + } +} + +.form--newsletter-product { + max-width: 53.75%; + padding: 0; +} +@media screen and ((min-width: 769px) and (max-width: 1024px)) { + .form--newsletter-product { + max-width: 96.875%; + margin: 0 16px; + } +} +@media screen and (max-width: 768px) { + .form--newsletter-product { + max-width: 95.833333%; + margin: 0 16px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..dc03363 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,18 @@ +.container--newsletter-title { + background-color: #000000; + justify-content: center; +} + +.paragraph--newsletter-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #FFFFFF; + margin: 32px 0 0 0; + height: 38px; + + @media screen and (max-width: 1024px) { + margin-top: 64px; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index cd66f19..e491096 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -516,3 +516,46 @@ margin: 0; display: inline-block; } + +.label--newsletter-product { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + + @media screen and (max-width: 1024px) { + font-size: 16px; + line-height: 22px; + } +} + +.inputGroup--newsletter-product{ + border-bottom: 1px solid #929292 !important; +} + +.newsletter--newsletter-product { + .container { + padding: 16px 0; + margin: 0 auto; + background-color: #000000; + + @media screen and (max-width: 1024px) { + padding: 16px 0 29px 0; + } + } +} + +.form--newsletter-product { + max-width: 53.75%; + padding: 0; + + @media screen and ((min-width: 769px) and (max-width: 1024px)) { + max-width: 96.875%; + margin: 0 16px; + } + + @media screen and (max-width: 768px) { + max-width: 95.833333%; + margin: 0 16px; + } +} -- 2.34.1 From 8162c119499ac92df523e73c9eedcef906a8d355 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 9 Feb 2023 13:50:37 -0300 Subject: [PATCH 29/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.rich-text.css | 5 ++--- styles/sass/pages/product/vtex.rich-text.scss | 3 +-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 9ffc771..005b613 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -12,17 +12,16 @@ justify-content: center; } -.paragraph--newsletter-title { +.headingLevel1--newsletter-title { font-weight: 400; font-size: 24px; line-height: 38px; text-align: center; color: #FFFFFF; margin: 32px 0 0 0; - height: 38px; } @media screen and (max-width: 1024px) { - .paragraph--newsletter-title { + .headingLevel1--newsletter-title { margin-top: 64px; } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index dc03363..94a92b5 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -3,14 +3,13 @@ justify-content: center; } -.paragraph--newsletter-title { +.headingLevel1--newsletter-title { font-weight: 400; font-size: 24px; line-height: 38px; text-align: center; color: #FFFFFF; margin: 32px 0 0 0; - height: 38px; @media screen and (max-width: 1024px) { margin-top: 64px; -- 2.34.1 From e211d8ef01e08a56a8d928ea488720d15856d387 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 9 Feb 2023 14:40:53 -0300 Subject: [PATCH 30/33] fix: corrige problema no css --- react/components/Html/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 2e1b580..0aaae48 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -305,10 +305,10 @@ [class*="html--newsletter"] div { border: none; + background-color: #000000; } @media screen and (max-width: 639px) { [class*="html--newsletter"] div { position: relative; } } - -- 2.34.1 From 07a8c1d92a9ee5f7df3f0f1ba0a55d6e6dc63c82 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 10 Feb 2023 01:24:39 -0300 Subject: [PATCH 31/33] =?UTF-8?q?feat:=20cria=20e=20estiliza=20a=20pratele?= =?UTF-8?q?ira=20de=20produtos=20e=20corrige=20erro=20ortogr=C3=A1fico=20n?= =?UTF-8?q?o=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 11 ++ store/blocks/pdp/product.jsonc | 59 +++++++++- styles/css/vtex.breadcrumb.css | 2 +- styles/css/vtex.product-price.css | 41 +++++++ styles/css/vtex.product-summary.css | 69 ++++++------ styles/css/vtex.rich-text.css | 25 +++++ styles/css/vtex.slider-layout.css | 104 ++++++++++++++---- styles/css/vtex.tab-layout.css | 4 +- .../sass/pages/product/vtex.breadcrumb.scss | 2 +- .../pages/product/vtex.product-price.scss | 40 +++++++ .../pages/product/vtex.product-summary.scss | 31 ++++++ styles/sass/pages/product/vtex.rich-text.scss | 23 ++++ .../pages/product/vtex.slider-layout.scss | 76 +++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 4 +- 14 files changed, 428 insertions(+), 63 deletions(-) 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/react/components/Html/styles.css b/react/components/Html/styles.css index 0aaae48..ad41676 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -257,6 +257,12 @@ [class*="html--newsletter"] { padding: 64px 0 32px 0; + margin-top: 17px; +} +@media screen and (max-width: 768px) { + [class*="html--newsletter"] { + padding-top: 32px; + } } [class*="html--newsletter"] input { @@ -312,3 +318,8 @@ position: relative; } } + +[class*="html--product-summary-shelf"] { + display: flex; + flex-direction: column; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index bed0089..1af54b3 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -6,8 +6,10 @@ "html#product-description", //"html#specifications-title", //"product-specification-group#table", - "shelf.relatedProducts", + //"shelf.relatedProducts", "product-questions-and-answers", + "rich-text#shelf-title", + "list-context.product-list#shelf", "html#newsletter" ] }, @@ -425,7 +427,7 @@ "rich-text#newsletter-title": { "props": { - "text": "Assine nossa newsletter", + "text": "# Assine nossa newsletter", "blockClass": "newsletter-title" } }, @@ -435,6 +437,57 @@ "blockClass": "newsletter" }, "children": ["rich-text#newsletter-title" , "newsletter#newsletter-product"] - } + }, + "rich-text#shelf-title": { + "props": { + "text": "#### Você também pode gostar:", + "blockClass": "shelf-title" + } + }, + + "slider-layout#shelf": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "blockClass": "carousel", + "showPaginationDots": "always", + "fullWidth": true + } + }, + + "html#slider-layout-shelf": { + "props": { + "blockClass": "slider-layout-shelf", + "testId": "product-summary-list" + }, + "children": ["slider-layout#shelf"] + }, + + "product-summary.shelf#product-summary": { + "children": ["html#product-summary-shelf"] + }, + + "html#product-summary-shelf": { + "props": { + "blockClass": "product-summary-shelf", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#shelf", + "product-summary-name", + "product-list-price#summary", + "product-selling-price#summary" + ] + }, + + "list-context.product-list#shelf": { + "blocks": ["product-summary.shelf#product-summary"], + "children": ["html#slider-layout-shelf"] + } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index a563234..ec0f85a 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -17,7 +17,7 @@ width: 71.875%; } } -@media screen and ((min-width: 769) and (max-width: 1024px)) { +@media screen and ((min-width: 769px) and (max-width: 1024px)) { .container { width: 92.1875%; } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index cb88bd8..5ecb1b6 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -22,4 +22,45 @@ .installments-highlight--m3-custom-installments { font-weight: 700; +} + +.listPriceValue--summary { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: #BABABA; +} +@media screen and (max-width: 1024px) { + .listPriceValue--summary { + font-size: 12px; + line-height: 16px; + } +} +.listPriceValue--summary::before { + content: "de "; +} +.listPriceValue--summary::after { + content: " por"; +} + +.sellingPrice--summary--hasListPrice { + font-size: 24px; + line-height: 33px; + margin-top: 8px; + margin-bottom: 32px; +} +@media screen and ((min-width: 769px) and (max-width: 1024px)) { + .sellingPrice--summary--hasListPrice { + font-size: 18px; + line-height: 25px; + margin-bottom: 24px; + } +} +@media screen and (max-width: 768px) { + .sellingPrice--summary--hasListPrice { + font-size: 18px; + line-height: 25px; + margin-bottom: 16px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..62be959 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,43 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.nameContainer { + padding: 16px 0 8px 0; } -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; } - -.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; +@media screen and (max-width: 1024px) { + .productBrand { + font-size: 14px; + line-height: 19px; } } -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; +.containerNormal { + margin: 0; +} +@media screen and ((min-width: 769px) and (max-width: 1024px)) { + .containerNormal { + margin: 0 12px; + } +} +@media screen and (max-width: 768px) { + .containerNormal { + margin: 0 8px; + } } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +.element { + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 005b613..f3ca83c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -24,4 +24,29 @@ .headingLevel1--newsletter-title { margin-top: 64px; } +} + +.heading-level-4 { + margin: 0; +} + +.container--shelf-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + padding: 16px 0 32px 0; + justify-content: center; +} +@media screen and ((min-width: 769px) and (max-width: 1024px)) { + .container--shelf-title { + padding-bottom: 24px; + } +} +@media screen and (max-width: 768px) { + .container--shelf-title { + font-size: 20px; + padding-bottom: 16px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..ae34f00 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,95 @@ -.sliderLayoutContainer { - justify-content: center; -} - +/* +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 */ .sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; + width: 90%; + margin: 0 auto; +} +@media screen and (min-width: 1920px) { + .sliderLayoutContainer--carousel { + width: 69.375%; + } +} +@media screen and ((min-width: 769px) and (max-width: 1024px)) { + .sliderLayoutContainer--carousel { + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + .sliderLayoutContainer--carousel { + width: 79%; + } } -.sliderTrackContainer { - max-width: 100%; +.paginationDot { + height: 10px; + width: 10px; + background-color: #000000; + padding: 0; + margin: 0 6px; +} + +.paginationDot--isActive { + height: 17px !important; + width: 17px !important; + border: 0.5px solid #000000; + background-color: #FFFFFF; } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + align-items: center; + bottom: -17px; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderRightArrow--carousel, +.sliderLeftArrow--carousel { + padding: 0; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderRightArrow--carousel { + right: -32px; } +@media screen and ((min-width: 769px) and (max-width: 1024px)) { + .sliderRightArrow--carousel { + right: -24px; + } +} +@media screen and (max-width: 768px) { + .sliderRightArrow--carousel { + right: -16px; + } +} + +.sliderLeftArrow--carousel { + left: -32px; +} +@media screen and ((min-width: 769px) and (max-width: 1024px)) { + .sliderLeftArrow--carousel { + left: -24px; + } +} +@media screen and (max-width: 768px) { + .sliderLeftArrow--carousel { + left: -16px; + } +} + +.sliderTrack--carousel { + gap: 16px; +} +@media screen and ((min-width: 769px) and (max-width: 1024px)) { + .sliderTrack--carousel { + gap: 12px; + } +} +@media screen and (max-width: 768px) { + .sliderTrack--carousel { + gap: 8px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 4b2663d..0693769 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -28,7 +28,7 @@ width: 71.875%; } } -@media screen and ((min-width: 769) and (max-width: 1024px)) { +@media screen and ((min-width: 769px) and (max-width: 1024px)) { .listContainer--list-product { width: 92.1875%; } @@ -60,7 +60,7 @@ padding-top: 64px; } } -@media screen and ((min-width: 769) and (max-width: 1024px)) { +@media screen and ((min-width: 769px) and (max-width: 1024px)) { .contentContainer--content-product { width: 92.1875%; } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index ab7aaf2..47d0a52 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -6,7 +6,7 @@ @media screen and (min-width: 1920px) { width: 71.875%; } - @media screen and ((min-width: 769) and (max-width: 1024px)) { + @media screen and ((min-width: 769px) and (max-width: 1024px)) { width: 92.1875%; } @media screen and (max-width: 768px) { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 82c2f52..bb9ab38 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -14,3 +14,43 @@ .installments-highlight--m3-custom-installments { font-weight: 700; } + +.listPriceValue--summary { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-decoration-line: line-through; + color: #BABABA; + + @media screen and (max-width: 1024px){ + font-size: 12px; + line-height: 16px; + } + + &::before { + content: "de "; + } + + &::after { + content: " por"; + } +} + +.sellingPrice--summary--hasListPrice { + font-size: 24px; + line-height: 33px; + margin-top: 8px; + margin-bottom: 32px; + + @media screen and ((min-width: 769px) and (max-width: 1024px)) { + font-size: 18px; + line-height: 25px; + margin-bottom: 24px; + } + + @media screen and (max-width: 768px) { + font-size: 18px; + line-height: 25px; + margin-bottom: 16px; + } +} 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..3489d2e --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,31 @@ +.nameContainer { + padding: 16px 0 8px 0; +} + +.productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; + + @media screen and (max-width: 1024px){ + font-size: 14px; + line-height: 19px; + } +} + +.containerNormal { + margin: 0; + + @media screen and ((min-width: 769px) and (max-width: 1024px)) { + margin: 0 12px; + } + + @media screen and (max-width: 768px) { + margin: 0 8px; + } +} + +.element { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 94a92b5..dd7752a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -15,3 +15,26 @@ margin-top: 64px; } } + +.heading-level-4 { + margin: 0; +} + +.container--shelf-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + padding: 16px 0 32px 0; + justify-content: center; + + @media screen and ((min-width: 769px) and (max-width: 1024px)) { + padding-bottom: 24px; + } + + @media screen and (max-width: 768px) { + font-size: 20px; + padding-bottom: 16px; + } +} 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..63e3835 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,76 @@ +.sliderLayoutContainer--carousel { + width: 90%; + margin: 0 auto; + + @media screen and (min-width: 1920px) { + width: 69.375%; + } + @media screen and ((min-width: 769px) and (max-width: 1024px)) { + width: 92.1875%; + } + @media screen and (max-width: 768px) { + width: 79%; + } +} + +.paginationDot { + height: 10px; + width: 10px; + background-color: #000000; + padding: 0; + margin: 0 6px; +} + +.paginationDot--isActive { + height: 17px !important; + width: 17px !important; + border: 0.5px solid #000000; + background-color: #FFFFFF; +} + +.paginationDotsContainer { + align-items: center; + bottom: -17px; +} + +.sliderRightArrow--carousel, +.sliderLeftArrow--carousel { + padding: 0; +} + +.sliderRightArrow--carousel { + right: -32px; + + @media screen and ((min-width: 769px) and (max-width: 1024px)) { + right: -24px; + } + + @media screen and (max-width: 768px) { + right: -16px; + } +} + +.sliderLeftArrow--carousel { + left: -32px; + + @media screen and ((min-width: 769px) and (max-width: 1024px)) { + left: -24px; + } + + @media screen and (max-width: 768px) { + left: -16px; + } +} + +.sliderTrack--carousel { + gap: 16px; + + @media screen and ((min-width: 769px) and (max-width: 1024px)) { + gap: 12px; + } + + @media screen and (max-width: 768px) { + gap: 8px; + } +} + diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index ca01323..c5a39d3 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -18,7 +18,7 @@ width: 71.875%; } - @media screen and ((min-width: 769) and (max-width: 1024px)) { + @media screen and ((min-width: 769px) and (max-width: 1024px)) { width: 92.1875%; } @@ -47,7 +47,7 @@ padding-top: 64px; } - @media screen and ((min-width: 769) and (max-width: 1024px)) { + @media screen and ((min-width: 769px) and (max-width: 1024px)) { width: 92.1875%; } -- 2.34.1 From 5bd615e4cabdc4ee3a21c1142a72bd57f5299112 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 10 Feb 2023 02:39:24 -0300 Subject: [PATCH 32/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 10 ++++++++++ store/blocks/pdp/product.jsonc | 12 +++++------- styles/css/vtex.flex-layout.css | 4 ++++ styles/css/vtex.menu.css | 14 ++++++++++++++ styles/css/vtex.minicart.css | 14 ++++++++++++++ styles/css/vtex.telemarketing.css | 4 ++++ styles/sass/pages/product/vtex.flex-layout.scss | 4 ++++ styles/sass/pages/product/vtex.menu.scss | 5 +++++ styles/sass/pages/product/vtex.minicart.scss | 7 +++++++ styles/sass/pages/product/vtex.telemarketing.scss | 4 ++++ 10 files changed, 71 insertions(+), 7 deletions(-) create mode 100644 styles/css/vtex.menu.css create mode 100644 styles/css/vtex.minicart.css create mode 100644 styles/sass/pages/product/vtex.menu.scss create mode 100644 styles/sass/pages/product/vtex.minicart.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index ad41676..ba9e749 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -308,6 +308,16 @@ top: -31px; } } +[class*="html--newsletter"] button:hover { + color: #929292; + border-bottom: 2px solid #929292; + border-top: none; + background-color: transparent; +} +[class*="html--newsletter"] button:active { + color: #FFFFFF; + border-bottom: 2px solid #FFFFFF; +} [class*="html--newsletter"] div { border: none; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1af54b3..2d5e4c6 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -350,25 +350,25 @@ "tab-list.item#product2": { "props": { "tabId": "product2", - "label": "Descrição 2" + "label": "Descrição" } }, "tab-list.item#product3": { "props": { "tabId": "product3", - "label": "Descrição 3" + "label": "Descrição" } }, "tab-list.item#product4": { "props": { "tabId": "product4", - "label": "Descrição 4" + "label": "Descrição" } }, "tab-list.item#product5": { "props": { "tabId": "product5", - "label": "Descrição 5" + "label": "Descrição" } }, @@ -456,9 +456,7 @@ "infinite": true, "showNavigationArrows": "always", "blockClass": "carousel", - "showPaginationDots": "always", - "fullWidth": true - } + "showPaginationDots": "always" } }, "html#slider-layout-shelf": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 04f2fb1..7a8966d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,4 +11,8 @@ padding-top: 0; padding-bottom: 0; margin: 0; +} + +.flexRowContent--main-header-mobile { + align-items: center; } \ No newline at end of file diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css new file mode 100644 index 0000000..957cb5a --- /dev/null +++ b/styles/css/vtex.menu.css @@ -0,0 +1,14 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +@media screen and (max-width: 1024px) { + .styledLinkContainer { + margin: 0; + } +} \ No newline at end of file diff --git a/styles/css/vtex.minicart.css b/styles/css/vtex.minicart.css new file mode 100644 index 0000000..e53a916 --- /dev/null +++ b/styles/css/vtex.minicart.css @@ -0,0 +1,14 @@ +/* +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 */ +.minicartCheckoutButton :local(button) { + background-color: #000000; + border-radius: 0; + border: none; +} \ No newline at end of file diff --git a/styles/css/vtex.telemarketing.css b/styles/css/vtex.telemarketing.css index a8a6b87..b8efdfc 100644 --- a/styles/css/vtex.telemarketing.css +++ b/styles/css/vtex.telemarketing.css @@ -9,4 +9,8 @@ /* Grid breakpoints */ .telemarketingBar { padding: 0 16px !important; +} + +.container { + background-color: #000000; } \ 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 e6e8fb3..26a1cfb 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -3,3 +3,7 @@ padding-bottom: 0; margin: 0; } + +.flexRowContent--main-header-mobile { + align-items: center; +} diff --git a/styles/sass/pages/product/vtex.menu.scss b/styles/sass/pages/product/vtex.menu.scss new file mode 100644 index 0000000..d599847 --- /dev/null +++ b/styles/sass/pages/product/vtex.menu.scss @@ -0,0 +1,5 @@ +.styledLinkContainer { + @media screen and (max-width: 1024px) { + margin: 0; + } +} diff --git a/styles/sass/pages/product/vtex.minicart.scss b/styles/sass/pages/product/vtex.minicart.scss new file mode 100644 index 0000000..01d0995 --- /dev/null +++ b/styles/sass/pages/product/vtex.minicart.scss @@ -0,0 +1,7 @@ +.minicartCheckoutButton { + :local(button) { + background-color: #000000; + border-radius: 0; + border: none; + } +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.telemarketing.scss b/styles/sass/pages/product/vtex.telemarketing.scss index d043b38..77a4f23 100644 --- a/styles/sass/pages/product/vtex.telemarketing.scss +++ b/styles/sass/pages/product/vtex.telemarketing.scss @@ -1,3 +1,7 @@ .telemarketingBar { padding: 0 16px !important; } + +.container { + background-color: #000000; +} \ No newline at end of file -- 2.34.1 From bf9a47f52138602028a6f979d1b7e053009e0c9c Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 10 Feb 2023 20:07:42 -0300 Subject: [PATCH 33/33] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no?= =?UTF-8?q?=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 7 ++- store/blocks/pdp/product.jsonc | 49 +++++++++++-------- styles/css/vtex.breadcrumb.css | 4 +- styles/css/vtex.minicart.css | 8 +++ styles/css/vtex.store-components.css | 16 ++++-- styles/css/vtex.store-footer.css | 2 +- styles/css/vtex.telemarketing.css | 3 +- .../sass/pages/product/vtex.breadcrumb.scss | 5 +- styles/sass/pages/product/vtex.minicart.scss | 12 ++++- .../pages/product/vtex.store-components.scss | 14 ++++-- .../sass/pages/product/vtex.store-footer.scss | 2 +- .../pages/product/vtex.telemarketing.scss | 5 +- 12 files changed, 81 insertions(+), 46 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index ba9e749..0720c01 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -111,6 +111,7 @@ border-radius: 0; display: block !important; + cursor: pointer; } [class*="html--product-quantity-cart-button"] button:hover { color: #929292; @@ -134,6 +135,7 @@ position: absolute; display: block !important; + cursor: pointer; } [class*="html--shipping-simulator"] button:hover { filter: opacity(88%); @@ -256,7 +258,7 @@ } [class*="html--newsletter"] { - padding: 64px 0 32px 0; + padding: 64px 0 0 0; margin-top: 17px; } @media screen and (max-width: 768px) { @@ -303,9 +305,6 @@ [class*="html--newsletter"] button { font-size: 14px; line-height: 19px; - position: absolute; - right: 0; - top: -31px; } } [class*="html--newsletter"] button:hover { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 2d5e4c6..942dbe2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -23,19 +23,23 @@ "children": ["breadcrumb"] }, - //"html#specifications-title": { - // "props": { - // "tag": "div", - // "blockClass": "specifications-title" - // }, - // "children": ["rich-text#specifications"] - //}, + /* + "html#specifications-title": { + "props": { + "tag": "div", + "blockClass": "specifications-title" + }, + "children": ["rich-text#specifications"] + }, + */ - //"rich-text#specifications": { - // "props": { - // "text": "##### Product Specifications" - // } - //}, + /* + "rich-text#specifications": { + "props": { + "text": "##### Product Specifications" + } + }, + */ "product-images#description": { "props": { @@ -112,14 +116,14 @@ ] }, - //"product-specification-badges": { - // "props": { - // "specificationGroupName": "Group", - // "specificationName": "On Sale", - // "visibleWhen": "True", - // "displayValue": "SPECIFICATION_NAME" - // } - //}, + "product-specification-badges": { + "props": { + "specificationGroupName": "Group", + "specificationName": "On Sale", + "visibleWhen": "True", + "displayValue": "SPECIFICATION_NAME" + } + }, "html#stack": { "props": { @@ -299,6 +303,7 @@ "children": ["availability-subscriber"] }, + /* "share#default": { "props": { "social": { @@ -309,6 +314,7 @@ } } }, + */ "html#product-description": { "props": { @@ -456,7 +462,8 @@ "infinite": true, "showNavigationArrows": "always", "blockClass": "carousel", - "showPaginationDots": "always" } + "showPaginationDots": "always" + } }, "html#slider-layout-shelf": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index ec0f85a..c80a0ac 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -42,10 +42,8 @@ font-weight: 400; font-size: 14px; line-height: 19px; -} -.container .link, -.container .term { color: #929292; + cursor: pointer; } .container .link:hover, .container .term:hover { diff --git a/styles/css/vtex.minicart.css b/styles/css/vtex.minicart.css index e53a916..a4956b6 100644 --- a/styles/css/vtex.minicart.css +++ b/styles/css/vtex.minicart.css @@ -11,4 +11,12 @@ background-color: #000000; border-radius: 0; border: none; +} +.minicartCheckoutButton :local(button):hover { + background-color: #000000; + filter: opacity(88%); +} +.minicartCheckoutButton :local(button):active { + background-color: #000000; + filter: opacity(100%); } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 95863ce..c3210b6 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -283,14 +283,10 @@ padding: 0; border: none; } -@media screen and (max-width: 1024px) { - .shippingTable { - margin-top: 32px; - } -} @media screen and (max-width: 768px) { .shippingTable { padding-top: 16px; + margin-top: 24px; } } @@ -519,6 +515,16 @@ .inputGroup--newsletter-product { border-bottom: 1px solid #929292 !important; } +@media screen and (max-width: 639px) { + .inputGroup--newsletter-product { + justify-content: space-between; + display: flex; + } +} +.inputGroup--newsletter-product :local(label) { + display: flex; + align-items: center; +} .newsletter--newsletter-product .container { padding: 16px 0; diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 582b7af..055d5f2 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -8,5 +8,5 @@ /* Media Query M3 */ /* Grid breakpoints */ .footerLayout { - padding: 0 16px !important; + padding: 32px 16px 0 16px !important; } \ No newline at end of file diff --git a/styles/css/vtex.telemarketing.css b/styles/css/vtex.telemarketing.css index b8efdfc..b6ed319 100644 --- a/styles/css/vtex.telemarketing.css +++ b/styles/css/vtex.telemarketing.css @@ -11,6 +11,7 @@ padding: 0 16px !important; } -.container { +.container, +.wrapper { background-color: #000000; } \ 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 47d0a52..8589f16 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -32,11 +32,8 @@ font-weight: 400; font-size: 14px; line-height: 19px; - } - - .link, - .term { color: #929292; + cursor: pointer; &:hover { color: #808080; diff --git a/styles/sass/pages/product/vtex.minicart.scss b/styles/sass/pages/product/vtex.minicart.scss index 01d0995..5757148 100644 --- a/styles/sass/pages/product/vtex.minicart.scss +++ b/styles/sass/pages/product/vtex.minicart.scss @@ -3,5 +3,15 @@ background-color: #000000; border-radius: 0; border: none; + + &:hover { + background-color: #000000; + filter: opacity(88%); + } + + &:active { + background-color: #000000; + filter: opacity(100%); + } } -} \ 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 e491096..1ccabd1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -298,11 +298,9 @@ padding: 0; border: none; - @media screen and (max-width: 1024px) { - margin-top: 32px; - } @media screen and (max-width: 768px) { padding-top: 16px; + margin-top: 24px; } } @@ -531,6 +529,16 @@ .inputGroup--newsletter-product{ border-bottom: 1px solid #929292 !important; + + @media screen and (max-width: 639px) { + justify-content: space-between; + display: flex; + } + + :local(label) { + display: flex; + align-items: center; + } } .newsletter--newsletter-product { diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss index 9588ced..0987da1 100644 --- a/styles/sass/pages/product/vtex.store-footer.scss +++ b/styles/sass/pages/product/vtex.store-footer.scss @@ -1,3 +1,3 @@ .footerLayout { - padding: 0 16px !important; + padding: 32px 16px 0 16px!important; } diff --git a/styles/sass/pages/product/vtex.telemarketing.scss b/styles/sass/pages/product/vtex.telemarketing.scss index 77a4f23..a713af9 100644 --- a/styles/sass/pages/product/vtex.telemarketing.scss +++ b/styles/sass/pages/product/vtex.telemarketing.scss @@ -2,6 +2,7 @@ padding: 0 16px !important; } -.container { +.container, +.wrapper { background-color: #000000; -} \ No newline at end of file +} -- 2.34.1