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 description estilizada

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-25 01:01:38 -03:00
parent 8d95f95ba1
commit a4c4be5e68
7 changed files with 216 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,7 @@
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
"stack-layout": {
"props": {
"blockClass": "product"
@ -73,20 +73,20 @@
"displayValue": "SPECIFICATION_NAME"
}
},
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "58%",
"width": "50%",
"rowGap": 0
}
},
"flex-layout.row#product-image": {
"props": {},
"children": ["product-images"]
},
"product-images": {
"props": {
"blockClass": "divImagens",
@ -100,7 +100,7 @@
"showPaginationDots": false
}
},
"flex-layout.col#right-col": {
"props": {
"blockClass": "divInfoProduct",
@ -125,7 +125,7 @@
"share#default"
]
},
"flex-layout.row#product-modelo": {
"props": {
"blockClass": "divNomeProductModelo"
@ -147,7 +147,7 @@
"showValueNameForImageVariation": true
}
},
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
@ -155,7 +155,7 @@
},
"children": ["add-to-cart-button"]
},
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
@ -187,7 +187,7 @@
},
"children": ["availability-subscriber"]
},
"share#default": {
"props": {
"social": {
@ -198,19 +198,29 @@
}
}
},
"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":{
"props":{
"blockClass":"divImgDescription",
"width":"50%"
"flex-layout.col#divImgDescription": {
"props": {
"blockClass": "divImgDescription",
"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"
}
}
}

6
styles/css/vtex.flex-layout.css
View File

@ -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;
@ -35,4 +35,8 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
.flexCol--divImgDescription {
margin-right: 32px;
}

20
styles/css/vtex.store-components.css
View File

@ -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;
}
:global(.vtex-button) {
.buttonContainer--newsletter :global(.vtex-button) {
border-radius: 0;
background-color: black;
border: 0;
@ -66,4 +66,18 @@
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;
}

51
styles/css/vtex.tab-layout.css Normal file
View File

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

6
styles/sass/pages/product/vtex.flex-layout.scss
View File

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

41
styles/sass/pages/product/vtex.store-components.scss
View File

@ -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,16 +44,32 @@
}
.buttonContainer--newsletter {
padding-left: 0 !important;
:global(.vtex-button) {
border-radius: 0;
background-color: black;
border: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
border-bottom: 3px solid #bfbfbf;
}
}
:global(.vtex-button) {
border-radius:0;
background-color: black;
border: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
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;
}
}

43
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

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