diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index d60d7f5..5f9d79c 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -1,6 +1,8 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
+import "./styles.css";
+
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
new file mode 100644
index 0000000..204b205
--- /dev/null
+++ b/react/components/Html/styles.css
@@ -0,0 +1,3 @@
+ [class*="html--pdp-breadcrumb"] {
+ background-color: #fff;
+ }
\ No newline at end of file
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index b8e75c8..ee64e0c 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -3,9 +3,13 @@
"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"
]
@@ -26,12 +30,6 @@
"text": "##### Product Specifications"
}
},
- "flex-layout.row#description": {
- "props": {
- "marginBottom": 7
- },
- "children": ["product-description"]
- },
"condition-layout.product#availability": {
"props": {
"conditions": [
@@ -53,14 +51,9 @@
"paddingTop": 7,
"paddingBottom": 7
},
- "children": [
- "flex-layout.col#stack",
- "flex-layout.col#right-col"
- ]
+ "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
-
-
-
+
"stack-layout": {
"props": {
"blockClass": "product"
@@ -80,7 +73,7 @@
"displayValue": "SPECIFICATION_NAME"
}
},
-
+
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
@@ -88,19 +81,15 @@
"rowGap": 0
}
},
-
-
"flex-layout.row#product-image": {
- "props":{
-
- },
+ "props": {},
"children": ["product-images"]
},
-
+
"product-images": {
"props": {
- "blockClass":"divImagens",
+ "blockClass": "divImagens",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
@@ -114,7 +103,7 @@
"flex-layout.col#right-col": {
"props": {
- "blockClass":"divInfoProduct",
+ "blockClass": "divInfoProduct",
"preventVerticalStretch": true,
"rowGap": 0
},
@@ -122,8 +111,8 @@
"flex-layout.row#product-name",
"flex-layout.row#product-modelo",
"product-rating-summary",
- "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
+ "flex-layout.row#list-price-savings",
"product-installments",
// "product-separator",
"sku-selector",
@@ -136,17 +125,17 @@
"share#default"
]
},
-
+
"flex-layout.row#product-modelo": {
"props": {
- "blockClass":"divNomeProductModelo"
+ "blockClass": "divNomeProductModelo"
},
"children": ["product-identifier.product"]
},
"flex-layout.row#product-name": {
"props": {
- "blockClass":"divNomeProduct",
+ "blockClass": "divNomeProduct",
"marginBottom": 3
},
"children": ["vtex.store-components:product-name"]
@@ -158,7 +147,7 @@
"showValueNameForImageVariation": true
}
},
-
+
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
@@ -166,7 +155,7 @@
},
"children": ["add-to-cart-button"]
},
-
+
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
@@ -198,7 +187,7 @@
},
"children": ["availability-subscriber"]
},
-
+
"share#default": {
"props": {
"social": {
@@ -208,5 +197,90 @@
"Pinterest": true
}
}
+ },
+
+ "tab-layout#product": {
+ "children": ["tab-list#product", "tab-content#product"],
+ "props": {
+ "blockClass": "product",
+ "defaultActiveTabId": "product1"
+ }
+ },
+ "tab-list#product": {
+ "children": ["tab-list.item#product1", "tab-list.item#product2", "tab-list.item#product3", "tab-list.item#product4"]
+ },
+ "tab-list.item#product1": {
+ "props": {
+ "tabId": "product1",
+ "label": "Descrição 1",
+ "defaultActiveTab": true
+ }
+ },
+ "tab-list.item#product2": {
+ "props": {
+ "tabId": "product2",
+ "label": "Descrição 2"
+ }
+ },
+ "tab-list.item#product3": {
+ "props": {
+ "tabId": "product3",
+ "label": "Descrição 3"
+ }
+ },
+ "tab-list.item#product4": {
+ "props": {
+ "tabId": "product4",
+ "label": "Descrição 4"
+ }
+ },
+ "tab-content#product": {
+ "children": ["tab-content.item#product1", "tab-content.item#product2", "tab-content.item#product3","tab-content.item#product4"]
+ },
+ "tab-content.item#product1": {
+ "children": ["flex-layout.row#description"],
+ "props": {
+ "tabId": "product1"
+ }
+ },
+ "tab-content.item#product2": {
+ "children": ["flex-layout.row#description"],
+ "props": {
+ "tabId": "product2"
+ }
+ },
+ "tab-content.item#product3": {
+ "children": ["flex-layout.row#description"],
+ "props": {
+ "tabId": "product3"
+ }
+ },
+ "tab-content.item#product4": {
+ "children": ["flex-layout.row#description"],
+ "props": {
+ "tabId": "product4"
+ }
+ },
+
+ "flex-layout.col#divImgDescription":{
+ "props":{
+ "blockClass":"divImgDescription",
+ "width":"50%"
+ },
+ "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"
+ }
+ },
+ "flex-layout.row#description": {
+ "props": {
+ "marginBottom": 7
+ },
+ "children": ["flex-layout.col#divImgDescription" , "product-description"]
}
}
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
deleted file mode 100644
index 00098e6..0000000
--- a/styles/css/agenciamagma.store-theme.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
-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 */
-.html {
- background-color: red;
-}
-
-.html--pdp-breadcrumb {
- background-color: #fff;
-}
\ No newline at end of file
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
deleted file mode 100644
index a3f7a45..0000000
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.html {
- background-color: red;
-}
-
-.html--pdp-breadcrumb {
- background-color: $color-white;
-}
-