feat: parte description estilizada

store/blocks/pdp/product.jsonc

@@ -77,7 +77,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "58%",
+      "width": "50%",
       "rowGap": 0
     }
   },
@@ -202,15 +202,25 @@
   "tab-layout#product": {
     "children": ["tab-list#product", "tab-content#product"],
     "props": {
-      "blockClass": "product",
+      "blockClass": "estrutura",
       "defaultActiveTabId": "product1"
     }
   },
   "tab-list#product": {
-    "children": ["tab-list.item#product1", "tab-list.item#product2", "tab-list.item#product3", "tab-list.item#product4"]
+    "props": {
+      "blockClass": "Guias"
+    },
+    "children": [
+      "tab-list.item#product1",
+      "tab-list.item#product2",
+      "tab-list.item#product3",
+      "tab-list.item#product4",
+      "tab-list.item#product5"
+    ]
   },
   "tab-list.item#product1": {
     "props": {
+      "blockClass": "renderGuia",
       "tabId": "product1",
       "label": "Descrição 1",
       "defaultActiveTab": true
@@ -218,77 +228,104 @@
   },
   "tab-list.item#product2": {
     "props": {
+      "blockClass": "renderGuia",
       "tabId": "product2",
       "label": "Descrição 2"
     }
   },
   "tab-list.item#product3": {
     "props": {
+      "blockClass": "renderGuia",
       "tabId": "product3",
       "label": "Descrição 3"
     }
   },
   "tab-list.item#product4": {
     "props": {
+      "blockClass": "renderGuia",
       "tabId": "product4",
       "label": "Descrição 4"
     }
   },
+  "tab-list.item#product5": {
+    "props": {
+      "blockClass": "renderGuia",
+      "tabId": "product5",
+      "label": "Descrição 5"
+    }
+  },
   "tab-content#product": {
-    "children": ["tab-content.item#product1", "tab-content.item#product2", "tab-content.item#product3","tab-content.item#product4"]
+    "props": {
+      "blockClass": "listRender"
+    },
+    "children": [
+      "tab-content.item#product1",
+      "tab-content.item#product2",
+      "tab-content.item#product3",
+      "tab-content.item#product4",
+      "tab-content.item#product5"
+    ]
   },
   "tab-content.item#product1": {
     "children": ["flex-layout.row#description"],
     "props": {
-      "tabId": "product1"
+      "tabId": "product1",
+      "blockClass": "renderConteudo"
     }
   },
   "tab-content.item#product2": {
     "children": ["flex-layout.row#description"],
     "props": {
-      "tabId": "product2"
+      "tabId": "product2",
+      "blockClass": "renderConteudo"
     }
   },
   "tab-content.item#product3": {
     "children": ["flex-layout.row#description"],
     "props": {
-      "tabId": "product3"
+      "tabId": "product3",
+      "blockClass": "renderConteudo"
     }
   },
   "tab-content.item#product4": {
     "children": ["flex-layout.row#description"],
     "props": {
-      "tabId": "product4"
+      "tabId": "product4",
+      "blockClass": "renderConteudo"
+    }
+  },
+  "tab-content.item#product5": {
+    "children": ["flex-layout.row#description"],
+    "props": {
+      "tabId": "product5",
+      "blockClass": "renderConteudo"
     }
   },
 
-  "flex-layout.col#divImgDescription":{
+  "flex-layout.col#divImgDescription": {
-    "props":{
+    "props": {
-      "blockClass":"divImgDescription",
+      "blockClass": "divImgDescription",
-      "width":"50%"
+      "width": "50%"
     },
-    "children":["image#imgDescription"]
+    "children": ["image#imgDescription"]
-
   },
-
   "image#imgDescription": {
     "props": {
       "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-600-auto?v=637781133812700000&width=600&height=auto&aspect=true 600w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true 800w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-1200-auto?v=637781133812700000&width=1200&height=auto&aspect=true 1200w",
-      "blockClass":"imgDescription" 
+      "blockClass": "imgDescription"
     }
   },
   "flex-layout.row#description": {
     "props": {
       "marginBottom": 7
     },
-    "children": ["flex-layout.col#divImgDescription" , "product-description"]
+    "children": ["flex-layout.col#divImgDescription", "product-description"]
   },
-
   "newsletter": {
     "props": {
       "blockClass": "newsletter",
       "label": "Assine nossa newsletter",
-      "placeholder" : "Digite Seu e-mail"
+      "placeholder": "Digite Seu e-mail"
     }
   }
 }

styles/css/vtex.flex-layout.css

@@ -11,8 +11,8 @@
   margin-top: 16px;
   margin-left: 40px;
   margin-bottom: 16px;
+  padding: 0px;
   padding-right: 40px !important;
-  padding: 0;
 }
 .flexRowContent--divProduct .stretchChildrenWidth {
   width: 100% !important;
@@ -36,3 +36,7 @@
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
 }
+
+.flexCol--divImgDescription {
+  margin-right: 32px;
+}

styles/css/vtex.store-components.css

@@ -8,7 +8,7 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .newsletter {
-  background: red;
+  background: black;
 }
 
 .container {
@@ -29,6 +29,7 @@
 }
 .container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
   max-height: 100% !important;
+  max-width: 664px;
   margin-bottom: 16px;
 }
 .container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
@@ -54,8 +55,7 @@
 .buttonContainer--newsletter {
   padding-left: 0 !important;
 }
-
+.buttonContainer--newsletter :global(.vtex-button) {
-:global(.vtex-button) {
   border-radius: 0;
   background-color: black;
   border: 0;
@@ -67,3 +67,17 @@
   text-align: center;
   border-bottom: 3px solid #bfbfbf;
 }
+
+.imageElement--imgDescription {
+  width: 100%;
+  max-width: 664px;
+}
+
+.productDescriptionContainer .productDescriptionTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}

styles/css/vtex.tab-layout.css

@@ -0,0 +1,51 @@
+/*
+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 */
+.container--estrutura {
+  margin-left: 40px;
+  padding-right: 40px !important;
+}
+.container--estrutura .listContainer--Guias {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid #B9B9B9;
+  padding: 0px 64px;
+  margin-bottom: 36px;
+}
+.container--estrutura .listContainer--Guias .listItem--renderGuia {
+  margin: 0;
+  padding: 0;
+}
+.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  color: #BFBFBF;
+}
+.container--estrutura .listContainer--Guias .listItemActive--renderGuia {
+  border-bottom: 3px solid #000000;
+  background-color: white;
+}
+.container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  color: black;
+  background-color: white !important;
+  border: 0;
+}
+.container--estrutura .contentContainer--listRender {
+  margin-left: 32px;
+  padding-right: 72px;
+}

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

@@ -2,8 +2,8 @@
   margin-top: 16px;
   margin-left: 40px;
   margin-bottom: 16px;
+  padding: 0px;
   padding-right: 40px !important;
-  padding: 0;
   .stretchChildrenWidth {
     width: 100% !important;
   }
@@ -28,3 +28,7 @@
     color: rgba(146, 146, 146, 0.48);
   }
 }
+.flexCol--divImgDescription{
+  margin-right: 32px;
+}
+

styles/sass/pages/product/vtex.store-components.scss

@@ -1,5 +1,5 @@
 .newsletter {
-  background: red;
+  background: $color-black;
 }
 .container {
   margin: 0;
@@ -15,6 +15,7 @@
         width: 100% !important;
         .productImageTag {
           max-height: 100% !important;
+          max-width: 664px;
           margin-bottom: 16px;
         }
       }
@@ -43,9 +44,8 @@
 }
 .buttonContainer--newsletter {
   padding-left: 0 !important;
-}
+  :global(.vtex-button) {
-:global(.vtex-button) {
+    border-radius: 0;
-  border-radius:0;
     background-color: black;
     border: 0;
     font-family: "Open Sans";
@@ -55,4 +55,21 @@
     line-height: 19px;
     text-align: center;
     border-bottom: 3px solid #bfbfbf;
+  }
+}
+
+.imageElement--imgDescription {
+  width: 100%;
+  max-width: 664px;
+}
+.productDescriptionContainer {
+
+  .productDescriptionTitle {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    color: #575757;
+  }
 }

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

@@ -0,0 +1,43 @@
+.container--estrutura{
+    margin-left: 40px ;
+    padding-right: 40px !important;
+    .listContainer--Guias {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        border-bottom: 1px solid #B9B9B9;
+        padding: 0px 64px;
+        margin-bottom: 36px;
+        .listItem--renderGuia{
+            margin: 0;
+            padding: 0;
+            :global(.vtex-button) {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 38px;
+                color: #BFBFBF;
+            }
+        }
+        .listItemActive--renderGuia{
+            border-bottom: 3px solid #000000;
+            background-color: white;
+            :global(.vtex-button) {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 38px;
+                color: black;
+                background-color: white !important;
+                border: 0;
+            }
+        }
+    }
+    .contentContainer--listRender{
+        margin-left: 32px;
+        padding-right: 72px;
+
+      }
+}