diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..e1dfb67 --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1 @@ +export { Placeholder as default } from './components/PlaceHolder' diff --git a/react/components/PlaceHolder/index.tsx b/react/components/PlaceHolder/index.tsx new file mode 100644 index 0000000..9901752 --- /dev/null +++ b/react/components/PlaceHolder/index.tsx @@ -0,0 +1,31 @@ +import React, { useEffect } from 'react' + +export const Placeholder = () => { + async function QuerySelect(selector: string) { + return new Promise(resolve => { + const getElement = () => { + const element = document.querySelector(selector) + if (element) { + resolve(element) + } else { + requestAnimationFrame(getElement) + } + } + getElement() + }) + } + async function alterInput() { + const cep = await QuerySelect( + 'form[class*=vtex-address-form__postalCode] input' + ) + + console.log(cep) + cep?.setAttribute('placeholder', 'Digite seu CEP') + } + + useEffect(() => { + alterInput() + }, []) + + return <> +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0ddefda..f97f443 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -119,7 +119,8 @@ // "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", - "html#shipping-simulator" + "html#shipping-simulator", + "placeholder" // "share#default" ] }, diff --git a/store/interfaces.json b/store/interfaces.json index 7c55291..e816809 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + + "placeholder": { + "component": "Placeholder" } } diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css index d573100..67e282e 100644 --- a/styles/css/vtex.address-form.css +++ b/styles/css/vtex.address-form.css @@ -10,4 +10,12 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); .input { height: 49px; + padding: 0 0 0 16px; + display: flex; + justify-content: center; +} +.input::placeholder { + font-size: 12px; + line-height: 16px; + color: #afafaf; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8bf7d25..7341ede 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -154,6 +154,8 @@ .shippingContainer :global(.vtex-input-prefix__group) { height: 49px; padding-right: 21px; + display: flex; + align-items: center; } .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { display: none; @@ -190,6 +192,10 @@ .shippingTable .shippingTableHead { display: table-row; } +.shippingTable .shippingTableHead .shippingTableRow { + display: grid; + grid-template-columns: 35% 25% 40%; +} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { @@ -215,7 +221,7 @@ } .shippingTable .shippingTableBody .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 35% 25% 40%; grid-template-rows: 1; } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss index b4b0b87..46e823c 100644 --- a/styles/sass/pages/product/vtex.address-form.scss +++ b/styles/sass/pages/product/vtex.address-form.scss @@ -1,3 +1,12 @@ .input { height: 49px; + padding: 0 0 0 16px; + display: flex; + justify-content: center; + + &::placeholder { + font-size: 12px; + line-height: 16px; + color: $color-gray9; + } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f6da30e..6aea229 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -178,6 +178,8 @@ :global(.vtex-input-prefix__group) { height: 49px; padding-right: 21px; + display: flex; + align-items: center; :global(.vtex-input__suffix) { display: none; } @@ -219,6 +221,8 @@ display: table-row; .shippingTableRow { + display: grid; + grid-template-columns: 35% 25% 40%; .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryPrice, .shippingTableHeadDeliveryEstimate { @@ -254,7 +258,7 @@ .shippingTableBody { .shippingTableRow { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 35% 25% 40%; grid-template-rows: 1; .shippingTableCellDeliveryEstimate {