From fb8ea93a042bc0187721d9b5fad4238ca255127b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Mon, 23 Jan 2023 19:15:33 -0300 Subject: [PATCH] feat(pdp): Adiciona parcelamentos --- store/blocks/pdp/product.jsonc | 10 +- store/blocks/product-summary/quickview.json | 28 ++---- styles/css/agenciamagma.store-theme.css | 1 + styles/css/vtex.flex-layout.css | 2 +- styles/css/vtex.product-price.css | 18 +++- styles/css/vtex.product-quantity.css | 2 + styles/css/vtex.store-components.css | 57 ++++++++++-- .../product/agenciamagma.store-theme.scss | 3 +- .../sass/pages/product/vtex.flex-layout.scss | 2 +- .../pages/product/vtex.product-price.scss | 21 ++++- .../pages/product/vtex.product-quantity.scss | 6 +- .../pages/product/vtex.store-components.scss | 91 +++++++++++++++---- styles/sass/utils/_vars.scss | 26 +++--- 13 files changed, 198 insertions(+), 69 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 3a12e2f..8bfd2a8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -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, diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -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 diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index c50f96d..1d39b4b 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -26,4 +26,5 @@ font-size: 18px; line-height: 25px; color: #ffffff; + border-radius: 0%; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 97a6d76..82c16a2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -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; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 201270f..1ea5198 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -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; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 8b42529..11ace81 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -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%; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f33b37f..abb930d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -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; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index aa80407..22a2421 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -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%; } } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 53ea0f3..acb5cae 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -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; } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index e98fb4d..5db2a28 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -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; + } + } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index b42f7bc..019ef84 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -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%; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8c420fb..f7316d1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -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; } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..6f84d30 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -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;