From a84fd728a288786ae4496889b1641aee4fbb0a99 Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Mon, 6 Feb 2023 15:57:59 -0300 Subject: [PATCH] fix: add todos os testid --- react/components/descont-pix/index.tsx | 4 +- react/components/descont-pix/styles.css | 4 + store/blocks/pdp/product.jsonc | 53 +- styles/css/vtex.add-to-cart-button.css | 19 + styles/css/vtex.flex-layout.css | 526 +++++++++--------- styles/css/vtex.product-summary.css | 35 ++ .../product/vtex.add-to-cart-button.scss | 9 + .../pages/product/vtex.product-summary.scss | 39 ++ 8 files changed, 415 insertions(+), 274 deletions(-) create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss diff --git a/react/components/descont-pix/index.tsx b/react/components/descont-pix/index.tsx index a141d52..20ed141 100644 --- a/react/components/descont-pix/index.tsx +++ b/react/components/descont-pix/index.tsx @@ -14,8 +14,8 @@ export const DescontPix: FC = () => {
Logo PIX
- R$ {sellingPrice.toFixed(2).replace(".", ",")} - 10 % de desconto +

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

+

10 % de desconto

); diff --git a/react/components/descont-pix/styles.css b/react/components/descont-pix/styles.css index 99984d3..87daaba 100644 --- a/react/components/descont-pix/styles.css +++ b/react/components/descont-pix/styles.css @@ -21,6 +21,8 @@ font-size: 18px; line-height: 25px; color: rgba(0, 0, 0, 0.58); + + margin: 0; } .descontDescontPix{ @@ -28,4 +30,6 @@ font-size: 13px; line-height: 18px; color: #929292; + + margin: 0; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 867ce32..3311e81 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -24,7 +24,7 @@ "html#DescriptionSectionPDP":{ "props": { "tag": "section", - "testId": "tab-layout" + "testId": "product-description" }, "children": [ "tab-layout#pdp" @@ -176,7 +176,8 @@ "children": [ "stack-layout#prodsum", "product-summary-name", - "product-summary-price" + "product-list-price", + "product-selling-price" ] }, @@ -326,10 +327,10 @@ "width": "100%" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "flex-layout.row#selling-price", - "product-installments#m3", + "html#product-name", + "html#product-code", + "html#product-price", + "html#product-installments#m3", "html#descont-pix", "html#sku-selector", "flex-layout.row#quantity-and-buy-button", @@ -338,6 +339,22 @@ ] }, + "html#product-code": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#product-price": { + "props": { + "testId": "product-price" + }, + "children": [ + "flex-layout.row#selling-price" + ] + }, + "html#shipping-simulator": { "props": { "testId": "shipping-simulator" @@ -345,6 +362,15 @@ "children": ["shipping-simulator"] }, + "html#product-installments#m3": { + "props": { + "testId": "product-installments" + }, + "children": [ + "product-installments#m3" + ] + }, + "product-installments#m3": { "props": { "markers": ["discount"], @@ -395,7 +421,7 @@ "testId": "add-to-cart-button" }, "children": [ - "buy-button" + "flex-layout.row#buy-button" ] }, @@ -405,6 +431,15 @@ } }, + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": [ + "flex-layout.row#product-name" + ] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3, @@ -458,8 +493,8 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#product-code", "flex-layout.row#availability", "html#sku-selector" ] diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..7803e21 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,19 @@ +@charset "UTF-8"; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.buttonText { + font-size: 0; +} +.buttonText::after { + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 68173f1..427fff2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,6 +8,269 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRowContent--main-header { + padding: 24.5px 40px !important; + justify-content: space-between; +} +.flexRowContent--main-header .flexCol--logo-desktop-m3academy { + width: 44.8717%; +} +.flexRowContent--main-header .flexCol--logo-desktop-m3academy :global(.vtex-store-components-3-x-logoContainer) { + max-width: 100%; + max-height: 100%; + min-width: auto; + padding: 0; +} + +.flexRowContent--main-header-mobile { + justify-content: space-between; + align-items: center; +} + +.flexRowContent--mobile-header-col { + padding: 32px 40px; + flex-direction: column; + row-gap: 8px; +} +.flexRowContent--mobile-header-col .stretchChildrenWidth { + width: 100% !important; +} +.flexRowContent--mobile-header-col :global(.vtex-store-components-3-x-searchBarContainer) { + max-width: 100%; +} + +.flexRowContent--login-and-cart-container { + display: flex; + gap: 40px; +} + +@media screen and (min-width: 1920px) { + .flexRowContent--main-header { + padding: 24.5px 360px !important; + } +} +.flexRow--container-product-main { + padding: 0 40px; +} +.flexRow--container-product-main .flexRowContent--container-product-main { + display: grid; + grid-template-columns: 48.824% 1fr; + grid-column-gap: 32px; + padding: 16px 0; +} +.flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth { + padding-right: 0; +} + +.flexRow--container-product-availability { + padding: 0 40px; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability { + display: grid; + grid-template-columns: 48.824% 1fr; + grid-column-gap: 32px; + padding-top: 16px; + padding-bottom: 16px; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .stretchChildrenWidth { + padding-right: 0; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) { + font-size: 0; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) { + margin-bottom: 16px; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + display: grid; + grid-template-areas: "name email" "button button"; + grid-template-columns: 1fr 1fr; + column-gap: 8px; + row-gap: 15px; + max-width: 100%; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + grid-area: name; + margin: 0; + margin-right: 8px; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + grid-area: email; + margin: 0; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) { + grid-area: button; + margin: 0; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { + width: 100%; + border: 0; + background-color: #000000; + color: #ffffff; + border-radius: 0; + min-height: auto; + vertical-align: auto; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + padding: 12px 0 !important; +} +.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::after { + content: "avise-me"; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; +} + +.swiper-wrapper .swiper-slide-active { + width: 100%; +} +.swiper-wrapper .swiper-slide { + width: 100%; +} + +.flexRowContent { + margin: 0; +} + +.flexRowContent--container-quantity-and-buy-button { + display: grid; + grid-template-columns: 128px 1fr; + gap: 10px; + margin-bottom: 16px; +} +.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) { + background-color: #000000; + border: 0; + border-radius: 0; +} +.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) { + padding: 12px 0 !important; +} +.flexRowContent--container-quantity-and-buy-button .stretchChildrenWidth { + width: 100% !important; +} + +.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100%; +} + +.flexRowContent--container-related-products-pdp { + flex-direction: column; + padding: 0 61px; +} +.flexRowContent--container-related-products-pdp .stretchChildrenWidth { + width: 100% !important; +} + +.flexRow--message-availability { + width: 60.0903%; +} + +.flexRow--container-description-section-product-pdp { + padding: 0 32px; +} +.flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp { + display: grid; + gap: 32px; + grid-template-columns: 1fr 1fr; +} +.flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp .stretchChildrenWidth { + width: 100% !important; +} + +@media screen and (min-width: 1920px) { + .flexRow--container-product-main { + padding: 0 360px; + } + .flexRow--container-product-main .flexRowContent--container-product-main { + grid-template-columns: 49.1305% 1fr; + } + .flexRow--container-product-availability { + padding: 0 360px; + } + .flexRow--container-product-availability .flexRowContent--container-product-availability { + grid-template-columns: 49.1305% 1fr; + } + .flexRowContent--container-related-products-pdp { + padding: 0 381px; + } +} +@media screen and (max-width: 1024px) { + .flexRow--container-product-main .flexRowContent--container-product-main { + display: flex; + flex-direction: column; + padding-top: 16px; + padding-bottom: 0; + } + .flexRowContent--container-related-products-pdp { + padding: 0 53px; + } + .flexRow--container-description-section-product-pdp { + padding: 0; + } + .flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp { + display: flex; + flex-direction: column; + margin-left: 0; + gap: 16px; + padding: 0; + border-bottom: 1px solid #BFBFBF; + } + .flexRow--container-product-availability .flexRowContent--container-product-availability { + display: flex; + flex-direction: column; + } + .flexRow--message-availability { + width: 100%; + } +} +@media screen and (max-width: 768px) { + .flexRowContent--container-quantity-and-buy-button { + display: flex; + flex-direction: column; + } + .flexRowContent--container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + justify-content: flex-start; + } + .flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) { + display: inline-block; + width: 56.7567%; + } + .flexRowContent--container-related-products-pdp { + padding: 0 48px; + } +} .flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) { padding: 32px 0 0 0; background-color: #000000; @@ -274,267 +537,4 @@ .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth { padding: 0; } -} -.flexRowContent--main-header { - padding: 24.5px 40px !important; - justify-content: space-between; -} -.flexRowContent--main-header .flexCol--logo-desktop-m3academy { - width: 44.8717%; -} -.flexRowContent--main-header .flexCol--logo-desktop-m3academy :global(.vtex-store-components-3-x-logoContainer) { - max-width: 100%; - max-height: 100%; - min-width: auto; - padding: 0; -} - -.flexRowContent--main-header-mobile { - justify-content: space-between; - align-items: center; -} - -.flexRowContent--mobile-header-col { - padding: 32px 40px; - flex-direction: column; - row-gap: 8px; -} -.flexRowContent--mobile-header-col .stretchChildrenWidth { - width: 100% !important; -} -.flexRowContent--mobile-header-col :global(.vtex-store-components-3-x-searchBarContainer) { - max-width: 100%; -} - -.flexRowContent--login-and-cart-container { - display: flex; - gap: 40px; -} - -@media screen and (min-width: 1920px) { - .flexRowContent--main-header { - padding: 24.5px 360px !important; - } -} -.flexRow--container-product-main { - padding: 0 40px; -} -.flexRow--container-product-main .flexRowContent--container-product-main { - display: grid; - grid-template-columns: 48.824% 1fr; - grid-column-gap: 32px; - padding: 16px 0; -} -.flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth { - padding-right: 0; -} - -.flexRow--container-product-availability { - padding: 0 40px; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability { - display: grid; - grid-template-columns: 48.824% 1fr; - grid-column-gap: 32px; - padding-top: 16px; - padding-bottom: 16px; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .stretchChildrenWidth { - padding-right: 0; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) { - font-size: 0; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after { - content: "Produto indisponível"; - font-weight: 700; - font-size: 14px; - line-height: 19px; - color: #868686; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) { - font-size: 0; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::after { - content: "Deseja saber quando estiver disponível?"; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #868686; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) { - margin-bottom: 16px; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { - display: grid; - grid-template-areas: "name email" "button button"; - grid-template-columns: 1fr 1fr; - column-gap: 8px; - row-gap: 15px; - max-width: 100%; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { - grid-area: name; - margin: 0; - margin-right: 8px; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-styleguide-9-x-input) { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #989898; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { - grid-area: email; - margin: 0; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-styleguide-9-x-input) { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #989898; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) { - grid-area: button; - margin: 0; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) { - width: 100%; - border: 0; - background-color: #000000; - color: #ffffff; - border-radius: 0; - min-height: auto; - vertical-align: auto; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) { - font-size: 0; - padding: 12px 0 !important; -} -.flexRow--container-product-availability .flexRowContent--container-product-availability .flexRowContent--message-availability :global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label)::after { - content: "avise-me"; - font-weight: 600; - font-size: 18px; - line-height: 25px; - text-transform: uppercase; -} - -.swiper-wrapper .swiper-slide-active { - width: 100%; -} -.swiper-wrapper .swiper-slide { - width: 100%; -} - -.flexRowContent { - margin: 0; -} - -.flexRowContent--container-quantity-and-buy-button { - display: grid; - grid-template-columns: 128px 1fr; - gap: 10px; - margin-bottom: 16px; -} -.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) { - background-color: #000000; - border: 0; - border-radius: 0; -} -.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) { - padding: 12px 0 !important; -} -.flexRowContent--container-quantity-and-buy-button .stretchChildrenWidth { - width: 100% !important; -} - -.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { - width: 100%; -} - -.flexRowContent--container-related-products-pdp { - flex-direction: column; - padding: 0 61px; -} -.flexRowContent--container-related-products-pdp .stretchChildrenWidth { - width: 100% !important; -} - -.flexRow--message-availability { - width: 60.0903%; -} - -.flexRow--container-description-section-product-pdp { - padding: 0 32px; -} -.flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp { - display: grid; - gap: 32px; - grid-template-columns: 1fr 1fr; -} -.flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp .stretchChildrenWidth { - width: 100% !important; -} - -@media screen and (min-width: 1920px) { - .flexRow--container-product-main { - padding: 0 360px; - } - .flexRow--container-product-main .flexRowContent--container-product-main { - grid-template-columns: 49.1305% 1fr; - } - .flexRow--container-product-availability { - padding: 0 360px; - } - .flexRow--container-product-availability .flexRowContent--container-product-availability { - grid-template-columns: 49.1305% 1fr; - } - .flexRowContent--container-related-products-pdp { - padding: 0 381px; - } -} -@media screen and (max-width: 1024px) { - .flexRow--container-product-main .flexRowContent--container-product-main { - display: flex; - flex-direction: column; - padding-top: 16px; - padding-bottom: 0; - } - .flexRowContent--container-related-products-pdp { - padding: 0 53px; - } - .flexRow--container-description-section-product-pdp { - padding: 0; - } - .flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp { - display: flex; - flex-direction: column; - margin-left: 0; - gap: 16px; - padding: 0; - border-bottom: 1px solid #BFBFBF; - } - .flexRow--container-product-availability .flexRowContent--container-product-availability { - display: flex; - flex-direction: column; - } - .flexRow--message-availability { - width: 100%; - } -} -@media screen and (max-width: 768px) { - .flexRowContent--container-quantity-and-buy-button { - display: flex; - flex-direction: column; - } - .flexRowContent--container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { - justify-content: flex-start; - } - .flexRowContent--container-quantity-and-buy-button :global(.vtex-button) :global(.vtex-button__label) { - display: inline-block; - width: 56.7567%; - } - .flexRowContent--container-related-products-pdp { - padding: 0 48px; - } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index cbde1a2..17b3208 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -79,6 +79,41 @@ .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .installmentContainer { display: none; } +.containerNormal--container-product-summary-related-products-pdp :global(.vtex-product-price-1-x-listPrice) { + display: flex; + align-items: center; + justify-content: center; +} +.containerNormal--container-product-summary-related-products-pdp :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue) { + text-decoration: none; + padding: 8px 0; +} +.containerNormal--container-product-summary-related-products-pdp :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue)::before { + content: "de "; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; +} +.containerNormal--container-product-summary-related-products-pdp :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue)::after { + content: " por"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; +} +.containerNormal--container-product-summary-related-products-pdp :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; +} @media screen and (max-width: 1024px) { .containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer .productBrand { diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..ed75dd1 --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,9 @@ +.buttonText{ + font-size: 0; + &::after{ + content: "ADICIONAR À SACOLA"; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index e3fb6b9..9bd9505 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -85,6 +85,45 @@ } } } + + :global(.vtex-product-price-1-x-listPrice){ + display: flex; + align-items: center; + justify-content: center; + :global(.vtex-product-price-1-x-listPriceValue){ + text-decoration: none; + padding: 8px 0; + + &::before{ + content: "de "; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + } + + &::after{ + content: " por"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + } + } + + :global(.vtex-product-price-1-x-currencyContainer){ + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + } + } } @media screen and (max-width: 1024px) {