feat: adição placeholder no input]

react/Placeholder.tsx

@@ -0,0 +1,3 @@
+import Placeholder from './components/Placeholder/Placeholder'
+
+export default Placeholder

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;
 }

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

store/blocks/pdp/product.jsonc

@@ -4,8 +4,8 @@
       "html#breadcrumb",
       "condition-layout.product#availability",
       "tab-layout#desc",
-      "flex-layout.row#specifications-title",
+      // "flex-layout.row#specifications-title",
-      "product-specification-group#table",
+      // "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",

store/interfaces.json

@@ -12,5 +12,8 @@
 
   "Parcelamento": {
     "component": "Parcelamento"
+  },
+  "Placeholder": {
+    "component": "Placeholder"
   }
 }

styles/css/vtex.flex-layout.css

@@ -7,7 +7,15 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.stretchChildrenWidth {
+:global(.vtex-store-components-3-x-container) {
-  margin: 0;
+  padding: 0 40px;
-  padding: 0;
+}
+: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;
 }

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;

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;
+}

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;

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -13,7 +13,6 @@
     font-size: 16px;
     color: #929292;
   }
-
   .homeLink:hover::before {
     color: #0f3e99;
   }

styles/sass/pages/product/vtex.flex-layout.scss

@@ -1,4 +1,15 @@
-.stretchChildrenWidth {
+:global(.vtex-store-components-3-x-container) {
-  margin: 0;
+  padding: 0 40px;
-  padding: 0;
+
+  :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;
+      }
+    }
+  }
 }

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;

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;
+}

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;
-        }
       }
     }