diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index da001bc..9d35e26 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -38,12 +38,12 @@ color: #929292; white-space: nowrap; } -.html--pdp-productMain{ +.html--pdp-productMain,.html--availability{ padding-right: 2.778%; padding-left: 2.778%; display: flex; } -.html--StackLayout,.html--pdp-InfoBuy{ +.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{ width: 50%; } @@ -54,8 +54,8 @@ margin-bottom: 16px; margin-top: 16px; } -.html--pdp-productMain :global(.vtex-button){ - display: none; +.html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){ + display: block; } .html--buy-button :global(.vtex-button){ display: block; @@ -75,7 +75,7 @@ max-width: 766px; width: 80.126%; } - .html--pdp-productMain{ + .html--pdp-productMain,.html--availability{ padding-right: 12.5393%; padding-left: 12.5393%; margin: 0; @@ -123,7 +123,7 @@ :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){ margin-bottom: 20px; } -.html--pdp-productMain :global(.vtex-store-components-3-x-container){ +.html--pdp-productMain :global(.vtex-store-components-3-x-container),.html--availability :global(.vtex-store-components-3-x-container){ max-width: 100%; } :global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){ @@ -160,11 +160,11 @@ padding-top: 12px !important; padding-bottom: 12px !important; } - .html--pdp-productMain{ + .html--pdp-productMain,.html--availability{ flex-direction: column; align-items: center; } - .html--StackLayout,.html--pdp-InfoBuy{ + .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{ width: 89.23%; } .html--pdp-descriptions :global(.vtex-store-components-3-x-container){ diff --git a/react/components/ProductContext/Pix.tsx b/react/components/ProductContext/Pix.tsx index 4a09b0d..4b8c073 100644 --- a/react/components/ProductContext/Pix.tsx +++ b/react/components/ProductContext/Pix.tsx @@ -1,7 +1,14 @@ -import React from 'react'; +import React, { useRef, useEffect } from 'react'; import { useProduct } from 'vtex.product-context'; -const Pix = () => { +const Pix: React.FC = () => { + const buttonRef = useRef(null); + useEffect(() => { + if (buttonRef.current) { + buttonRef.current.innerHTML = 'Novo texto'; + buttonRef.current.setAttribute('placeholder', 'Novo placeholder'); + } + }, []); const { product } = useProduct() let pixprice = product?.priceRange.sellingPrice.lowPrice diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d2df9f1..700f7d8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -239,7 +239,7 @@ } ], "Then": "html#product-main", - "Else": "flex-layout.row#product-availability" + "Else": "html#product-availability" } }, @@ -428,28 +428,23 @@ } }, - "flex-layout.row#product-availability": { + "html#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "availability" }, "children": [ "html#stack", - "flex-layout.col#right-col-availability" + "html#right-col-availability" ] }, - "flex-layout.col#right-col-availability": { + "html#right-col-availability": { "props": { - "preventVerticalStretch": true, - "rowGap": 0, "blockClass": "info-availability" }, "children": [ "flex-layout.row#product-name", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { @@ -459,6 +454,12 @@ "children": ["availability-subscriber"] }, + "availability-subscriber":{ + "props": { + "blockClass": "message-availability" + } + }, + "share#default": { "props": { "social": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d413635..02713df 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 @@ -200,4 +201,29 @@ font-weight: 700; font-size: 25px; line-height: 38px; +} + +.flexRowContent--message-availability :global(.vtex-store-components-3-x-title) { + font-size: 0; +} +.flexRowContent--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: 900; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; +} +.flexRowContent--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: 700; + font-size: 14px; + line-height: 19px; + color: #868686; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index aba5c15..8f3d246 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -241,4 +241,57 @@ font-size: 14px !important; line-height: 19px !important; } +} + +.form { + width: max-content; +} +.form .content { + width: 65.532%; + height: 108px; + display: grid; + justify-items: center; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr 1fr; + gap: 8px; +} +.form .content .inputName, .form .content .inputEmail { + width: 100%; + height: 40px; + min-width: 150px; + margin-right: 0; + margin-bottom: 7px; +} +.form .submit { + width: 100%; + justify-content: center; + grid-column: span 2; + grid-row: 2; +} +.form .submit :global(.vtex-button) { + width: 100%; + background: #000000; + width: 308px; + height: 49px; +} +.form .submit :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.form .submit :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: #FFFFFF; +} +.form :global(.vtex-styleguide-9-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 28px; + padding: 14px 14px 16px; + color: #989898; } \ 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 f1e0d8e..5a75976 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -194,4 +194,29 @@ line-height: 38px; } } - +.flexRowContent--message-availability{ + :global(.vtex-store-components-3-x-title){ + font-size: 0; + &::after{ + content: "Produto indisponível"; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 900; + font-size: 14px; + line-height: 19px; + color: #868686; + } + } + :global(.vtex-store-components-3-x-subscribeLabel){ + font-size: 0; + &::after{ + content: "Deseja saber quando estiver disponível?"; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3d1bab5..f4a374e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -216,4 +216,57 @@ } } +.form{ + width: max-content; + .content{ + width: 65.532%; + height: 108px; + display: grid; + justify-items: center; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr 1fr; + gap: 8px; + .inputName,.inputEmail{ + width: 100%; + height: 40px; + min-width: 150px; + margin-right: 0; + margin-bottom: 7px; + } + } + .submit{ + width: 100%; + justify-content: center; + grid-column: span 2; + grid-row: 2; + :global(.vtex-button){ + width: 100%; + background: #000000; + width: 308px; + height: 49px; + :global(.vtex-button__label){ + font-size: 0; + &::after{ + content: "AVISE-ME"; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #FFFFFF; + } + } + } + } + :global(.vtex-styleguide-9-x-input ){ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 28px; + padding: 14px 14px 16px; + color: #989898; + } +} +