feat: adiciona product description e seu css
This commit is contained in:
parent
c224ff6910
commit
b1e1f349dc
@ -10,127 +10,153 @@
|
|||||||
"product-questions-and-answers"
|
"product-questions-and-answers"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"tab-layout#desc":{
|
"tab-layout#desc": {
|
||||||
"children": [
|
"children": [
|
||||||
"tab-list#home",
|
"tab-list#home",
|
||||||
"tab-content#desc"
|
"tab-content#desc"
|
||||||
],
|
],
|
||||||
"props": {
|
"props": {
|
||||||
"blockClass": "desc",
|
"blockClass": "desc",
|
||||||
"defaultActiveTabId": "desc1"
|
"defaultActiveTabId": "desc1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-list#home": {
|
"tab-list#home": {
|
||||||
"children": [
|
"children": [
|
||||||
"tab-list.item#desc1",
|
"tab-list.item#desc1",
|
||||||
"tab-list.item#desc2",
|
"tab-list.item#desc2",
|
||||||
"tab-list.item#desc3",
|
"tab-list.item#desc3",
|
||||||
"tab-list.item#desc4",
|
"tab-list.item#desc4",
|
||||||
"tab-list.item#desc5"
|
"tab-list.item#desc5"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"tab-list.item#desc1": {
|
"tab-list.item#desc1": {
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "desc1",
|
"tabId": "desc1",
|
||||||
"label": "Descrição",
|
"label": "Descrição",
|
||||||
"defaultActiveTab": true
|
"defaultActiveTab": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-list.item#desc2": {
|
"tab-list.item#desc2": {
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "desc2",
|
"tabId": "desc2",
|
||||||
"label": "Descrição"
|
"label": "Descrição"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-list.item#desc3": {
|
"tab-list.item#desc3": {
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "desc3",
|
"tabId": "desc3",
|
||||||
"label": "Descrição"
|
"label": "Descrição"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-list.item#desc4": {
|
"tab-list.item#desc4": {
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "desc4",
|
"tabId": "desc4",
|
||||||
"label": "Descrição"
|
"label": "Descrição"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-list.item#desc5": {
|
"tab-list.item#desc5": {
|
||||||
"props": {
|
"props": {
|
||||||
"tabId": "desc5",
|
"tabId": "desc5",
|
||||||
"label": "Descrição"
|
"label": "Descrição"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tab-content#desc": {
|
"tab-content#desc": {
|
||||||
"children": [
|
"children": [
|
||||||
"tab-content.item#desc1",
|
"tab-content.item#desc1",
|
||||||
"tab-content.item#desc2",
|
"tab-content.item#desc2",
|
||||||
"tab-content.item#desc3",
|
"tab-content.item#desc3",
|
||||||
"tab-content.item#desc4",
|
"tab-content.item#desc4",
|
||||||
"tab-content.item#desc5"
|
"tab-content.item#desc5"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"tab-content.item#desc1": {
|
"tab-content.item#desc1": {
|
||||||
"children": [
|
"children": [
|
||||||
|
"flex-layout.row#description-row"
|
||||||
"flex-layout.row#description"
|
],
|
||||||
],
|
"props": {
|
||||||
"props": {
|
"tabId": "desc1"
|
||||||
"tabId": "desc1"
|
}
|
||||||
}
|
},
|
||||||
},
|
"tab-content.item#desc2": {
|
||||||
"tab-content.item#desc2": {
|
"children": [],
|
||||||
"children": [
|
"props": {
|
||||||
|
"tabId": "desc2"
|
||||||
],
|
}
|
||||||
"props": {
|
},
|
||||||
"tabId": "desc2"
|
"tab-content.item#desc3": {
|
||||||
}
|
"children": [],
|
||||||
},
|
"props": {
|
||||||
"tab-content.item#desc3": {
|
"tabId": "desc2"
|
||||||
"children": [
|
}
|
||||||
|
},
|
||||||
],
|
"tab-content.item#desc4": {
|
||||||
"props": {
|
"children": [],
|
||||||
"tabId": "desc2"
|
"props": {
|
||||||
}
|
"tabId": "desc2"
|
||||||
},
|
}
|
||||||
"tab-content.item#desc4": {
|
},
|
||||||
"children": [
|
"tab-content.item#desc5": {
|
||||||
|
"children": [],
|
||||||
],
|
"props": {
|
||||||
"props": {
|
"tabId": "desc2"
|
||||||
"tabId": "desc2"
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
"tab-content.item#desc5": {
|
|
||||||
"children": [
|
|
||||||
|
|
||||||
],
|
|
||||||
"props": {
|
|
||||||
"tabId": "desc2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"html#breadcrumb": {
|
"html#breadcrumb": {
|
||||||
"props": {
|
"props": {
|
||||||
"tag": "section",
|
"tag": "section",
|
||||||
"testId": "breadcrumbs",
|
"testId": "breadcrumbs",
|
||||||
"blockClass": "pdp-breadcrumb"
|
"blockClass": "pdp-breadcrumb"
|
||||||
},
|
},
|
||||||
"children": ["breadcrumb"]
|
"children": [
|
||||||
|
"breadcrumb"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"flex-layout.row#specifications-title": {
|
"flex-layout.row#specifications-title": {
|
||||||
"children": ["rich-text#specifications"]
|
"children": [
|
||||||
|
"rich-text#specifications"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"rich-text#specifications": {
|
"rich-text#specifications": {
|
||||||
"props": {
|
"props": {
|
||||||
"text": "##### Product Specifications"
|
"text": "##### Product Specifications"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"flex-layout.row#description": {
|
"flex-layout.row#description-row": {
|
||||||
"props": {
|
"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": {
|
"condition-layout.product#availability": {
|
||||||
"props": {
|
"props": {
|
||||||
@ -152,9 +178,11 @@
|
|||||||
"paddingTop": 7,
|
"paddingTop": 7,
|
||||||
"paddingBottom": 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": {
|
"stack-layout": {
|
||||||
"props": {
|
"props": {
|
||||||
"blockClass": "product"
|
"blockClass": "product"
|
||||||
@ -165,7 +193,6 @@
|
|||||||
"product-specification-badges"
|
"product-specification-badges"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
"product-specification-badges": {
|
"product-specification-badges": {
|
||||||
"props": {
|
"props": {
|
||||||
"specificationGroupName": "Group",
|
"specificationGroupName": "Group",
|
||||||
@ -174,16 +201,19 @@
|
|||||||
"displayValue": "SPECIFICATION_NAME"
|
"displayValue": "SPECIFICATION_NAME"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.col#stack": {
|
"flex-layout.col#stack": {
|
||||||
"children": ["stack-layout"],
|
"children": [
|
||||||
|
"stack-layout"
|
||||||
|
],
|
||||||
"props": {
|
"props": {
|
||||||
"width": "60%",
|
"width": "60%",
|
||||||
"rowGap": 0
|
"rowGap": 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"flex-layout.row#product-image": {
|
"flex-layout.row#product-image": {
|
||||||
"children": ["product-images"]
|
"children": [
|
||||||
|
"product-images"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"product-images": {
|
"product-images": {
|
||||||
"props": {
|
"props": {
|
||||||
@ -217,29 +247,30 @@
|
|||||||
"share#default"
|
"share#default"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#product-name": {
|
"flex-layout.row#product-name": {
|
||||||
"props": {
|
"props": {
|
||||||
"marginBottom": 3
|
"marginBottom": 3,
|
||||||
|
"blockClass": "product-name"
|
||||||
},
|
},
|
||||||
"children": ["vtex.store-components:product-name"]
|
"children": [
|
||||||
|
"vtex.store-components:product-name"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
"sku-selector": {
|
"sku-selector": {
|
||||||
"props": {
|
"props": {
|
||||||
"variationsSpacing": 3,
|
"variationsSpacing": 3,
|
||||||
"showValueNameForImageVariation": true
|
"showValueNameForImageVariation": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#buy-button": {
|
"flex-layout.row#buy-button": {
|
||||||
"props": {
|
"props": {
|
||||||
"marginTop": 4,
|
"marginTop": 4,
|
||||||
"marginBottom": 7
|
"marginBottom": 7
|
||||||
},
|
},
|
||||||
"children": ["add-to-cart-button"]
|
"children": [
|
||||||
|
"add-to-cart-button"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#product-availability": {
|
"flex-layout.row#product-availability": {
|
||||||
"props": {
|
"props": {
|
||||||
"colGap": 7,
|
"colGap": 7,
|
||||||
@ -269,9 +300,10 @@
|
|||||||
"props": {
|
"props": {
|
||||||
"blockClass": "message-availability"
|
"blockClass": "message-availability"
|
||||||
},
|
},
|
||||||
"children": ["availability-subscriber"]
|
"children": [
|
||||||
|
"availability-subscriber"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
"share#default": {
|
"share#default": {
|
||||||
"props": {
|
"props": {
|
||||||
"social": {
|
"social": {
|
||||||
|
12
styles/css/vtex.button.css
Normal file
12
styles/css/vtex.button.css
Normal 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;
|
||||||
|
}
|
@ -1,98 +1,17 @@
|
|||||||
.flexRowContent--menu-link,
|
/*
|
||||||
.flexRowContent--main-header {
|
0 - 600PX: Phone
|
||||||
padding: 0 0.5rem;
|
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--description-row {
|
||||||
.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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
max-height: 100%;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
@ -28,4 +28,9 @@
|
|||||||
|
|
||||||
.productDescriptionContainer {
|
.productDescriptionContainer {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
|
margin-left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pointerEventsNone {
|
||||||
|
display: none;
|
||||||
}
|
}
|
43
styles/css/vtex.tab-layout.css
Normal file
43
styles/css/vtex.tab-layout.css
Normal 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;
|
||||||
|
}
|
@ -5,4 +5,3 @@
|
|||||||
.html--pdp-breadcrumb {
|
.html--pdp-breadcrumb {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
3
styles/sass/pages/product/vtex.button.scss
Normal file
3
styles/sass/pages/product/vtex.button.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.bg-action-primary{
|
||||||
|
background-color: black;
|
||||||
|
}
|
7
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
7
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.flexRowContent :global(.vtex-button){
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
.flexRowContent--description-row{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
@ -19,4 +19,11 @@
|
|||||||
}
|
}
|
||||||
.productDescriptionContainer{
|
.productDescriptionContainer{
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
|
margin-left: 32px;
|
||||||
|
}
|
||||||
|
.container--product-description-m3{
|
||||||
|
|
||||||
|
}
|
||||||
|
.pointerEventsNone{
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
35
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
35
styles/sass/pages/product/vtex.tab-layout.scss
Normal 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;
|
||||||
|
}
|
||||||
|
|
Loading…
x
Reference in New Issue
Block a user