feat: adiciona product description

store/blocks/pdp/product-description.jsonc

@@ -18,35 +18,35 @@
   "tab-list.item#description1": {
     "props": {
       "tabId": "description1",
-      "label": "description 1",
+      "label": "Descrição",
       "defaultActiveTab": true
     }
   },
   "tab-list.item#description2": {
     "props": {
       "tabId": "description2",
-      "label": "description 2"
+      "label": "Descrição"
     }
   },
 
   "tab-list.item#description3": {
     "props": {
       "tabId": "description3",
-      "label": "description 3"
+      "label": "Descrição"
     }
   },
 
   "tab-list.item#description4": {
     "props": {
       "tabId": "description4",
-      "label": "description 4"
+      "label": "Descrição"
     }
   },
 
   "tab-list.item#description5": {
     "props": {
       "tabId": "description5",
-      "label": "description 5"
+      "label": "Descrição"
     }
   },
 
@@ -60,26 +60,26 @@
     ]
   },
   "tab-content.item#description1": {
-    "children": ["product-description", "product-images#imagecontainer"],
+    "children": ["product-images#imagecontainer", "product-description"],
     "props": {
       "tabId": "description1"
     }
   },
   "tab-content.item#description2": {
-    "children": ["product-description", "product-images#imagecontainer"],
+    "children": ["product-images#imagecontainer", "product-description"],
     "props": {
       "tabId": "description2"
     }
   },
   "tab-content.item#description3": {
-    "children": ["product-description", "product-images#imagecontainer"],
+    "children": ["product-images#imagecontainer", "product-description"],
     "props": {
       "tabId": "description3"
     }
   },
 
   "tab-content.item#description4": {
-    "children": ["product-description", "product-images#imagecontainer"],
+    "children": ["product-images#imagecontainer", "product-description"],
     "props": {
       "tabId": "description4"
     }

store/blocks/pdp/product.jsonc

@@ -5,11 +5,28 @@
       "condition-layout.product#availability",
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
-      "product-specification-group#table",
+      /*  "product-specification-group#table", */
-      "shelf.relatedProducts",
+      /* "shelf.relatedProducts", */
+      "list-context.product-list#relatedProduct",
       "product-questions-and-answers"
     ]
   },
+
+  "product-summary.shelf#demo1": {
+    "children": [
+      "stack-layout#prodsum",
+      "product-summary-name",
+      "product-rating-inline",
+      "product-summary-space",
+      "product-summary-price",
+      "product-summary-buy-button"
+    ]
+  },
+  "list-context.product-list#relatedProduct": {
+    "blocks": ["product-summary.shelf#demo1"],
+    "children": ["slider-layout#demo-products"]
+  },
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",

styles/css/vtex.rich-text.css

@@ -7,3 +7,6 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.heading {
+  display: none;
+}

styles/css/vtex.tab-layout.css

@@ -0,0 +1,80 @@
+/*
+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 */
+.contentContainer {
+  padding: 32px 72px 16px 72px;
+}
+.contentContainer .contentItem {
+  display: flex;
+}
+.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
+  margin-left: 32px;
+}
+.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px !important;
+  color: #575757 !important;
+}
+.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) {
+  width: 632px;
+  height: 632px;
+}
+
+.listContainer {
+  border-bottom: 1px solid #bfbfbf;
+  width: 1360px;
+  margin: auto;
+  display: flex;
+  gap: 120px;
+}
+.listContainer :global(.vtex-button) {
+  background-color: white;
+  color: black;
+  border: none;
+}
+
+.listItem {
+  position: relative;
+  bottom: -5px;
+  color: #bfbfbf;
+}
+.listItem :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  text-transform: capitalize;
+  color: #bfbfbf;
+}
+
+.listItemActive {
+  border-bottom: #000000 2px solid;
+  position: relative;
+  bottom: -5px;
+}
+.listItemActive :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  text-transform: capitalize;
+  color: #000000;
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -0,0 +1,3 @@
+.heading {
+  display: none;
+}

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

@@ -0,0 +1,73 @@
+.contentContainer {
+  padding: 32px 72px 16px 72px;
+  .contentItem {
+    display: flex;
+
+    :global(.vtex-store-components-3-x-productDescriptionContainer) {
+      margin-left: 32px;
+      :global(.vtex-store-components-3-x-productDescriptionTitle) {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px !important;
+        color: #575757 !important;
+      }
+      :global(.vtex-store-components-3-x-productDescriptionText) {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 22px;
+        color: #929292;
+      }
+    }
+    :global(.vtex-store-components-3-x-productImage) {
+      width: 632px;
+      height: 632px;
+    }
+  }
+}
+
+.listContainer {
+  border-bottom: 1px solid #bfbfbf;
+  width: 1360px;
+  margin: auto;
+  display: flex;
+  gap: 120px;
+  :global(.vtex-button) {
+    background-color: white;
+    color: black;
+    border: none;
+  }
+}
+
+.listItem {
+  position: relative;
+  bottom: -5px;
+  color: #bfbfbf;
+  :global(.vtex-button__label) {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 38px;
+    text-transform: capitalize;
+    color: #bfbfbf;
+  }
+}
+
+.listItemActive {
+  border-bottom: #000000 2px solid;
+  position: relative;
+  bottom: -5px;
+
+  :global(.vtex-button__label) {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 38px;
+    text-transform: capitalize;
+    color: #000000;
+  }
+}