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

feat: adiciona product description e seu css

Browse Source
This commit is contained in:
SamuelCondack 2023-01-26 15:23:31 -03:00
parent c224ff6910
commit b1e1f349dc
10 changed files with 278 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,127 +10,153 @@
"product-questions-and-answers"
]
},
"tab-layout#desc":{
"children": [
"tab-list#home",
"tab-content#desc"
],
"props": {
"blockClass": "desc",
"defaultActiveTabId": "desc1"
}
},
"tab-list#home": {
"children": [
"tab-list.item#desc1",
"tab-list.item#desc2",
"tab-list.item#desc3",
"tab-list.item#desc4",
"tab-list.item#desc5"
]
},
"tab-list.item#desc1": {
"props": {
"tabId": "desc1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#desc2": {
"props": {
"tabId": "desc2",
"label": "Descrição"
}
},
"tab-list.item#desc3": {
"props": {
"tabId": "desc3",
"label": "Descrição"
}
},
"tab-list.item#desc4": {
"props": {
"tabId": "desc4",
"label": "Descrição"
}
},
"tab-list.item#desc5": {
"props": {
"tabId": "desc5",
"label": "Descrição"
}
},
"tab-content#desc": {
"children": [
"tab-content.item#desc1",
"tab-content.item#desc2",
"tab-content.item#desc3",
"tab-content.item#desc4",
"tab-content.item#desc5"
]
},
"tab-content.item#desc1": {
"children": [
"flex-layout.row#description"
],
"props": {
"tabId": "desc1"
}
},
"tab-content.item#desc2": {
"children": [
],
"props": {
"tabId": "desc2"
}
},
"tab-content.item#desc3": {
"children": [
],
"props": {
"tabId": "desc2"
}
},
"tab-content.item#desc4": {
"children": [
],
"props": {
"tabId": "desc2"
}
},
"tab-content.item#desc5": {
"children": [
],
"props": {
"tabId": "desc2"
}
},
"tab-layout#desc": {
"children": [
"tab-list#home",
"tab-content#desc"
],
"props": {
"blockClass": "desc",
"defaultActiveTabId": "desc1"
}
},
"tab-list#home": {
"children": [
"tab-list.item#desc1",
"tab-list.item#desc2",
"tab-list.item#desc3",
"tab-list.item#desc4",
"tab-list.item#desc5"
]
},
"tab-list.item#desc1": {
"props": {
"tabId": "desc1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#desc2": {
"props": {
"tabId": "desc2",
"label": "Descrição"
}
},
"tab-list.item#desc3": {
"props": {
"tabId": "desc3",
"label": "Descrição"
}
},
"tab-list.item#desc4": {
"props": {
"tabId": "desc4",
"label": "Descrição"
}
},
"tab-list.item#desc5": {
"props": {
"tabId": "desc5",
"label": "Descrição"
}
},
"tab-content#desc": {
"children": [
"tab-content.item#desc1",
"tab-content.item#desc2",
"tab-content.item#desc3",
"tab-content.item#desc4",
"tab-content.item#desc5"
]
},
"tab-content.item#desc1": {
"children": [
"flex-layout.row#description-row"
],
"props": {
"tabId": "desc1"
}
},
"tab-content.item#desc2": {
"children": [],
"props": {
"tabId": "desc2"
}
},
"tab-content.item#desc3": {
"children": [],
"props": {
"tabId": "desc2"
}
},
"tab-content.item#desc4": {
"children": [],
"props": {
"tabId": "desc2"
}
},
"tab-content.item#desc5": {
"children": [],
"props": {
"tabId": "desc2"
}
},
"html#breadcrumb": {
"props": {
"tag": "section",
"testId": "breadcrumbs",
"blockClass": "pdp-breadcrumb"
},
"children": ["breadcrumb"]
"children": [
"breadcrumb"
]
},
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
"children": [
"rich-text#specifications"
]
},
"rich-text#specifications": {
"props": {
"text": "##### Product Specifications"
}
},
"flex-layout.row#description": {
"flex-layout.row#description-row": {
"props": {
"marginBottom": 7
"blockClass": "description-row"
},
"children": ["product-description"]
"children": [
"flex-layout.col#image-description",
"flex-layout.col#description"
]
},
"flex-layout.col#description": {
"props": {
"blockClass": "description"
},
"children": [
"product-description"
]
},
"product-description": {
"props": {
"blockClass": "product-description-m3"
}
},
"flex-layout.col#image-description": {
"props": {
"blockClass": "image-description"
},
"children": [
"image#img-descricao"
]
},
"image#img-descricao": {
"props": {
"blockClass":"img-descricao",
"src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true"
// "blockClass":"img-descricao"
}
},
"condition-layout.product#availability": {
"props": {
@ -152,9 +178,11 @@
"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"
@ -165,7 +193,6 @@
"product-specification-badges"
]
},
"product-specification-badges": {
"props": {
"specificationGroupName": "Group",
@ -174,16 +201,19 @@
"displayValue": "SPECIFICATION_NAME"
}
},
"flex-layout.col#stack": {
"children": ["stack-layout"],
"children": [
"stack-layout"
],
"props": {
"width": "60%",
"rowGap": 0
}
},
"flex-layout.row#product-image": {
"children": ["product-images"]
"children": [
"product-images"
]
},
"product-images": {
"props": {
@ -217,29 +247,30 @@
"share#default"
]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
"marginBottom": 3,
"blockClass": "product-name"
},
"children": ["vtex.store-components:product-name"]
"children": [
"vtex.store-components:product-name"
]
},
"sku-selector": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true
}
},
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
},
"children": ["add-to-cart-button"]
"children": [
"add-to-cart-button"
]
},
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
@ -269,9 +300,10 @@
"props": {
"blockClass": "message-availability"
},
"children": ["availability-subscriber"]
"children": [
"availability-subscriber"
]
},
"share#default": {
"props": {
"social": {

12
styles/css/vtex.button.css Normal file
View File

@ -0,0 +1,12 @@
/*
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 */
.bg-action-primary {
background-color: black;
}

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

@ -1,98 +1,17 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
/*
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 */
.flexRowContent :global(.vtex-button) {
background-color: black;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
.flexRowContent--description-row {
display: flex;
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
}
justify-content: center;
}

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

@ -28,4 +28,9 @@
.productDescriptionContainer {
width: 50% !important;
margin-left: 32px;
}
.pointerEventsNone {
display: none;
}

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

@ -0,0 +1,43 @@
/*
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 */
.listContainer {
margin-bottom: 32px;
display: flex;
gap: 197px;
}
.listItem :global(.vtex-button) {
background-color: white;
color: #BFBFBF;
border: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
border-radius: 0;
}
.listItemActive :global(.vtex-button) {
background-color: white;
color: black;
border: 0;
border-bottom: 2px black solid;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
.bg--primary-action {
background-color: red;
}

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

@ -5,4 +5,3 @@
.html--pdp-breadcrumb {
background-color: white;
}

3
styles/sass/pages/product/vtex.button.scss Normal file
View File

@ -0,0 +1,3 @@
.bg-action-primary{
background-color: black;
}

7
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,7 @@
.flexRowContent :global(.vtex-button){
background-color: black;
}
.flexRowContent--description-row{
display: flex;
justify-content: center;
}

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

@ -19,4 +19,11 @@
}
.productDescriptionContainer{
width: 50% !important;
margin-left: 32px;
}
.container--product-description-m3{
}
.pointerEventsNone{
display: none;
}

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

@ -0,0 +1,35 @@
.listContainer{
margin-bottom: 32px;
display: flex;
gap: 197px;
}
.listItem :global(.vtex-button){
background-color: white;
color: #BFBFBF;
border: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
border-radius: 0;
}
.listItemActive :global(.vtex-button){
background-color: white;
color: black;
border: 0;
border-bottom: 2px black solid;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
// .listContainer :global(.b--action-primary){
// background-color: black;
// }
.bg--primary-action{
background-color: red;
}