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: deixando o projeto responsivo e slick funcional

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-25 18:59:38 -03:00
parent a4c4be5e68
commit 52dee67913
11 changed files with 290 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
react/components/Html/styles.css
View File

@ -1,3 +1,10 @@
[class*="html--pdp-breadcrumb"] {
background-color: #fff;
}
@media (min-width: 1920px) {
[class*="html--page-product"] {
margin-left: 320px;
padding-right: 320px;
}
}
[class*="html--pdp-breadcrumb"] {
background-color: #fff;
}

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

@ -1,17 +1,28 @@
{
"store.product": {
"children": [
"html#pageProduct",
"newsletter"
]
},
"html#pageProduct": {
"props": {
"blockClass":"page-product"
},
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout#product",
// "flex-layout.row#description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers",
"newsletter"
// "shelf.relatedProducts",
// "product-questions-and-answers",
"rich-text#titleSlick",
"list-context.product-list#demo"
]
},
"html#breadcrumb": {
@ -222,7 +233,7 @@
"props": {
"blockClass": "renderGuia",
"tabId": "product1",
"label": "Descrição 1",
"label": "Descrição",
"defaultActiveTab": true
}
},
@ -230,28 +241,28 @@
"props": {
"blockClass": "renderGuia",
"tabId": "product2",
"label": "Descrição 2"
"label": "Descrição"
}
},
"tab-list.item#product3": {
"props": {
"blockClass": "renderGuia",
"tabId": "product3",
"label": "Descrição 3"
"label": "Descrição"
}
},
"tab-list.item#product4": {
"props": {
"blockClass": "renderGuia",
"tabId": "product4",
"label": "Descrição 4"
"label": "Descrição"
}
},
"tab-list.item#product5": {
"props": {
"blockClass": "renderGuia",
"tabId": "product5",
"label": "Descrição 5"
"label": "Descrição"
}
},
"tab-content#product": {
@ -307,20 +318,77 @@
"blockClass": "divImgDescription",
"width": "50%"
},
"children": ["image#imgDescription"]
"children": ["product-images#imgDescription"]
},
"image#imgDescription": {
"product-images#imgDescription": {
"props": {
"src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-600-auto?v=637781133812700000&width=600&height=auto&aspect=true 600w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true 800w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-1200-auto?v=637781133812700000&width=1200&height=auto&aspect=true 1200w",
"displayMode": "first-image",
"blockClass": "imgDescription"
}
},
"flex-layout.row#description": {
"props": {
"blockClass":"divDescription",
"marginBottom": 7
},
"children": ["flex-layout.col#divImgDescription", "product-description"]
},
"rich-text#titleSlick": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Você também pode gostar:",
"blockClass": "tituloSlick"
}
},
"list-context.product-list#demo": {
"blocks": ["product-summary.shelf#demo"],
"children": ["slider-layout#demo-product"]
},
"product-summary.shelf#demo": {
"children": [
"product-summary-image",
"product-summary-name",
// "product-summary-description",
"product-summary-price"
// "product-summary-sku-selector",
// "product-summary-buy-button"
]
},
"slider-layout#demo-product": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
}
// ,
// "children": ["shelf.relatedProducts"]
},
// "rich-text#1": {
// "props": {
// "text": "Test1"
// }
// },
// "rich-text#2": {
// "props": {
// "text": "Test2"
// }
// },
// "rich-text#3": {
// "props": {
// "text": "Test3"
// }
// },
"newsletter": {
"props": {
"blockClass": "newsletter",

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

@ -15,11 +15,6 @@
line-height: 19px;
margin-left: 40px;
}
@media (min-width: 2500px) {
.container {
margin-left: 360px;
}
}
.container .homeIcon {
display: none;
}

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

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

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

@ -7,13 +7,34 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.stretchChildrenWidth {
width: 100% !important;
}
@media (max-width: 1024px) {
.stretchChildrenWidth {
padding-right: 0px;
}
}
@media (max-width: 1024px) {
.flexRowContent--divDescription {
display: flex;
flex-direction: column;
}
}
.flexRowContent--divProduct {
margin-top: 16px;
margin-left: 40px;
margin-bottom: 16px;
padding: 0px;
padding-left: 40px !important;
margin-bottom: 16px;
padding-right: 40px !important;
}
@media (max-width: 1024px) {
.flexRowContent--divProduct {
flex-direction: column;
}
}
.flexRowContent--divProduct .stretchChildrenWidth {
width: 100% !important;
}
@ -39,4 +60,9 @@
.flexCol--divImgDescription {
margin-right: 32px;
}
@media (max-width: 1024px) {
.flexCol--divImgDescription {
margin-right: 0px;
}
}

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

@ -14,6 +14,7 @@
.container {
margin: 0;
padding: 0;
max-width: 100%;
}
.container .productImagesContainer--divImagens {
width: 100%;
@ -32,6 +33,16 @@
max-width: 664px;
margin-bottom: 16px;
}
@media (min-width: 2500px) {
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
max-width: 904px;
}
}
@media (max-width: 1024px) {
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
max-width: 100%;
}
}
.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
margin-right: 16px;
padding: 0px;
@ -68,10 +79,21 @@
border-bottom: 3px solid #bfbfbf;
}
.imageElement--imgDescription {
.productImageTag--imgDescription {
width: 100%;
max-width: 664px;
}
@media (min-width: 2500px) {
.productImageTag--imgDescription {
max-width: 904px;
}
}
@media (max-width: 1024px) {
.productImageTag--imgDescription {
max-width: 944px;
margin-bottom: 16px;
}
}
.productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans";
@ -80,4 +102,10 @@
font-size: 24px;
line-height: 32px;
color: #575757;
}
@media (max-width: 1024px) {
.productDescriptionContainer .productDescriptionTitle {
margin-bottom: 8px;
padding-bottom: 8px;
}
}

31
styles/css/vtex.tab-layout.css
View File

@ -8,17 +8,23 @@
/* Media Query M3 */
/* Grid breakpoints */
.container--estrutura {
margin-left: 40px;
padding-left: 40px !important;
padding-right: 40px !important;
}
.container--estrutura .listContainer--Guias {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #B9B9B9;
border-bottom: 1px solid #b9b9b9;
padding: 0px 64px;
margin-bottom: 36px;
}
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias {
flex-direction: column;
padding: 0px 0px;
}
}
.container--estrutura .listContainer--Guias .listItem--renderGuia {
margin: 0;
padding: 0;
@ -29,12 +35,23 @@
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #BFBFBF;
color: #bfbfbf;
}
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) {
padding-left: 0;
padding-right: 48px;
}
}
.container--estrutura .listContainer--Guias .listItemActive--renderGuia {
border-bottom: 3px solid #000000;
background-color: white;
}
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItemActive--renderGuia {
border-bottom: none;
}
}
.container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button) {
font-family: "Open Sans";
font-style: normal;
@ -47,5 +64,11 @@
}
.container--estrutura .contentContainer--listRender {
margin-left: 32px;
padding-right: 72px;
padding-right: 52px;
}
@media (max-width: 1024px) {
.container--estrutura .contentContainer--listRender {
margin-left: 0px;
padding-right: 0px;
}
}

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

@ -4,9 +4,6 @@
font-size: 14px;
line-height: 19px;
margin-left: 40px;
@media (min-width: 2500px) {
margin-left: 360px;
}
.homeIcon {
display: none;
}
@ -15,28 +12,28 @@
display: inline-block;
}
.arrow {
.link{
font-size: 0;
.link {
font-size: 0;
}
.link--1::after {
content: "Sapatos";
display: inline-block;
font-weight: 400;
font-size: 14px;
line-height: 19px;
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;
content: "Sandálias";
display: inline-block;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
}
.termArrow{
}
.termArrow {
display: none;
}
.term{
}
.term {
display: none;
}
}
}

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

@ -1,9 +1,27 @@
.stretchChildrenWidth{
width: 100% !important;
@media (max-width: 1024px) {
padding-right: 0px
}
}
.flexRowContent--divDescription{
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}
.flexRowContent--divProduct {
margin-top: 16px;
margin-left: 40px;
margin-bottom: 16px;
padding: 0px;
padding-left: 40px !important;
margin-bottom: 16px;
padding-right: 40px !important;
@media (max-width:1024px) {
flex-direction: column;
}
.stretchChildrenWidth {
width: 100% !important;
}
@ -30,5 +48,8 @@
}
.flexCol--divImgDescription{
margin-right: 32px;
@media (max-width: 1024px) {
margin-right: 0px;
}
}

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

@ -4,6 +4,7 @@
.container {
margin: 0;
padding: 0;
max-width: 100%;
.productImagesContainer--divImagens {
width: 100%;
.productImagesGallerySwiperContainer {
@ -17,6 +18,12 @@
max-height: 100% !important;
max-width: 664px;
margin-bottom: 16px;
@media (min-width:2500px) {
max-width: 904px;
}
@media (max-width:1024px) {
max-width: 100% ;
}
}
}
}
@ -58,9 +65,16 @@
}
}
.imageElement--imgDescription {
.productImageTag--imgDescription {
width: 100%;
max-width: 664px;
@media (min-width:2500px) {
max-width: 904px;
}
@media (max-width: 1024px) {
max-width: 944px;
margin-bottom: 16px;
}
}
.productDescriptionContainer {
@ -71,5 +85,9 @@
font-size: 24px;
line-height: 32px;
color: #575757;
@media (max-width: 1024px) {
margin-bottom: 8px;
padding-bottom: 8px;
}
}
}

96
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -1,43 +1,59 @@
.container--estrutura{
margin-left: 40px ;
padding-right: 40px !important;
.listContainer--Guias {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #B9B9B9;
padding: 0px 64px;
margin-bottom: 36px;
.listItem--renderGuia{
margin: 0;
padding: 0;
:global(.vtex-button) {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #BFBFBF;
}
}
.listItemActive--renderGuia{
border-bottom: 3px solid #000000;
background-color: white;
:global(.vtex-button) {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: black;
background-color: white !important;
border: 0;
}
}
.container--estrutura {
padding-left: 40px !important ;
padding-right: 40px !important;
.listContainer--Guias {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #b9b9b9;
padding: 0px 64px;
margin-bottom: 36px;
@media (max-width: 1024px) {
flex-direction: column;
padding: 0px 0px;
}
.contentContainer--listRender{
margin-left: 32px;
padding-right: 72px;
.listItem--renderGuia {
margin: 0;
padding: 0;
:global(.vtex-button) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
}
:global(.vtex-button__label) {
@media (max-width: 1024px) {
padding-left: 0;
padding-right: 48px;
}
}
}
.listItemActive--renderGuia {
border-bottom: 3px solid #000000;
background-color: white;
@media (max-width: 1024px) {
border-bottom: none;
}
:global(.vtex-button) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: black;
background-color: white !important;
border: 0;
}
}
}
.contentContainer--listRender {
margin-left: 32px;
padding-right: 52px;
@media (max-width: 1024px) {
margin-left: 0px;
padding-right: 0px;
}
}
}