diff --git a/react/Placeholder.css b/react/Placeholder.css new file mode 100644 index 0000000..e69de29 diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..8fc6add --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,9 @@ +const Placeholder = () => { + if (typeof document !== 'undefined') { + const InputCep = document.querySelector('.vtex-address-form-4-x-input') + InputCep?.setAttribute('placeholder', 'Digite seu CEP') + } + + return null +} +export default Placeholder diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index cd95aa8..7f16ef7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -349,6 +349,7 @@ "html#pixacademy", "html#sku-selector", "html#quantityAndButton", + "Placeholder", "product-assembly-options", "product-gifts", "availability-subscriber", @@ -482,4 +483,4 @@ } } } -} \ No newline at end of file +} diff --git a/store/interfaces.json b/store/interfaces.json index 2c40f7f..e028d6b 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -11,5 +11,8 @@ }, "Pix-academy": { "component": "imagempix" + }, + "Placeholder": { + "component": "Placeholder" } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b0eb6b3..ce9d4b1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -56,7 +56,6 @@ } .newsletter .container .form .label::after { content: "Receba ofertas e novidades por e-mail"; - white-space: pre; font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -110,9 +109,9 @@ .carouselGaleryThumbs { width: 70%; } -@media (max-width: 1024px) { +@media (max-width: 639px) { .carouselGaleryThumbs { - width: 95%; + display: flex; } } @@ -400,13 +399,27 @@ color: #929292; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { - width: 231px; + width: 100%; height: 49px; margin: 0; padding: 16.5px 0 16.5px 16px; border: 1px solid #cccccc; border-radius: 0; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__error) { + position: absolute; + bottom: 0; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; @@ -414,10 +427,10 @@ left: 312px; top: 41.5px; } -@media (max-width: 376px) { +@media (max-width: 476px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { - position: unset; - justify-content: right; + left: 120px; + top: 85px; } } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { @@ -432,6 +445,7 @@ width: 49px; height: 49px; margin-bottom: 5px; + padding: 0 14.5px; background: #000; border: 1px solid #000; border-radius: 0; @@ -523,16 +537,11 @@ gap: 16px !important; } .carouselGaleryThumbs :first-child :first-child .productImagesThumb { - width: 19%; + max-width: 90px; height: fit-content !important; max-height: 90px; margin: 0; } -@media (max-width: 1024px) { - .carouselGaleryThumbs :first-child :first-child .productImagesThumb { - width: 10%; - } -} .carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { border-radius: 8px; } \ 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 37088c0..650e22c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -47,7 +47,6 @@ } &::after{ content: 'Receba ofertas e novidades por e-mail'; - white-space: pre; font-family: 'Open Sans'; font-style: normal; font-weight: 400; @@ -104,8 +103,8 @@ } .carouselGaleryThumbs { width: 70%; - @media (max-width: 1024px){ - width: 95%; + @media (max-width: 639px){ + display: flex; } } // .productImageTag{ @@ -413,7 +412,7 @@ } :global(.vtex-input-prefix__group) { - width: 231px; + width: 100%; height: 49px; margin: 0; padding: 16.5px 0 16.5px 16px; @@ -422,16 +421,29 @@ border-radius: 0; } } - + :global(.vtex-address-form-4-x-input) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; + } + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; padding: 0; left: 312px; top: 41.5px; - @media (max-width: 376px){ - position: unset; - justify-content: right; + @media (max-width: 476px){ + left: 120px; + top: 85px; } :last-child{ @@ -449,6 +461,7 @@ width: 49px; height: 49px; margin-bottom: 5px; + padding: 0 14.5px; background: #000; border: 1px solid #000; @@ -557,14 +570,10 @@ gap: 16px !important; .productImagesThumb { - width: 19%; + max-width: 90px; height: fit-content !important; max-height: 90px; margin: 0; - - @media (max-width: 1024px){ - width: 10%; - } .figure { .thumbImg { border-radius: 8px;