andreamatsunaga/challenge-vtex-io-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria product list com slider layout

Browse Source
This commit is contained in:
Andrea Matsunaga 2023-02-07 21:03:24 -03:00
parent d3f9a8324a
commit 84735a662c
10 changed files with 377 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,10 +4,9 @@
"html#breadcrumb",
"condition-layout.product#availability",
"html#tab-layout",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
// "shelf.relatedProducts",
"list-context.product-list",
"newsletter"
]
},
"html#breadcrumb": {
@ -122,15 +121,6 @@
"children": ["product-images", "product-description"]
},
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
"rich-text#specifications": {
"props": {
"text": "##### Product Specifications"
}
},
"condition-layout.product#availability": {
"props": {
"conditions": [
@ -266,7 +256,7 @@
"flex-layout.col#right-col-availability"
]
},
"flex-layout.col#right-col-availability": {
"props": {
"width": "50%",
@ -297,5 +287,26 @@
"Pinterest": true
}
}
},
"list-context.product-list": {
"blocks": ["product-summary.shelf"],
"children": ["slider-layout#related-products"]
},
"slider-layout#related-products": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"showNavigationArrows": "always",
"blockClass": "carousel"
// "fullWidth": false
}
// ,
// "children": ["rich-text#1", "rich-text#2", "rich-text#3"]
}
}

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

@ -1,14 +1,14 @@
{
"product-summary.shelf": {
"children": [
"stack-layout#prodsum",
"product-summary-image#shelf",
"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": {
@ -18,19 +18,11 @@
"children": ["product-rating-inline"]
},
"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": {
"props": {
"showBadge": false,
"aspectRatio": "1:1",
"maxHeight": 300
"maxHeight": 1000
}
},
@ -54,21 +46,11 @@
"product-list-price#summary": {
"props": {
"blockClass": "summary"
"blockClass": "summary",
"message": "de {listPriceValue} por"
}
},
"flex-layout.row#selling-price-savings": {
"props": {
"colGap": 2,
"preserveLayoutOnMobile": true,
"preventHorizontalStretch": true,
"marginBottom": 4
},
"children": [
"product-selling-price#summary",
"product-price-savings#summary"
]
},
"product-installments#summary": {
"props": {
"blockClass": "summary"
@ -81,9 +63,7 @@
},
"product-price-savings#summary": {
"props": {
"markers": [
"discount"
],
"markers": ["discount"],
"blockClass": "summary"
}
}

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

@ -30,4 +30,33 @@
font-weight: 300;
font-size: 13px;
color: #929292;
}
/* ----- SHELF ----- */
.listPrice--summary {
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: #bababa;
}
@media only screen and (max-width: 1024px) {
.listPrice--summary {
font-size: 12px;
line-height: 16px;
}
}
.sellingPrice--summary {
padding-top: 8px;
}
.sellingPrice--summary .sellingPriceValue--summary {
font-size: 24px;
line-height: 33px;
color: #000000;
}
@media only screen and (max-width: 1024px) {
.sellingPrice--summary .sellingPriceValue--summary {
font-size: 18px;
line-height: 25px;
}
}

12
styles/css/vtex.product-summar.css Normal file
View File

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

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

@ -1,42 +1,56 @@
.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 */
/* Grid breakpoints */
.container {
margin: 0;
border-radius: 0;
max-width: 1000px !important;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
.container .element {
padding: 0 8px;
}
.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) {
.container .element {
padding: 0 6px;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
@media only screen and (max-width: 639px) {
.container .element {
padding: 0 4px;
}
}
.brandName {
font-weight: 600;
.container .element .imageContainer {
width: 100%;
}
.container .element .imageContainer .image {
object-fit: cover !important;
}
.container .element .nameContainer {
padding: 16px 16px 8px;
}
@media only screen and (max-width: 1024px) {
.container .element .nameContainer {
padding: 16px 8px 8px;
}
}
.container .element .nameContainer .productBrand {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
line-height: 25px;
text-align: center;
color: #000000;
}
.image {
border-radius: 0.25rem;
}
@media only screen and (max-width: 1024px) {
.container .element .nameContainer .productBrand {
font-size: 14px;
line-height: 19px;
}
}

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

@ -1,31 +1,85 @@
.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 */
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
padding: 0 59.2px 113px;
}
.sliderTrackContainer {
max-width: 100%;
@media only screen and (min-width: 1920px) {
.sliderLayoutContainer--carousel {
padding: 0 379.2px 113px;
}
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
@media only screen and (max-width: 1024px) {
.sliderLayoutContainer--carousel {
padding: 0 57.2px 105px;
}
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
@media only screen and (max-width: 639px) {
.sliderLayoutContainer--carousel {
padding: 0 55.2px 65px;
}
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
.sliderLayoutContainer--carousel .sliderArrows {
padding: 0;
margin: 0;
}
.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow {
margin-left: 40px;
}
@media only screen and (min-width: 1920px) {
.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow {
margin-left: 360px;
}
}
.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow::before {
content: "";
width: 11.2px;
height: 29.6px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg");
}
.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow {
margin-right: 40px;
}
@media only screen and (min-width: 1920px) {
.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow {
margin-right: 360px;
}
}
.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow::after {
content: "";
width: 11.2px;
height: 29.6px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg");
}
.sliderLayoutContainer--carousel .sliderArrows .caretIcon {
display: none;
}
.sliderLayoutContainer--carousel .paginationDotsContainer {
bottom: 64px;
gap: 12px;
align-items: center;
}
@media only screen and (max-width: 639px) {
.sliderLayoutContainer--carousel .paginationDotsContainer {
bottom: 32px;
}
}
.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot {
width: 10px;
height: 10px;
margin: 0;
padding: 0;
background: #000000;
}
.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive {
width: 17px !important;
height: 17px !important;
border: 0.5px solid #000000;
background: #ffffff;
}

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

@ -15,14 +15,6 @@
width: 100% !important;
}
}
// @include mq(md, max)
// @media only screen and (max-width: 639px) {
// :global(.vtex-store-components-3-x-productImagesContainer--carousel) {
// background-color: blue;
// margin-bottom: 32px;
// }
// }
}
/* ----- RIGHT-COL ----- */

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

@ -26,3 +26,40 @@
font-size: 13px;
color: #929292;
}
/* ----- SHELF ----- */
.listPrice--summary {
// background-color: red;
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 400;
font-size: 14px;
line-height: 19px;
// text-align: center;
text-decoration-line: line-through;
color: #bababa;
@include mq(lg, max) {
font-size: 12px;
line-height: 16px;
}
}
.sellingPrice--summary {
padding-top: 8px;
// background-color: white;
.sellingPriceValue--summary {
// font-family: "Open Sans";
// font-style: normal;
// font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
@include mq(lg, max) {
font-size: 18px;
line-height: 25px;
}
}
}

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

@ -0,0 +1,54 @@
.container {
// background-color: green;
margin: 0;
border-radius: 0;
max-width: 1000px !important;
.element {
padding: 0 8px;
@include mq(lg, max) {
padding: 0 6px;
}
@include mq(md, max) {
padding: 0 4px;
}
.imageContainer {
// background: #ededed;
// background-color: yellow;
width: 100%;
.image {
// background: #ededed;
object-fit: cover !important;
// background-color: red;
}
}
.nameContainer {
padding: 16px 16px 8px;
@include mq(lg, max) {
padding: 16px 8px 8px;
}
.productBrand {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000000;
@include mq(lg, max) {
font-size: 14px;
line-height: 19px;
}
}
}
}
}

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

@ -0,0 +1,82 @@
.sliderLayoutContainer--carousel {
// background-color: aqua;
padding: 0 59.2px 113px;
@include mq(xl, min) {
padding: 0 379.2px 113px;
}
@include mq(lg, max) {
padding: 0 57.2px 105px;
}
@include mq(md, max) {
padding: 0 55.2px 65px;
}
.sliderArrows {
// background-color: blue !important;
padding: 0;
margin: 0;
&.sliderLeftArrow {
margin-left: 40px;
@include mq(xl, min) {
margin-left: 360px;
}
&::before {
content: "";
width: 11.2px;
height: 29.6px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg");
}
}
&.sliderRightArrow {
margin-right: 40px;
@include mq(xl, min) {
margin-right: 360px;
}
&::after {
content: "";
width: 11.2px;
height: 29.6px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg");
}
}
.caretIcon {
display: none;
}
}
.paginationDotsContainer {
// background-color: lightgreen;
bottom: 64px;
gap: 12px;
align-items: center;
@include mq(md, max) {
bottom: 32px;
}
.paginationDot {
width: 10px;
height: 10px;
margin: 0;
padding: 0;
background: #000000;
&--isActive {
width: 17px !important;
height: 17px !important;
border: 0.5px solid #000000;
background: #ffffff;
}
}
}
}