PatrickReisSantos/challenge-vtex-io-Patrick-Reis-Santos
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona product description

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-02-06 22:14:20 -03:00
parent 412b87720c
commit 2cd03541da
7 changed files with 188 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
store/blocks/pdp/product-description.jsonc
View File

@ -18,35 +18,35 @@
"tab-list.item#description1": {
"props": {
"tabId": "description1",
"label": "description 1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#description2": {
"props": {
"tabId": "description2",
"label": "description 2"
"label": "Descrição"
}
},
"tab-list.item#description3": {
"props": {
"tabId": "description3",
"label": "description 3"
"label": "Descrição"
}
},
"tab-list.item#description4": {
"props": {
"tabId": "description4",
"label": "description 4"
"label": "Descrição"
}
},
"tab-list.item#description5": {
"props": {
"tabId": "description5",
"label": "description 5"
"label": "Descrição"
}
},
@ -60,26 +60,26 @@
]
},
"tab-content.item#description1": {
"children": ["product-description", "product-images#imagecontainer"],
"children": ["product-images#imagecontainer", "product-description"],
"props": {
"tabId": "description1"
}
},
"tab-content.item#description2": {
"children": ["product-description", "product-images#imagecontainer"],
"children": ["product-images#imagecontainer", "product-description"],
"props": {
"tabId": "description2"
}
},
"tab-content.item#description3": {
"children": ["product-description", "product-images#imagecontainer"],
"children": ["product-images#imagecontainer", "product-description"],
"props": {
"tabId": "description3"
}
},
"tab-content.item#description4": {
"children": ["product-description", "product-images#imagecontainer"],
"children": ["product-images#imagecontainer", "product-description"],
"props": {
"tabId": "description4"
}

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

@ -5,11 +5,28 @@
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
/* "product-specification-group#table", */
/* "shelf.relatedProducts", */
"list-context.product-list#relatedProduct",
"product-questions-and-answers"
]
},
"product-summary.shelf#demo1": {
"children": [
"stack-layout#prodsum",
"product-summary-name",
"product-rating-inline",
"product-summary-space",
"product-summary-price",
"product-summary-buy-button"
]
},
"list-context.product-list#relatedProduct": {
"blocks": ["product-summary.shelf#demo1"],
"children": ["slider-layout#demo-products"]
},
"html#breadcrumb": {
"props": {
"tag": "section",

0
store/blocks/pdp/related-products.json Normal file
View File

5
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
/* Grid breakpoints */
.heading {
display: none;
}

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

@ -0,0 +1,80 @@
/*
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 */
.contentContainer {
padding: 32px 72px 16px 72px;
}
.contentContainer .contentItem {
display: flex;
}
.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
margin-left: 32px;
}
.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px !important;
color: #575757 !important;
}
.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) {
width: 632px;
height: 632px;
}
.listContainer {
border-bottom: 1px solid #bfbfbf;
width: 1360px;
margin: auto;
display: flex;
gap: 120px;
}
.listContainer :global(.vtex-button) {
background-color: white;
color: black;
border: none;
}
.listItem {
position: relative;
bottom: -5px;
color: #bfbfbf;
}
.listItem :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
color: #bfbfbf;
}
.listItemActive {
border-bottom: #000000 2px solid;
position: relative;
bottom: -5px;
}
.listItemActive :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
color: #000000;
}

3
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -0,0 +1,3 @@
.heading {
display: none;
}

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

@ -0,0 +1,73 @@
.contentContainer {
padding: 32px 72px 16px 72px;
.contentItem {
display: flex;
:global(.vtex-store-components-3-x-productDescriptionContainer) {
margin-left: 32px;
:global(.vtex-store-components-3-x-productDescriptionTitle) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px !important;
color: #575757 !important;
}
:global(.vtex-store-components-3-x-productDescriptionText) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
}
:global(.vtex-store-components-3-x-productImage) {
width: 632px;
height: 632px;
}
}
}
.listContainer {
border-bottom: 1px solid #bfbfbf;
width: 1360px;
margin: auto;
display: flex;
gap: 120px;
:global(.vtex-button) {
background-color: white;
color: black;
border: none;
}
}
.listItem {
position: relative;
bottom: -5px;
color: #bfbfbf;
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
color: #bfbfbf;
}
}
.listItemActive {
border-bottom: #000000 2px solid;
position: relative;
bottom: -5px;
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
color: #000000;
}
}