AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: parte funcional do description

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-24 20:50:16 -03:00
parent 682ead8147
commit b21329b923
5 changed files with 111 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/components/Html/index.tsx
View File

@ -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 = {

3
react/components/Html/styles.css Normal file
View File

@ -0,0 +1,3 @@
[class*="html--pdp-breadcrumb"] {
background-color: #fff;
}

138
store/blocks/pdp/product.jsonc
View File

@ -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"]
}
}

16
styles/css/agenciamagma.store-theme.css
View File

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

8
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -1,8 +0,0 @@
.html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: $color-white;
}