PatrickReisSantos/challenge-vtex-io-Patrick-Reis-Santos
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona slider slick

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-02-07 22:40:56 -03:00
parent 9ad93949de
commit 5b36e18cc7
12 changed files with 215 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,10 +16,10 @@
"children": [
"stack-layout#prodsum",
"product-summary-name",
"product-rating-inline",
"product-summary-space",
"product-summary-price",
"product-summary-buy-button"
/* "product-rating-inline", */
/* "product-summary-space", */
"product-summary-price"
/* "product-summary-buy-button" */
]
},
"list-context.product-list#relatedProduct": {

6
store/blocks/product-summary/product-summary.jsonc
View File

@ -20,9 +20,9 @@
"stack-layout#prodsum": {
"children": [
"product-summary-image#shelf",
"vtex.product-highlights@2.x:product-highlights#collection",
"modal-trigger#quickview" // Check quickview.jsonc
"product-summary-image#shelf"
/* "vtex.product-highlights@2.x:product-highlights#collection", */
/* "modal-trigger#quickview" */ // Check quickview.jsonc
]
},

53
styles/css/vtex.product-summary.css
View File

@ -1,42 +1,31 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
}
.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;
}
}
/*
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 */
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
justify-content: center !important;
padding: 0;
}
.brandName {
font-weight: 600;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
color: #2E2E2E;
line-height: 25px;
color: #000000;
padding: 16px 0 8px !important;
}
.container {
text-align: start;
.priceContainer {
padding: 0;
}
.imageContainer {
text-align: center;
}
.image {
border-radius: 0.25rem;
.element {
padding: 0;
}

19
styles/css/vtex.rich-text.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -8,5 +9,21 @@
/* Media Query M3 */
/* Grid breakpoints */
.heading {
display: none;
font-size: 0;
margin-bottom: 32px;
margin-top: 0;
}
.heading::after {
content: "Você também pode gostar:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
}
.container {
justify-content: center;
align-items: center;
}

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

@ -1,31 +1,29 @@
.sliderLayoutContainer {
justify-content: center;
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
}
/*
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 */
.sliderTrackContainer {
max-width: 100%;
background-color: white;
width: 1300px;
margin: auto;
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
align-items: center;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
.paginationDot {
background-color: black;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
.paginationDot--isActive {
width: 16px !important;
height: 16px !important;
border: 0.5px solid #000000;
background-color: white;
}

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

@ -197,3 +197,45 @@
margin-right: 16px;
width: 90px !important;
}
.installmentsPrice {
display: none;
}
.listPrice {
margin: 8px;
padding: 0;
}
.listPriceLabel {
font-size: 0;
}
.listPriceValue {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
}
.listPriceValue::before {
content: "de ";
}
.listPriceValue::after {
content: " por";
text-decoration: line-through;
}
.sellingPriceLabel {
font-size: 0;
}
.sellingPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}

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

@ -8,7 +8,7 @@
/* Media Query M3 */
/* Grid breakpoints */
.contentContainer {
padding: 32px 72px 16px 72px;
padding: 32px 72px 0 72px;
}
.contentContainer .contentItem {
display: flex;

22
styles/sass/pages/product/vtex.product-summary.scss Normal file
View File

@ -0,0 +1,22 @@
.nameContainer {
justify-content: center !important;
padding: 0;
}
.brandName {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #000000;
padding: 16px 0 8px !important;
}
.priceContainer {
padding: 0;
}
.element {
padding: 0;
}

19
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -1,3 +1,20 @@
.heading {
display: none;
font-size: 0;
margin-bottom: 32px;
margin-top: 0;
&::after {
content: "Você também pode gostar:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
}
}
.container {
justify-content: center;
align-items: center;
}

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

@ -0,0 +1,20 @@
.sliderTrackContainer {
background-color: white;
width: 1300px;
margin: auto;
}
.paginationDotsContainer {
align-items: center;
}
.paginationDot {
background-color: black;
}
.paginationDot--isActive {
width: 16px !important;
height: 16px !important;
border: 0.5px solid #000000;
background-color: white;
}

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

@ -195,3 +195,46 @@
width: 90px !important;
}
}
.installmentsPrice {
display: none;
}
.listPrice {
margin: 8px;
padding: 0;
}
.listPriceLabel {
font-size: 0;
}
.listPriceValue {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
&::before {
content: "de ";
}
&::after {
content: " por";
text-decoration: line-through;
}
}
.sellingPriceLabel {
font-size: 0;
}
.sellingPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}

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

@ -1,5 +1,5 @@
.contentContainer {
padding: 32px 72px 16px 72px;
padding: 32px 72px 0 72px;
.contentItem {
display: flex;