From 1b3894f66f69e652bdebb0c53fb30e237e91b64f Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Sat, 21 Jan 2023 14:23:05 -0300 Subject: [PATCH 01/22] feat(product): adicionando estilo no bradcrumb product --- styles/css/agenciamagma.store-theme.css | 3 +- styles/css/vtex.breadcrumb.css | 41 +++++++++++++++++++ styles/css/vtex.rich-text.css | 1 + styles/css/vtex.store-components.css | 1 + .../product/BreadCrumb/vtex.breadcrumb.scss | 35 ++++++++++++++++ .../product/agenciamagma.store-theme.scss | 4 +- styles/sass/utils/_vars.scss | 11 +++++ 7 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..8462e1a 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,12 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); /* Grid breakpoints */ .html { background-color: red; } .html--pdp-breadcrumb { - background-color: green; + background-color: transparent; } \ 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..adaa4ea --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,41 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ +.container { + padding: 16px 360px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .container { + padding: 16px 40px; + } +} +.container .link:hover { + color: #929292; +} +.container .homeLink { + vertical-align: baseline; + text-decoration: none; +} +.container .homeLink::after { + content: "Home"; + display: block; +} +.container .homeLink .homeIcon { + display: none; +} +.container .term { + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..ec68700 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..cdd69e5 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); /* Grid breakpoints */ .newsletter { background: red; diff --git a/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss new file mode 100644 index 0000000..d4535b3 --- /dev/null +++ b/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss @@ -0,0 +1,35 @@ +.container { + padding:16px 360px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray6; + + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + padding: 16px 40px; + } + + .link:hover { + color: $color-gray6; + } + .homeLink { + vertical-align: baseline; + text-decoration: none; + + + &::after { + content: 'Home'; + display: block; + } + + .homeIcon { + display: none; + } + } + .term { + color: $color-gray6; + } +} diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..463614b 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,8 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: transparent; } + + diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..92de514 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,7 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); + +$font-family: 'Open Sans', sans-serif; + $color-black: #292929; $color-white: #fff; @@ -7,6 +11,8 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #929292; + $color-blue: #4267b2; @@ -29,3 +35,8 @@ $z-index: ( level4: 20, level5: 25 ) !default; + +//media-queries +$mq-desktop: "(min-width: 1025px) and (max-width: 2499px)"; +$mq-tablet: "(min-width: 491px) and (max-width: 1024px)"; +$mq-mobile: "(min-width: 280px) and (max-width: 490px)"; From b8841846a4caf9afa422b3e1347eeb4b74233981 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Tue, 24 Jan 2023 10:52:58 -0300 Subject: [PATCH 02/22] feat(product): adicionando estilo no product-image product --- manifest.json | 1 - store/blocks/pdp/product.jsonc | 10 +- styles/css/vtex.breadcrumb.css | 12 ++ styles/css/vtex.flex-layout.css | 25 +++- styles/css/vtex.stack-layout.css | 14 ++- styles/css/vtex.store-components.css | 64 +++++++++- .../product/BreadCrumb/vtex.breadcrumb.scss | 15 +++ .../sass/pages/product/vtex.flex-layout.scss | 111 ++++++++++++++++++ .../sass/pages/product/vtex.stack-layout.scss | 10 ++ .../pages/product/vtex.store-components.scss | 64 +++++++++- 10 files changed, 313 insertions(+), 13 deletions(-) create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.stack-layout.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..c12e6e3 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -50,7 +50,8 @@ "marginTop": 4, "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + "paddingBottom": 7, + "blockClass": "product__image" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -87,11 +88,14 @@ }, "product-images": { "props": { + "testId": "product-images", "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, - "displayThumbnailsArrows": true + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", + "children": ["product-images"] } }, "flex-layout.col#right-col": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index adaa4ea..b2c6c03 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -36,6 +36,18 @@ .container .homeLink .homeIcon { display: none; } +.container .link--1 { + font-size: 0; +} +.container .link--1::after { + content: "Sapatos"; + display: block; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} .container .term { color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..b8fd00b 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +19,12 @@ 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; @@ -96,3 +104,16 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .flexRowContent--product__image { + flex-direction: column; + } +} + +@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .stretchChildrenWidth { + width: 100% !important; + padding-right: 0; + } +} \ No newline at end of file diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css index 7149eb7..53dadfd 100644 --- a/styles/css/vtex.stack-layout.css +++ b/styles/css/vtex.stack-layout.css @@ -1,10 +1,20 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ .stackItem--product { width: 100%; - min-height: 257px + min-height: none; } .stackItem--quickview { right: 0; top: 0; left: auto; -} +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index cdd69e5..7f0b44a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,6 +8,66 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); /* Grid breakpoints */ -.newsletter { - background: red; +.container { + padding: 16px 360px; + margin: 0; +} +@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .container { + padding: 16px 40px; + } +} + +.swiperCaretNext, .swiperCaretPrev { + display: none; +} + +.carouselGaleryCursor { + cursor: initial; +} + +.productImageTag--main, .videoContainer { + object-fit: unset !important; + max-height: 904px !important; + cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default; +} +@media (min-width: 1025px) and (max-width: 2499px) { + .productImageTag--main, .videoContainer { + max-height: 664px !important; + } +} +@media (min-width: 491px) and (max-width: 1024px) { + .productImageTag--main, .videoContainer { + max-height: 944px !important; + } +} +@media (min-width: 280px) and (max-width: 490px) { + .productImageTag--main, .videoContainer { + max-height: 296px !important; + } +} + +.carouselGaleryThumbs { + margin-top: 0; +} +@media (min-width: 280px) and (max-width: 490px), (min-width: 491px) and (max-width: 1024px) { + .carouselGaleryThumbs { + display: block !important; + } +} +.carouselGaleryThumbs .productImagesThumb { + width: 10% !important; + height: 100% !important; + margin: 16px 16px 0 0; + border-radius: 8px; +} +@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .carouselGaleryThumbs .productImagesThumb { + width: 90px !important; + height: 90px !important; + } +} +.carouselGaleryThumbs .productImagesThumb .figure, .carouselGaleryThumbs .productImagesThumb .thumbImg { + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss index d4535b3..6bd6f7b 100644 --- a/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss @@ -29,6 +29,21 @@ display: none; } } + + .link--1 { + font-size: 0; + + &::after { + content: 'Sapatos'; + display: block; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + } + .term { color: $color-gray6; } 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..3f4e529 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,111 @@ +.flexRowContent--menu-link, +.flexRowContent--main-header { + padding: 0 0.5rem; +} + +@media screen and (min-width: 40em) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 1rem; + } +} + +@media screen and (min-width: 80rem) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 0.25rem; + } +} + +.flexRowContent--menu-link { + background-color: #03044e; + color: #fff; +} + +.flexRowContent--main-header { + background-color: #f0f0f0; +} + +.flexRowContent--main-header-mobile { + align-items: center; + padding: 0.625rem 0.5rem; + background-color: #f0f0f0; +} + +.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { + color: #ffffff; + font-size: 14px; +} + +.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { + color: #727273; + font-size: 14px; +} + +.flexRow--deals { + background-color: #0F3E99; + padding: 14px 0px; +} + +.flexRow--deals .stretchChildrenWidth { + align-items: center; +} + +.flexRow--deals .flexCol { + align-items: center; + margin-bottom: 5px; + padding-top: 5px; +} + +.flexCol--filterCol { + max-width: 500px; + min-width: 230px; +} + +.flexCol--productCountCol { + align-items: flex-start; +} + +.flexCol--orderByCol { + align-items: flex-end; +} + +.flexCol--orderByMobileCol { + width: 42%; +} + +.flexCol--filterMobileCol { + width: 38%; +} + +.flexRow--quickviewMainRow { + display: flex; + max-height: 100%; +} + +.flexColChild--quickviewDetails:first-child { + overflow-y: auto; + height: 66% !important; + overflow-x: hidden; +} + +.flexColChild--quickviewDetails:last-child { + height: 34% !important; +} + +.flexRow--addToCartRow { + padding-bottom: 1rem; +} + +.flexRowContent--product__image{ + @media #{$mq-tablet}, #{$mq-mobile} { + flex-direction: column; + } +} + +.stretchChildrenWidth { + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100% !important; + padding-right: 0; + } +} diff --git a/styles/sass/pages/product/vtex.stack-layout.scss b/styles/sass/pages/product/vtex.stack-layout.scss new file mode 100644 index 0000000..f863fcb --- /dev/null +++ b/styles/sass/pages/product/vtex.stack-layout.scss @@ -0,0 +1,10 @@ +.stackItem--product { + width: 100%; + min-height: none; +} + +.stackItem--quickview { + right: 0; + top: 0; + left: auto; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..ce62c32 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,61 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.container { + padding:16px 360px; + margin: 0; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + padding: 16px 40px; + } +} + +.swiperCaretNext, .swiperCaretPrev { + display: none; +} +.carouselGaleryCursor { + cursor: initial; +} + +.productImageTag--main, .videoContainer { + object-fit: unset !important; + max-height: 904px !important; + cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default; + + @media #{$mq-desktop} { + max-height: 664px !important; + } + + @media #{$mq-tablet} { + max-height: 944px !important; + } + + @media #{$mq-mobile} { + max-height: 296px !important; + } + +} +.carouselGaleryThumbs { + margin-top: 0; + + @media #{$mq-mobile}, #{$mq-tablet} { + display: block !important; + } + + .productImagesThumb { + width: 10% !important; + height: 100% !important; + margin: 16px 16px 0 0; + border-radius: 8px; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + width: 90px !important; + height: 90px !important; + } + + .figure, .thumbImg{ + width: 100%; + height: 100%; + } + } +} + + + From e50d232b851d0ede6759af927e455ed234a191dd Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Tue, 24 Jan 2023 12:02:55 -0300 Subject: [PATCH 03/22] feat(product): adicionando tamanho real de imagem no product product --- store/blocks/pdp/product.jsonc | 8 +++++--- styles/css/vtex.flex-layout.css | 5 +++++ styles/css/vtex.store-components.css | 2 ++ styles/sass/pages/product/vtex.flex-layout.scss | 4 ++++ styles/sass/pages/product/vtex.store-components.scss | 2 ++ 5 files changed, 18 insertions(+), 3 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c12e6e3..7794ab6 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -61,7 +61,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#flex-layout.row#product-image", "product-bookmark", "product-specification-badges" ] @@ -83,12 +83,14 @@ "rowGap": 0 } }, - "flex-layout.row#product-image": { + "html#flex-layout.row#product-image": { + "props":{ + "testId": "product-images" + }, "children": ["product-images"] }, "product-images": { "props": { - "testId": "product-images", "aspectRatio": { "desktop": "auto", "phone": "auto" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index b8fd00b..39d43cd 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -111,6 +111,11 @@ } } +.stretchChildrenWidth { + width: 50% !important; + padding-right: 16px; + margin-right: 16px; +} @media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { .stretchChildrenWidth { width: 100% !important; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7f0b44a..31b279f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -11,6 +11,7 @@ .container { padding: 16px 360px; margin: 0; + max-width: 100%; } @media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { .container { @@ -60,6 +61,7 @@ height: 100% !important; margin: 16px 16px 0 0; border-radius: 8px; + max-width: calc(100% - 16px); } @media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { .carouselGaleryThumbs .productImagesThumb { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 3f4e529..12eaff5 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -104,6 +104,10 @@ } .stretchChildrenWidth { + width: 50% !important; + padding-right: 16px; + margin-right: 16px; + @media #{$mq-tablet}, #{$mq-mobile}{ width: 100% !important; padding-right: 0; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ce62c32..c814f59 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,7 @@ .container { padding:16px 360px; margin: 0; + max-width: 100%; @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { padding: 16px 40px; @@ -44,6 +45,7 @@ height: 100% !important; margin: 16px 16px 0 0; border-radius: 8px; + max-width: calc(100% - 16px); @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { width: 90px !important; From b9e9bfe8b3e86d23f37e03d0a47f36e8705dbc76 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Tue, 24 Jan 2023 21:07:05 -0300 Subject: [PATCH 04/22] feat(product): adicionando estilo ao nameProduct e referencia --- store/blocks/pdp/product.jsonc | 14 +-- styles/css/vtex.flex-layout.css | 16 +++- styles/css/vtex.product-identifier.css | 32 ++++++- styles/css/vtex.product-price.css | 93 ++++--------------- styles/css/vtex.store-components.css | 20 ++++ .../sass/pages/product/vtex.flex-layout.scss | 29 ++++-- .../product/vtex.product-identifier.scss | 27 ++++++ .../pages/product/vtex.product-price.scss | 8 ++ .../pages/product/vtex.store-components.scss | 20 ++++ styles/sass/utils/_vars.scss | 4 +- 10 files changed, 168 insertions(+), 95 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 7794ab6..a994556 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -79,7 +79,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, @@ -103,16 +103,17 @@ "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "blockClass": "product-skus" }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", + "product-identifier.product", + // "product-rating-summary", + // "flex-layout.row#list-price-savings", preço com promoção vindo vtex "flex-layout.row#selling-price", "product-installments", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", @@ -126,7 +127,8 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "product__name" }, "children": ["vtex.store-components:product-name"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 39d43cd..ea8d095 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -111,14 +111,24 @@ } } -.stretchChildrenWidth { - width: 50% !important; +.flexRowContent--product__image .stretchChildrenWidth:first-child { padding-right: 16px; margin-right: 16px; } @media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { - .stretchChildrenWidth { + .flexRowContent--product__image .stretchChildrenWidth { width: 100% !important; padding-right: 0; } +} + +.flexRow--product__name, .flexRowContent--product__name { + height: 34px; +} + +.flexRowContent--product__name .stretchChildrenWidth { + width: 100% !important; + height: 34px; + padding: 0 !important; + margin: 0 0 8px 0 !important; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..e217fcc 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,33 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + align-items: center; + justify-content: end; + margin-bottom: 24px; } +@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .product-identifier--productReference { + justify-content: flex-start; + padding-top: 8px; + } +} +.product-identifier--productReference .product-identifier__label, .product-identifier--productReference .product-identifier__separator { + display: none; +} +.product-identifier--productReference .product-identifier__value { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..e9bddff 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,18 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ .sellingPriceValue { - font-size: 2.25rem; + font-family: "Open Sans", sans-serif; + font-style: normal; font-weight: 700; -} - -.installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-size: 25px; + line-height: 38px; + color: #000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 31b279f..cafb2ca 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -72,4 +72,24 @@ .carouselGaleryThumbs .productImagesThumb .figure, .carouselGaleryThumbs .productImagesThumb .thumbImg { width: 100%; height: 100%; +} + +.productNameContainer--quickview { + display: flex; + justify-content: end; + align-items: center; + font-family: "Open Sans", sans-serif; + padding: 0; + margin: 0 0 8px 0; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} +@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .productNameContainer--quickview { + justify-content: flex-start; + margin-top: 32px; + } } \ 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 12eaff5..8069397 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -103,13 +103,28 @@ } } -.stretchChildrenWidth { - width: 50% !important; - padding-right: 16px; - margin-right: 16px; +.flexRowContent--product__image { + .stretchChildrenWidth { - @media #{$mq-tablet}, #{$mq-mobile}{ - width: 100% !important; - padding-right: 0; + &:first-child { + padding-right: 16px; + margin-right: 16px; + } + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100% !important; + padding-right: 0; + } } } + +.flexRow--product__name, .flexRowContent--product__name { + height: 34px; +} + +.flexRowContent--product__name .stretchChildrenWidth { + width: 100% !important; + height: 34px; + padding: 0 !important; + margin: 0 0 8px 0 !important; +} 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..fea1e30 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,27 @@ +.product-identifier--productReference { + display: flex; + align-items: center; + justify-content: end; + margin-bottom: 24px; + + @media #{$mq-tablet}, #{$mq-mobile} { + justify-content: flex-start; + padding-top: 8px; + } + + .product-identifier { + &__label, &__separator { + display: none; + } + + &__value { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black-tranparent; + } + } +} + 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..aaeffce --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,8 @@ +.sellingPriceValue{ + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $color-black0; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c814f59..e7e4351 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,4 @@ + .container { padding:16px 360px; margin: 0; @@ -59,5 +60,24 @@ } } +.productNameContainer--quickview { + display: flex; + justify-content: end; + align-items: center; + font-family: $font-family; + padding: 0; + margin: 0 0 8px 0; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: $color-gray7; + + @media #{$mq-tablet}, #{$mq-mobile} { + justify-content: flex-start; + margin-top: 32px; + } +} + diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 92de514..dab1a14 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -2,7 +2,9 @@ $font-family: 'Open Sans', sans-serif; +$color-black0: #000; $color-black: #292929; +$color-black-tranparent: rgba(146, 146, 146, 0.48); $color-white: #fff; @@ -12,7 +14,7 @@ $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; $color-gray6: #929292; - +$color-gray7: #575757; $color-blue: #4267b2; From 86add06fbb4f33e93675eacf582dc66673d5a166 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 25 Jan 2023 10:43:53 -0300 Subject: [PATCH 05/22] feat(product): adicionando novas parcelas ao produto --- react/Installment.tsx | 2 ++ .../Installment/Installment.module.css | 15 +++++++++ react/components/Installment/index.tsx | 33 +++++++++++++++++++ react/index.d.ts | 1 + store/blocks/pdp/product.jsonc | 7 ++-- store/interfaces.json | 4 +++ styles/css/vtex.flex-layout.css | 5 ++- styles/css/vtex.product-price.css | 3 +- .../sass/pages/product/vtex.flex-layout.scss | 8 ++--- .../pages/product/vtex.product-price.scss | 3 +- 10 files changed, 69 insertions(+), 12 deletions(-) create mode 100644 react/Installment.tsx create mode 100644 react/components/Installment/Installment.module.css create mode 100644 react/components/Installment/index.tsx create mode 100644 react/index.d.ts diff --git a/react/Installment.tsx b/react/Installment.tsx new file mode 100644 index 0000000..76cde17 --- /dev/null +++ b/react/Installment.tsx @@ -0,0 +1,2 @@ +import Installment from "./components/Installment/index"; +export default Installment; diff --git a/react/components/Installment/Installment.module.css b/react/components/Installment/Installment.module.css new file mode 100644 index 0000000..4c896d1 --- /dev/null +++ b/react/components/Installment/Installment.module.css @@ -0,0 +1,15 @@ +.installment-product { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + margin: 0; + padding: 0; + height: 22px; + color: #929292; +} + +.installment-product__strong { + font-weight: 700; +} diff --git a/react/components/Installment/index.tsx b/react/components/Installment/index.tsx new file mode 100644 index 0000000..406d640 --- /dev/null +++ b/react/components/Installment/index.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./Installment.module.css"; + +const Installment = () => { + const skuProduct = useProduct(); + console.log(skuProduct); + + const productInstallment = { + numberOfInstallment: + skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .NumberOfInstallments, + value: + skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .Value, + }; + + return ( +

+ + {productInstallment.numberOfInstallment}x{" "} + + de + + {""} R${" "} + {productInstallment.value?.toFixed(2).toString().replace(".", ",")}{" "} + + sem juros +

+ ); +}; + +export default Installment; diff --git a/react/index.d.ts b/react/index.d.ts new file mode 100644 index 0000000..1eabbb4 --- /dev/null +++ b/react/index.d.ts @@ -0,0 +1 @@ +declare module "*.module.css"; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a994556..b8e85f6 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -112,7 +112,7 @@ // "product-rating-summary", // "flex-layout.row#list-price-savings", preço com promoção vindo vtex "flex-layout.row#selling-price", - "product-installments", + "installment-component", "product-separator", "sku-selector", "product-quantity", @@ -127,7 +127,6 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3, "blockClass": "product__name" }, "children": ["vtex.store-components:product-name"] @@ -136,7 +135,9 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "sku-product" + } }, diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..d831536 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + "installment-component": { + "component": "Installment" } + } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ea8d095..e96ece9 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -105,12 +105,15 @@ padding-bottom: 1rem; } +.flexRowContent--product__image { + padding: 0; + margin: 0; +} @media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { .flexRowContent--product__image { flex-direction: column; } } - .flexRowContent--product__image .stretchChildrenWidth:first-child { padding-right: 16px; margin-right: 16px; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index e9bddff..45edad4 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -8,9 +8,8 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); /* Grid breakpoints */ -.sellingPriceValue { +.sellingPrice { font-family: "Open Sans", sans-serif; - font-style: normal; font-weight: 700; font-size: 25px; line-height: 38px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 8069397..ae71d76 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -97,13 +97,13 @@ padding-bottom: 1rem; } -.flexRowContent--product__image{ +.flexRowContent--product__image { + padding: 0; + margin: 0; + @media #{$mq-tablet}, #{$mq-mobile} { flex-direction: column; } -} - -.flexRowContent--product__image { .stretchChildrenWidth { &:first-child { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index aaeffce..621dbff 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -1,6 +1,5 @@ -.sellingPriceValue{ +.sellingPrice { font-family: $font-family; - font-style: normal; font-weight: 700; font-size: 25px; line-height: 38px; From ddd74225a28b513455c607c936b48b8cff4aafd5 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 25 Jan 2023 14:39:37 -0300 Subject: [PATCH 06/22] feat(product): adicionando component pix --- react/PixDiscount.tsx | 2 + react/components/Installment/index.tsx | 2 +- .../PixDiscount/PixDiscount.module.css | 38 +++++++++++++++++++ react/components/PixDiscount/index.tsx | 37 ++++++++++++++++++ react/index.d.ts | 1 + store/blocks/pdp/product.jsonc | 11 +++++- store/interfaces.json | 3 ++ 7 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 react/PixDiscount.tsx create mode 100644 react/components/PixDiscount/PixDiscount.module.css create mode 100644 react/components/PixDiscount/index.tsx diff --git a/react/PixDiscount.tsx b/react/PixDiscount.tsx new file mode 100644 index 0000000..f4e902f --- /dev/null +++ b/react/PixDiscount.tsx @@ -0,0 +1,2 @@ +import PixDiscount from "./components/PixDiscount/index"; +export default PixDiscount; diff --git a/react/components/Installment/index.tsx b/react/components/Installment/index.tsx index 406d640..9e7f39a 100644 --- a/react/components/Installment/index.tsx +++ b/react/components/Installment/index.tsx @@ -6,7 +6,7 @@ const Installment = () => { const skuProduct = useProduct(); console.log(skuProduct); - const productInstallment = { + const productInstallment: any = { numberOfInstallment: skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3] .NumberOfInstallments, diff --git a/react/components/PixDiscount/PixDiscount.module.css b/react/components/PixDiscount/PixDiscount.module.css new file mode 100644 index 0000000..cbe7dfe --- /dev/null +++ b/react/components/PixDiscount/PixDiscount.module.css @@ -0,0 +1,38 @@ +.pixContainer { + display: flex; + justify-content: flex-start; + align-items: center; + height: 39px; + column-gap: 26px; + margin-top: 8px; +} + +.pixContainer__img { + width: 66px; + height: 24px; +} + +.pixContainer__discount { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.pixContainer__priceFinal { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.pixContainer__discount__value { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/components/PixDiscount/index.tsx b/react/components/PixDiscount/index.tsx new file mode 100644 index 0000000..4da239f --- /dev/null +++ b/react/components/PixDiscount/index.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./PixDiscount.module.css"; + +const PixDiscount = () => { + const skuProduct = useProduct(); + const productPrice = { + price: Number( + skuProduct?.selectedItem?.sellers[0]?.commertialOffer?.Price.toFixed(2) + ), + }; + + const discount = productPrice.price * 0.1; + const pixPrice = productPrice.price - discount; + + console.log(pixPrice); + + return ( +
+ Pix +
+ + R$ {pixPrice?.toFixed(2).toString().replace(".", ",")} + + + 10% de desconto + +
+
+ ); +}; + +export default PixDiscount; diff --git a/react/index.d.ts b/react/index.d.ts index 1eabbb4..c2a312a 100644 --- a/react/index.d.ts +++ b/react/index.d.ts @@ -1 +1,2 @@ declare module "*.module.css"; +declare module "*.svg"; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b8e85f6..2f88e34 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -113,7 +113,8 @@ // "flex-layout.row#list-price-savings", preço com promoção vindo vtex "flex-layout.row#selling-price", "installment-component", - "product-separator", + "html#pix-component", + // "product-separator", //linha que separa preço de skus "sku-selector", "product-quantity", "product-assembly-options", @@ -141,6 +142,14 @@ } }, + "html#pix-component": { + "props": { + "tag": "section", + "testId": "pix-price" + }, + "children": ["pix-component"] + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, diff --git a/store/interfaces.json b/store/interfaces.json index d831536..dff1205 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,6 +8,9 @@ }, "installment-component": { "component": "Installment" + }, + "pix-component": { + "component": "PixDiscount" } } From 2019e4d20244d11639d93239f3f2883a1a35d014 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 25 Jan 2023 19:15:57 -0300 Subject: [PATCH 07/22] feat(product): adicionando estilo nos tamanhos e cores product --- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.store-components.css | 156 ++++++++++++++ .../pages/product/vtex.store-components.scss | 191 ++++++++++++++++++ styles/sass/utils/_vars.scss | 2 + 4 files changed, 350 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 2f88e34..ac9bebc 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -109,7 +109,7 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - // "product-rating-summary", + // "product-rating-summary", // avaliações // "flex-layout.row#list-price-savings", preço com promoção vindo vtex "flex-layout.row#selling-price", "installment-component", diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index cafb2ca..66059de 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -92,4 +92,160 @@ justify-content: flex-start; margin-top: 32px; } +} + +.skuSelectorContainer--sku-product { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer { + margin-bottom: 8px; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTROS TAMANHOS"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + column-gap: 16px; + margin: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #989898; + box-sizing: border-box; + border-radius: 50%; + width: 40px; + height: 40px; + margin: 0; + padding: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-product { + border-color: #000; + border-width: 2px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: none; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross--sku-product { + transform: rotate(45deg); + border-radius: 24px; + background: #D5D5D5; + width: 1px; + height: 100%; + margin: 0 auto; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue { + padding: 0; + margin: 0 auto; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue { + color: #000; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorSelectorImageValue { + display: none; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer { + margin-bottom: 8px; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTRAS CORES"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + column-gap: 16px; + margin: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #989898; + border-radius: 24px; + width: 48px; + height: 48px; + margin: 0; + padding: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-product { + border-color: #000; + border-width: 2px; + border-radius: 24px; + width: 48px; + height: 48px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: none; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross--sku-product { + transform: rotate(45deg); + border-radius: 24px; + background: #D5D5D5; + width: 1px; + height: 100%; + margin: 0 auto; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper--unavailable { + border: 1px solid #989898; + border-radius: 24px; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper--unavailable .skuSelectorItemImageValue { + height: 48px; + width: 48px; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .valueWrapper--sku-product { + height: 48px; + width: 48px; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .valueWrapper--sku-product .skuSelectorItemImageValue { + border-radius: 24px; + padding: 0; +} +.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue { + color: #000; } \ 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 e7e4351..4264885 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -79,5 +79,196 @@ } } +.skuSelectorContainer--sku-product { + display: flex; + flex-direction: column-reverse; + margin-top: 16px; + .skuSelectorSubcontainer--tamanho { + + .skuSelectorNameContainer { + margin: 0; + + .skuSelectorTextContainer { + margin-bottom: 8px; + + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTROS TAMANHOS"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray6; + } + } + } + + .skuSelectorOptionsList { + column-gap: 16px; + margin: 0; + + .skuSelectorItem { + display: flex; + align-items: center; + justify-content: center; + + border: 1px solid #989898; + box-sizing: border-box; + border-radius: 50%; + width: 40px; + height: 40px; + + margin: 0; + padding: 0; + + .frameAround--sku-product { + border-color: $color-black0; + border-width: 2px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .skuSelectorInternalBox { + border: none; + + .diagonalCross--sku-product { + transform: rotate(45deg); + border-radius: 24px; + background: #D5D5D5; + width: 1px; + height: 100%; + margin: 0 auto; + } + } + + .skuSelectorItemTextValue { + padding: 0; + margin: 0 auto; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray8; + } + } + .skuSelectorItem--selected { + .skuSelectorItemTextValue { + color: $color-black0; + } + } + } + + } + + } + .skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + margin: 0; + + .skuSelectorSelectorImageValue { + display: none; + } + + .skuSelectorTextContainer { + margin-bottom: 8px; + + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTRAS CORES"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray6; + } + } + } + + .skuSelectorOptionsList { + column-gap: 16px; + margin: 0; + + .skuSelectorItem { + display: flex; + align-items: center; + justify-content: center; + + border: 1px solid #989898; + border-radius: 24px; + width: 48px; + height: 48px; + + margin: 0; + padding: 0; + + .frameAround--sku-product { + border-color: $color-black0; + border-width: 2px; + border-radius: 24px; + width: 48px; + height: 48px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + } + + .skuSelectorInternalBox { + border: none; + + .diagonalCross--sku-product { + transform: rotate(45deg); + border-radius: 24px; + background: #D5D5D5; + width: 1px; + height: 100%; + margin: 0 auto; + + } + .valueWrapper--unavailable { + border: 1px solid #989898; + border-radius: 24px; + + .skuSelectorItemImageValue { + height: 48px; + width: 48px; + } + } + } + } + .valueWrapper--sku-product { + height: 48px; + width: 48px; + .skuSelectorItemImageValue { + border-radius: 24px; + padding: 0; + } + } + .skuSelectorItem--selected { + .skuSelectorItemTextValue { + color: $color-black0; + } + } + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index dab1a14..3d9db95 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -15,6 +15,8 @@ $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; $color-gray6: #929292; $color-gray7: #575757; +$color-gray8: rgba(185, 185, 185, 0.6); + $color-blue: #4267b2; From 03d086ab4ff368b654d9bc4db5c62cb6493c38e7 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 26 Jan 2023 13:15:59 -0300 Subject: [PATCH 08/22] feat(product): adicionando e estilizando input e button de add to cart product --- react/components/Html/index.tsx | 80 +++++++++++-------- react/components/Html/style.css | 8 ++ store/blocks/pdp/product.jsonc | 48 +++++++++-- styles/css/vtex.flex-layout.css | 51 +++++++++++- styles/css/vtex.product-quantity.css | 59 ++++++++++++++ styles/css/vtex.store-components.css | 2 +- .../sass/pages/product/vtex.flex-layout.scss | 54 +++++++++++++ .../pages/product/vtex.product-quantity.scss | 54 +++++++++++++ .../pages/product/vtex.store-components.scss | 2 +- styles/sass/utils/_vars.scss | 6 +- 10 files changed, 315 insertions(+), 49 deletions(-) create mode 100644 react/components/Html/style.css 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/index.tsx b/react/components/Html/index.tsx index d60d7f5..7319e12 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,53 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./style.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { - children?: ReactNode, - /** - * Qual tag Html que deseja que seja usar - * - * @default div - */ - tag?: keyof React.ReactHTML - /** - * Classes CSS extras que deseja adicionar. - * Feito para uso de [classes do tachyons](https://tachyons.io/) - */ - tachyonsClasses?: string - /** - * Se caso quiser usar esse componente - * para adicinar um texto simples - */ - text?: string - /** - * Tag ID para - */ - testId?: string -} - -export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); - - const props = { - className: `${handles.html} ${classes}`, - "data-testid": testId - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); - - return <>{Element}; + children?: ReactNode; + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML; + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string; + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string; + /** + * Tag ID para + */ + testId?: string; +}; + +export const Html = ({ + children = null, + tag = "div", + text = "", + tachyonsClasses: classes = "", + testId, +}: HtmlProps) => { + const { handles } = useCssHandles(CSS_HANDLES); + + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId, + }; + const Children = ( + <> + {children} + {text} + + ); + const Element = React.createElement(tag, props, Children); + + return <>{Element}; }; diff --git a/react/components/Html/style.css b/react/components/Html/style.css new file mode 100644 index 0000000..c5b98db --- /dev/null +++ b/react/components/Html/style.css @@ -0,0 +1,8 @@ + +[class*="html--product-quantity"] { + height: 100%; +} +[class*="html--buy-button "] { + height: 100%; + width: 100%; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ac9bebc..b39ecb2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -115,11 +115,11 @@ "installment-component", "html#pix-component", // "product-separator", //linha que separa preço de skus - "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "html#sku-selector", + "flex-layout.row#quantity-and-button", + // "product-assembly-options", + // "product-gifts", + // "flex-layout.row#buy-button", "availability-subscriber", "shipping-simulator", "share#default" @@ -133,12 +133,18 @@ "children": ["vtex.store-components:product-name"] }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "sku-selector": { "props": { "variationsSpacing": 3, "showValueNameForImageVariation": true, "blockClass": "sku-product" - } }, @@ -150,14 +156,40 @@ "children": ["pix-component"] }, + "html#product-quantity": { + "props": { + "blockClass": "product-quantity", + "tag": "section", + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + + "html#button-addCart": { + "props": { + "tag": "section", + "testId": "add-to-cart-button", + "blockClass": "buy-button" + }, + "children": ["flex-layout.row#buy-button"] + }, + "flex-layout.row#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7 + "blockClass": "buy-button", + "width": "100%" }, "children": ["add-to-cart-button"] }, + "flex-layout.row#quantity-and-button": { + "props":{ + "tag": "section", + "blockClass": "quantityButton" + }, + "children": ["html#product-quantity","html#button-addCart"] + }, + "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e96ece9..d616226 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -109,7 +110,7 @@ padding: 0; margin: 0; } -@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .flexRowContent--product__image { flex-direction: column; } @@ -118,7 +119,7 @@ padding-right: 16px; margin-right: 16px; } -@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .flexRowContent--product__image .stretchChildrenWidth { width: 100% !important; padding-right: 0; @@ -134,4 +135,50 @@ height: 34px; padding: 0 !important; margin: 0 0 8px 0 !important; +} + +.flexRow--quantityButton { + display: flex; + align-items: center; + column-gap: 10px; + height: 49px; +} +@media (min-width: 280px) and (max-width: 768px) { + .flexRow--quantityButton { + flex-direction: column !important; + align-items: flex-start !important; + row-gap: 10px; + height: auto; + } +} +.flexRow--quantityButton .flexRowContent--quantityButton .stretchChildrenWidth { + width: 100% !important; +} +.flexRow--quantityButton .flexRowContent--quantityButton .stretchChildrenWidth:first-child { + width: 128px !important; + padding: 0; + margin: 0 10px 0 0; +} +.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth { + width: 100% !important; + padding: 0; + margin: 0; + height: 49px; +} +.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) { + background: #000; + border-radius: 0; + border: none; +} +.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; +} +.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-add-to-cart-button-0-x-buttonText)::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #fff; } \ 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..2db1ba7 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,59 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ +.quantitySelectorContainer { + margin: 0; + padding: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer .quantitySelectorStepper { + height: 49px; + width: 128px; +} +@media (min-width: 280px) and (max-width: 768px) { + .quantitySelectorContainer .quantitySelectorStepper { + margin-bottom: 10px; + } +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-container) { + border: 1px solid #CCCCCC; + height: 49px; + width: 100%; + padding: 13.5px 16px; + display: flex; + justify-content: space-between; + align-items: center; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + height: 100%; + border: none; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + text-align: center; + color: #929292; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button), .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + border: none; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + text-align: center; + color: #000; + height: 100%; + background: transparent; + width: auto !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 66059de..d95f08d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -97,7 +97,7 @@ .skuSelectorContainer--sku-product { display: flex; flex-direction: column-reverse; - margin-top: 16px; + margin: 16px 0; } .skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { margin: 0; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index ae71d76..fee8b2a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -128,3 +128,57 @@ padding: 0 !important; margin: 0 0 8px 0 !important; } + +.flexRow--quantityButton { + display: flex; + align-items: center; + column-gap: 10px; + height: 49px; + + @media #{$mq-mobile} { + flex-direction: column !important; + align-items: flex-start !important; + row-gap: 10px; + height: auto; + } + + .flexRowContent--quantityButton .stretchChildrenWidth{ + &:first-child { + width: 128px !important; + padding: 0; + margin: 0 10px 0 0; + } + width: 100% !important; + } + + + .flexRow--buy-button .flexRowContent--buy-button{ + + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + margin: 0; + height: 49px; + + :global(.vtex-button) { + background: $color-black0; + border-radius: 0; + border: none; + } + :global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; + + &::after { + content: "ADICIONAR À SACOLA"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-white; + } + } + } + } + +} 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..c080596 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,54 @@ +.quantitySelectorContainer { + margin: 0; + padding: 0; + + .quantitySelectorTitle { + display: none; + } + + .quantitySelectorStepper{ + height: 49px; + width: 128px; + + @media #{$mq-mobile} { + margin-bottom: 10px; + } + + :global(.vtex-numeric-stepper-container) { + border: 1px solid #CCCCCC; + height: 49px; + width: 100%; + padding: 13.5px 16px; + display: flex; + justify-content: space-between; + align-items: center; + } + :global(.vtex-numeric-stepper__input) { + height: 100%; + border: none; + + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + text-align: center; + color: $color-gray6; + } + :global(.vtex-numeric-stepper__plus-button), :global(.vtex-numeric-stepper__minus-button){ + border: none; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + text-align: center; + color: $color-black0; + height: 100%; + background: transparent; + width: auto!important; + } + + + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4264885..9c5c8bf 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -82,7 +82,7 @@ .skuSelectorContainer--sku-product { display: flex; flex-direction: column-reverse; - margin-top: 16px; + margin: 16px 0; .skuSelectorSubcontainer--tamanho { diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 3d9db95..428172e 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -41,6 +41,6 @@ $z-index: ( ) !default; //media-queries -$mq-desktop: "(min-width: 1025px) and (max-width: 2499px)"; -$mq-tablet: "(min-width: 491px) and (max-width: 1024px)"; -$mq-mobile: "(min-width: 280px) and (max-width: 490px)"; +$mq-desktop: "(min-width: 1025px) and (max-width: 2560px)"; +$mq-tablet: "(min-width: 769px) and (max-width: 1024px)"; +$mq-mobile: "(min-width: 280px) and (max-width: 768px)"; From a92e23b101ba6c25d6115837ecf7da1096f251c9 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 26 Jan 2023 16:17:32 -0300 Subject: [PATCH 09/22] feat(product): adicionando campo de cep e estilizando-o --- react/components/Html/style.css | 4 + store/blocks/pdp/product.jsonc | 9 +- styles/css/vtex.breadcrumb.css | 2 +- styles/css/vtex.flex-layout.css | 14 +++ styles/css/vtex.product-identifier.css | 2 +- styles/css/vtex.store-components.css | 105 ++++++++++++++++-- .../sass/pages/product/vtex.flex-layout.scss | 17 ++- .../pages/product/vtex.store-components.scss | 102 +++++++++++++++++ 8 files changed, 244 insertions(+), 11 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index c5b98db..6a029ae 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -6,3 +6,7 @@ height: 100%; width: 100%; } + +[class*="html--cep"] { + margin: 16px 0; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b39ecb2..27c5ec7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -121,7 +121,7 @@ // "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, @@ -190,6 +190,13 @@ "children": ["html#product-quantity","html#button-addCart"] }, + "html#shipping-simulator": { + "props":{ + "blockClass": "cep" + }, + "children": ["shipping-simulator"] + }, + "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index b2c6c03..e244435 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -17,7 +17,7 @@ line-height: 19px; color: #929292; } -@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { +@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .container { padding: 16px 40px; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d616226..c648446 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -181,4 +181,18 @@ font-size: 18px; line-height: 25px; color: #fff; +} + +.flexRow--cep { + margin: 16px 0; + width: 409px; +} +@media (min-width: 280px) and (max-width: 768px) { + .flexRow--cep { + width: 100%; + } +} +.flexRow--cep .flexRowContent--cep .stretchChildrenWidth { + padding: 0; + margin: 0; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e217fcc..f150433 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -14,7 +14,7 @@ justify-content: end; margin-bottom: 24px; } -@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .product-identifier--productReference { justify-content: flex-start; padding-top: 8px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d95f08d..6b929b7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,7 +13,7 @@ margin: 0; max-width: 100%; } -@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { +@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .container { padding: 16px 40px; } @@ -32,17 +32,17 @@ max-height: 904px !important; cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default; } -@media (min-width: 1025px) and (max-width: 2499px) { +@media (min-width: 1025px) and (max-width: 2560px) { .productImageTag--main, .videoContainer { max-height: 664px !important; } } -@media (min-width: 491px) and (max-width: 1024px) { +@media (min-width: 769px) and (max-width: 1024px) { .productImageTag--main, .videoContainer { max-height: 944px !important; } } -@media (min-width: 280px) and (max-width: 490px) { +@media (min-width: 280px) and (max-width: 768px) { .productImageTag--main, .videoContainer { max-height: 296px !important; } @@ -51,7 +51,7 @@ .carouselGaleryThumbs { margin-top: 0; } -@media (min-width: 280px) and (max-width: 490px), (min-width: 491px) and (max-width: 1024px) { +@media (min-width: 280px) and (max-width: 768px), (min-width: 769px) and (max-width: 1024px) { .carouselGaleryThumbs { display: block !important; } @@ -63,7 +63,7 @@ border-radius: 8px; max-width: calc(100% - 16px); } -@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { +@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .carouselGaleryThumbs .productImagesThumb { width: 90px !important; height: 90px !important; @@ -87,7 +87,7 @@ line-height: 34px; color: #575757; } -@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .productNameContainer--quickview { justify-content: flex-start; margin-top: 32px; @@ -248,4 +248,95 @@ } .skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue { color: #000; +} + +.shippingContainer { + display: flex; + align-items: flex-end; + width: 409px; + position: relative; +} +@media (min-width: 280px) and (max-width: 768px) { + .shippingContainer { + width: 296px; + } +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; + margin-bottom: 8px; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + padding: 0; +} +.shippingContainer :global(.vtex-input-prefix__group) { + width: 250px; + height: 49px; + border: none; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form-4-x-input) { + width: 250px; + height: 49px; + padding: 16px; + border: 1px solid #CCC; + border-radius: 0; +} +.shippingContainer :global(.vtex-input__suffix) { + display: none; +} +.shippingContainer :global(.vtex-button) { + background-color: #000; + border: none; + border-radius: 0; + width: 49px; + height: 49px; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #fff; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + left: 312px; + bottom: 18px; + padding: 0; +} +@media (min-width: 280px) and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 200px; + bottom: -24px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000; + padding: 0; + margin: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { + display: none; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index fee8b2a..c422b59 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -180,5 +180,20 @@ } } } - +} + +.flexRow--cep { + margin: 16px 0; + width: 409px; + + @media #{$mq-mobile} { + width: 100%; + } + + .flexRowContent--cep { + .stretchChildrenWidth { + padding: 0; + margin: 0; + } + } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9c5c8bf..395e4b5 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -272,3 +272,105 @@ } } +.shippingContainer { + display: flex; + align-items: flex-end; + width: 409px; + position: relative; + + @media #{$mq-mobile}{ + width: 296px; + } + + :global(.vtex-input__label) { + font-size: 0; + margin-bottom: 8px; + + &::after { + content: "CALCULAR FRETE:"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray6; + } + + } + + :global(.vtex-address-form__postalCode){ + padding: 0; + } + + :global(.vtex-input-prefix__group) { + width: 250px; + height: 49px; + border: none; + border-radius: 0; + } + + :global(.vtex-address-form-4-x-input){ + width: 250px; + height: 49px; + padding: 16px; + border: 1px solid #CCC; + border-radius: 0; + } + + :global(.vtex-input__suffix) { + display: none; + } + + :global(.vtex-button) { + background-color: $color-black0; + border: none; + border-radius: 0; + width: 49px; + height: 49px; + } + + :global(.vtex-button__label){ + font-size: 0; + &::after{ + content: ("OK"); + font-family: $font-family; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: $color-white; + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + // width: 100%; + left: 312px; + bottom: 18px; + // transform: translate(0, -50%); + padding: 0; + + @media #{$mq-mobile}{ + left: 200px; + bottom: -24px; + } + + :last-child{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: $color-black0; + padding: 0; + margin: 0; + } + + :global(.vtex__icon-external-link) { + display: none; + } + } +} From 2c5a29d4f74f07d13d01a79f8c339d1fa2c1f0b2 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 26 Jan 2023 17:59:48 -0300 Subject: [PATCH 10/22] feat(product): adicionando e estilizando table de frete product --- styles/css/vtex.store-components.css | 85 +++++++++++++++++ .../pages/product/vtex.store-components.scss | 91 +++++++++++++++++++ 2 files changed, 176 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6b929b7..be3ad06 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -339,4 +339,89 @@ } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; +} + +.shippingTable { + border: none; + padding: 0; + margin: 16px 0 0; + width: 326px; +} +@media (min-width: 280px) and (max-width: 768px) { + .shippingTable { + width: 100%; + } +} +.shippingTable .shippingTableHead { + display: block; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 33.3%); + grid-template-areas: "entrega frete prazo"; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + text-align: left; + grid-area: entrega; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + text-align: center; + grid-area: frete; + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "FRETE"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + text-align: right; + grid-area: prazo; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 33.3%); + grid-template-areas: "entrega valor prazo"; + column-gap: 32px; + margin-top: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + grid-area: entrega; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: prazo; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + grid-area: valor; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #AFAFAF; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableLabel .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 395e4b5..db2187b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -374,3 +374,94 @@ } } } + +.shippingTable { + border: none; + padding: 0; + margin: 16px 0 0; + width: 326px; + + @media #{$mq-mobile}{ + width: 100%; + } + + .shippingTableHead { + display: block; + .shippingTableRow { + display: grid; + grid-template-columns: repeat(3, 33.3%); + grid-template-areas: "entrega frete prazo"; + + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + padding: 0; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + } + .shippingTableHeadDeliveryName { + text-align: left; + grid-area: entrega; + } + .shippingTableHeadDeliveryPrice{ + text-align: center; + grid-area: frete; + font-size: 0; + &::after { + content: ("FRETE"); + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + } + } + .shippingTableHeadDeliveryEstimate{ + text-align: right; + grid-area: prazo; + } + } + } + + .shippingTableBody { + .shippingTableRow{ + display: grid; + grid-template-columns: repeat(3, 33.3%); + grid-template-areas: "entrega valor prazo"; + column-gap: 32px; + margin-top: 15px; + .shippingTableCellDeliveryName { + grid-area: entrega; + } + .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: prazo; + } + .shippingTableCellDeliveryPrice { + grid-area: valor; + } + .shippingTableCell { + padding: 0; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #AFAFAF; + } + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } +} From d6bd6c9dd20ebeadbdd552333d21d6e0880064dc Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 26 Jan 2023 21:46:07 -0300 Subject: [PATCH 11/22] feat(product): removendo share dos products e corrigindo quebra de tabela de cep no mobile --- store/blocks/pdp/product.jsonc | 4 ++-- styles/css/vtex.store-components.css | 16 ++++++++++++++++ .../pages/product/vtex.store-components.scss | 14 ++++++++++++++ 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 27c5ec7..42c21a4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -121,8 +121,8 @@ // "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", - "html#shipping-simulator", - "share#default" + "html#shipping-simulator" + // "share#default" ] }, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index be3ad06..32058cc 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -290,6 +290,11 @@ border: 1px solid #CCC; border-radius: 0; } +@media (max-width: 360) and (min-width: 280px) { + .shippingContainer :global(.vtex-address-form-4-x-input) { + width: 100px; + } +} .shippingContainer :global(.vtex-input__suffix) { display: none; } @@ -350,6 +355,7 @@ @media (min-width: 280px) and (max-width: 768px) { .shippingTable { width: 100%; + margin: 32px 0 0; } } .shippingTable .shippingTableHead { @@ -360,6 +366,11 @@ grid-template-columns: repeat(3, 33.3%); grid-template-areas: "entrega frete prazo"; } +@media (min-width: 280px) and (max-width: 768px) { + .shippingTable .shippingTableHead .shippingTableRow { + grid-template-columns: repeat(3, 1fr); + } +} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { @@ -401,6 +412,11 @@ column-gap: 32px; margin-top: 15px; } +@media (min-width: 280px) and (max-width: 768px) { + .shippingTable .shippingTableBody .shippingTableRow { + grid-template-columns: repeat(3, 1fr); + } +} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { grid-area: entrega; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index db2187b..64cd33e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -315,6 +315,10 @@ padding: 16px; border: 1px solid #CCC; border-radius: 0; + + @media (max-width:360) and (min-width: 280px) { + width: 100px; + } } :global(.vtex-input__suffix) { @@ -383,6 +387,7 @@ @media #{$mq-mobile}{ width: 100%; + margin: 32px 0 0; } .shippingTableHead { @@ -392,6 +397,10 @@ grid-template-columns: repeat(3, 33.3%); grid-template-areas: "entrega frete prazo"; + @media #{$mq-mobile}{ + grid-template-columns: repeat(3, 1fr); + } + .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice { @@ -436,6 +445,11 @@ grid-template-areas: "entrega valor prazo"; column-gap: 32px; margin-top: 15px; + + @media #{$mq-mobile}{ + grid-template-columns: repeat(3, 1fr); + } + .shippingTableCellDeliveryName { grid-area: entrega; } From 5a508361a102399e0086bca51a4c672d59d882b3 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Fri, 27 Jan 2023 12:38:59 -0300 Subject: [PATCH 12/22] feat(product): adicionando description e estilos na mesma product --- store/blocks/pdp/product.jsonc | 100 +++++++++- styles/configs/style.json | 24 +-- styles/css/vtex.breadcrumb.css | 2 +- styles/css/vtex.store-components.css | 6 +- styles/css/vtex.tab-layout.css | 176 ++++++++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 170 +++++++++++++++++ styles/sass/utils/_vars.scss | 2 +- 7 files changed, 461 insertions(+), 19 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 42c21a4..4b400ed 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + "tab-layout#description", "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", @@ -32,6 +32,102 @@ }, "children": ["product-description"] }, + "product-images#description-content": { + "props": { + "displayMode": "first-image", + "zoomMode": "disable", + "blockClass": "image-description" + } + }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description-block", + "defaultActiveTabId": "firstTab" + } + }, + "tab-list#description": { + "children": [ + "tab-list.item#firstTab", + "tab-list.item#secondTab", + "tab-list.item#thirdTab", + "tab-list.item#fourthTab", + "tab-list.item#fifthTab" + ] + }, + "tab-list.item#firstTab": { + "props": { + "tabId": "firstTab", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#secondTab": { + "props": { + "tabId": "secondTab", + "label": "Descrição" + } + }, + "tab-list.item#thirdTab": { + "props": { + "tabId": "thirdTab", + "label": "Descrição" + } + }, + "tab-list.item#fourthTab": { + "props": { + "tabId": "fourthTab", + "label": "Descrição" + } + }, + "tab-list.item#fifthTab": { + "props": { + "tabId": "fifthTab", + "label": "Descrição" + } + }, + "tab-content#description": { + "children": [ + "tab-content.item#firstTab", + "tab-content.item#secondTab", + "tab-content.item#thirdTab", + "tab-content.item#fourthTab", + "tab-content.item#fifthTab" + ], + "props": { + "blockClass": "description-content" + } + }, + "tab-content.item#firstTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "firstTab" + } + }, + "tab-content.item#secondTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "secondTab" + } + }, + "tab-content.item#thirdTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "thirdTab" + } + }, + "tab-content.item#fourthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fourthTab" + } + }, + "tab-content.item#fifthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fifthTab" + } + }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -122,7 +218,7 @@ // "flex-layout.row#buy-button", "availability-subscriber", "html#shipping-simulator" - // "share#default" + // "share#default" //reder social ] }, diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..f486303 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index e244435..ec3c09c 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -17,7 +17,7 @@ line-height: 19px; color: #929292; } -@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .container { padding: 16px 40px; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 32058cc..32a7696 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,7 +13,7 @@ margin: 0; max-width: 100%; } -@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .container { padding: 16px 40px; } @@ -32,7 +32,7 @@ max-height: 904px !important; cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default; } -@media (min-width: 1025px) and (max-width: 2560px) { +@media (min-width: 1025px) and (max-width: 1920px) { .productImageTag--main, .videoContainer { max-height: 664px !important; } @@ -63,7 +63,7 @@ border-radius: 8px; max-width: calc(100% - 16px); } -@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .carouselGaleryThumbs .productImagesThumb { width: 90px !important; height: 90px !important; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..b12144a --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,176 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ +.container--description-block { + padding: 16px 360px; + margin: 0; + max-width: 100%; +} +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block { + padding: 16px 40px; + } +} +.container--description-block .listContainer { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #B9B9B9; + height: 38px; + margin-bottom: 32px; + padding: 0 64px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block .listContainer { + flex-direction: column; + row-gap: 16px; + border-top: 1px solid #B9B9B9; + border-bottom: 1px solid #B9B9B9; + height: auto; + padding: 16px 0; + align-items: flex-start; + } +} +.container--description-block .listContainer .listItem { + height: 38px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; +} +.container--description-block .listContainer .listItem :global(.vtex-button__label) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #BFBFBF; + padding: 0 16px !important; +} +@media (min-width: 1025px) and (max-width: 1920px) { + .container--description-block .listContainer .listItem :global(.vtex-button__label) { + font-size: 18px; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block .listContainer .listItem :global(.vtex-button__label) { + font-size: 18px; + padding: 0 !important; + } +} +.container--description-block .listContainer .listItem :global(.vtex-button) { + background: transparent; + border: none; +} +.container--description-block .listContainer .listItemActive { + border-bottom: 2px solid #000; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block .listContainer .listItemActive { + border: none; + } +} +.container--description-block .listContainer .listItemActive :global(.vtex-button__label) { + color: #000; +} +.container--description-block .contentContainer--description { + display: flex; + align-items: flex-start; + justify-content: space-evenly; + gap: 32px; +} + +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content { + padding-bottom: 16px; + border-bottom: 1px solid #BFBFBF; + } +} +.contentContainer--description-content .contentItem { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 32px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem { + flex-direction: column; + gap: 16px; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productImagesContainer--image-description) { + width: 50%; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productImagesContainer--image-description) { + width: 100%; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 50%; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 100%; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} +@media (min-width: 1025px) and (max-width: 1920px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 24px; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 20px; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) { + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 16px; + padding: 0; +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: #929292; +} +@media (min-width: 1025px) and (max-width: 1920px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) { + font-size: 16px; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) { + font-size: 14px; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-fadeBottom) { + background-image: none; + } +} +.contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-showMoreButton) { + display: none; +} \ No newline at end of file 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..54886e1 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,170 @@ +.container--description-block { + padding:16px 360px; + margin: 0; + max-width: 100%; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + padding: 16px 40px; + } + + .listContainer { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #B9B9B9; + height: 38px; + margin-bottom: 32px; + padding: 0 64px; + + @media #{$mq-tablet}, #{$mq-mobile}{ + flex-direction: column; + row-gap: 16px; + border-top: 1px solid #B9B9B9; + border-bottom: 1px solid #B9B9B9; + height: auto; + padding: 16px 0; + align-items: flex-start; + } + + .listItem { + height: 38px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; + + :global(.vtex-button__label) { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #BFBFBF; + padding: 0 16px !important; + + @media #{$mq-desktop}{ + font-size: 18px; + } + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 18px; + padding: 0 !important; + } + } + :global(.vtex-button) { + background: transparent; + border: none; + } + } + + .listItemActive { + border-bottom: 2px solid $color-black0; + + @media #{$mq-tablet}, #{$mq-mobile} { + border: none; + } + + :global(.vtex-button__label) { + color: $color-black0; + } + } + } + + .contentContainer--description { + display: flex; + align-items: flex-start; + justify-content: space-evenly; + gap: 32px; + } +} + +.contentContainer--description-content{ + + @media #{$mq-tablet}, #{$mq-mobile}{ + padding-bottom: 16px; + border-bottom: 1px solid #BFBFBF; + } + + .contentItem { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 32px; + + @media #{$mq-tablet}, #{$mq-mobile}{ + flex-direction: column; + gap: 16px; + } + + :global(.vtex-store-components-3-x-productImagesContainer--image-description){ + width: 50%; + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100%; + } + } + + :global(.vtex-store-components-3-x-productDescriptionContainer){ + width: 50%; + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100%; + } + + :global(.vtex-store-components-3-x-productDescriptionTitle ) { + font-family:$font-family; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + color: $color-gray7; + margin-bottom: 8px; + + @media #{$mq-desktop} { + font-size: 24px; + } + + @media #{$mq-tablet}, #{$mq-mobile}{ + font-size: 20px; + } + } + + :global(.vtex-store-components-3-x-container) { + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 16px; + padding: 0; + + :global(.vtex-store-components-3-x-content) { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + color: $color-gray6; + + @media #{$mq-desktop} { + font-size: 16px; + } + + @media #{$mq-tablet}, #{$mq-mobile}{ + font-size: 14px; + } + } + + :global(.vtex-store-components-3-x-fadeBottom ){ + @media #{$mq-tablet}, #{$mq-mobile}{ + background-image: none; + } + } + + :global(.vtex-store-components-3-x-showMoreButton) { + display: none; + } + } + } + } + +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 428172e..c3963f0 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -41,6 +41,6 @@ $z-index: ( ) !default; //media-queries -$mq-desktop: "(min-width: 1025px) and (max-width: 2560px)"; +$mq-desktop: "(min-width: 1025px) and (max-width: 1920px)"; $mq-tablet: "(min-width: 769px) and (max-width: 1024px)"; $mq-mobile: "(min-width: 280px) and (max-width: 768px)"; From b998a2dc7483e901ff6371780f59fe2fd9bbe0c4 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Mon, 30 Jan 2023 21:25:02 -0300 Subject: [PATCH 13/22] feat(home): adicionando prateleira de produtos relacionados e estilizando a mesma --- react/Placeholder.tsx | 3 + react/components/Placeholder/index.tsx | 18 ++ store/blocks/pdp/product.jsonc | 286 +++++++++++------- store/interfaces.json | 4 +- styles/configs/font-faces.css | 35 +++ styles/css/vtex.flex-layout.css | 2 +- styles/css/vtex.product-summary.css | 142 +++++++-- styles/css/vtex.rich-text.css | 36 ++- styles/css/vtex.slider-layout.css | 126 ++++++-- styles/css/vtex.store-components.css | 7 + styles/css/vtex.tab-layout.css | 14 + .../sass/pages/product/vtex.flex-layout.scss | 2 +- .../pages/product/vtex.product-summary.scss | 122 ++++++++ styles/sass/pages/product/vtex.rich-text.scss | 33 ++ .../pages/product/vtex.slider-layout.scss | 95 ++++++ .../pages/product/vtex.store-components.scss | 7 + .../sass/pages/product/vtex.tab-layout.scss | 12 + 17 files changed, 776 insertions(+), 168 deletions(-) create mode 100644 react/Placeholder.tsx create mode 100644 react/components/Placeholder/index.tsx create mode 100644 styles/configs/font-faces.css 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/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..53ea3ff --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from "./components/Placeholder/index"; + +export default Placeholder; diff --git a/react/components/Placeholder/index.tsx b/react/components/Placeholder/index.tsx new file mode 100644 index 0000000..fde05cf --- /dev/null +++ b/react/components/Placeholder/index.tsx @@ -0,0 +1,18 @@ +const Placeholder = () => { + if (typeof document !== "undefined") { + const postalCode = document.querySelector(".vtex-address-form-4-x-input"); + + const postalCodeValue = document.querySelector(".postalCode"); + + if (postalCode) { + postalCode.classList.add("postalCode"); + } + if (postalCodeValue) { + postalCodeValue.setAttribute("placeholder", "Digite seu CEP"); + } + } + + return null; +}; + +export default Placeholder; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4b400ed..0a1e260 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,12 +2,14 @@ "store.product": { "children": [ "html#breadcrumb", + "placeholder-component", "condition-layout.product#availability", "tab-layout#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + // "shelf.relatedProducts", + "html#slider-block-container" + // "product-questions-and-answers" ] }, "html#breadcrumb": { @@ -18,6 +20,7 @@ }, "children": ["breadcrumb"] }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -26,108 +29,6 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, - "product-images#description-content": { - "props": { - "displayMode": "first-image", - "zoomMode": "disable", - "blockClass": "image-description" - } - }, - "tab-layout#description": { - "children": ["tab-list#description", "tab-content#description"], - "props": { - "blockClass": "description-block", - "defaultActiveTabId": "firstTab" - } - }, - "tab-list#description": { - "children": [ - "tab-list.item#firstTab", - "tab-list.item#secondTab", - "tab-list.item#thirdTab", - "tab-list.item#fourthTab", - "tab-list.item#fifthTab" - ] - }, - "tab-list.item#firstTab": { - "props": { - "tabId": "firstTab", - "label": "Descrição", - "defaultActiveTab": true - } - }, - "tab-list.item#secondTab": { - "props": { - "tabId": "secondTab", - "label": "Descrição" - } - }, - "tab-list.item#thirdTab": { - "props": { - "tabId": "thirdTab", - "label": "Descrição" - } - }, - "tab-list.item#fourthTab": { - "props": { - "tabId": "fourthTab", - "label": "Descrição" - } - }, - "tab-list.item#fifthTab": { - "props": { - "tabId": "fifthTab", - "label": "Descrição" - } - }, - "tab-content#description": { - "children": [ - "tab-content.item#firstTab", - "tab-content.item#secondTab", - "tab-content.item#thirdTab", - "tab-content.item#fourthTab", - "tab-content.item#fifthTab" - ], - "props": { - "blockClass": "description-content" - } - }, - "tab-content.item#firstTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "firstTab" - } - }, - "tab-content.item#secondTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "secondTab" - } - }, - "tab-content.item#thirdTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "thirdTab" - } - }, - "tab-content.item#fourthTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "fourthTab" - } - }, - "tab-content.item#fifthTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "fifthTab" - } - }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -325,6 +226,179 @@ "children": ["availability-subscriber"] }, + "flex-layout.row#description": { + "props": { + "marginBottom": 7 + }, + "children": ["product-description"] + }, + "product-images#description-content": { + "props": { + "displayMode": "first-image", + "zoomMode": "disable", + "blockClass": "image-description" + } + }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description-block", + "defaultActiveTabId": "firstTab" + } + }, + "tab-list#description": { + "children": [ + "tab-list.item#firstTab", + "tab-list.item#secondTab", + "tab-list.item#thirdTab", + "tab-list.item#fourthTab", + "tab-list.item#fifthTab" + ] + }, + "tab-list.item#firstTab": { + "props": { + "tabId": "firstTab", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#secondTab": { + "props": { + "tabId": "secondTab", + "label": "Descrição" + } + }, + "tab-list.item#thirdTab": { + "props": { + "tabId": "thirdTab", + "label": "Descrição" + } + }, + "tab-list.item#fourthTab": { + "props": { + "tabId": "fourthTab", + "label": "Descrição" + } + }, + "tab-list.item#fifthTab": { + "props": { + "tabId": "fifthTab", + "label": "Descrição" + } + }, + "tab-content#description": { + "children": [ + "tab-content.item#firstTab", + "tab-content.item#secondTab", + "tab-content.item#thirdTab", + "tab-content.item#fourthTab", + "tab-content.item#fifthTab" + ], + "props": { + "blockClass": "description-content" + } + }, + "tab-content.item#firstTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "firstTab" + } + }, + "tab-content.item#secondTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "secondTab" + } + }, + "tab-content.item#thirdTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "thirdTab" + } + }, + "tab-content.item#fourthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fourthTab" + } + }, + "tab-content.item#fifthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fifthTab" + } + }, + + "html#slider-block-container": { + "children": ["rich-text#slider-block-title", "html#list-context.product-list#slider-block"], + "props": { + "blockClass": "slider-container" + } + }, + + "rich-text#slider-block-title": { + "props": { + "text": "#### Você também pode gostar:", + "blockClass": "slider-title" + } + }, + + "product-summary.shelf#slider-block": { + "children": ["html#product-summary.shelf#slider-block"] + }, + + "html#product-summary.shelf#slider-block": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "slider-product" + }, + "children": [ + "product-summary-image#slider-images", + "product-summary-name", + // "product-summary-space", + "product-summary-price" + ] + }, + + "product-summary-image#slider-images": { + "props": { + "blockClass": "product-summary-image", + "showBadge": false, + "aspectRatio": "1:1" + } + }, + + "list-context.product-list#slider-block": { + "blocks": ["product-summary.shelf#slider-block"], + "children": ["html#slider-layout#products-carousel"] + }, + + "html#list-context.product-list#slider-block": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#slider-block"] + }, + + "html#slider-layout#products-carousel": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#products-carousel"] + }, + + "slider-layout#products-carousel": { + "props":{ + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "blockClass": "carousel" + } + }, + "share#default": { "props": { "social": { diff --git a/store/interfaces.json b/store/interfaces.json index dff1205..542ea1e 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -11,6 +11,8 @@ }, "pix-component": { "component": "PixDiscount" + }, + "placeholder-component":{ + "component": "Placeholder" } - } diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..c5c00b9 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,35 @@ +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + src: local("Open Sans Light"), local("OpenSans-Light"), + url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), + url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + src: local("Open Sans Semibold"), local("OpenSans-Semibold"), + url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) + format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + src: local("Open Sans Bold"), local("OpenSans-Bold"), + url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff) + format("woff"); +} diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c648446..cc3b9d2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -175,7 +175,7 @@ } .flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-add-to-cart-button-0-x-buttonText)::after { content: "ADICIONAR À SACOLA"; - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; font-size: 18px; diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..717f69a 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,118 @@ -.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ +.containerNormal { + max-width: 100% !important; + border-radius: 0; } - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.containerNormal .clearLink .element { + height: 100%; + padding: 0; } - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; +.containerNormal .clearLink .element .imageContainer { + width: 100%; + padding: 0; + margin: 0; } - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; +.containerNormal .clearLink .element .nameContainer { + margin: 16px 0 8px 0; + padding: 0; +} +.containerNormal .clearLink .element .nameContainer .brandName { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .containerNormal .clearLink .element .nameContainer .brandName { + font-size: 14px; + line-height: 19px; } } - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; +.containerNormal .clearLink .element .priceContainer { + padding: 0; + margin: 0; } - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { +.containerNormal .clearLink .element .priceContainer .listPriceContainer { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; text-align: center; + text-decoration-line: line-through; + color: #BABABA; } - -.image { - border-radius: 0.25rem; +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .containerNormal .clearLink .element .priceContainer .listPriceContainer { + font-size: 12px; + line-height: 15px; + } } +.containerNormal .clearLink .element .priceContainer .listPriceContainer .listPriceLabel { + display: none; +} +.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer { + font-size: 14px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer { + font-size: 12px; + line-height: 16px; + } +} +.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before { + content: "de "; +} +.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after { + content: " por"; +} +.containerNormal .clearLink .element .priceContainer .sellingPriceContainer { + padding: 0; + margin: 0; + height: 33px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .containerNormal .clearLink .element .priceContainer .sellingPriceContainer { + font-size: 18px; + line-height: 25px; + } +} +.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer { + font-size: 24px; + line-height: 33px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer { + font-size: 18px; + line-height: 25px; + } +} +.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceLabel { + display: none; +} +.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceValue { + padding: 0; + margin: 0; +} +.containerNormal .clearLink .element .priceContainer .installmentContainer { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index ec68700..0328d84 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,4 +7,38 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--slider-title { + height: 38px; +} + +.wrapper--slider-title { + width: 100%; + height: 38px; + padding: 16px 360px; + margin: 0; + max-width: 100%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 32px; +} +@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .wrapper--slider-title { + padding: 16px 40px; + } +} +.wrapper--slider-title .headingLevel4--slider-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} +@media (min-width: 280px) and (max-width: 768px) { + .wrapper--slider-title .headingLevel4--slider-title { + font-size: 20px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..16bcab0 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,107 @@ -.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ .sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; + background: unset; + width: 71.87%; + margin: 0 auto 64px; } - -.sliderTrackContainer { - max-width: 100%; +@media (min-width: 769px) and (max-width: 1024px) { + .sliderLayoutContainer--carousel { + min-height: 306px; + width: 92.18%; + } } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media (min-width: 280px) and (max-width: 768px) { + .sliderLayoutContainer--carousel { + width: 78.93%; + min-height: 306px; + } } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer--carousel .sliderTrackContainer--carousel { + width: 96%; + margin: 0 auto; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +@media (min-width: 769px) and (max-width: 1024px) { + .sliderLayoutContainer--carousel .sliderTrackContainer--carousel { + width: 95%; + } } +@media (min-width: 280px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer--carousel { + width: 87.03%; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack { + column-gap: 16px; +} +@media (min-width: 769px) and (max-width: 1024px) { + .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack { + column-gap: 12px; + } +} +@media (min-width: 280px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack { + column-gap: 8px; + } +} +.sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel { + min-height: 543.4px; +} +@media (min-width: 1025px) and (max-width: 1920px) { + .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel { + min-height: 448px; + } +} +@media (min-width: 769px) and (max-width: 1024px) { + .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel { + min-height: 402.2px; + } +} +@media (min-width: 280px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .sliderTrackContainer--carousel .sliderTrack .slide--carousel { + min-height: 254.8px; + } +} +.sliderLayoutContainer--carousel .sliderLeftArrow--carousel { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-nicolly.svg") !important; + background-repeat: no-repeat; + width: 11.2px; + height: 29.6px; +} +.sliderLayoutContainer--carousel .sliderLeftArrow--carousel .caretIcon--carousel { + display: none; +} +.sliderLayoutContainer--carousel .sliderRightArrow--carousel { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-nicolly.svg") !important; + width: 11.2px; + height: 29.6px; +} +.sliderLayoutContainer--carousel .sliderRightArrow--carousel .caretIcon--carousel { + display: none; +} +.sliderLayoutContainer--carousel .paginationDotsContainer--carousel { + display: flex; + align-items: center; + justify-content: center; + margin-top: 16px; + top: 100%; +} +.sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel { + background-color: #000; + width: 10px; + height: 10px; +} +.sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel--isActive { + width: 17px !important; + height: 17px !important; + background-color: #fff; + border: 0.5px solid #000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 32a7696..f7c9542 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -289,6 +289,13 @@ padding: 16px; border: 1px solid #CCC; border-radius: 0; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #AFAFAF; } @media (max-width: 360) and (min-width: 280px) { .shippingContainer :global(.vtex-address-form-4-x-input) { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index b12144a..d61715b 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -46,6 +46,16 @@ padding: 0; margin: 0; } +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block .listContainer .listItem { + width: 100%; + } +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .container--description-block .listContainer .listItem :global(.vtex-button) { + width: 100%; + } +} .container--description-block .listContainer .listItem :global(.vtex-button__label) { font-family: "Open Sans", sans-serif; font-style: normal; @@ -64,6 +74,7 @@ .container--description-block .listContainer .listItem :global(.vtex-button__label) { font-size: 18px; padding: 0 !important; + justify-content: flex-start; } } .container--description-block .listContainer .listItem :global(.vtex-button) { @@ -88,6 +99,9 @@ gap: 32px; } +.contentContainer--description-content { + padding: 0 32px; +} @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .contentContainer--description-content { padding-bottom: 16px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index c422b59..780e702 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -170,7 +170,7 @@ &::after { content: "ADICIONAR À SACOLA"; - font-family: 'Open Sans'; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 18px; 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..1f39c78 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,122 @@ +.containerNormal { + max-width: 100% !important; + border-radius: 0; + + .clearLink { + .element { + height: 100%; + padding: 0; + + .imageContainer { + width: 100%; + padding: 0; + margin: 0; + } + + .nameContainer { + margin: 16px 0 8px 0; + padding: 0; + + .brandName{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: $color-black0; + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 14px; + line-height: 19px; + } + } + } + + .priceContainer { + padding: 0; + margin: 0; + + .listPriceContainer { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 12px; + line-height: 15px; + } + + .listPriceLabel { + display: none; + } + + .currencyContainer { + font-size: 14px; + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 12px; + line-height: 16px; + } + + &::before { + content: "de "; + } + + &::after { + content: " por"; + } + } + + } + + .sellingPriceContainer { + padding: 0; + margin: 0; + height: 33px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: $color-black0; + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 18px; + line-height: 25px; + } + + .currencyContainer { + font-size: 24px; + line-height: 33px; + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 18px; + line-height: 25px; + } + } + + .sellingPriceLabel { + display: none; + } + + .sellingPriceValue { + padding: 0; + margin: 0; + } + } + + .installmentContainer { + display: none; + } + } + } + } + +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..dae694b 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,33 @@ +.container--slider-title { + height: 38px; +} + +.wrapper--slider-title { + width: 100%; + height: 38px; + padding:16px 360px; + margin: 0; + max-width: 100%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 32px; + + @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { + padding: 16px 40px; + } + + .headingLevel4--slider-title { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + + @media #{$mq-mobile} { + font-size: 20px; + } + } +} 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..1d1e01c --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,95 @@ +.sliderLayoutContainer--carousel { + background: unset; + width: 71.87%; + margin: 0 auto 64px; + + @media #{$mq-tablet} { + min-height: 306px; + width: 92.18%; + } + + @media #{$mq-mobile} { + width: 78.93%; + min-height: 306px; + } + + .sliderTrackContainer--carousel { + width: 96%; + margin: 0 auto; + + @media #{$mq-tablet} { + width: 95%; + } + @media #{$mq-mobile} { + width: 87.03%; + } + + .sliderTrack { + column-gap: 16px; + + @media #{$mq-tablet} { + column-gap: 12px; + } + + @media #{$mq-mobile} { + column-gap: 8px; + } + + .slide--carousel { + min-height: 543.4px; + + @media #{$mq-desktop} { + min-height: 448px; + } + + @media #{$mq-tablet} { + min-height: 402.2px; + } + + @media #{$mq-mobile} { + min-height: 254.8px; + } + } + } + } + + .sliderLeftArrow--carousel { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-nicolly.svg") !important; + background-repeat: no-repeat; + width: 11.2px; + height: 29.6px; + .caretIcon--carousel { + display: none; + } + } + + .sliderRightArrow--carousel { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-nicolly.svg") !important; + width: 11.2px; + height: 29.6px; + .caretIcon--carousel { + display: none; + } + } + + .paginationDotsContainer--carousel { + display: flex; + align-items: center; + justify-content: center; + margin-top: 16px; + top: 100%; + + .paginationDot--carousel { + background-color: $color-black0; + width: 10px; + height: 10px; + + } + .paginationDot--carousel--isActive { + width: 17px !important; + height: 17px !important; + background-color: $color-white; + border: 0.5px solid $color-black0; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 64cd33e..0fc4147 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -315,6 +315,13 @@ padding: 16px; border: 1px solid #CCC; border-radius: 0; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #AFAFAF; @media (max-width:360) and (min-width: 280px) { width: 100px; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 54886e1..797d635 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -34,6 +34,16 @@ padding: 0; margin: 0; + @media #{$mq-tablet}, #{$mq-mobile} { + width: 100%; + } + + @media #{$mq-tablet}, #{$mq-mobile} { + :global(.vtex-button) { + width: 100%; + } + } + :global(.vtex-button__label) { font-family: $font-family; font-style: normal; @@ -50,6 +60,7 @@ @media #{$mq-tablet}, #{$mq-mobile} { font-size: 18px; padding: 0 !important; + justify-content: flex-start; } } :global(.vtex-button) { @@ -80,6 +91,7 @@ } .contentContainer--description-content{ + padding: 0 32px; @media #{$mq-tablet}, #{$mq-mobile}{ padding-bottom: 16px; From f43a5ebef0efc2f1f44286838ae19e2d2f89dd84 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 1 Feb 2023 11:14:18 -0300 Subject: [PATCH 14/22] feat(home): estruturando scss em novas pastas organizadas --- store/blocks/pdp/product.jsonc | 4 ++-- styles/css/vtex.slider-layout.css | 1 + styles/css/vtex.tab-layout.css | 2 +- .../product/{ => vtexComponents}/vtex.store-components.scss | 0 .../pages/product/{ => vtexFlexLayout}/vtex.flex-layout.scss | 0 .../product/{ => vtexProduct}/vtex.product-identifier.scss | 0 .../pages/product/{ => vtexProduct}/vtex.product-price.scss | 0 .../product/{ => vtexProduct}/vtex.product-quantity.scss | 0 .../pages/product/{ => vtexProduct}/vtex.product-summary.scss | 0 .../pages/product/{ => vtexProduct}/vtex.stack-layout.scss | 0 .../sass/pages/product/{ => vtexSlider}/vtex.rich-text.scss | 0 .../pages/product/{ => vtexSlider}/vtex.slider-layout.scss | 1 + styles/sass/pages/product/{ => vtexTab}/vtex.tab-layout.scss | 2 +- 13 files changed, 6 insertions(+), 4 deletions(-) rename styles/sass/pages/product/{ => vtexComponents}/vtex.store-components.scss (100%) rename styles/sass/pages/product/{ => vtexFlexLayout}/vtex.flex-layout.scss (100%) rename styles/sass/pages/product/{ => vtexProduct}/vtex.product-identifier.scss (100%) rename styles/sass/pages/product/{ => vtexProduct}/vtex.product-price.scss (100%) rename styles/sass/pages/product/{ => vtexProduct}/vtex.product-quantity.scss (100%) rename styles/sass/pages/product/{ => vtexProduct}/vtex.product-summary.scss (100%) rename styles/sass/pages/product/{ => vtexProduct}/vtex.stack-layout.scss (100%) rename styles/sass/pages/product/{ => vtexSlider}/vtex.rich-text.scss (100%) rename styles/sass/pages/product/{ => vtexSlider}/vtex.slider-layout.scss (98%) rename styles/sass/pages/product/{ => vtexTab}/vtex.tab-layout.scss (99%) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0a1e260..28ac406 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -215,8 +215,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 16bcab0..573c76d 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -12,6 +12,7 @@ background: unset; width: 71.87%; margin: 0 auto 64px; + padding-top: 16px; } @media (min-width: 769px) and (max-width: 1024px) { .sliderLayoutContainer--carousel { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d61715b..72c5ae8 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -104,7 +104,7 @@ } @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .contentContainer--description-content { - padding-bottom: 16px; + padding: 0 0 16px; border-bottom: 1px solid #BFBFBF; } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss similarity index 100% rename from styles/sass/pages/product/vtex.store-components.scss rename to styles/sass/pages/product/vtexComponents/vtex.store-components.scss diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss similarity index 100% rename from styles/sass/pages/product/vtex.flex-layout.scss rename to styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss similarity index 100% rename from styles/sass/pages/product/vtex.product-identifier.scss rename to styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss similarity index 100% rename from styles/sass/pages/product/vtex.product-price.scss rename to styles/sass/pages/product/vtexProduct/vtex.product-price.scss diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtexProduct/vtex.product-quantity.scss similarity index 100% rename from styles/sass/pages/product/vtex.product-quantity.scss rename to styles/sass/pages/product/vtexProduct/vtex.product-quantity.scss diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss similarity index 100% rename from styles/sass/pages/product/vtex.product-summary.scss rename to styles/sass/pages/product/vtexProduct/vtex.product-summary.scss diff --git a/styles/sass/pages/product/vtex.stack-layout.scss b/styles/sass/pages/product/vtexProduct/vtex.stack-layout.scss similarity index 100% rename from styles/sass/pages/product/vtex.stack-layout.scss rename to styles/sass/pages/product/vtexProduct/vtex.stack-layout.scss diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtexSlider/vtex.rich-text.scss similarity index 100% rename from styles/sass/pages/product/vtex.rich-text.scss rename to styles/sass/pages/product/vtexSlider/vtex.rich-text.scss diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss similarity index 98% rename from styles/sass/pages/product/vtex.slider-layout.scss rename to styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss index 1d1e01c..e1eb48d 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss @@ -2,6 +2,7 @@ background: unset; width: 71.87%; margin: 0 auto 64px; + padding-top: 16px; @media #{$mq-tablet} { min-height: 306px; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss similarity index 99% rename from styles/sass/pages/product/vtex.tab-layout.scss rename to styles/sass/pages/product/vtexTab/vtex.tab-layout.scss index 797d635..60e8258 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss @@ -94,7 +94,7 @@ padding: 0 32px; @media #{$mq-tablet}, #{$mq-mobile}{ - padding-bottom: 16px; + padding: 0 0 16px; border-bottom: 1px solid #BFBFBF; } From 082fa300d55663613fdcfd1cc841c2b8c6059756 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 1 Feb 2023 19:34:40 -0300 Subject: [PATCH 15/22] =?UTF-8?q?feat(product):=20realizando=20estiliza?= =?UTF-8?q?=C3=A7=C3=A3o=20do=20produto=20indisponivel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 119 +++++++++++++++ styles/css/vtex.product-identifier.css | 2 +- styles/css/vtex.store-components.css | 3 + .../vtexComponents/vtex.store-components.scss | 4 + .../vtexFlexLayout/vtex.flex-layout.scss | 141 ++++++++++++++++++ .../vtexProduct/vtex.product-identifier.scss | 2 +- styles/sass/utils/_vars.scss | 1 + 7 files changed, 270 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index cc3b9d2..f5abd23 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -195,4 +195,123 @@ .flexRow--cep .flexRowContent--cep .stretchChildrenWidth { padding: 0; margin: 0; +} + +.flexColChild--info-availability .flexRow--message-availability { + width: 57.74%; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexColChild--info-availability .flexRow--message-availability { + width: 100%; + } +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) { + margin: 0; + padding: 0; + font-size: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) { + margin: 16px 0 0 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 100%; + margin: 0; + display: grid; + grid-template-areas: "A B" "C C"; + max-width: unset !important; + grid-template-columns: 49% 49%; + column-gap: 8px; + row-gap: 16px; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-input__error) { + position: absolute; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-input-prefix__group) { + border-radius: 0; + border: none; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputName) { + grid-area: A; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputEmail) { + grid-area: B; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input) { + height: 40px; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 0 0 14px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #292929; + border: 1px solid #989898; + border-radius: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input)::placeholder { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-submit) { + grid-area: C; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) { + width: 100%; + height: 49px; + display: flex; + justify-content: center; + align-items: center; + background: #000; + cursor: pointer; + font-size: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index f150433..7231ec2 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -12,7 +12,7 @@ display: flex; align-items: center; justify-content: end; - margin-bottom: 24px; + margin-bottom: 16px; } @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .product-identifier--productReference { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f7c9542..d368302 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -277,6 +277,9 @@ .shippingContainer :global(.vtex-address-form__postalCode) { padding: 0; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__error) { + position: absolute; +} .shippingContainer :global(.vtex-input-prefix__group) { width: 250px; height: 49px; diff --git a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss index 0fc4147..bb8edd0 100644 --- a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss @@ -300,6 +300,10 @@ :global(.vtex-address-form__postalCode){ padding: 0; + + :global(.vtex-input__error){ + position: absolute; + } } :global(.vtex-input-prefix__group) { diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss index 780e702..fcf7b42 100644 --- a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss @@ -197,3 +197,144 @@ } } } + +.flexColChild--info-availability { + .flexRow--message-availability { + width: 57.74%; + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100%; + } + + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + padding: 0; + + &::after { + content: "Produto indisponível"; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + + } + } + + :global(.vtex-store-components-3-x-subscribeLabel) { + margin: 0; + padding: 0; + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + } + } + + :global(.vtex-store-components-3-x-form) { + margin: 16px 0 0 0; + + :global(.vtex-store-components-3-x-content) { + width: 100%; + margin: 0; + display: grid; + grid-template-areas: "A B" + "C C"; + max-width: unset !important; + grid-template-columns: 49% 49%; + column-gap: 8px; + row-gap: 16px; + + } + + :global(.vtex-input__error){ + position: absolute; + margin: 0; + padding: 0; + } + + :global(.vtex-input-prefix__group) { + border-radius: 0; + border: none; + } + + :global(.vtex-store-components-3-x-inputName) { + grid-area: A; + margin: 0; + padding: 0; + } + + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: B; + margin: 0; + padding: 0; + } + + :global(.vtex-styleguide-9-x-input) { + height: 40px; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 0 0 14px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-black; + border: 1px solid #989898; + border-radius: 0; + + &::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } + } + + :global(.vtex-store-components-3-x-submit) { + grid-area: C; + margin: 0; + padding: 0; + } + + :global(.vtex-button) { + width: 100%; + height: 49px; + display: flex; + justify-content: center; + align-items: center; + background: $color-black0; + cursor: pointer; + font-size: 0; + + :global(.vtex-button__label) { + padding: 0; + + &::after{ + content: "AVISE-ME"; + font-family: $font-family; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: $color-white; + } + } + } + + } + + } +} diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss index fea1e30..324ff1f 100644 --- a/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; justify-content: end; - margin-bottom: 24px; + margin-bottom: 16px; @media #{$mq-tablet}, #{$mq-mobile} { justify-content: flex-start; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index c3963f0..216d42f 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -16,6 +16,7 @@ $color-gray5: #e5e5e5; $color-gray6: #929292; $color-gray7: #575757; $color-gray8: rgba(185, 185, 185, 0.6); +$color-gray9: #868686; $color-blue: #4267b2; From 53ba2c294788da6fbfcba383068873eece51cc9f Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 1 Feb 2023 23:50:37 -0300 Subject: [PATCH 16/22] feat(product): adicionando footer newsletter --- store/blocks/footer/footer.json | 17 ++ styles/css/vtex.flex-layout.css | 139 +++++++++++++++- styles/css/vtex.store-components.css | 5 +- styles/css/vtex.store-footer.css | 24 +-- .../vtexComponents/vtex.store-components.scss | 5 +- .../vtexFlexLayout/vtex.flex-layout.scss | 152 +++++++++++++++++- .../vtexStoreFooter/vtex.store-footer.scss | 3 + 7 files changed, 328 insertions(+), 17 deletions(-) create mode 100644 styles/sass/pages/product/vtexStoreFooter/vtex.store-footer.scss diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json index c05ac0f..d657b98 100644 --- a/store/blocks/footer/footer.json +++ b/store/blocks/footer/footer.json @@ -7,6 +7,7 @@ }, "footer-layout.desktop": { "children": [ + "flex-layout.row#newsletter", "flex-layout.row#footer-1-desktop", "flex-layout.row#footer-2-desktop", "flex-layout.row#footer-3-desktop" @@ -27,6 +28,21 @@ "paddingBottom": 3 } }, + + "flex-layout.row#newsletter":{ + "children": ["newsletter"], + "props": { + "blockClass": "newsletter__footer" + } + }, + + "newsletter": { + "props": { + "label": "Asssine nossa newsletter", + "placeholder": "Digite seu e-mail" + } + }, + "social-networks": { "props": { "socialNetworks": [ @@ -82,6 +98,7 @@ }, "footer-layout.mobile": { "children": [ + "flex-layout.row#newsletter", "flex-layout.row#1-footer-mobile", "flex-layout.row#2-footer-mobile" ] diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f5abd23..3877030 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -268,7 +268,7 @@ .flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input) { height: 40px; display: flex; - align-items: center; + align-items: flex-start; justify-content: flex-start; padding: 0 0 0 14px; font-family: "Open Sans", sans-serif; @@ -314,4 +314,141 @@ font-size: 18px; line-height: 25px; color: #fff; +} + +.flexRow--newsletter__footer { + height: 175px; +} +.flexRow--newsletter__footer :global(.vtex-store-components-3-x-container) { + padding: 0; + margin: 0; +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer { + padding: 32px 0 16px 0; + width: 100%; + background: #000; + display: flex; + align-items: center; + justify-content: center; +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth { + width: 774px !important; + height: 127px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth { + width: 100% !important; + height: auto; + } +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-label) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 16px; + margin-bottom: 16px; +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-label)::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-label)::after { + font-size: 16px; + line-height: 22px; + } +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-form) { + max-width: 774px; +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-inputGroup) { + padding: 0; + margin: 0; + display: flex; + align-items: center; +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) { + width: 690px; + height: 32px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) { + width: calc(100% - 84px); + } +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + height: 32px; +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input) { + background: transparent; + border: none; + border-bottom: 1px solid #929292; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + padding: 0; + height: 32px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input) { + padding-left: 20px; + font-size: 12px; + line-height: 16px; + } +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input)::placeholder { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input)::placeholder { + padding-left: 20px; + font-size: 12px; + line-height: 16px; + } +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; + margin: 0; + width: 84px; +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + padding: 0; + border: none; + background: transparent; + height: 32px; + width: 100%; +} +.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) :global(.vtex-button__label) { + background: transparent; + border: none; + border-bottom: 3px solid #BFBFBF; + cursor: pointer; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; + height: 32px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d368302..2490cc8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -378,7 +378,7 @@ } @media (min-width: 280px) and (max-width: 768px) { .shippingTable .shippingTableHead .shippingTableRow { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 30% 18% 39%; } } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, @@ -424,7 +424,8 @@ } @media (min-width: 280px) and (max-width: 768px) { .shippingTable .shippingTableBody .shippingTableRow { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 30% 18% 39%; + column-gap: 16px; } } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..a3616bc 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,13 @@ -.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ +.footerLayout { + background: #000; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss index bb8edd0..48c0119 100644 --- a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss @@ -409,7 +409,7 @@ grid-template-areas: "entrega frete prazo"; @media #{$mq-mobile}{ - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 30% 18% 39%; } .shippingTableHeadDeliveryName, @@ -458,7 +458,8 @@ margin-top: 15px; @media #{$mq-mobile}{ - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 30% 18% 39%; + column-gap: 16px; } .shippingTableCellDeliveryName { diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss index fcf7b42..6430972 100644 --- a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss @@ -281,7 +281,7 @@ :global(.vtex-styleguide-9-x-input) { height: 40px; display: flex; - align-items: center; + align-items: flex-start; justify-content: flex-start; padding: 0 0 0 14px; font-family: $font-family; @@ -338,3 +338,153 @@ } } +.flexRow--newsletter__footer { + height: 175px; + + :global(.vtex-store-components-3-x-container ){ + padding: 0; + margin: 0; + } + + .flexRowContent--newsletter__footer { + padding: 32px 0 16px 0; + width: 100%; + background: $color-black0; + display: flex; + align-items: center; + justify-content: center; + + .stretchChildrenWidth { + width: 774px !important; + height: 127px; + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100% !important; + height: auto; + } + + :global(.vtex-store-components-3-x-label) { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-white; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 16px; + margin-bottom: 16px; + + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray6; + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 16px; + line-height: 22px; + } + } + } + + :global(.vtex-store-components-3-x-form) { + max-width: 774px; + } + + :global(.vtex-store-components-3-x-inputGroup) { + padding: 0; + margin: 0; + display: flex; + align-items: center; + } + + :global(.vtex-input ) { + width: 690px; + height: 32px; + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: calc(100% - 84px); + } + + :global(.vtex-input-prefix__group) { + border: none; + height: 32px; + } + + :global(.vtex-styleguide-9-x-input){ + background: transparent; + border: none; + border-bottom: 1px solid $color-gray6; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray6; + padding: 0; + height: 32px; + + @media #{$mq-tablet}, #{$mq-mobile} { + padding-left: 20px; + font-size: 12px; + line-height: 16px; + } + + &::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray6; + + @media #{$mq-tablet}, #{$mq-mobile} { + padding-left: 20px; + font-size: 12px; + line-height: 16px; + } + } + } + + } + + + :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; + margin: 0; + width: 84px; + + :global(.vtex-button) { + padding: 0; + border: none; + background: transparent; + height: 32px; + width: 100%; + + :global(.vtex-button__label) { + background: transparent; + border: none; + border-bottom: 3px solid #BFBFBF; + cursor: pointer; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-white; + height: 32px; + + } + + } + } + } + } +} + diff --git a/styles/sass/pages/product/vtexStoreFooter/vtex.store-footer.scss b/styles/sass/pages/product/vtexStoreFooter/vtex.store-footer.scss new file mode 100644 index 0000000..61ba501 --- /dev/null +++ b/styles/sass/pages/product/vtexStoreFooter/vtex.store-footer.scss @@ -0,0 +1,3 @@ +.footerLayout { + background: $color-black0; +} From a5fb4e12efc88111287040daa6fc2f6431ee426b Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 2 Feb 2023 11:36:35 -0300 Subject: [PATCH 17/22] style(product): ajustando style de description do product --- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.tab-layout.css | 7 +++++-- styles/sass/pages/product/vtexTab/vtex.tab-layout.scss | 7 +++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 28ac406..a44924a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -235,7 +235,7 @@ "product-images#description-content": { "props": { "displayMode": "first-image", - "zoomMode": "disable", + "zoomMode": "disabled", "blockClass": "image-description" } }, diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 72c5ae8..c11d0f9 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -36,6 +36,7 @@ height: auto; padding: 16px 0; align-items: flex-start; + margin-bottom: 16px; } } .container--description-block .listContainer .listItem { @@ -143,7 +144,7 @@ font-size: 32px; line-height: 32px; color: #575757; - margin-bottom: 8px; + margin-bottom: 16px; } @media (min-width: 1025px) and (max-width: 1920px) { .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) { @@ -167,17 +168,19 @@ font-style: normal; font-weight: 400; font-size: 18px; - line-height: 22px; + line-height: 25px; color: #929292; } @media (min-width: 1025px) and (max-width: 1920px) { .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) { font-size: 16px; + line-height: 22px; } } @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .contentContainer--description-content .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-content) { font-size: 14px; + line-height: 19px; } } @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { diff --git a/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss index 60e8258..8498be1 100644 --- a/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss @@ -24,6 +24,7 @@ height: auto; padding: 16px 0; align-items: flex-start; + margin-bottom: 16px; } .listItem { @@ -131,7 +132,7 @@ font-size: 32px; line-height: 32px; color: $color-gray7; - margin-bottom: 8px; + margin-bottom: 16px; @media #{$mq-desktop} { font-size: 24px; @@ -154,15 +155,17 @@ font-style: normal; font-weight: 400; font-size: 18px; - line-height: 22px; + line-height: 25px; color: $color-gray6; @media #{$mq-desktop} { font-size: 16px; + line-height: 22px; } @media #{$mq-tablet}, #{$mq-mobile}{ font-size: 14px; + line-height: 19px; } } From 97a34e9a9c8ae07e397188d5626b48439249635a Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 2 Feb 2023 16:02:23 -0300 Subject: [PATCH 18/22] style(product): ajustando espacamento sku-products --- styles/css/vtex.flex-layout.css | 14 ++++++++++++++ styles/css/vtex.product-identifier.css | 1 - styles/css/vtex.store-components.css | 2 -- .../vtexComponents/vtex.store-components.scss | 4 ++-- .../vtexFlexLayout/vtex.flex-layout.scss | 19 +++++++++++++++++++ .../vtexProduct/vtex.product-identifier.scss | 1 - 6 files changed, 35 insertions(+), 6 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 3877030..e892c41 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -119,12 +119,26 @@ padding-right: 16px; margin-right: 16px; } +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexRowContent--product__image .stretchChildrenWidth:first-child { + padding: 0; + margin: 0; + } +} @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .flexRowContent--product__image .stretchChildrenWidth { width: 100% !important; padding-right: 0; } } +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexRowContent--product__image .stretchChildrenWidth .flexCol--product-skus { + margin-top: 32px; + } +} +.flexRowContent--product__image .stretchChildrenWidth .flexColChild--product-skus .flexRow .flexRowContent { + margin: 0; +} .flexRow--product__name, .flexRowContent--product__name { height: 34px; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 7231ec2..ea97e52 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -17,7 +17,6 @@ @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .product-identifier--productReference { justify-content: flex-start; - padding-top: 8px; } } .product-identifier--productReference .product-identifier__label, .product-identifier--productReference .product-identifier__separator { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2490cc8..0dcf720 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -80,7 +80,6 @@ align-items: center; font-family: "Open Sans", sans-serif; padding: 0; - margin: 0 0 8px 0; font-style: normal; font-weight: 300; font-size: 20px; @@ -90,7 +89,6 @@ @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .productNameContainer--quickview { justify-content: flex-start; - margin-top: 32px; } } diff --git a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss index 48c0119..255be79 100644 --- a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss @@ -66,7 +66,7 @@ align-items: center; font-family: $font-family; padding: 0; - margin: 0 0 8px 0; + // margin: 0 0 8px 0; font-style: normal; font-weight: 300; font-size: 20px; @@ -75,7 +75,7 @@ @media #{$mq-tablet}, #{$mq-mobile} { justify-content: flex-start; - margin-top: 32px; + // margin-top: 32px; } } diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss index 6430972..6fe7f19 100644 --- a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss @@ -109,12 +109,31 @@ &:first-child { padding-right: 16px; margin-right: 16px; + + @media #{$mq-tablet}, #{$mq-mobile} { + padding: 0; + margin: 0; + } } @media #{$mq-tablet}, #{$mq-mobile}{ width: 100% !important; padding-right: 0; } + + .flexCol--product-skus { + @media #{$mq-tablet}, #{$mq-mobile} { + margin-top: 32px; + } + } + + .flexColChild--product-skus { + .flexRow { + .flexRowContent { + margin: 0; + } + } + } } } diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss index 324ff1f..acaccdc 100644 --- a/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss @@ -6,7 +6,6 @@ @media #{$mq-tablet}, #{$mq-mobile} { justify-content: flex-start; - padding-top: 8px; } .product-identifier { From 2447d9dfee0d6e2a6886fc14a38dceeb1285e089 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 2 Feb 2023 16:55:38 -0300 Subject: [PATCH 19/22] =?UTF-8?q?style(product):=20corrigindo=20posi=C3=A7?= =?UTF-8?q?=C3=B5es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/PixDiscount/PixDiscount.module.css | 2 +- styles/css/vtex.product-summary.css | 2 ++ styles/css/vtex.slider-layout.css | 4 +++- styles/css/vtex.store-components.css | 13 ++++--------- styles/css/vtex.tab-layout.css | 4 ++-- .../vtexComponents/vtex.store-components.scss | 12 ++++-------- .../product/vtexProduct/vtex.product-summary.scss | 2 ++ .../product/vtexSlider/vtex.slider-layout.scss | 5 +++-- .../sass/pages/product/vtexTab/vtex.tab-layout.scss | 4 ++-- 9 files changed, 23 insertions(+), 25 deletions(-) diff --git a/react/components/PixDiscount/PixDiscount.module.css b/react/components/PixDiscount/PixDiscount.module.css index cbe7dfe..a739a1d 100644 --- a/react/components/PixDiscount/PixDiscount.module.css +++ b/react/components/PixDiscount/PixDiscount.module.css @@ -4,7 +4,7 @@ align-items: center; height: 39px; column-gap: 26px; - margin-top: 8px; + margin: 8px 0 16px 0; } .pixContainer__img { diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 717f69a..1510314 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -53,6 +53,8 @@ text-align: center; text-decoration-line: line-through; color: #BABABA; + padding: 0; + margin-bottom: 8px; } @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .containerNormal .clearLink .element .priceContainer .listPriceContainer { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 573c76d..4f610e5 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -92,13 +92,15 @@ display: flex; align-items: center; justify-content: center; - margin-top: 16px; top: 100%; + column-gap: 12px; } .sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel { background-color: #000; width: 10px; height: 10px; + margin: 0; + padding: 0; } .sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel--isActive { width: 17px !important; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0dcf720..d7a4321 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -57,21 +57,16 @@ } } .carouselGaleryThumbs .productImagesThumb { - width: 10% !important; - height: 100% !important; + width: 90px !important; + height: 90px !important; margin: 16px 16px 0 0; border-radius: 8px; max-width: calc(100% - 16px); } -@media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { - .carouselGaleryThumbs .productImagesThumb { - width: 90px !important; - height: 90px !important; - } -} .carouselGaleryThumbs .productImagesThumb .figure, .carouselGaleryThumbs .productImagesThumb .thumbImg { width: 100%; height: 100%; + border-radius: 8px; } .productNameContainer--quickview { @@ -95,7 +90,7 @@ .skuSelectorContainer--sku-product { display: flex; flex-direction: column-reverse; - margin: 16px 0; + margin-bottom: 16px; } .skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { margin: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index c11d0f9..22f737d 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,13 +9,13 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); /* Grid breakpoints */ .container--description-block { - padding: 16px 360px; + padding: 0 360px 16px 360px; margin: 0; max-width: 100%; } @media (min-width: 1025px) and (max-width: 1920px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .container--description-block { - padding: 16px 40px; + padding: 0 40px 16px 40px; } } .container--description-block .listContainer { diff --git a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss index 255be79..0991708 100644 --- a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss @@ -42,20 +42,16 @@ } .productImagesThumb { - width: 10% !important; - height: 100% !important; + width: 90px !important; + height: 90px !important; margin: 16px 16px 0 0; border-radius: 8px; max-width: calc(100% - 16px); - @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { - width: 90px !important; - height: 90px !important; - } - .figure, .thumbImg{ width: 100%; height: 100%; + border-radius: 8px; } } } @@ -82,7 +78,7 @@ .skuSelectorContainer--sku-product { display: flex; flex-direction: column-reverse; - margin: 16px 0; + margin-bottom: 16px; .skuSelectorSubcontainer--tamanho { diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss index 1f39c78..d33e56a 100644 --- a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss @@ -46,6 +46,8 @@ text-align: center; text-decoration-line: line-through; color: #BABABA; + padding: 0; + margin-bottom: 8px; @media #{$mq-tablet}, #{$mq-mobile} { font-size: 12px; diff --git a/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss index e1eb48d..c3cf28a 100644 --- a/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss @@ -77,14 +77,15 @@ display: flex; align-items: center; justify-content: center; - margin-top: 16px; top: 100%; + column-gap: 12px; .paginationDot--carousel { background-color: $color-black0; width: 10px; height: 10px; - + margin: 0; + padding: 0; } .paginationDot--carousel--isActive { width: 17px !important; diff --git a/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss index 8498be1..7b646ec 100644 --- a/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtexTab/vtex.tab-layout.scss @@ -1,10 +1,10 @@ .container--description-block { - padding:16px 360px; + padding: 0 360px 16px 360px; margin: 0; max-width: 100%; @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} { - padding: 16px 40px; + padding: 0 40px 16px 40px; } .listContainer { From 8cb2b112b6ed10c1319d273dc91d856f1e133e7c Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 2 Feb 2023 17:42:16 -0300 Subject: [PATCH 20/22] feat(product): organizando a product jsonc, quebrando em mais arquivos --- store/blocks/pdp/product.jsonc | 190 ------------------ store/blocks/pdp/product__carousel.jsonc | 72 +++++++ store/blocks/pdp/product__description.jsonc | 104 ++++++++++ store/blocks/pdp/product__image.jsonc | 19 ++ styles/css/vtex.flex-layout.css | 6 + styles/css/vtex.slider-layout.css | 6 + .../vtexFlexLayout/vtex.flex-layout.scss | 5 + .../vtexSlider/vtex.slider-layout.scss | 5 + 8 files changed, 217 insertions(+), 190 deletions(-) create mode 100644 store/blocks/pdp/product__carousel.jsonc create mode 100644 store/blocks/pdp/product__description.jsonc create mode 100644 store/blocks/pdp/product__image.jsonc diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a44924a..d2f8cbb 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -80,23 +80,6 @@ "rowGap": 0 } }, - "html#flex-layout.row#product-image": { - "props":{ - "testId": "product-images" - }, - "children": ["product-images"] - }, - "product-images": { - "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "auto" - }, - "showPaginationDots": false, - "thumbnailsOrientation": "horizontal", - "children": ["product-images"] - } - }, "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -226,179 +209,6 @@ "children": ["availability-subscriber"] }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, - "product-images#description-content": { - "props": { - "displayMode": "first-image", - "zoomMode": "disabled", - "blockClass": "image-description" - } - }, - "tab-layout#description": { - "children": ["tab-list#description", "tab-content#description"], - "props": { - "blockClass": "description-block", - "defaultActiveTabId": "firstTab" - } - }, - "tab-list#description": { - "children": [ - "tab-list.item#firstTab", - "tab-list.item#secondTab", - "tab-list.item#thirdTab", - "tab-list.item#fourthTab", - "tab-list.item#fifthTab" - ] - }, - "tab-list.item#firstTab": { - "props": { - "tabId": "firstTab", - "label": "Descrição", - "defaultActiveTab": true - } - }, - "tab-list.item#secondTab": { - "props": { - "tabId": "secondTab", - "label": "Descrição" - } - }, - "tab-list.item#thirdTab": { - "props": { - "tabId": "thirdTab", - "label": "Descrição" - } - }, - "tab-list.item#fourthTab": { - "props": { - "tabId": "fourthTab", - "label": "Descrição" - } - }, - "tab-list.item#fifthTab": { - "props": { - "tabId": "fifthTab", - "label": "Descrição" - } - }, - "tab-content#description": { - "children": [ - "tab-content.item#firstTab", - "tab-content.item#secondTab", - "tab-content.item#thirdTab", - "tab-content.item#fourthTab", - "tab-content.item#fifthTab" - ], - "props": { - "blockClass": "description-content" - } - }, - "tab-content.item#firstTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "firstTab" - } - }, - "tab-content.item#secondTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "secondTab" - } - }, - "tab-content.item#thirdTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "thirdTab" - } - }, - "tab-content.item#fourthTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "fourthTab" - } - }, - "tab-content.item#fifthTab": { - "children": ["product-images#description-content", "product-description"], - "props": { - "tabId": "fifthTab" - } - }, - - "html#slider-block-container": { - "children": ["rich-text#slider-block-title", "html#list-context.product-list#slider-block"], - "props": { - "blockClass": "slider-container" - } - }, - - "rich-text#slider-block-title": { - "props": { - "text": "#### Você também pode gostar:", - "blockClass": "slider-title" - } - }, - - "product-summary.shelf#slider-block": { - "children": ["html#product-summary.shelf#slider-block"] - }, - - "html#product-summary.shelf#slider-block": { - "props": { - "testId": "vtex-product-summary", - "blockClass": "slider-product" - }, - "children": [ - "product-summary-image#slider-images", - "product-summary-name", - // "product-summary-space", - "product-summary-price" - ] - }, - - "product-summary-image#slider-images": { - "props": { - "blockClass": "product-summary-image", - "showBadge": false, - "aspectRatio": "1:1" - } - }, - - "list-context.product-list#slider-block": { - "blocks": ["product-summary.shelf#slider-block"], - "children": ["html#slider-layout#products-carousel"] - }, - - "html#list-context.product-list#slider-block": { - "props": { - "testId": "product-summary-list" - }, - "children": ["list-context.product-list#slider-block"] - }, - - "html#slider-layout#products-carousel": { - "props": { - "testId": "product-summary-list" - }, - "children": ["slider-layout#products-carousel"] - }, - - "slider-layout#products-carousel": { - "props":{ - "itemsPerPage": { - "desktop": 4, - "tablet": 3, - "phone": 2 - }, - "infinite": true, - "blockClass": "carousel" - } - }, - "share#default": { "props": { "social": { diff --git a/store/blocks/pdp/product__carousel.jsonc b/store/blocks/pdp/product__carousel.jsonc new file mode 100644 index 0000000..4b0fae9 --- /dev/null +++ b/store/blocks/pdp/product__carousel.jsonc @@ -0,0 +1,72 @@ +{ + + "html#slider-block-container": { + "children": ["rich-text#slider-block-title", "html#list-context.product-list#slider-block"], + "props": { + "blockClass": "slider-container" + } + }, + + "rich-text#slider-block-title": { + "props": { + "text": "#### Você também pode gostar:", + "blockClass": "slider-title" + } + }, + + "product-summary.shelf#slider-block": { + "children": ["html#product-summary.shelf#slider-block"] + }, + + "html#product-summary.shelf#slider-block": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "slider-product" + }, + "children": [ + "product-summary-image#slider-images", + "product-summary-name", + // "product-summary-space", + "product-summary-price" + ] + }, + + "product-summary-image#slider-images": { + "props": { + "blockClass": "product-summary-image", + "showBadge": false, + "aspectRatio": "1:1" + } + }, + + "list-context.product-list#slider-block": { + "blocks": ["product-summary.shelf#slider-block"], + "children": ["html#slider-layout#products-carousel"] + }, + + "html#list-context.product-list#slider-block": { + "props": { + "testId": "product-summary-list" + }, + "children": ["list-context.product-list#slider-block"] + }, + + "html#slider-layout#products-carousel": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#products-carousel"] + }, + + "slider-layout#products-carousel": { + "props":{ + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "blockClass": "carousel" + } + } +} diff --git a/store/blocks/pdp/product__description.jsonc b/store/blocks/pdp/product__description.jsonc new file mode 100644 index 0000000..da8141a --- /dev/null +++ b/store/blocks/pdp/product__description.jsonc @@ -0,0 +1,104 @@ +{ + "flex-layout.row#description": { + "props": { + "marginBottom": 7 + }, + "children": ["product-description"] + }, + "product-images#description-content": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled", + "blockClass": "image-description" + } + }, + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description-block", + "defaultActiveTabId": "firstTab" + } + }, + "tab-list#description": { + "children": [ + "tab-list.item#firstTab", + "tab-list.item#secondTab", + "tab-list.item#thirdTab", + "tab-list.item#fourthTab", + "tab-list.item#fifthTab" + ] + }, + "tab-list.item#firstTab": { + "props": { + "tabId": "firstTab", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#secondTab": { + "props": { + "tabId": "secondTab", + "label": "Descrição" + } + }, + "tab-list.item#thirdTab": { + "props": { + "tabId": "thirdTab", + "label": "Descrição" + } + }, + "tab-list.item#fourthTab": { + "props": { + "tabId": "fourthTab", + "label": "Descrição" + } + }, + "tab-list.item#fifthTab": { + "props": { + "tabId": "fifthTab", + "label": "Descrição" + } + }, + "tab-content#description": { + "children": [ + "tab-content.item#firstTab", + "tab-content.item#secondTab", + "tab-content.item#thirdTab", + "tab-content.item#fourthTab", + "tab-content.item#fifthTab" + ], + "props": { + "blockClass": "description-content" + } + }, + "tab-content.item#firstTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "firstTab" + } + }, + "tab-content.item#secondTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "secondTab" + } + }, + "tab-content.item#thirdTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "thirdTab" + } + }, + "tab-content.item#fourthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fourthTab" + } + }, + "tab-content.item#fifthTab": { + "children": ["product-images#description-content", "product-description"], + "props": { + "tabId": "fifthTab" + } + } +} diff --git a/store/blocks/pdp/product__image.jsonc b/store/blocks/pdp/product__image.jsonc new file mode 100644 index 0000000..130c82b --- /dev/null +++ b/store/blocks/pdp/product__image.jsonc @@ -0,0 +1,19 @@ +{ + "html#flex-layout.row#product-image": { + "props":{ + "testId": "product-images" + }, + "children": ["product-images"] + }, + "product-images": { + "props": { + "aspectRatio": { + "desktop": "auto", + "phone": "auto" + }, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", + "children": ["product-images"] + } + } +} diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e892c41..31c1432 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -344,6 +344,12 @@ display: flex; align-items: center; justify-content: center; + border-bottom: 1px solid #fff; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexRow--newsletter__footer .flexRowContent--newsletter__footer { + border-bottom: none; + } } .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth { width: 774px !important; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 4f610e5..ff11d17 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -94,6 +94,12 @@ justify-content: center; top: 100%; column-gap: 12px; + margin-top: 32px; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .sliderLayoutContainer--carousel .paginationDotsContainer--carousel { + margin-top: 16px; + } } .sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel { background-color: #000; diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss index 6fe7f19..b8de16e 100644 --- a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss @@ -372,6 +372,11 @@ display: flex; align-items: center; justify-content: center; + border-bottom: 1px solid $color-white; + + @media #{$mq-tablet}, #{$mq-mobile} { + border-bottom: none; + } .stretchChildrenWidth { width: 774px !important; diff --git a/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss b/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss index c3cf28a..d5f997a 100644 --- a/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss @@ -79,6 +79,11 @@ justify-content: center; top: 100%; column-gap: 12px; + margin-top: 32px; + + @media #{$mq-tablet}, #{$mq-mobile} { + margin-top: 16px; + } .paginationDot--carousel { background-color: $color-black0; From 31488e9740bed1201c1f00ae89e40283a0ff901f Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Fri, 3 Feb 2023 09:20:58 -0300 Subject: [PATCH 21/22] feat(product): adicionando font-family e tamanho no before after do price --- .../vtexProduct/vtex.product-summary.scss | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss index d33e56a..06fab47 100644 --- a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss @@ -68,10 +68,32 @@ &::before { content: "de "; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 12px; + line-height: 15px; + } } &::after { content: " por"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + + @media #{$mq-tablet}, #{$mq-mobile} { + font-size: 12px; + line-height: 15px; + } } } From 0da4b1b3acf57150de55c80d1130851c52f775b9 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Fri, 3 Feb 2023 11:11:18 -0300 Subject: [PATCH 22/22] feat(product): adicionando testid de shipping-simulator --- store/blocks/pdp/product.jsonc | 3 ++- styles/css/vtex.product-summary.css | 24 ++++++++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d2f8cbb..03d37e3 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -172,7 +172,8 @@ "html#shipping-simulator": { "props":{ - "blockClass": "cep" + "blockClass": "cep", + "testId": "shipping-simulator" }, "children": ["shipping-simulator"] }, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 1510314..d3abedc 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -76,9 +76,33 @@ } .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before { content: "de "; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before { + font-size: 12px; + line-height: 15px; + } } .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after { content: " por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after { + font-size: 12px; + line-height: 15px; + } } .containerNormal .clearLink .element .priceContainer .sellingPriceContainer { padding: 0;