From b8841846a4caf9afa422b3e1347eeb4b74233981 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Tue, 24 Jan 2023 10:52:58 -0300 Subject: [PATCH] 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%; + } + } +} + + +