From c9225bc5ddb12601d35c16e6387d9b4ad334121c Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Sun, 29 Jan 2023 22:32:54 -0300 Subject: [PATCH] hotfix: revendo parte02 todo css, deixando mais responsivo e proximo ao figma possivel --- store/blocks/pdp/product.jsonc | 39 +++++--- styles/css/vtex.flex-layout.css | 65 ++++++++++-- styles/css/vtex.product-price.css | 3 + styles/css/vtex.product-quantity.css | 13 +++ styles/css/vtex.store-components.css | 79 ++++++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 98 ++++++++++++++----- .../pages/product/vtex.product-price.scss | 3 + .../pages/product/vtex.product-quantity.scss | 14 +++ .../pages/product/vtex.store-components.scss | 90 +++++++++++++++-- 9 files changed, 354 insertions(+), 50 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ac8a248..8186529 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,6 @@ "html#pageProduct", "newsletter" ] - }, "html#pageProduct": { "props": { @@ -101,10 +100,11 @@ "product-images": { "props": { + "testId":"product-images", "blockClass": "divImagens", "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, "thumbnailsOrientation": "horizontal", "displayThumbnailsArrows": false, @@ -140,6 +140,11 @@ // "share#default" ] }, + "pixCustom":{ + "props":{ + "testId":"pix-price" + } + }, "shipping-simulator":{ "props":{ "blockClass":"divCep" @@ -160,6 +165,7 @@ }, "product-quantity":{ "props":{ + "testId":"product-quantity", "blockClass":"divQuantidade", "size":"regular" } @@ -168,7 +174,7 @@ "props":{ "blockClass":"divParcelamente", "markers": ["discount"], - "message": " {installmentsNumber}x de {installmentValue} sem juros ", + "message": "{installmentsNumber} de {installmentValue} sem juros", "installmentsCriteria":"max-quantity-without-interest" } }, @@ -189,6 +195,7 @@ "sku-selector": { "props": { + "testId":"sku-selector", "blockClass":"divSku", "variationsSpacing": 3, "showValueNameForImageVariation": true @@ -203,9 +210,14 @@ }, "children": ["add-to-cart-button"] }, - + "add-to-cart-button":{ + "props":{ + "testId":"add-to-cart-button" + } + }, "flex-layout.row#product-availability": { "props": { + "blockClass":"divProductIndisponivel", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -225,16 +237,21 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.col#availability", + "sku-selector" ] }, - "flex-layout.row#availability": { + "flex-layout.col#availability": { "props": { "blockClass": "message-availability" }, "children": ["availability-subscriber"] }, + "availability-subscriber":{ + "props":{ + "blockClass":"buttonIndisponivel" + } + }, "share#default": { "props": { @@ -380,15 +397,14 @@ } }, "list-context.product-list#demo": { - "props":{ - // "category":"112901" - // "specificationFilters":"(id:112901)" - }, "blocks": ["product-summary.shelf#demo"], "children": ["slider-layout#demo-product"] }, "product-summary.shelf#demo": { + "props":{ + "testId":"vtex-product-summary" + }, "children": [ "product-summary-image", "product-summary-name", @@ -401,6 +417,7 @@ "slider-layout#demo-product": { "props": { + "testId":"product-summary-list", "itemsPerPage": { "desktop": 4, "tablet": 3, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 29bf15a..e6a8cb3 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -25,16 +25,57 @@ } .flexRowContent { + padding: 0; margin: 0; } -.flexRowContent--divProduct { - margin-top: 16px; - padding: 0px; - padding-left: 40px !important; - margin-bottom: 16px; +.flexRowContent--divProductIndisponivel { + gap: 32px; +} + +.flexColChild--info-availability .flexRow--divNomeProduct { + text-align: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} +@media (max-width: 1024px) { + .flexColChild--info-availability .flexRow--divNomeProduct { + text-align: left; + } +} +.flexColChild--info-availability :global(.vtex-product-identifier-0-x-product-identifier) { + display: flex; + justify-content: flex-end; + align-items: end; + margin: 0; + margin-top: 8px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + margin-bottom: 24px; +} +@media (max-width: 1024px) { + .flexColChild--info-availability :global(.vtex-product-identifier-0-x-product-identifier) { + display: block; + } +} +.flexColChild--info-availability .flexCol--message-availability { + width: 100%; +} +.flexColChild--info-availability .flexCol--message-availability .flexColChild--message-availability { + width: 100%; +} + +.flexRowContent--divProduct { gap: 32px; - padding-right: 40px !important; } @media (max-width: 1024px) { .flexRowContent--divProduct { @@ -54,8 +95,20 @@ line-height: 34px; color: #575757; } +@media (max-width: 1024px) { + .flexCol--divInfoProduct .flexRow--divNomeProduct { + text-align: left; + } +} .flexCol--divInfoProduct .flexRow--divNomeProductModelo { text-align: end; +} +@media (max-width: 1024px) { + .flexCol--divInfoProduct .flexRow--divNomeProductModelo { + text-align: left; + } +} +.flexCol--divInfoProduct .flexRow--divNomeProductModelo :global(.vtex-product-identifier-0-x-product-identifier) { font-family: "Open Sans"; font-style: normal; font-weight: 400; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index ba64241..082f9ad 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -27,6 +27,9 @@ .installments--divParcelamente .installmentsNumber--divParcelamente { font-weight: 700; } +.installments--divParcelamente .installmentsNumber--divParcelamente::after { + content: "x"; +} .installments--divParcelamente .installments-discount--divParcelamente { font-weight: 700; } diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index e0f5ca1..d1243da 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -9,4 +9,17 @@ /* Grid breakpoints */ .quantitySelectorContainer .quantitySelectorTitle { display: none; +} + +.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__input) { + border-left: 0px; + border-right: 0px; +} +.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__plus-button) { + color: black; + background-color: white; +} +.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__minus-button) { + color: black; + background-color: white; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c046de5..abb39a2 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,7 +13,11 @@ .container { margin: 0; - padding: 0; + margin-top: 16px !important; + padding: 0px !important; + padding-left: 40px !important; + margin-bottom: 16px !important; + padding-right: 40px !important; max-width: 100%; } .container .productImagesContainer--divImagens { @@ -43,6 +47,11 @@ max-width: 100% !important; } } +@media (max-width: 641px) { + .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens { + display: block !important; + } +} .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb { margin-right: 16px; padding: 0px; @@ -143,6 +152,7 @@ height: 48px; } .skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .frameAround--divSku { + border: 1px solid #989898; border-radius: 50%; width: 48px; height: 48px; @@ -190,6 +200,7 @@ height: 40px; } .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku { + border: 1px solid #989898; border-radius: 50%; width: 40px; height: 40px; @@ -205,6 +216,12 @@ } .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku { padding: 0 !important; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); } .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute { height: 40px; @@ -398,4 +415,64 @@ background-color: black; border: 0; border-radius: 0; +} + +.subscriberContainer { + width: 100%; +} +.subscriberContainer .title { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .form .content { + display: grid; + grid-template-areas: "1" "2"; + justify-content: inherit; + gap: 10px; + width: 100%; + max-width: 100%; +} +.subscriberContainer .form .content .inputName { + grid-area: 1; + margin-right: 0; + margin-bottom: 0; +} +.subscriberContainer .form .content .inputEmail { + grid-area: 1; + margin-right: 0; + margin-bottom: 0; +} +.subscriberContainer .form .content .submit { + grid-area: 2; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + height: 49px; + border: 0; + background-color: #000000; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + color: #ffffff; } \ 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 110e471..860f8ea 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,30 +1,69 @@ - - .stretchChildrenWidth{ - width: 100% !important; - padding: 0 ; - @media (max-width: 1024px) { - padding-right: 0px - } +.stretchChildrenWidth { + width: 100% !important; + padding: 0; + @media (max-width: 1024px) { + padding-right: 0px; } +} -.flexRowContent--divDescription{ +.flexRowContent--divDescription { @media (max-width: 1024px) { display: flex; flex-direction: column; } } -.flexRowContent{ +.flexRowContent { + padding: 0; margin: 0; } +.flexRowContent--divProductIndisponivel { + gap: 32px; +} +.flexColChild--info-availability { + .flexRow--divNomeProduct { + text-align: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; + @media (max-width: 1024px) { + text-align: left; + } + } + :global(.vtex-product-identifier-0-x-product-identifier) { + display: flex; + justify-content: flex-end; + align-items: end; + margin: 0; + margin-top: 8px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + margin-bottom: 24px + } + @media (max-width: 1024px) { + :global(.vtex-product-identifier-0-x-product-identifier) { + display: block; + } + }; + .flexCol--message-availability{ + width: 100%; + .flexColChild--message-availability{ + width: 100%; + } + } + +} .flexRowContent--divProduct { - margin-top: 16px; - padding: 0px; - padding-left: 40px !important; - margin-bottom: 16px; gap: 32px; - padding-right: 40px !important; - @media (max-width:1024px) { + @media (max-width: 1024px) { flex-direction: column; } .stretchChildrenWidth { @@ -40,28 +79,37 @@ font-size: 20px; line-height: 34px; color: #575757; + @media (max-width: 1024px) { + text-align: left; + } } .flexRow--divNomeProductModelo { text-align: end; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: rgba(146, 146, 146, 0.48); + @media (max-width: 1024px) { + text-align: left; + } + :global(.vtex-product-identifier-0-x-product-identifier){ + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + + } } } -.flexCol--divImgDescription{ +.flexCol--divImgDescription { margin-right: 22px; @media (max-width: 1024px) { margin-right: 0px; } } -.flexRow--divButtonBuy{ +.flexRow--divButtonBuy { text-align: center; width: 100%; - :global(.vtex-button){ + :global(.vtex-button) { background-color: black; } -} \ No newline at end of file +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 8bc93f6..b858a6e 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -16,6 +16,9 @@ color: #929292; .installmentsNumber--divParcelamente{ font-weight: 700; + &::after{ + content: "x"; + } } .installments-discount--divParcelamente{ font-weight: 700; diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index e726a89..9715649 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -10,4 +10,18 @@ // width: 100%; // } // } +} +.quantitySelectorStepper--divQuantidade{ + :global(.vtex-numeric-stepper__input){ + border-left: 0px; + border-right: 0px; + } + :global(.vtex-numeric-stepper__plus-button){ + color: black; + background-color: white; + } + :global(.vtex-numeric-stepper__minus-button){ + color: black; + background-color: white; + } } \ 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 fd15cfa..bd0e590 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,7 +3,11 @@ } .container { margin: 0; - padding: 0; + margin-top: 16px !important; + padding: 0px !important; + padding-left: 40px !important; + margin-bottom: 16px !important; + padding-right: 40px !important; max-width: 100%; .productImagesContainer--divImagens { width: 100%; @@ -28,6 +32,9 @@ } } .carouselGaleryThumbs--divImagens { + @media (max-width: 641px) { + display: block !important; + } .productImagesThumb { margin-right: 16px; padding: 0px; @@ -121,6 +128,7 @@ width: 48px; height: 48px; .frameAround--divSku { + border: 1px solid #989898; border-radius: 50%; width: 48px; height: 48px; @@ -151,7 +159,6 @@ .skuSelectorSubcontainer--tamanho { order: 1; height: 67px; - // margin-bottom: 10px !important; .skuSelectorName { font-size: 0; font-family: "Open Sans"; @@ -169,6 +176,7 @@ width: 40px; height: 40px; .frameAround--divSku { + border: 1px solid #989898; border-radius: 50%; width: 40px; height: 40px; @@ -183,6 +191,12 @@ height: 40px; .skuSelectorItemTextValue--divSku { padding: 0 !important; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); } .absolute { height: 40px; @@ -203,7 +217,6 @@ transform: rotate(-90deg); } } - .shippingContainer { display: flex; position: relative; @@ -291,7 +304,7 @@ line-height: 19px; color: #202020; } - .shippingTableHeadDeliveryEstimate{ + .shippingTableHeadDeliveryEstimate { display: flex; order: 1; text-transform: uppercase; @@ -305,7 +318,7 @@ color: #202020; } - .shippingTableHeadDeliveryPrice{ + .shippingTableHeadDeliveryPrice { text-transform: uppercase; font-size: 0; width: 62px; @@ -316,7 +329,7 @@ line-height: 19px; color: #202020; } - .shippingTableHeadDeliveryPrice::after{ + .shippingTableHeadDeliveryPrice::after { content: "FRETE"; font-size: 14px; } @@ -373,7 +386,7 @@ } } } -.inputGroup--newsletter{ +.inputGroup--newsletter { :global(.vtex-input-prefix__group) { border: none; border-bottom: 1px solid #929292; @@ -384,3 +397,66 @@ } } } +.subscriberContainer { + width: 100%; + .title { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; + } + .subscribeLabel { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; + } + .form { + .content { + display: grid; + grid-template-areas: + "1" + "2"; + justify-content: inherit; + gap: 10px; + width: 100%; + max-width: 100%; + .inputName { + grid-area: 1; + margin-right: 0; + margin-bottom: 0; + } + .inputEmail { + grid-area: 1; + margin-right: 0; + margin-bottom: 0; + } + .submit { + grid-area: 2; + :global(.vtex-button) { + width: 100%; + height: 49px; + border: 0; + background-color: #000000; + } + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "AVISE-ME"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + color: #ffffff; + } + } + } + } + } +}