From 30f7c6e72a24a2a23bc5de3ffd9138c03bacf34f Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 30 Jan 2023 00:46:16 -0300 Subject: [PATCH 1/6] feat(product-images):aplicando css ao product-image --- docs/Todo.md | 6 +++-- store/blocks/pdp/product.jsonc | 18 +++++-------- styles/css/vtex.breadcrumb.css | 3 +++ styles/css/vtex.store-components.css | 20 ++++++++++++--- .../sass/pages/product/vtex.breadcrumb.scss | 4 ++- .../pages/product/vtex.store-components.scss | 25 +++++++++++++++---- 6 files changed, 53 insertions(+), 23 deletions(-) diff --git a/docs/Todo.md b/docs/Todo.md index 81d730f..c478340 100644 --- a/docs/Todo.md +++ b/docs/Todo.md @@ -11,9 +11,9 @@ os Requisitos cobrados serão: - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p -- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){ {c} +- FIXME [Blocos que devem ser ajustado e desenvolvidos](Todo__Bloco_De_Imagens_Do_Produto){ {c} - - HACK 1. BreadCrumb; + - [x] 1. BreadCrumb; - HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens), @@ -22,6 +22,8 @@ os Requisitos cobrados serão: - HACK 4. prateleira de produtos, - HACK 5. Newsletter. + + - HACK dados_do_produto_e_de_compra-ao_lado_das_imagens } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dfe5938..e515c15 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,15 +1,6 @@ { "store.product": { - "children": [ - "html#breadcrumb", - "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "example-component", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" - ] + "children": ["html#breadcrumb", "condition-layout.product#availability"] }, "html#breadcrumb": { "props": { @@ -80,7 +71,8 @@ "children": ["stack-layout"], "props": { "width": "60%", - "rowGap": 0 + "rowGap": 10, + "blockClass": "StackLayout" } }, "flex-layout.row#product-image": { @@ -90,8 +82,10 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "1:1" }, + "showNavigationArrows": false, + "showPaginationDots": false, "displayThumbnailsArrows": false, "thumbnailsOrientation": "horizontal" } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 068c230..af541ca 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,6 +9,9 @@ /* Grid breakpoints */ .container { padding: 0 40px 16px; + margin-left: auto; + margin-right: auto; + max-width: 96rem; } .container .term, .container .termArrow { display: none; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a2d8670..f7c6d1e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -39,10 +39,24 @@ border-radius: 50%; } -.newsletter { - background: black; +.carouselContainer { + padding: 0 40px 0; +} +.carouselContainer .productImageTag { + max-height: 100% !important; + align-self: stretch; + margin-bottom: 16px; +} +.carouselContainer .productImagesThumb { + background: white; +} +.carouselContainer .productImagesThumb .figure { + width: 100%; } .carouselGaleryThumbs { - flex-direction: row; + background: pink; +} +.carouselGaleryThumbs .swiper-wrapper { + gap: 16px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 33263b7..aaeca14 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,8 @@ .container{ padding: 0 40px 16px; - + margin-left: auto; + margin-right: auto; + max-width: 96rem; .term,.termArrow{ display: none; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4386c44..9266100 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -44,10 +44,25 @@ } } -.newsletter{ - background: black; +.carouselContainer{ + padding: 0 40px 0; + + .productImageTag{ + max-height: 100% !important; + align-self: stretch; + margin-bottom: 16px; + } + .productImagesThumb{ + background:white; + .figure{ + width: 100%; + } + } +} +.carouselGaleryThumbs{ + background: pink; + .swiper-wrapper{ + gap: 16px; + } } -.carouselGaleryThumbs{ - flex-direction: row; -} From 07208ba36825909e1accab9d477326964b67926e Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 30 Jan 2023 13:00:22 -0300 Subject: [PATCH 2/6] =?UTF-8?q?feat(product-images):adicionando=20espa?= =?UTF-8?q?=C3=A7amento=20nas=20thumbnails?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 7 ++----- styles/sass/pages/product/vtex.store-components.scss | 5 ++--- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f7c6d1e..6582f21 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -54,9 +54,6 @@ width: 100%; } -.carouselGaleryThumbs { - background: pink; -} -.carouselGaleryThumbs .swiper-wrapper { - gap: 16px; +.carouselGaleryThumbs .productImagesThumb { + margin-right: 16px; } \ 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 9266100..4113adf 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -60,9 +60,8 @@ } } .carouselGaleryThumbs{ - background: pink; - .swiper-wrapper{ - gap: 16px; + .productImagesThumb{ + margin-right: 16px; } } From 7e43bedb0d9cf7f0a0cc617a509b34160b5da294 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 30 Jan 2023 14:20:07 -0300 Subject: [PATCH 3/6] feat(product-image):main image ultrawide responsiva --- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.store-components.css | 26 ++++++++++++----- .../pages/product/vtex.store-components.scss | 29 ++++++++++++------- 3 files changed, 37 insertions(+), 20 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e515c15..9b049b7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -44,7 +44,7 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["flex-layout.col#stack"] }, "stack-layout": { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6582f21..402421a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -42,18 +42,28 @@ .carouselContainer { padding: 0 40px 0; } -.carouselContainer .productImageTag { +.carouselContainer .productImage { + max-width: 85.238%; +} +@media screen and (min-width: 156.25em) { + .carouselContainer .productImage { + min-width: 904px; + max-width: 100%; + } +} +.carouselContainer .productImage .productImageTag- { max-height: 100% !important; + margin-bottom: 1em; align-self: stretch; - margin-bottom: 16px; } -.carouselContainer .productImagesThumb { - background: white; -} -.carouselContainer .productImagesThumb .figure { - width: 100%; +.carouselContainer .productImage .productImageTag--main { + max-height: 100% !important; } .carouselGaleryThumbs .productImagesThumb { - margin-right: 16px; + background: white; + margin-right: 1em; +} +.carouselGaleryThumbs .productImagesThumb .figure { + width: 100%; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4113adf..9dd1860 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -46,22 +46,29 @@ .carouselContainer{ padding: 0 40px 0; - - .productImageTag{ - max-height: 100% !important; - align-self: stretch; - margin-bottom: 16px; - } - .productImagesThumb{ - background:white; - .figure{ - width: 100%; + .productImage{ + max-width:85.238%; + @media screen and (min-width: 156.25em){ + min-width: 904px; + max-width:100%; + } + .productImageTag-{ + max-height: 100% !important; + margin-bottom: 1em; + align-self: stretch; + &-main{ + max-height: 100% !important; + } } } } .carouselGaleryThumbs{ .productImagesThumb{ - margin-right: 16px; + background:white; + margin-right: 1em; + .figure{ + width: 100%; + } } } From 1531f798d1b22f1e9c689426da722e459d978d65 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 30 Jan 2023 16:06:30 -0300 Subject: [PATCH 4/6] feat(product-image):main image mobile responsive --- styles/css/vtex.store-components.css | 12 ++++++++++++ styles/sass/pages/product/vtex.store-components.scss | 8 ++++++++ 2 files changed, 20 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 402421a..a1e342a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -51,6 +51,18 @@ max-width: 100%; } } +@media screen and (max-width: 64.0625em) { + .carouselContainer .productImage { + min-width: 296px; + max-width: 100%; + } +} +@media screen and (max-width: 23.375em) { + .carouselContainer .productImage { + min-width: 0; + max-width: 100%; + } +} .carouselContainer .productImage .productImageTag- { max-height: 100% !important; margin-bottom: 1em; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9dd1860..2f1b0a2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -52,6 +52,14 @@ min-width: 904px; max-width:100%; } + @media screen and (max-width: 64.0625em){ + min-width: 296px; + max-width:100%; + } + @media screen and (max-width: 23.375em){ + min-width: 0; + max-width:100%; + } .productImageTag-{ max-height: 100% !important; margin-bottom: 1em; From 9187738596cce2912ac6e03ea2ad00fe5e588fa8 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 30 Jan 2023 19:07:29 -0300 Subject: [PATCH 5/6] feat(thumnails):thumnails mobile responsivas --- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.store-components.css | 30 +++++++++++++++++++ .../pages/product/vtex.store-components.scss | 22 ++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 9b049b7..1502415 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -82,7 +82,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "1:1" + "phone": "auto" }, "showNavigationArrows": false, "showPaginationDots": false, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a1e342a..0f9f1b4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -72,10 +72,40 @@ max-height: 100% !important; } +.carouselGaleryThumbs { + display: block; + height: max-content; +} .carouselGaleryThumbs .productImagesThumb { + width: max-content !important; background: white; margin-right: 1em; } +@media screen and (max-width: 64.0625em) { + .carouselGaleryThumbs .productImagesThumb { + width: 32% !important; + } +} .carouselGaleryThumbs .productImagesThumb .figure { width: 100%; +} +.carouselGaleryThumbs .productImagesThumb .figure--video { + min-height: 90px; +} +.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { + min-height: 5.54em; +} +@media screen and (max-width: 64.0625em) { + .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { + width: 50px; + min-height: 4.9em; + } +} +.carouselGaleryThumbs .productImagesThumb .figure .thumbImg { + width: 90px; +} +@media screen and (max-width: 64.0625em) { + .carouselGaleryThumbs .productImagesThumb .figure .thumbImg { + width: 50px; + } } \ 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 2f1b0a2..45a2890 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -71,11 +71,33 @@ } } .carouselGaleryThumbs{ + display: block; + height: max-content; .productImagesThumb{ + width: max-content !important; background:white; margin-right: 1em; + @media screen and (max-width: 64.0625em){ + width: 32% !important; + } .figure{ width: 100%; + &--video{ + min-height: 90px; + .thumbImg{ + min-height: 5.54em; + @media screen and (max-width: 64.0625em){ + width: 50px; + min-height: 4.9em; + } + } + } + .thumbImg{ + width: 90px; + @media screen and (max-width: 64.0625em){ + width: 50px; + } + } } } } From 9d6d696e9a739d3ee29bb067dff4d99ab2f447f2 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Mon, 30 Jan 2023 19:51:12 -0300 Subject: [PATCH 6/6] feat(product-image):ajustando thumnails conforme o figma finalizando product-images --- styles/css/vtex.breadcrumb.css | 5 +++++ styles/css/vtex.store-components.css | 11 ++++------- styles/sass/pages/product/vtex.breadcrumb.scss | 3 +++ styles/sass/pages/product/vtex.store-components.scss | 9 ++++----- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index af541ca..9f092fd 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,6 +13,11 @@ margin-right: auto; max-width: 96rem; } +@media screen and (max-width: 64.0625em) { + .container { + padding: 0 0 0 10.67%; + } +} .container .term, .container .termArrow { display: none; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0f9f1b4..b055542 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -69,6 +69,7 @@ align-self: stretch; } .carouselContainer .productImage .productImageTag--main { + border-radius: 8px; max-height: 100% !important; } @@ -83,7 +84,7 @@ } @media screen and (max-width: 64.0625em) { .carouselGaleryThumbs .productImagesThumb { - width: 32% !important; + width: 30% !important; } } .carouselGaleryThumbs .productImagesThumb .figure { @@ -93,19 +94,15 @@ min-height: 90px; } .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { + border-radius: 8px; min-height: 5.54em; } @media screen and (max-width: 64.0625em) { .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { - width: 50px; min-height: 4.9em; } } .carouselGaleryThumbs .productImagesThumb .figure .thumbImg { + border-radius: 8px; width: 90px; -} -@media screen and (max-width: 64.0625em) { - .carouselGaleryThumbs .productImagesThumb .figure .thumbImg { - width: 50px; - } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index aaeca14..c843639 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -3,6 +3,9 @@ margin-left: auto; margin-right: auto; max-width: 96rem; + @media screen and (max-width: 64.0625em){ + padding: 0 0 0 10.67%; + } .term,.termArrow{ display: none; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 45a2890..38f013e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -65,6 +65,7 @@ margin-bottom: 1em; align-self: stretch; &-main{ + border-radius: 8px; max-height: 100% !important; } } @@ -78,25 +79,23 @@ background:white; margin-right: 1em; @media screen and (max-width: 64.0625em){ - width: 32% !important; + width: 30% !important; } .figure{ width: 100%; &--video{ min-height: 90px; .thumbImg{ + border-radius: 8px; min-height: 5.54em; @media screen and (max-width: 64.0625em){ - width: 50px; min-height: 4.9em; } } } .thumbImg{ + border-radius: 8px; width: 90px; - @media screen and (max-width: 64.0625em){ - width: 50px; - } } } }