AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ajustando o product-image e carrosel em baixo

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-23 21:00:28 -03:00
parent 17309833e1
commit 682ead8147
12 changed files with 233 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
manifest.json
View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",

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

@ -45,6 +45,7 @@
},
"flex-layout.row#product-main": {
"props": {
"blockClass": "divProduct",
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
@ -52,9 +53,14 @@
"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"
@ -78,35 +84,48 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "58%",
"rowGap": 0
}
},
"flex-layout.row#product-image": {
"props":{
},
"children": ["product-images"]
},
"product-images": {
"props": {
"blockClass":"divImagens",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
},
"displayThumbnailsArrows": true
"thumbnailsOrientation": "horizontal",
"displayThumbnailsArrows": false,
"showNavigationArrows": false,
"showPaginationDots": false
}
},
"flex-layout.col#right-col": {
"props": {
"blockClass":"divInfoProduct",
"preventVerticalStretch": true,
"rowGap": 0
},
"children": [
"flex-layout.row#product-name",
"flex-layout.row#product-modelo",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
// "product-separator",
"sku-selector",
"product-quantity",
"product-assembly-options",
@ -118,8 +137,16 @@
]
},
"flex-layout.row#product-modelo": {
"props": {
"blockClass":"divNomeProductModelo"
},
"children": ["product-identifier.product"]
},
"flex-layout.row#product-name": {
"props": {
"blockClass":"divNomeProduct",
"marginBottom": 3
},
"children": ["vtex.store-components:product-name"]

2
styles/css/agenciamagma.store-theme.css
View File

@ -12,5 +12,5 @@
}
.html--pdp-breadcrumb {
background-color: green;
background-color: #fff;
}

32
styles/css/vtex.breadcrumb.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -9,9 +10,15 @@
/* Grid breakpoints */
.container {
background-color: #fff;
font-weight: 700;
font-weight: 400;
font-size: 14px;
line-height: 19px;
margin-left: 40px;
}
@media (min-width: 2500px) {
.container {
margin-left: 360px;
}
}
.container .homeIcon {
display: none;
@ -20,3 +27,26 @@
content: "Home";
display: inline-block;
}
.container .arrow .link {
font-size: 0;
}
.container .arrow .link--1::after {
content: "Sapatos";
display: inline-block;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.container .arrow .link--2::after {
content: "Sandálias";
display: inline-block;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.container .termArrow {
display: none;
}
.container .term {
display: none;
}

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

@ -7,3 +7,32 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.flexRowContent--divProduct {
margin-top: 16px;
margin-left: 40px;
margin-bottom: 16px;
padding-right: 40px !important;
padding: 0;
}
.flexRowContent--divProduct .stretchChildrenWidth {
width: 100% !important;
}
.flexCol--divInfoProduct .flexRow--divNomeProduct {
text-align: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
.flexCol--divInfoProduct .flexRow--divNomeProductModelo {
text-align: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}

19
styles/css/vtex.stack-layout.css
View File

@ -1,10 +1,9 @@
.stackItem--product {
width: 100%;
min-height: 257px
}
.stackItem--quickview {
right: 0;
top: 0;
left: auto;
}
/*
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 */

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

@ -10,3 +10,31 @@
.newsletter {
background: red;
}
.container {
margin: 0;
padding: 0;
}
.container .productImagesContainer--divImagens {
width: 100%;
}
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens {
width: 100% !important;
}
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
max-height: 100% !important;
margin-bottom: 16px;
}
.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
margin-right: 16px;
padding: 0px;
width: 90px;
height: 90px !important;
border-radius: 8px;
}

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

@ -3,6 +3,6 @@
}
.html--pdp-breadcrumb {
background-color: green;
background-color: $color-white;
}

47
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -1,13 +1,42 @@
.container{
background-color: $color-white;
font-weight: 700;
font-size: 14px;
line-height: 19px;
.homeIcon{
display: none;
.container {
background-color: $color-white;
font-weight: 400;
font-size: 14px;
line-height: 19px;
margin-left: 40px;
@media (min-width: 2500px) {
margin-left: 360px;
}
.homeIcon {
display: none;
}
.homeLink::after {
content: "Home";
display: inline-block;
}
.arrow {
.link{
font-size: 0;
}
.homeLink::after{
content: 'Home';
.link--1::after {
content: "Sapatos";
display: inline-block;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.link--2::after {
content: "Sandálias";
display: inline-block;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
}
.termArrow{
display: none;
}
.term{
display: none;
}
}

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

@ -0,0 +1,30 @@
.flexRowContent--divProduct {
margin-top: 16px;
margin-left: 40px;
margin-bottom: 16px;
padding-right: 40px !important;
padding: 0;
.stretchChildrenWidth {
width: 100% !important;
}
}
.flexCol--divInfoProduct {
.flexRow--divNomeProduct {
text-align: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
.flexRow--divNomeProductModelo {
text-align: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
}

0
styles/sass/pages/product/vtex.stack-layout.scss Normal file
View File

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

@ -1,3 +1,32 @@
.newsletter{
background: red;
.newsletter {
background: red;
}
.container {
margin: 0;
padding: 0;
.productImagesContainer--divImagens {
width: 100%;
.productImagesGallerySwiperContainer {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
.productImagesGallerySlide--divImagens {
width: 100% !important;
.productImageTag {
max-height: 100% !important;
margin-bottom: 16px;
}
}
}
.carouselGaleryThumbs--divImagens {
.productImagesThumb {
margin-right: 16px;
padding: 0px;
width: 90px;
height: 90px !important;
border-radius: 8px;
}
}
}
}