YahToth/challenge-vtex-io-gabriel-gomes
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona estilização da prateleira de produtos

Browse Source
This commit is contained in:
Gabriel Gomes Fernandes 2023-02-07 16:53:49 -03:00
parent 9a58a63876
commit 9602fd9ade
5 changed files with 176 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout#description",
// "shelf.relatedProducts",
"flex-layout.row#shelf",
"product-questions-and-answers"
]
@ -139,8 +138,8 @@
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 1,
"phone": 1
"tablet": 3,
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",

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

@ -1,31 +1,87 @@
.sliderLayoutContainer {
justify-content: center;
}
/*
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:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");
/* Grid breakpoints */
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
background-color: white;
height: 630px;
}
.sliderTrackContainer {
max-width: 100%;
.sliderLayoutContainer--carousel .sliderTrackContainer {
margin: 32px 27px 32px 27px;
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
.sliderLayoutContainer--carousel .slide {
width: 100%;
max-width: 314px;
height: 448px;
margin-right: 16px;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) {
max-width: unset !important;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) {
padding: 0;
}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) {
width: 314px;
height: 314px;
}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
max-height: 314px !important;
}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-nameContainer) {
justify-content: center;
text-align: center;
padding: 16px 0 8px 0;
}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) {
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;
color: #000000;
}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-listPrice) {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 19px;
text-align: center;
text-decoration-line: line-through;
color: #bababa;
padding-bottom: 8px;
}
.sliderLayoutContainer--carousel .slide :global(.vtex-product-price-1-x-sellingPrice) {
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}
.sliderLayoutContainer--carousel .sliderLeftArrow,
.sliderLayoutContainer--carousel .sliderRightArrow {
padding: 0;
margin: 0;
}
.sliderLayoutContainer--carousel .paginationDotsContainer {
display: flex;
align-items: center;
margin-bottom: 64px;
}
.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot {
width: 10px;
height: 10px;
background-color: black;
border: none;
}
.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive {
width: 17px !important;
height: 17px !important;
background-color: white;
border: 0.5px solid #000000;
}

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

@ -10,6 +10,7 @@
/* Grid breakpoints */
.container--description {
margin: 16px 40px;
height: 702px;
}
.container--description .listContainer {
display: flex;

91
styles/sass/pages/product/vtex.slider-layout.scss Normal file
View File

@ -0,0 +1,91 @@
.sliderLayoutContainer--carousel {
background-color: white;
height: 630px;
.sliderTrackContainer {
margin: 32px 27px 32px 27px;
}
.slide {
width: 100%;
max-width: 314px;
height: 448px;
margin-right: 16px;
:global(.vtex-product-summary-2-x-container) {
max-width: unset !important;
:global(.vtex-product-summary-2-x-element) {
padding: 0;
}
:global(.vtex-product-summary-2-x-imageContainer) {
width: 314px;
height: 314px;
:global(.vtex-product-summary-2-x-imageNormal) {
max-height: 314px !important;
}
}
}
:global(.vtex-product-summary-2-x-nameContainer) {
justify-content: center;
text-align: center;
padding: 16px 0 8px 0;
:global(.vtex-product-summary-2-x-productBrand) {
font-family: "Open Sans", sans-serif;
font-size: 18px;
line-height: 25px;
color: #000000;
}
}
:global(.vtex-product-price-1-x-listPrice) {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 19px;
text-align: center;
text-decoration-line: line-through;
color: #bababa;
padding-bottom: 8px;
}
:global(.vtex-product-price-1-x-sellingPrice) {
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}
}
.sliderLeftArrow,
.sliderRightArrow {
padding: 0;
margin: 0;
}
.paginationDotsContainer {
display: flex;
align-items: center;
margin-bottom: 64px;
.paginationDot {
width: 10px;
height: 10px;
background-color: black;
border: none;
}
.paginationDot--isActive {
width: 17px !important;
height: 17px !important;
background-color: white;
border: 0.5px solid #000000;
}
}
}

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

@ -1,5 +1,6 @@
.container--description {
margin: 16px 40px;
height: 702px;
.listContainer {
display: flex;