SauloKleinNery/challenge-vtex-io-saulo-klein
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria prateleira desktop mobile

Browse Source
This commit is contained in:
Saulo Klein Nery 2023-02-10 12:23:49 -03:00
parent af943268fd
commit 5f536d3bcb
20 changed files with 389 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,11 +7,51 @@
"tab-layout",
//"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#breadcrumb": {
"props": {
"tag": "section",

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

@ -3,12 +3,13 @@
"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"
//"flex-layout.row#selling-price-savings"
//"product-installments#summary"
//"add-to-cart-button"
]
},
"flex-layout.col#productRating": {
@ -81,9 +82,7 @@
},
"product-price-savings#summary": {
"props": {
"markers": [
"discount"
],
"markers": ["discount"],
"blockClass": "summary"
}
}

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

@ -13,6 +13,9 @@
padding: 0 40px;
margin: 32px 0 0;
}
.container .homeLink {
padding: 0;
}
.container .homeLink::before {
content: "Home";
}

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

@ -11,6 +11,10 @@
.flexRow .flexCol--info-availability, .flexRow .flexCol--rightCol {
position: relative;
}
.flexRow--shelf-product-row {
padding: 0 40px;
margin: 16px 0 0;
}
.flexRow .flexRowContent--productPanel {
margin: 16px 0;
padding: 0 40px;

98
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.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;
}

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

@ -1,12 +1,13 @@
/*
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@300;400;500;700&display=swap");
/* Grid breakpoints */
.productHighlightWrapper--collection {
position: absolute;
top: 10px;
left: 5px;
width: 200px;
}
.productHighlightText {
background: antiquewhite;
border-radius: 20px;
padding: 5px 10px;
display: none;
}

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

@ -40,3 +40,50 @@
.installments--sellingInfo .installmentValue::after {
content: " sem juros";
}
.listPrice--summary {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
text-decoration: line-through;
}
@media only screen and (max-width: 1024px) {
.listPrice--summary {
font-size: 12px;
line-height: 16px;
}
}
.listPrice--summary::before, .listPrice--summary::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
@media only screen and (max-width: 1024px) {
.listPrice--summary::before, .listPrice--summary::after {
font-size: 12px;
line-height: 16px;
}
}
.listPrice--summary::before {
content: "de ";
}
.listPrice--summary::after {
content: " por";
}
.listPrice--summary .listPriceValue {
text-decoration: none;
}
.sellingPrice--summary--hasListPrice {
margin: 8px 0;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}
@media only screen and (max-width: 1024px) {
.sellingPrice--summary--hasListPrice {
font-size: 18px;
line-height: 25px;
}
}

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

@ -1,42 +1,25 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
/*
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@300;400;500;700&display=swap");
/* Grid breakpoints */
.nameContainer {
padding: 16px 0 8px;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
.nameContainer .productNameContainer {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #000;
}
.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;
@media only screen and (max-width: 1024px) {
.nameContainer .productNameContainer {
font-size: 14px;
line-height: 19px;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
text-align: center;
}
.image {
border-radius: 0.25rem;
}

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

@ -8,3 +8,10 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.container--shelf-title {
justify-content: center;
margin: 0 0 32px;
}
.container--shelf-title .heading {
margin: 0;
}

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

@ -1,31 +1,72 @@
.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@300;400;500;700&display=swap");
/* Grid breakpoints */
.sliderLayoutContainer--slide-shelf {
padding: 0 19px;
margin: 0 0 113px;
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
@media only screen and (max-width: 1024px) {
.sliderLayoutContainer--slide-shelf {
margin: 0 0 105px;
padding: 0 17px;
}
}
.sliderTrackContainer {
max-width: 100%;
@media only screen and (max-width: 767px) {
.sliderLayoutContainer--slide-shelf {
margin: 0 0 65px;
padding: 0 15px;
}
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
margin: 0 8px;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
@media only screen and (max-width: 1024px) {
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
margin: 0 6px;
}
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
@media only screen and (max-width: 767px) {
.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
margin: 0 4px;
}
}
.sliderLayoutContainer--slide-shelf .caretIcon {
display: none;
}
.sliderLayoutContainer--slide-shelf .sliderLeftArrow {
padding: 0;
margin: 0;
left: 0;
}
.sliderLayoutContainer--slide-shelf .sliderLeftArrow::before {
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg);
}
.sliderLayoutContainer--slide-shelf .sliderRightArrow {
padding: 0;
margin: 0;
right: 0;
}
.sliderLayoutContainer--slide-shelf .sliderRightArrow::after {
content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg);
}
.sliderLayoutContainer--slide-shelf .paginationDotsContainer {
top: calc(100% + 32px);
align-items: center;
}
.sliderLayoutContainer--slide-shelf .paginationDotsContainer .paginationDot {
margin: 0 6px;
background-color: #000;
}
.sliderLayoutContainer--slide-shelf .paginationDotsContainer .paginationDot--isActive {
height: 17px !important;
width: 17px !important;
background-color: #fff;
border: 0.5px solid #000;
}

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

@ -9,6 +9,11 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
@media only screen and (min-width: 1025px) {
.productDescriptionContainer {
padding-right: 32px;
}
}
.productDescriptionContainer .productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@ -79,7 +84,7 @@
@media only screen and (max-width: 1024px) {
.container .productImageTag--main {
min-height: 994px;
max-width: auto;
max-width: none;
}
}
@media only screen and (max-width: 767px) {
@ -249,7 +254,7 @@
padding: 27px 0 0;
width: 280px;
}
@media only screen and (max-width: 509px) {
@media only screen and (max-width: 767px) {
.container .shippingContainer {
margin: 0 0 24px;
width: 100%;
@ -304,12 +309,6 @@
line-height: 16px;
color: #afafaf;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input):focus::before {
display: none;
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input)::before {
content: "asdasd";
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
position: absolute;
@ -318,7 +317,7 @@
white-space: nowrap;
text-decoration-line: underline;
}
@media only screen and (max-width: 509px) {
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
left: auto;
top: calc(100% + 8px);

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

@ -6,6 +6,11 @@
}
}
&--shelf-product-row {
padding: 0 40px;
margin: 16px 0 0;
}
.flexRowContent--productPanel {
margin: 16px 0;
padding: 0 40px;

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 @@
.productHighlightWrapper--collection {
display: none;
}

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

@ -37,3 +37,52 @@
}
}
}
.listPrice--summary {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray16;
text-decoration: line-through;
@include mq(lg, max) {
font-size: 12px;
line-height: 16px;
}
&::before,
&::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
@include mq(lg, max) {
font-size: 12px;
line-height: 16px;
}
}
&::before {
content: "de ";
}
&::after {
content: " por";
}
.listPriceValue {
text-decoration: none;
}
}
.sellingPrice--summary--hasListPrice {
margin: 8px 0;
font-weight: 700;
font-size: 24px;
line-height: 33px;
@include mq(lg, max) {
font-size: 18px;
line-height: 25px;
}
}

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

@ -0,0 +1,15 @@
.nameContainer {
padding: 16px 0 8px;
.productNameContainer {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-black2;
@include mq(lg, max) {
font-size: 14px;
line-height: 19px;
}
}
}

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

@ -0,0 +1,8 @@
.container--shelf-title {
justify-content: center;
margin: 0 0 32px;
.heading {
margin: 0;
}
}

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

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

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

@ -1,4 +1,8 @@
.productDescriptionContainer {
@include mq(lg, min) {
padding-right: 32px;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@ -30,6 +34,7 @@
}
.container {
//margin: 0;
padding: 0;
.carouselContainer {
@ -74,7 +79,7 @@
@include mq(lg, max) {
min-height: 994px;
max-width: auto;
max-width: none;
}
@include mq(md, max) {
@ -281,7 +286,7 @@
position: relative;
padding: 27px 0 0;
@include mq(cstm, max) {
@include mq(md, max) {
margin: 0 0 24px;
width: 100%;
}
@ -346,14 +351,6 @@
font-size: 12px;
line-height: 16px;
color: $color-gray10;
&:focus::before {
display: none;
}
&::before {
content: "asdasd";
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
@ -364,7 +361,7 @@
white-space: nowrap;
text-decoration-line: underline;
@include mq(cstm, max) {
@include mq(md, max) {
left: auto;
top: calc(100% + 8px);
right: 0;

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

@ -21,6 +21,7 @@ $color-gray12: #868686;
$color-gray13: #b9b9b9;
$color-gray14: #bfbfbf;
$color-gray15: #b9b9b999;
$color-gray16: #bababa;
$color-blue: #4267b2;
@ -33,7 +34,7 @@ $grid-breakpoints: (
sm: 640px,
md: 768px,
lg: 1025px,
xl: 2500px,
xl: 1920px,
) !default;
$z-index: (