diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..5276001 --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from './components/Placeholder/Placeholder' + +export default Placeholder diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 37aab5f..f3cbcbd 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -8,7 +8,7 @@ [class*='html'] > [class*='button'] { width: 100%; height: 49px; - margin-right: 40px; + /* margin-right: 40px; */ background: #000; border: #000; } diff --git a/react/components/Placeholder/Placeholder.tsx b/react/components/Placeholder/Placeholder.tsx new file mode 100644 index 0000000..8fc6add --- /dev/null +++ b/react/components/Placeholder/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 adf1416..5483354 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,8 +4,8 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#desc", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] @@ -78,7 +78,8 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "46%", + "width": "51%", + // "maxHeight": 664, "rowGap": 0 } }, @@ -111,6 +112,7 @@ "pix", "sku-selector", "html#quantityAndButton", + "Placeholder", "product-assembly-options", "product-gifts", "availability-subscriber", diff --git a/store/interfaces.json b/store/interfaces.json index d504c54..a40473f 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -12,5 +12,8 @@ "Parcelamento": { "component": "Parcelamento" + }, + "Placeholder": { + "component": "Placeholder" } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 4b400f1..6368f7e 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,7 +7,15 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.stretchChildrenWidth { - margin: 0; - padding: 0; +:global(.vtex-store-components-3-x-container) { + padding: 0 40px; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { + max-height: 664px !important; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container { + display: none; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container .swiper-wrapper { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index c752b47..35e807c 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -10,7 +10,6 @@ .product-identifier { display: flex; justify-content: flex-end; - margin-right: 40px; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..f65c000 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,24 @@ +@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 */ +.title { + font-size: 0; +} + +.title::before { + content: "Você também pode gostar:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 36528d6..40dee3e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -11,15 +11,9 @@ background: red; } -.carouselGaleryThumbs { - width: 59.24%; - padding-left: 40px; -} - .productBrand { display: flex; justify-content: flex-end; - margin-right: 37px; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 300; @@ -94,12 +88,6 @@ .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { padding: 0; } -.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::before { - content: "Digite seu cep"; - height: 16px; - width: 16px; - background: red; -} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index a7074cb..ec9da1a 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -13,7 +13,6 @@ font-size: 16px; color: #929292; } - .homeLink:hover::before { color: #0f3e99; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index b0a9d90..f4ec39f 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,4 +1,15 @@ -.stretchChildrenWidth { - margin: 0; - padding: 0; +:global(.vtex-store-components-3-x-container) { + padding: 0 40px; + + :global(.vtex-store-components-3-x-productImageTag) { + max-height: 664px !important; + } + :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + .swiper-container { + display: none; + .swiper-wrapper { + display: none; + } + } + } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index cc3986e..2ed5873 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,7 +1,7 @@ .product-identifier { display: flex; justify-content: flex-end; - margin-right: 40px; + // margin-right: 40px; font-family: "Open Sans", sans-serif; font-style: normal; diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..4cbba16 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,16 @@ +.title { + font-size: 0; +} + +.title::before { + content: 'Você também pode gostar:'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + text-align: center; + + color: #575757; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b7d473d..e86295f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,15 +2,10 @@ background: red; } -.carouselGaleryThumbs { - width: 59.24%; - padding-left: 40px; -} - .productBrand { display: flex; justify-content: flex-end; - margin-right: 37px; + // margin-right: 37px; font-family: 'Open Sans', sans-serif; font-style: normal; @@ -98,13 +93,6 @@ :global(.vtex-address-form-4-x-input) { padding: 0; } - - :global(.vtex-address-form-4-x-input)::before { - content: 'Digite seu cep'; - height: 16px; - width: 16px; - background: red; - } } }