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(main): cria product identifier, reference e price

Browse Source
This commit is contained in:
Andrea Matsunaga 2023-02-03 12:26:56 -03:00
parent 24d03fab83
commit effe348ef3
11 changed files with 173 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,16 +79,16 @@
"props": {
"width": "50%",
"preventVerticalStretch": true,
"rowGap": 0
"blockClass": "right-col"
},
"children": [
"flex-layout.row#product-name",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"product-identifier.product",
// "product-rating-summary",
// "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
// "product-separator",
"sku-selector",
"product-quantity",
"product-assembly-options",
@ -102,7 +102,8 @@
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
"marginBottom": 3,
"blockClass": "product-name"
},
"children": ["vtex.store-components:product-name"]
},

20
store/blocks/product-price.jsonc
View File

@ -1,14 +1,11 @@
{
"flex-layout.row#selling-price": {
"props": {
"colGap": 2,
"preserveLayoutOnMobile": true,
"preventHorizontalStretch": true,
"marginBottom": 4
"blockClass": "selling-price"
},
"children": [
"product-selling-price"
]
"children": ["product-selling-price"]
},
"flex-layout.row#list-price-savings": {
@ -19,9 +16,14 @@
"marginBottom": 2,
"marginTop": 5
},
"children": [
"product-list-price",
"product-price-savings"
]
"children": ["product-list-price", "product-price-savings"]
},
"product-installments": {
"props": {
"markers": ["myMarker"],
"message": "{installmentsNumber} x de {installmentValue} sem juros",
"installmentsCriteria": "max-quantity-without-interest"
}
}
}

4
styles/configs/font-faces.css Normal file
View File

@ -0,0 +1,4 @@
@font-face {
font-family: "Open Sans", sans-serif;
src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
}

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

@ -7,9 +7,11 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
/* ----- PRODUCT-MAIN ----- */
.flexRowContent--productMain {
padding: 0 40px;
gap: 32px;
justify-content: center;
}
@media only screen and (min-width: 1920px) {
.flexRowContent--productMain {
@ -31,4 +33,17 @@
.flexRowContent--productMain .stretchChildrenWidth:first-child {
margin-bottom: 32px;
}
}
/* ----- RIGHT-COL ----- */
.flexCol--right-col .flexRowContent--product-name {
text-align: right;
}
@media only screen and (max-width: 1024px) {
.flexCol--right-col .flexRowContent--product-name {
text-align: left;
}
.flexCol--right-col .flexRowContent--product-name .stretchChildrenWidth {
margin: 0;
}
}

27
styles/css/vtex.product-identifier.css
View File

@ -1,3 +1,28 @@
/*
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 */
.product-identifier--productReference {
margin-bottom: 1rem;
display: flex;
justify-content: flex-end;
margin-bottom: 24px;
}
@media only screen and (max-width: 1024px) {
.product-identifier--productReference {
justify-content: flex-start;
}
}
.product-identifier--productReference .product-identifier__label,
.product-identifier--productReference .product-identifier__separator {
display: none;
}
.product-identifier--productReference .product-identifier__value {
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}

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

@ -1,79 +1,27 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
/*
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 */
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
margin-bottom: 8px;
font-family: "Open Sans";
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installments .installmentsNumber,
.installments .currencyContainer {
font-weight: 700;
}

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

@ -7,11 +7,13 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
.container {
margin: 0;
padding: 0;
}
/* ----- PRODUCT-MAIN ----- */
.productImagesGallerySlide {
width: 100% !important;
margin: 0;
@ -48,4 +50,12 @@
.carouselGaleryThumbs .productImagesThumb.productImagesThumbActive .carouselThumbBorder {
border-radius: 8px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
}
/* ----- RIGHT-COL ----- */
.productBrand--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}

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

@ -1,19 +1,18 @@
/* ----- PRODUCT-MAIN ----- */
.flexRowContent--productMain {
// background-color: red;
padding: 0 40px;
gap: 32px;
justify-content: center;
@include mq(xl) {
padding: 0 360px;
}
@include mq(lg, max) {
// background-color: red;
flex-direction: column;
.stretchChildrenWidth {
width: 100% !important;
// background-color: blue;
:first-child {
padding-right: 0;
@ -27,3 +26,20 @@
}
}
}
/* ----- RIGHT-COL ----- */
.flexCol--right-col {
// background-color: red;
.flexRowContent--product-name {
text-align: right;
@include mq(lg, max) {
text-align: left;
.stretchChildrenWidth {
margin: 0;
}
}
}
}

23
styles/sass/pages/product/vtex.product-identifier.scss Normal file
View File

@ -0,0 +1,23 @@
.product-identifier--productReference {
display: flex;
justify-content: flex-end;
// background-color: yellow;
margin-bottom: 24px;
@include mq(lg, max) {
justify-content: flex-start;
}
.product-identifier__label,
.product-identifier__separator {
display: none;
}
.product-identifier__value {
// font-family: "Open Sans";
// font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
}

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

@ -0,0 +1,25 @@
.sellingPriceValue {
// background-color: yellowgreen;
// font-family: "Open Sans";
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments {
margin-bottom: 8px;
font-family: "Open Sans";
font-size: 16px;
line-height: 22px;
color: #929292;
.installmentsNumber,
.currencyContainer {
font-weight: 700;
}
// .installmentValue {
// display: inline;
// }
}

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

@ -1,23 +1,23 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
.container {
margin: 0;
padding: 0;
}
/* ----- PRODUCT-MAIN ----- */
.productImagesGallerySlide {
width: 100% !important;
margin: 0;
.productImageTag {
// background-color: yellow;
width: 100%;
// height: 100% !important;
aspect-ratio: 1 / 1;
object-fit: cover !important;
}
}
.carouselGaleryThumbs {
// background-color: blue;
margin-top: 16px;
display: block;
@ -55,3 +55,12 @@
}
}
}
/* ----- RIGHT-COL ----- */
.productBrand--quickview {
// font-family: "Open Sans";
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}