adicionado slide de produtos
This commit is contained in:
parent
ee4cb0cbc3
commit
1062a83408
@ -4,6 +4,8 @@
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
"tab-layout#Descricao",
|
||||
"rich-text#slide",
|
||||
"list-context.product-list#demo1",
|
||||
"product-questions-and-answers"
|
||||
]
|
||||
},
|
||||
@ -136,6 +138,50 @@
|
||||
}
|
||||
},
|
||||
|
||||
"rich-text#slide": {
|
||||
"props": {
|
||||
"textAlignment": "CENTER",
|
||||
"textPosition": "CENTER",
|
||||
"text": "Você também pode gostar:",
|
||||
// "textColor": "c-on-emphasis",
|
||||
"font": "t-heading-5",
|
||||
"blockClass": "help-message"
|
||||
}
|
||||
},
|
||||
|
||||
"list-context.product-list#demo1": {
|
||||
"blocks": ["product-summary.shelf#demo1"],
|
||||
"children": ["slider-layout#carousel"]
|
||||
},
|
||||
|
||||
"product-summary.shelf#demo1": {
|
||||
"children": [
|
||||
"product-summary-image",
|
||||
"product-summary-name",
|
||||
"product-summary-price"
|
||||
]
|
||||
},
|
||||
|
||||
"slider-layout#carousel": {
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 3,
|
||||
"phone": 2
|
||||
},
|
||||
"infinite": true,
|
||||
// "showNavigationArrows": "desktopOnly",
|
||||
"blockClass": "carousel"
|
||||
}
|
||||
},
|
||||
|
||||
"slider-layout#demo-products": {
|
||||
"props": {
|
||||
"fullWidth": false,
|
||||
"centerModeSlidesGap": 16
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
"html#breadcrumb": {
|
||||
|
||||
@ -1,42 +1,21 @@
|
||||
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
|
||||
border-radius: 50%;
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.slideChildrenContainer {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nameContainer {
|
||||
justify-content: start;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #2E2E2E;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: start;
|
||||
.slideChildrenContainer .sliderTrackContainer .sliderLeftArrow,
|
||||
.slideChildrenContainer .sliderTrackContainer .sliderRightArrow {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
height: 287px;
|
||||
}
|
||||
@ -1,31 +1,30 @@
|
||||
.sliderLayoutContainer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sliderLayoutContainer--carousel {
|
||||
background-color: #F0F0F0;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.sliderTrackContainer {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.paginationDotsContainer {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layoutContainer--shelf {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 96rem;
|
||||
min-height: 550px;
|
||||
.paginationDot--carousel {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.slide--shelf {
|
||||
margin-bottom: 25px;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
min-height: 550px;
|
||||
.paginationDot--carousel--isActive {
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
}
|
||||
|
||||
.sliderLayoutContainer {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
16
styles/sass/pages/product/vtex.product-summary.scss
Normal file
16
styles/sass/pages/product/vtex.product-summary.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.slideChildrenContainer {
|
||||
margin-bottom: 38px;
|
||||
.sliderTrackContainer {
|
||||
|
||||
.sliderLeftArrow,
|
||||
.sliderRightArrow {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.imageContainer {
|
||||
height: 287px;
|
||||
}
|
||||
|
||||
24
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
24
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,24 @@
|
||||
|
||||
.paginationDotsContainer
|
||||
|
||||
{
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.paginationDot--carousel {
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
.paginationDot--carousel--isActive{
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
}
|
||||
|
||||
.sliderLayoutContainer{
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user