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

feat(product): organizando a product jsonc, quebrando em mais arquivos

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-02-02 17:42:16 -03:00
parent 2447d9dfee
commit 8cb2b112b6
8 changed files with 217 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,23 +80,6 @@
"rowGap": 0
}
},
"html#flex-layout.row#product-image": {
"props":{
"testId": "product-images"
},
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "auto"
},
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"children": ["product-images"]
}
},
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
@ -226,179 +209,6 @@
"children": ["availability-subscriber"]
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
},
"product-images#description-content": {
"props": {
"displayMode": "first-image",
"zoomMode": "disabled",
"blockClass": "image-description"
}
},
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
"blockClass": "description-block",
"defaultActiveTabId": "firstTab"
}
},
"tab-list#description": {
"children": [
"tab-list.item#firstTab",
"tab-list.item#secondTab",
"tab-list.item#thirdTab",
"tab-list.item#fourthTab",
"tab-list.item#fifthTab"
]
},
"tab-list.item#firstTab": {
"props": {
"tabId": "firstTab",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#secondTab": {
"props": {
"tabId": "secondTab",
"label": "Descrição"
}
},
"tab-list.item#thirdTab": {
"props": {
"tabId": "thirdTab",
"label": "Descrição"
}
},
"tab-list.item#fourthTab": {
"props": {
"tabId": "fourthTab",
"label": "Descrição"
}
},
"tab-list.item#fifthTab": {
"props": {
"tabId": "fifthTab",
"label": "Descrição"
}
},
"tab-content#description": {
"children": [
"tab-content.item#firstTab",
"tab-content.item#secondTab",
"tab-content.item#thirdTab",
"tab-content.item#fourthTab",
"tab-content.item#fifthTab"
],
"props": {
"blockClass": "description-content"
}
},
"tab-content.item#firstTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "firstTab"
}
},
"tab-content.item#secondTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "secondTab"
}
},
"tab-content.item#thirdTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "thirdTab"
}
},
"tab-content.item#fourthTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "fourthTab"
}
},
"tab-content.item#fifthTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "fifthTab"
}
},
"html#slider-block-container": {
"children": ["rich-text#slider-block-title", "html#list-context.product-list#slider-block"],
"props": {
"blockClass": "slider-container"
}
},
"rich-text#slider-block-title": {
"props": {
"text": "#### Você também pode gostar:",
"blockClass": "slider-title"
}
},
"product-summary.shelf#slider-block": {
"children": ["html#product-summary.shelf#slider-block"]
},
"html#product-summary.shelf#slider-block": {
"props": {
"testId": "vtex-product-summary",
"blockClass": "slider-product"
},
"children": [
"product-summary-image#slider-images",
"product-summary-name",
// "product-summary-space",
"product-summary-price"
]
},
"product-summary-image#slider-images": {
"props": {
"blockClass": "product-summary-image",
"showBadge": false,
"aspectRatio": "1:1"
}
},
"list-context.product-list#slider-block": {
"blocks": ["product-summary.shelf#slider-block"],
"children": ["html#slider-layout#products-carousel"]
},
"html#list-context.product-list#slider-block": {
"props": {
"testId": "product-summary-list"
},
"children": ["list-context.product-list#slider-block"]
},
"html#slider-layout#products-carousel": {
"props": {
"testId": "product-summary-list"
},
"children": ["slider-layout#products-carousel"]
},
"slider-layout#products-carousel": {
"props":{
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"blockClass": "carousel"
}
},
"share#default": {
"props": {
"social": {

72
store/blocks/pdp/product__carousel.jsonc Normal file
View File

@ -0,0 +1,72 @@
{
"html#slider-block-container": {
"children": ["rich-text#slider-block-title", "html#list-context.product-list#slider-block"],
"props": {
"blockClass": "slider-container"
}
},
"rich-text#slider-block-title": {
"props": {
"text": "#### Você também pode gostar:",
"blockClass": "slider-title"
}
},
"product-summary.shelf#slider-block": {
"children": ["html#product-summary.shelf#slider-block"]
},
"html#product-summary.shelf#slider-block": {
"props": {
"testId": "vtex-product-summary",
"blockClass": "slider-product"
},
"children": [
"product-summary-image#slider-images",
"product-summary-name",
// "product-summary-space",
"product-summary-price"
]
},
"product-summary-image#slider-images": {
"props": {
"blockClass": "product-summary-image",
"showBadge": false,
"aspectRatio": "1:1"
}
},
"list-context.product-list#slider-block": {
"blocks": ["product-summary.shelf#slider-block"],
"children": ["html#slider-layout#products-carousel"]
},
"html#list-context.product-list#slider-block": {
"props": {
"testId": "product-summary-list"
},
"children": ["list-context.product-list#slider-block"]
},
"html#slider-layout#products-carousel": {
"props": {
"testId": "product-summary-list"
},
"children": ["slider-layout#products-carousel"]
},
"slider-layout#products-carousel": {
"props":{
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"blockClass": "carousel"
}
}
}

104
store/blocks/pdp/product__description.jsonc Normal file
View File

@ -0,0 +1,104 @@
{
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
},
"product-images#description-content": {
"props": {
"displayMode": "first-image",
"zoomMode": "disabled",
"blockClass": "image-description"
}
},
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
"blockClass": "description-block",
"defaultActiveTabId": "firstTab"
}
},
"tab-list#description": {
"children": [
"tab-list.item#firstTab",
"tab-list.item#secondTab",
"tab-list.item#thirdTab",
"tab-list.item#fourthTab",
"tab-list.item#fifthTab"
]
},
"tab-list.item#firstTab": {
"props": {
"tabId": "firstTab",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#secondTab": {
"props": {
"tabId": "secondTab",
"label": "Descrição"
}
},
"tab-list.item#thirdTab": {
"props": {
"tabId": "thirdTab",
"label": "Descrição"
}
},
"tab-list.item#fourthTab": {
"props": {
"tabId": "fourthTab",
"label": "Descrição"
}
},
"tab-list.item#fifthTab": {
"props": {
"tabId": "fifthTab",
"label": "Descrição"
}
},
"tab-content#description": {
"children": [
"tab-content.item#firstTab",
"tab-content.item#secondTab",
"tab-content.item#thirdTab",
"tab-content.item#fourthTab",
"tab-content.item#fifthTab"
],
"props": {
"blockClass": "description-content"
}
},
"tab-content.item#firstTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "firstTab"
}
},
"tab-content.item#secondTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "secondTab"
}
},
"tab-content.item#thirdTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "thirdTab"
}
},
"tab-content.item#fourthTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "fourthTab"
}
},
"tab-content.item#fifthTab": {
"children": ["product-images#description-content", "product-description"],
"props": {
"tabId": "fifthTab"
}
}
}

19
store/blocks/pdp/product__image.jsonc Normal file
View File

@ -0,0 +1,19 @@
{
"html#flex-layout.row#product-image": {
"props":{
"testId": "product-images"
},
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "auto"
},
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"children": ["product-images"]
}
}
}

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

@ -344,6 +344,12 @@
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #fff;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.flexRow--newsletter__footer .flexRowContent--newsletter__footer {
border-bottom: none;
}
}
.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth {
width: 774px !important;

6
styles/css/vtex.slider-layout.css
View File

@ -94,6 +94,12 @@
justify-content: center;
top: 100%;
column-gap: 12px;
margin-top: 32px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.sliderLayoutContainer--carousel .paginationDotsContainer--carousel {
margin-top: 16px;
}
}
.sliderLayoutContainer--carousel .paginationDotsContainer--carousel .paginationDot--carousel {
background-color: #000;

5
styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss
View File

@ -372,6 +372,11 @@
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid $color-white;
@media #{$mq-tablet}, #{$mq-mobile} {
border-bottom: none;
}
.stretchChildrenWidth {
width: 774px !important;

5
styles/sass/pages/product/vtexSlider/vtex.slider-layout.scss
View File

@ -79,6 +79,11 @@
justify-content: center;
top: 100%;
column-gap: 12px;
margin-top: 32px;
@media #{$mq-tablet}, #{$mq-mobile} {
margin-top: 16px;
}
.paginationDot--carousel {
background-color: $color-black0;