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

feat(pdp): Adiciona parcelamentos

Browse Source
This commit is contained in:
Cainã Milech 2023-01-23 19:15:33 -03:00
parent e1ffa464a0
commit fb8ea93a04
13 changed files with 198 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,6 +95,7 @@
},
"product-images": {
"props": {
"thumbnailsOrientation": "horizontal",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
@ -111,7 +112,7 @@
"flex-layout.row#product-name",
"html#codigo",
"product-rating-summary",
"flex-layout.row#list-price-savings",
/*"flex-layout.row#list-price-savings", desconto*/
"flex-layout.row#selling-price",
"product-installments",
/*"product-separator",*/
@ -127,6 +128,13 @@
]
},
"product-installments": {
"props": {
"installmentsCriteria": "max-quantity-without-interest",
"blockClass": "parcelamentos"
}
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3,

28
store/blocks/product-summary/quickview.json
View File

@ -1,9 +1,6 @@
{
"modal-trigger#quickview": {
"children": [
"icon-expand",
"modal-layout#quickview"
],
"children": ["icon-expand", "modal-layout#quickview"],
"props": {
"blockClass": "quickview"
}
@ -63,9 +60,7 @@
},
"flex-layout.col#quickview-product-quantity": {
"children": [
"product-summary-quantity#quickview"
]
"children": ["product-summary-quantity#quickview"]
},
"product-summary-quantity#quickview": {
"props": {
@ -74,18 +69,14 @@
}
},
"flex-layout.col#quickview-add-to-card-button": {
"children": [
"add-to-cart-button"
],
"children": ["add-to-cart-button"],
"props": {
"width": "grow"
}
},
"flex-layout.row#quickview-actions-2": {
"children": [
"link.product#button-pdp"
]
"children": ["link.product#button-pdp"]
},
"link.product#button-pdp": {
"props": {
@ -107,15 +98,10 @@
}
},
"flex-layout.col#quickview-images": {
"children": [
"product-images#quickview"
]
"children": ["product-images#quickview"]
},
"flex-layout.col#quickview-product-details": {
"children": [
"modal-content#quickview",
"modal-actions#quickview"
],
"children": ["modal-content#quickview", "modal-actions#quickview"],
"props": {
"preventVerticalStretch": true,
"blockClass": "quickviewDetails"
@ -134,7 +120,7 @@
"blockClass": "quickview"
}
},
"product-images#quickview" : {
"product-images#quickview": {
"props": {
"blockClass": "quickview",
"showNavigationArrows": true

1
styles/css/agenciamagma.store-theme.css
View File

@ -26,4 +26,5 @@
font-size: 18px;
line-height: 25px;
color: #ffffff;
border-radius: 0%;
}

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

@ -13,10 +13,10 @@
}
.flexRowContent--preco {
border: 1px solid red;
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
margin: 0;
}

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

@ -7,6 +7,20 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.interestRate {
color: red;
.installments--parcelamentos {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installments--parcelamentos .installmentsNumber {
font-weight: 700;
}
.installments--parcelamentos .installmentValue {
font-weight: 700;
}
.installments--parcelamentos .installmentValue::before {
content: "de ";
font-weight: 400;
}

2
styles/css/vtex.product-quantity.css
View File

@ -71,6 +71,7 @@
font-size: 16px;
line-height: 22px;
color: #000000;
border-radius: 0%;
}
:global(.vtex-numeric-stepper__minus-button) {
@ -80,4 +81,5 @@
font-size: 16px;
line-height: 22px;
color: #000000;
border-radius: 0%;
}

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

@ -8,7 +8,6 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
border: 1px solid red;
margin-left: 40px;
margin-right: 40px;
}
@ -17,6 +16,18 @@
background: red;
}
/*:global(.vtex-store-components-3-x-productImage) {
width: 664px;
height: 664px;
}*/
/*:global(.vtex-store-components-3-x-productImageTag) {
width: 664px;
height: 664px;
}
.caretIcon {
display: none;
}*/
.productBrand--quickview {
font-weight: 300;
font-size: 20px;
@ -27,6 +38,7 @@
.skuSelectorContainer--skus {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
}
.frameAround--skus {
@ -37,16 +49,16 @@
margin-left: -5px;
}
.skuSelectorName {
.skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
}
.skuSelectorName::after {
content: "OUTRAS CORES";
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
content: "OUTROS TAMANHOS";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
color: color-gray6;
}
.skuSelectorItemTextValue--skus {
@ -82,12 +94,35 @@
color: #000000;
}
.skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName::after {
content: "OUTRAS CORES";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
}
.skuSelectorSubcontainer--cor .skuSelectorItemImage--skus {
height: 48px;
width: 48px;
}
.skuSelectorSubcontainer--cor .skuSelectorInternalBox--skus {
width: 48px;
height: 48px;
}
.diagonalCross--skus {
height: 20px;
}
.skuSelectorSelectorImageValue {
display: none;
}
.shippingContainer {
border: 1px solid red;
display: flex;
align-items: end;
margin-top: 16px;
@ -104,7 +139,7 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
color: color-gray6;
}
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
@ -120,14 +155,20 @@
display: flex;
align-items: center;
text-decoration-line: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000;
}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
background-color: #000000;
border: none;
border-radius: inherit;
margin-left: -1px;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
@ -137,5 +178,5 @@
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
color: #fff;
}

3
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -10,12 +10,13 @@
height: 49px;
:global(.vtex-button) {
background-color: #000000;
background-color: $color-black-100;
border: none;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
border-radius: 0%;
}
}

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

@ -4,10 +4,10 @@
}
.flexRowContent--preco {
border: 1px solid red;
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
margin: 0;
}

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

@ -1,3 +1,20 @@
.interestRate {
color: red;
.installments--parcelamentos {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
.installmentsNumber {
font-weight: 700;
}
.installmentValue {
font-weight: 700;
&::before {
content: "de ";
font-weight: 400;
}
}
}

6
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -64,7 +64,8 @@
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
color: $color-black-100;
border-radius: 0%;
}
:global(.vtex-numeric-stepper__minus-button) {
@ -73,5 +74,6 @@
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
color: $color-black-100;
border-radius: 0%;
}

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

@ -1,5 +1,4 @@
.container {
border: 1px solid red;
margin-left: 40px;
margin-right: 40px;
}
@ -8,18 +7,34 @@
background: red;
}
//IMAGENS
/*:global(.vtex-store-components-3-x-productImage) {
width: 664px;
height: 664px;
}*/
/*:global(.vtex-store-components-3-x-productImageTag) {
width: 664px;
height: 664px;
}
.caretIcon {
display: none;
}*/
//NOME DO PRODUTO
.productBrand--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
color: $color-gray8;
}
//SKUS
.skuSelectorContainer--skus {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
}
.frameAround--skus {
@ -30,16 +45,18 @@
margin-left: -5px;
}
.skuSelectorName {
font-size: 0;
.skuSelectorSubcontainer--tamanho {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTRAS CORES";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
&::after {
content: "OUTROS TAMANHOS";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
}
}
}
@ -51,7 +68,7 @@
}
.skuSelectorInternalBox--skus {
border: 1px solid #989898;
border: 1px solid $color-gray7;
border-radius: 100%;
width: 40px;
height: 40px;
@ -62,7 +79,7 @@
.skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus {
border: 2px solid #000000;
border: 2px solid $color-black-100;
border-radius: 100%;
width: 40px;
height: 40px;
@ -75,10 +92,39 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #000000;
color: $color-black-100;
}
}
.skuSelectorSubcontainer--cor {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTRAS CORES";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
}
}
.skuSelectorItemImage--skus {
height: 48px;
width: 48px;
}
.skuSelectorInternalBox--skus {
width: 48px;
height: 48px;
}
}
.diagonalCross--skus {
height: 20px;
}
.skuSelectorSelectorImageValue {
display: none;
}
@ -86,7 +132,6 @@
//FRETE
.shippingContainer {
border: 1px solid red;
display: flex;
align-items: end;
margin-top: 16px;
@ -104,7 +149,7 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
color: color-gray6;
}
}
@ -123,15 +168,23 @@
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
:last-child {
color: $color-black-100;
}
}
:global(.vtex__icon-external-link) {
display: none;
}
:global(.vtex-button) {
width: 49px;
height: 49px;
background-color: #000000;
background-color: $color-black-100;
border: none;
border-radius: inherit;
margin-left: -1px;
}
:global(.vtex-button__label) {
@ -142,7 +195,7 @@
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
color: $color-white;
}
}
}

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

@ -1,4 +1,5 @@
$color-black: #292929;
$color-black-100: #000000;
$color-white: #fff;
@ -7,6 +8,9 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
$color-gray6: #929292;
$color-gray7: #989898;
$color-gray8: #575757;
$color-blue: #4267b2;
@ -14,18 +18,18 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;