feat: adiciona layout de descrição e imagem

store/blocks/pdp/product.jsonc

@@ -3,9 +3,10 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
-      "flex-layout.row#specifications-title",
-      "product-specification-group#table",
+      "tab-layout#product",
+      // "flex-layout.row#description",
+      // "flex-layout.row#specifications-title",
+      // "product-specification-group#table",
       "shelf.relatedProducts",
       "product-questions-and-answers",
       "newsletter"
@@ -27,12 +28,7 @@
       "text": "##### Product Specifications"
     }
   },
-  "flex-layout.row#description": {
-    "props": {
-      "marginBottom": 7
-    },
-    "children": ["product-description"]
-  },
+
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -136,16 +132,151 @@
     ]
   },
 
-  "flex-layout.row#quantity-buy-button": {
+  // DESCRIÇÃO DE PRODUTOS
+  "tab-layout#product": {
     "props": {
-      "blockClass": "quantity-buy-button"
+      "blockClass": "structure",
+      "defaultActiveTabId": "product1"
+    },
+    "children": ["tab-list#product", "tab-content#product"]
+  },
+
+  "tab-list#product": {
+    "props": {
+      "blockClass": "tab"
     },
     "children": [
-      "product-quantity",
-      "flex-layout.row#buy-button"
+      "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": "tab-render",
+      "tabId": "product1",
+      "label": "Drescrição",
+      "defaultActiveTab": true
+    }
+  },
+
+  "tab-list.item#product2": {
+    "props": {
+      "blockClass": "tab-render",
+      "tabId": "product2",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#product3": {
+    "props": {
+      "blockClass": "tab-render",
+      "tabId": "product3",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#product4": {
+    "props": {
+      "blockClass": "tab-render",
+      "tabId": "product4",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#product5": {
+    "props": {
+      "blockClass": "tab-render",
+      "tabId": "product5",
+      "label": "Descrição"
+    }
+  },
+
+  "tab-content#product": {
+    "props": {
+      "blockClass": "content"
+    },
+    "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": {
+    "props": {
+      "tabId": "product1",
+      "blockClass": "content-render"
+    },
+    "children": ["flex-layout.row#description"]
+  },
+
+  "tab-content.item#product2": {
+    "props": {
+      "tabId": "product2",
+      "blockClass": "content-render"
+    },
+    "children": ["flex-layout.row#description"]
+  },
+
+  "tab-content.item#product3": {
+    "props": {
+      "tabId": "product3",
+      "blockClass": "content-render"
+    },
+    "children": ["flex-layout.row#description"]
+  },
+
+  "tab-content.item#product4": {
+    "props": {
+      "tabId": "product4",
+      "blockClass": "content-render"
+    },
+    "children": ["flex-layout.row#description"]
+  },
+
+  "tab-content.item#product5": {
+    "props": {
+      "tabId": "product5",
+      "blockClass": "content-render"
+    },
+    "children": ["flex-layout.row#description"]
+  },
+
+  "flex-layout.col#imageDescriptionContainer": {
+    "props": {
+      "blockClass": "image-description",
+      "width": "50%"
+    },
+    "children": ["product-images#imageDescription"]
+  },
+
+  "product-images#imageDescription": {
+    "props": {
+      "displayMode": "first-image",
+      "blockClass": "img-description"
+    }
+  },
+
+  "flex-layout.row#description": {
+    "props": {
+      "marginBottom": 7
+    },
+    "children": ["flex-layout.col#imageDescriptionContainer", "product-description"]
+  },
+
+  // "flex-layout.row#quantity-buy-button": {
+  //   "props": {
+  //     "blockClass": "quantity-buy-button"
+  //   },
+  //   "children": [
+  //     "product-quantity",
+  //     "flex-layout.row#buy-button"
+  //   ]
+  // },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3

styles/css/agenciamagma.store-theme.css

@@ -6,6 +6,8 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Cores */
 /* Grid breakpoints */
 .html {

styles/css/vtex.breadcrumb.css

@@ -6,6 +6,8 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Cores */
 /* Grid breakpoints */
 .container {

styles/css/vtex.flex-layout.css

@@ -6,6 +6,8 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Cores */
 /* Grid breakpoints */
 .flexRowContent--buy-button-row :global(.vtex-button) {

styles/css/vtex.product-identifier.css

@@ -6,6 +6,8 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Cores */
 /* Grid breakpoints */
 .product-identifier__label {

styles/css/vtex.rich-text.css

@@ -6,5 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+/* Fontes */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Cores */
 /* Grid breakpoints */