andreamatsunaga/challenge-vtex-io-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/product-description' into development

Browse Source
This commit is contained in:
Andrea Matsunaga 2023-02-06 22:01:11 -03:00
commit d3f9a8324a
5 changed files with 146 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,31 +95,31 @@
"props": {
"tabId": "description1"
},
"children": ["product-description"]
"children": ["product-images", "product-description"]
},
"tab-content.item#description2": {
"props": {
"tabId": "description2"
},
"children": ["product-description"]
"children": ["product-images", "product-description"]
},
"tab-content.item#description3": {
"props": {
"tabId": "description3"
},
"children": ["product-description"]
"children": ["product-images", "product-description"]
},
"tab-content.item#description4": {
"props": {
"tabId": "description4"
},
"children": ["product-description"]
"children": ["product-images", "product-description"]
},
"tab-content.item#description5": {
"props": {
"tabId": "description5"
},
"children": ["product-description"]
"children": ["product-images", "product-description"]
},
"flex-layout.row#specifications-title": {
@ -266,32 +266,7 @@
"flex-layout.col#right-col-availability"
]
},
// "flex-layout.col#right-col": {
// "props": {
// "width": "50%",
// "preventVerticalStretch": true,
// "blockClass": "right-col"
// },
// "children": [
// "flex-layout.row#product-name",
// "product-identifier.product",
// // "product-rating-summary",
// "flex-layout.row#selling-price",
// "product-installments",
// // "flex-layout.row#list-price-savings",
// "html#pix-price",
// "html#sku-selector",
// "product-quantity",
// // "product-assembly-options",
// "product-gifts",
// "flex-layout.row#buy-button",
// "availability-subscriber",
// "shipping-simulator",
// "share#default"
// ]
// },
"flex-layout.col#right-col-availability": {
"props": {
"width": "50%",

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

@ -235,4 +235,49 @@
font-size: 18px;
line-height: 25px;
padding: 12px 0;
}
/* ----- PRODUCT-DESCRIPTION ----- */
.productDescriptionContainer .productDescriptionTitle {
margin-bottom: 8px;
font-size: 24px;
line-height: 32px;
color: #575757;
}
@media only screen and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionTitle {
margin-bottom: 16px;
font-size: 32px;
}
}
@media only screen and (max-width: 1024px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 20px;
}
}
.productDescriptionContainer .productDescriptionText {
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media only screen and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionText {
font-size: 18px;
line-height: 25px;
}
}
@media only screen and (max-width: 1024px) {
.productDescriptionContainer .productDescriptionText {
font-size: 14px;
line-height: 19px;
}
}
.productDescriptionContainer .showMoreButton {
width: 100%;
margin: 0;
padding: 12px 0;
font-weight: 600;
font-size: 18px;
color: #ffffff;
background: black;
}

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

@ -29,7 +29,7 @@
@media only screen and (max-width: 1024px) {
.container--description .listContainer {
padding: 16px 0;
margin-bottom: 16px;
margin-bottom: 0;
border-top: 1px solid #b9b9b9;
flex-direction: column;
gap: 16px;
@ -76,4 +76,22 @@
.container--description .listContainer .listItem.listItemActive {
border: 0;
}
}
.container--description .contentContainer .contentItem {
padding: 0 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.container--description .contentContainer .contentItem :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
display: none;
}
@media only screen and (max-width: 1024px) {
.container--description .contentContainer .contentItem {
padding: 16px 0;
border-bottom: 1px solid #bfbfbf;
display: flex;
flex-direction: column;
gap: 16px;
}
}

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

@ -318,3 +318,56 @@
}
}
}
/* ----- PRODUCT-DESCRIPTION ----- */
.productDescriptionContainer {
.productDescriptionTitle {
margin-bottom: 8px;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
@include mq(xl, min) {
margin-bottom: 16px;
font-size: 32px;
}
@include mq(lg, max) {
font-size: 20px;
}
}
.productDescriptionText {
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
@include mq(xl, min) {
font-size: 18px;
line-height: 25px;
}
@include mq(lg, max) {
font-size: 14px;
line-height: 19px;
}
}
.showMoreButton {
width: 100%;
margin: 0;
padding: 12px 0;
// font-family: "Open Sans";
// font-style: normal;
font-weight: 600;
font-size: 18px;
color: #ffffff;
background: black;
}
}

24
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -17,7 +17,7 @@
@include mq(lg, max) {
padding: 16px 0;
margin-bottom: 16px;
margin-bottom: 0;
border-top: 1px solid #b9b9b9;
flex-direction: column;
gap: 16px;
@ -71,4 +71,26 @@
}
}
}
.contentContainer {
.contentItem {
padding: 0 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
:global(.vtex-store-components-3-x-carouselGaleryThumbs) {
display: none;
}
@include mq(lg, max) {
// background-color: yellow;
padding: 16px 0;
border-bottom: 1px solid #bfbfbf;
display: flex;
flex-direction: column;
gap: 16px;
}
}
}
}