feat(pdp): Adiciona parcelamentos
This commit is contained in:
parent
e1ffa464a0
commit
fb8ea93a04
@ -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,
|
||||
|
@ -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
|
||||
|
@ -26,4 +26,5 @@
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #ffffff;
|
||||
border-radius: 0%;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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%;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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%;
|
||||
}
|
||||
|
@ -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 {
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
.skuSelectorName {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "OUTRAS CORES";
|
||||
content: "OUTROS TAMANHOS";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
||||
@ -19,7 +23,7 @@ $grid-breakpoints: (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
xl: 1200px,
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
@ -27,5 +31,5 @@ $z-index: (
|
||||
level2: 10,
|
||||
level3: 15,
|
||||
level4: 20,
|
||||
level5: 25
|
||||
level5: 25,
|
||||
) !default;
|
||||
|
Loading…
Reference in New Issue
Block a user