SavioCarvalhoMoraes/challenge-vtex-io-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/productDescription #10

Merged
SavioCarvalhoMoraes merged 2 commits from feature/productDescription into development 2023-02-09 13:54:47 +00:00
Conversation 0 Commits 2 Files Changed 5 +203 -5
5 changed files with 203 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -126,7 +126,6 @@
"flex-layout.row#cart",
"product-assembly-options",
"product-gifts",
"availability-subscriber",
"shipping-simulator"
]
@ -200,7 +199,13 @@
}
},
"tab-list#product": {
"children": ["tab-list.item#product1", "tab-list.item#product2"]
"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": {
@ -215,8 +220,32 @@
"label": "Descrição"
}
},
"tab-list.item#product3": {
"props": {
"tabId": "product3",
"label": "Descrição"
}
},
"tab-list.item#product4": {
"props": {
"tabId": "product4",
"label": "Descrição"
}
},
"tab-list.item#product5": {
"props": {
"tabId": "product5",
"label": "Descrição"
}
},
"tab-content#product": {
"children": ["tab-content.item#product1", "tab-content.item#product2"]
"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": ["product-images#descricao", "product-description"],
@ -225,11 +254,29 @@
}
},
"tab-content.item#product2": {
"children": ["product-description"],
"children": ["product-images#descricao", "product-description"],
"props": {
"tabId": "product2"
}
},
"tab-content.item#product3": {
"children": ["product-images#descricao", "product-description"],
"props": {
"tabId": "product3"
}
},
"tab-content.item#product4": {
"children": ["product-images#descricao", "product-description"],
"props": {
"tabId": "product4"
}
},
"tab-content.item#product5": {
"children": ["product-images#descricao", "product-description"],
"props": {
"tabId": "product5"
}
},
"list-context.product-list#shelf": {
"blocks": ["product-summary.shelf#shelf"],
"children": ["slider-layout#shelf-products"]

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

@ -158,3 +158,20 @@
left: 70px;
top: 8px;
}
.productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}

60
styles/css/vtex.tab-layout.css
View File

@ -1,4 +1,64 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.container {
margin-bottom: 16px;
}
.listContainer {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
}
.listContainer .listItem {
padding: 0;
margin: 0;
}
.listContainer .listItem :global(.vtex-button) {
background: white;
border: none;
border-radius: 0;
}
.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #bfbfbf;
text-transform: initial;
}
.listContainer .listItemActive :global(.vtex-button) {
background: white;
border-bottom: 2px solid #000000;
border-radius: 0;
}
.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #000000;
text-transform: initial;
}
.contentItem {
display: flex;
flex-direction: row;
gap: 32px;
}

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

@ -159,3 +159,23 @@
top: 8px;
}
}
//Estilização da descrição do produto
.productDescriptionContainer {
.productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
}

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

@ -0,0 +1,54 @@
.container {
margin-bottom: 16px;
}
.listContainer {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
.listItem {
padding: 0;
margin: 0;
:global(.vtex-button) {
background: white;
border: none;
border-radius: 0;
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #bfbfbf;
text-transform: initial;
}
}
}
.listItemActive {
:global(.vtex-button) {
background: white;
border-bottom: 2px solid #000000;
border-radius: 0;
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #000000;
text-transform: initial;
}
}
}
}
.contentItem {
display: flex;
flex-direction: row;
gap: 32px;
}