FilipeQuintanilha/challenge-vtex-io-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(slider): Adiciona o slider na prateleira de relacionados nas telas desktop, tablet e mobile

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2023-02-10 12:33:41 -03:00
parent 9c171f2876
commit c684a6ee54
25 changed files with 419 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/components/Example/Example.tsx
View File

@ -51,7 +51,7 @@ const Pix = () => {
<div className="pix-container">
<img
className="pix-image"
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-sauloklein-m3academy.svg"
src="https://agenciamagma.vteximg.com.br/arquivos/pixIcon-filipequintanilha.png"
alt="pix"
/>

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

@ -37,7 +37,9 @@
[class*='vtex-numeric-stepper__minus-button'] {
border: none;
border: 1px solid #afafaf;
border-right: none;
border-radius: 0;
background-color: white;
}
[class*='vtex-numeric-stepper__minus-button-container'],
@ -48,6 +50,7 @@
[class*='vtex-numeric-stepper__plus-button'] {
border: none;
border: 1px solid #afafaf;
border-left: none;
border-radius: 0;
}
@ -61,6 +64,7 @@
display: flex;
align-items: center;
color: #000000;
height: 43px;
}
[class*='html--buy-button'] {

2
store/blocks/home/home.jsonc
View File

@ -67,7 +67,7 @@
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 1
"phone": 2
},
"infinite": true,
"fullWidth": false,

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

@ -7,11 +7,51 @@
"html#product-description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"shelf.relatedProducts"
"flex-layout.row#shelf-row"
// "product-questions-and-answers"
]
},
"flex-layout.row#shelf-row": {
"children": ["flex-layout.col#shelf-col"],
"props": {
"blockClass": "shelf-product-row"
}
},
"flex-layout.col#shelf-col": {
"children": ["rich-text#shelf-related", "list-context.product-list"],
"props": {
"blockClass": "shelf-product-col"
}
},
"rich-text#shelf-related": {
"props": {
"text": "### Você também pode gostar:",
"blockClass": "shelf-title"
}
},
"list-context.product-list": {
"children": ["slider-layout#shelf-prod"],
"blocks": ["product-summary.shelf"]
},
"slider-layout#shelf-prod": {
"props": {
"itemsPerPage": {
"(min-width:1025px)": 4,
"(min-width:768px)": 3,
"(max-width:767px)": 2
},
"infinite": true,
"showNavigationArrows": "always",
"showPaginationDots": "always",
"blockClass": "slide-shelf",
"colGap": 16
}
},
"html#product-description": {
"props": {
"testId": "product-description"

30
store/blocks/product-summary/product-summary-list.jsonc
View File

@ -9,14 +9,10 @@
]
},
"responsive-layout.desktop#productSummaryList": {
"children": [
"flex-layout.row#summaryListDesktop"
]
"children": ["flex-layout.row#summaryListDesktop"]
},
"responsive-layout.mobile#productSummaryList": {
"children": [
"flex-layout.row#summaryListMobile"
]
"children": ["flex-layout.row#summaryListMobile"]
},
"product-price-savings#summaryPercentage": {
"props": {
@ -36,7 +32,7 @@
]
},
"flex-layout.row#summaryListDesktop": {
"props":{
"props": {
"fullWidth": true,
"colSizing": "auto",
"blockClass": "summaryListDesktop"
@ -69,9 +65,7 @@
]
},
"flex-layout.row#productSpecifications": {
"children": [
"product-specification-group#summary"
]
"children": ["product-specification-group#summary"]
},
"product-summary-name#summaryListDesktop": {
"props": {
@ -100,18 +94,13 @@
"colSizing": "auto",
"colGap": 5
},
"children": [
"add-to-cart-button",
"flex-layout.row#buyNowButton"
]
"children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
},
"flex-layout.row#buyNowButton": {
"props": {
"blockClass": "buyNowButton"
},
"children": [
"add-to-cart-button#buyNow"
]
"children": ["add-to-cart-button#buyNow"]
},
"add-to-cart-button#buyNow": {
@ -123,10 +112,7 @@
}
},
"flex-layout.col#priceSummaryListDesktop": {
"children": [
"product-selling-price#summary",
"product-list-price#summary"
]
"children": ["product-selling-price#summary", "product-list-price#summary"]
},
"stack-layout#summaryListDesktop": {
"children": [
@ -144,7 +130,7 @@
}
},
"flex-layout.row#summaryListMobile": {
"props":{
"props": {
"preserveLayoutOnMobile": true,
"colSizing": "auto",
"blockClass": "summaryListMobile",

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

@ -3,12 +3,12 @@
"children": [
"stack-layout#prodsum",
"product-summary-name",
"flex-layout.col#productRating",
"product-summary-space",
// "flex-layout.col#productRating",
// "product-summary-space",
"product-list-price#summary",
"flex-layout.row#selling-price-savings",
"product-installments#summary",
"add-to-cart-button"
"product-selling-price#summary"
// "product-installments#summary"
// "add-to-cart-button"
]
},
"flex-layout.col#productRating": {
@ -81,9 +81,7 @@
},
"product-price-savings#summary": {
"props": {
"markers": [
"discount"
],
"markers": ["discount"],
"blockClass": "summary"
}
}

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

@ -30,6 +30,14 @@
padding: 0;
}
.flexColChild--productRating {
display: none;
}
.flexRowContent--shelf-product-row {
padding-bottom: 70px;
}
@media screen and (max-width: 768px) {
.stretchChildrenWidth {
flex-direction: column;

100
styles/css/vtex.modal-layout.css
View File

@ -1,89 +1,13 @@
@media screen and (min-width: 40em) {
.paper--quickview {
height: 260px;
width: 580px;
}
.actionsContainer--quickview {
padding: 0 2rem 2rem 2rem;
}
}
@media screen and (min-width: 50em) {
.paper--quickview {
height: 450px;
width: 900px;
}
}
@media screen and (min-width: 75em) {
.paper--quickview {
width: calc(100% - 4rem);
height: auto;
}
}
@media screen and (min-width: 82em) {
.actionsContainer--quickview {
padding: 0 2.5rem 2.5rem 2.5rem;
}
}
.paper--quickview {
min-width: 320px;
max-width: 96rem;
}
.headerContainer--quickview {
border: none;
position: absolute;
right: 0;
}
.actionsContainer--quickview {
height: 100%;
width: 100%;
transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out;
border-top-style: solid;
border-top-width: 1px;
border-top-color: transparent;
box-shadow: -4px 0px 27px -12px transparent;
}
.actionsContentWrapper {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #aaa;
padding-top: 1.5rem;
}
.contentContainer--quickviewContent {
padding: 2.5rem 0 2.5rem 2rem;
overflow-x: hidden;
}
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.triggerContainer--quickview {
padding: .75rem;
}
.triggerContainer {
outline: none;
}
.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) {
border-top-color: rgb(238, 238, 238);
box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64);
}
.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper {
border-top-color: transparent;
}
.closeButton {
padding-right: 1rem;
}
.paper--product-gifts {
padding: 1.5rem;
}
display: none;
}

23
styles/css/vtex.product-highlights.css
View File

@ -1,12 +1,13 @@
.productHighlightWrapper--collection {
position: absolute;
top: 10px;
left: 5px;
width: 200px;
}
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.productHighlightText {
background: antiquewhite;
border-radius: 20px;
padding: 5px 10px;
}
display: none;
}

22
styles/css/vtex.product-price.css
View File

@ -13,6 +13,28 @@
display: none;
}
.listPrice--summary {
display: block;
font-size: 14px;
line-height: 19px;
color: #bababa;
padding-bottom: 8px;
}
.listPrice--summary::before {
content: "de ";
text-decoration: line-through;
}
.listPrice--summary::after {
content: " por";
text-decoration: line-through;
}
.sellingPriceValue--summary {
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
.sellingPrice {
font-weight: 700;
font-size: 25px;

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

@ -1,42 +1,32 @@
.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;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.element {
padding: 0;
}
.imageContainer {
text-align: center;
width: 100%;
}
.image {
border-radius: 0.25rem;
.containerNormal {
max-width: none !important;
}
.brandName {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #000000;
}
.nameContainer {
padding: 16px 0 8px;
}

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

@ -7,4 +7,15 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.container--shelf-title {
justify-content: center;
}
.heading--shelf-title {
margin: 16px 0 32px 0;
font-size: 24px;
line-height: 38px;
color: #575757;
font-weight: 400;
}

96
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 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.sliderLayoutContainer--slide-shelf {
padding: 0 19px;
margin: 0 0 113px;
}
@media only screen and (max-width: 1024px) {
.sliderLayoutContainer--slide-shelf {
margin: 0 0 105px;
padding: 0 17px;
}
}
@media only screen and (max-width: 768px) {
.sliderLayoutContainer--slide-shelf {
margin: 0 0 65px;
padding: 0 15px;
}
}
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
margin: 0 8px;
}
@media only screen and (max-width: 1024px) {
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
margin: 0 6px;
}
}
@media only screen and (max-width: 768px) {
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
margin: 0 4px;
}
}
.sliderLayoutContainer--slide-shelf .slideChildrenContainer .paginationDotsContainer {
top: calc(100% + 32px);
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
.sliderLeftArrow--slide-shelf {
padding: 0;
margin: 0;
left: 0;
}
.sliderLeftArrow--slide-shelf::before {
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg);
width: 11px;
height: 29px;
}
.sliderTrackContainer {
max-width: 100%;
.sliderRightArrow--slide-shelf {
padding: 0;
margin: auto;
right: 0;
}
.sliderRightArrow--slide-shelf::before {
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg);
width: 11px;
height: 29px;
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
.caretIcon--slide-shelf {
width: 0;
height: 0;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
.paginationDotsContainer--slide-shelf {
bottom: -42px;
align-items: center;
gap: 12px;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
.paginationDot--slide-shelf {
background-color: #000000;
margin: 0;
}
.paginationDot--slide-shelf--isActive {
background-color: white;
border: 1px solid #000000;
width: 17px !important;
height: 17px !important;
}

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

@ -388,6 +388,14 @@
.productImagesContainer--first-image {
width: 100%;
}
.productDescriptionTitle {
font-size: 20px;
line-height: 32px;
}
.productDescriptionText {
font-size: 14px;
line-height: 19px;
}
}
@media screen and (min-width: 1920px) {
.container {

24
styles/css/vtex.store-footer.css
View File

@ -1,11 +1,13 @@
.row--menu-row {
padding-right: 24px;
}
.row--menu-row .rowContainer {
align-items: flex-start;
}
.row--payment-methods {
padding-top: 16px;
}
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.poweredBy {
display: none;
}

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

@ -20,6 +20,13 @@
padding: 0;
}
.flexColChild--productRating {
display: none;
}
.flexRowContent--shelf-product-row {
padding-bottom: 70px;
}
// .flexCol--conteudo-imagens {
// width: 98.35% !important;
// }

3
styles/sass/pages/product/vtex.modal-layout.scss Normal file
View File

@ -0,0 +1,3 @@
.triggerContainer--quickview {
display: none;
}

3
styles/sass/pages/product/vtex.product-highlights.scss Normal file
View File

@ -0,0 +1,3 @@
.productHighlightText {
display: none;
}

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

@ -3,6 +3,30 @@
display: none;
}
.listPrice--summary {
display: block;
font-size: 14px;
line-height: 19px;
color: $color-gray13;
padding-bottom: 8px;
&::before {
content: 'de ';
text-decoration: line-through;
}
&::after {
content: ' por';
text-decoration: line-through;
}
}
.sellingPriceValue--summary {
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
.sellingPrice {
font-weight: 700;
font-size: 25px;
@ -19,7 +43,7 @@
color: $color-gray7;
&::after {
content: " x ";
content: ' x ';
}
}
}
@ -31,12 +55,12 @@
color: $color-gray7;
&::before {
content: "de ";
content: 'de ';
font-weight: 400;
}
&::after {
content: " sem juros ";
content: ' sem juros ';
font-weight: 400;
}
}

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

@ -0,0 +1,25 @@
// .container {
// margin: 0 8px;
// }
.element {
padding: 0;
}
.imageContainer {
width: 100%;
}
.containerNormal {
max-width: none !important;
}
.brandName {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-black2;
}
.nameContainer {
padding: 16px 0 8px;
}

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

@ -0,0 +1,11 @@
.container--shelf-title {
justify-content: center;
}
.heading--shelf-title {
margin: 16px 0 32px 0;
font-size: 24px;
line-height: 38px;
color: $color-gray6;
font-weight: 400;
}

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

@ -0,0 +1,75 @@
.sliderLayoutContainer--slide-shelf {
padding: 0 19px;
margin: 0 0 113px;
@include mq(md, max) {
margin: 0 0 105px;
padding: 0 17px;
}
@include mq(sm, max) {
margin: 0 0 65px;
padding: 0 15px;
}
.slideChildrenContainer {
margin: 0 8px;
@include mq(md, max) {
margin: 0 6px;
}
@include mq(sm, max) {
margin: 0 4px;
}
.paginationDotsContainer {
top: calc(100% + 32px);
}
}
}
.sliderLeftArrow--slide-shelf {
padding: 0;
margin: 0;
left: 0;
&::before {
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg);
width: 11px;
height: 29px;
}
}
.sliderRightArrow--slide-shelf {
padding: 0;
margin: auto;
right: 0;
&::before {
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg);
width: 11px;
height: 29px;
}
}
.caretIcon--slide-shelf {
width: 0;
height: 0;
}
.paginationDotsContainer--slide-shelf {
bottom: -42px;
align-items: center;
gap: 12px;
}
.paginationDot--slide-shelf {
background-color: $color-black2;
margin: 0;
}
.paginationDot--slide-shelf--isActive {
background-color: white;
border: 1px solid $color-black2;
width: 17px !important;
height: 17px !important;
}

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

@ -466,6 +466,16 @@
.productImagesContainer--first-image {
width: 100%;
}
.productDescriptionTitle {
font-size: 20px;
line-height: 32px;
}
.productDescriptionText {
font-size: 14px;
line-height: 19px;
}
}
@media screen and (min-width: 1920px) {

3
styles/sass/pages/product/vtex.store-footer.scss Normal file
View File

@ -0,0 +1,3 @@
.poweredBy {
display: none;
}

9
styles/sass/utils/_vars.scss
View File

@ -16,6 +16,7 @@ $color-gray9: #afafaf;
$color-gray10: #868686;
$color-gray11: #b9b9b9;
$color-gray12: #bfbfbf;
$color-gray13: #bababa;
$color-blue: #4267b2;
@ -25,10 +26,10 @@ $color-green: #4caf50;
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
sm: 769px,
md: 1025px,
lg: 1440px,
xl: 1920px,
) !default;
$z-index: (