From 1e6eeab11e58936bbbcac99d628f5c5d9eacf51f Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Sun, 18 Dec 2022 12:31:19 -0300 Subject: [PATCH] feat(cart): estiliza summary --- checkout/src/arquivos/js/components/Footer.js | 25 +- checkout/src/arquivos/sass/checkout.scss | 1 + .../sass/checkout/_checkout-carrinho.scss | 319 ++++++++++++------ checkout/src/arquivos/sass/lib/_slick.scss | 79 +++-- .../src/arquivos/sass/partials/_footer.scss | 2 +- .../arquivos/sass/partials/_prateleira.scss | 105 +++++- .../src/arquivos/sass/utils/_variaveis.scss | 6 +- 7 files changed, 379 insertions(+), 158 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 5815e2f..6e11287 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -26,6 +26,7 @@ export default class Footer { this.iconMinus = await waitElement(".icon-minus-sign"); this.iconPlus = await waitElement(".icon-plus-sign"); this.prateleira = await waitElement(".footerCheckout__prateleira"); + this.naoSeiMeuCep = await waitElement(".ship-postalCode"); // this.prateleiraSlick = await waitElement(".prateleira__carousel") } @@ -36,6 +37,8 @@ export default class Footer { this.continueShopping.textContent = "Continuar comprando"; this.frete.textContent = "Frete"; this.unidade.textContent = "Unidade"; + this.naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal"; + } } @@ -76,6 +79,11 @@ export default class Footer { async renderPrateleira() { if (this.prateleira) { + const prateleiraTitle = document.createElement("h2"); + const titleNode = document.createTextNode("Você também pode gostar:"); + prateleiraTitle.classList.add("prateleira__title"); + prateleiraTitle.appendChild(titleNode); + const prateleiraSlick = document.createElement("ul"); prateleiraSlick.classList.add("prateleira__carousel"); @@ -92,13 +100,17 @@ export default class Footer { console.log(product) const productImageUrl = product.items[0].images[0].imageUrl; - console.log("productImageUrl:", productImageUrl); const productName = product.productName; - console.log("productName:", productName); const productSkus = product.items; - console.log("productSkus:", productSkus); + const productLink = product.link; let skusStructure = ""; + + console.log("productImageUrl:", productImageUrl); + console.log("productName:", productName); + console.log("productSkus:", productSkus); + console.log("productLink:", productLink); + productSkus.forEach((sku) => { console.log("sku:", sku); skusStructure += ` @@ -116,14 +128,17 @@ export default class Footer {

${productName}

- + + +
` }) - prateleiraSlick.innerHTML = cardsStructure; + this.prateleira.appendChild(prateleiraTitle); this.prateleira.appendChild(prateleiraSlick); + prateleiraSlick.innerHTML = cardsStructure; if(window.innerWidth > 1024) { this.addCarrossel(prateleiraSlick); diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..14b62ba 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,5 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira"; @import "./checkout/checkout.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 633130c..91744cc 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -419,7 +419,7 @@ .item-remove { width: 10px; height: 10px; - + @media (max-width: 490px) { top: 0; } @@ -453,19 +453,25 @@ width: max-content; .srp-container { - padding: 0 0 0 10px; + padding: 0; @include mq(md, max) { padding: 0 16px; } .srp-main-title { - margin: 32px 0 12px; - font-style: normal; - font-weight: normal; + margin: 0 0 11px; + line-height: 33px; + font-family: $font-family; font-size: 24px; - line-height: 28px; - color: $color-gray2; + font-weight: 400; + font-style: normal; + color: $black-500; + + display: flex; + align-items: center; + text-align: center; + @include mq(md, max) { margin-top: 0; @@ -473,24 +479,38 @@ } .srp-description { - color: $color-gray2; - font-size: 12px; + margin: 0 0 11px; + width: 100%; + max-width: 276px; line-height: 18px; - margin: 0 0 12px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $color-gray2; + } button.shp-open-options { - background-color: $color-gray5; + margin: 0; + padding: 12px 41px; + display: flex; + align-items: center; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; - letter-spacing: 0.05em; + border-radius: 8px; line-height: 19px; - font-weight: 500; - outline: none; - padding: 12px 40px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-500; + background: $gray-100; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + transition: all 0.2s linear; + outline: none; &:hover { background-color: lighten($color-gray5, 5); @@ -514,18 +534,27 @@ } .srp-pickup-my-location__button { - background-color: $black-300; - border: none; - border-radius: 5px; - color: $color-white; - outline: none; width: 100%; + margin-top: 10px; + padding: 12px 35px; + border: none; + border-radius: 8px; + background: #00c8ff; + transition: all 0.2s linear; + outline: none; + + span { + line-height: 18px; + font-family: "Open Sans",sans-serif; + font-size: 13px; + font-weight: 700; + font-style: normal; + color: $color-white; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.05em; + } - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - letter-spacing: 0.05em; &:hover { background-color: lighten($black-300, 5); @@ -538,9 +567,12 @@ } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 10px; + padding: 0; &__wrapper { + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + background-color: $color-white; border-radius: 100px; width: 100%; @@ -557,13 +589,21 @@ border-radius: 100px; } - .blue { - color: $color-blue; - } + // .blue { + // // color: $color-blue; + // } label { width: 50%; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $black-500; + &:active { background-color: #f0f0f0; } @@ -571,43 +611,68 @@ } .srp-postal-code { + + &__form { + width: 100%; + + .vtex-shipping-preview-0-x-postalCodeForgotten { + gap: 8px; + } + } + + .ship-country { + display: none; + } + .ship-postalCode { + width: 172px; + label { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin-bottom: 2px; line-height: 14px; + font-family: $font-family; + font-size: 12px; + font-weight: normal; + font-style: normal; color: $black-300; - margin-bottom: 12px; } input { + width: 172px; + height: 36px; + padding: 12px 8px; border: 1px solid $color-gray3; border-radius: 5px; box-shadow: none; - color: $color-gray3; font-size: 12px; - height: 36px; - padding: 12px 8px; - width: 172px; + color: $color-gray3; } & ~ button { - background-color: $black-300; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + width: 100px; height: 36px; - letter-spacing: 1px; - outline: none; - position: absolute; - right: -150px; - top: 36px; - transition: all 0.2s linear; - width: 96px; + padding: 8px 11px; + border: none; + border-radius: 8px; + line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + font-style: normal; + color: $color-white; + background: $blue-300; + + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; text-transform: uppercase; + transition: all 0.2s linear; + outline: none; + + // position: absolute; + // right: -150px; + // top: 36px; &:hover { background-color: lighten($black-300, 5); @@ -619,13 +684,14 @@ } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; + margin-top: 4px; line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-family: $font-family-secundary; + font-size: 10px; + font-weight: 400; + font-style: normal; + color: $black-500; + text-decoration-line: underline; } span.help.error { @@ -706,6 +772,16 @@ .coupon-data { #cart-link-coupon-add { text-decoration: none; + + span { + line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $black-500; + } + &:hover { text-decoration: underline; cursor: pointer; @@ -739,19 +815,24 @@ } .coupon-label label { - margin-bottom: 12px; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin-bottom: 4px; line-height: 14px; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; color: $color-gray2; - cursor: none; + text-align: left; } .coupon-fields { margin-bottom: 32px; + span { + display: flex; + gap: 15px; + }; + @include mq(sm, max) { span { display: flex; @@ -766,14 +847,21 @@ } input { - border: 2px solid $color-gray3; + width: 100%; + max-width: 204px; + height: 36px; + padding: 11px 16px; + border: 1px solid $color-gray5; border-radius: 5px; - box-shadow: none; - color: $color-gray4; + line-height: 14px; + font-family: $font-family-secundary; font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; + font-weight: 400; + font-style: normal; + color: $color-gray-rename; + background: #FFFFFF; + + box-shadow: none; @include mq(sm, max) { max-width: 100%; @@ -781,19 +869,31 @@ } } + .loading-coupon { + display: none; + } + button { - background: $black-300; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + width: 133px; height: 36px; - letter-spacing: 1px; - margin-left: 6px; + border: none; + border-radius: 8px; + line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-500; + background: $blue-300; + + display: flex; + align-items: center; + justify-content: center; + letter-spacing: 0.05em; + text-transform: uppercase; outline: none; transition: all 0.2s linear; - width: 94px; - text-transform: uppercase; + // margin-left: 6px; @include mq(md, max) { width: 138px; @@ -812,6 +912,15 @@ .accordion-group { tr { + padding: 10px 0; + line-height: 16px; + font-family: $font-family-secundary; + font-size: 14px; + font-weight: 400; + font-style: normal; + color: $black-300; + + text-align: right; border-color: #e5e5e5; td { @@ -826,7 +935,7 @@ font-size: 14px; line-height: 16px; color: $black-300; - padding: 12px 0; + padding: 10px 0; } &.info { @@ -842,10 +951,11 @@ tfoot { td.info, td.monetary { - font-style: normal; - font-weight: normal; + line-height: 25px; + font-family: $font-family; font-size: 18px; - line-height: 21px; + font-weight: 700; + font-style: normal; color: $black-300; } } @@ -882,40 +992,49 @@ } a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 12px; + margin: 0; line-height: 14px; - color: $color-blue; + font-family: $font-family-secundary; + font-size: 12px; + font-weight: 400; + font-style: normal; + color: $black-500; + + // text-align: right; } } .btn-place-order-wrapper { a { - background: $color-green; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; + background: $blue-300; transition: ease-in 0.22s all; - padding: 12px 19px; + + text-align: center; + + padding: 12px 0; &:hover { - background-color: darken($color-green, 5); + background-color: darken($blue-300, 5); } &:after { content: "finalizar compra"; - font-family: $font-family; - font-weight: 500; - font-size: 13px; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; - vertical-align: middle; line-height: 19px; + font-family: $font-family; + font-size: 14px; + font-weight: 700; + font-style: normal; + letter-spacing: 0.05em; + text-transform: uppercase; text-shadow: none; + vertical-align: middle; + color: $black-500; + + text-align: center; } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 60f95f6..564b2f4 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,8 +1,6 @@ /* Slider */ .slick-slider { - margin: 0; - position: relative; display: block; box-sizing: border-box; @@ -16,11 +14,14 @@ touch-action: pan-y; -webkit-tap-highlight-color: transparent; } + .slick-list { + // height: 100%; + margin: 0 -8px 0 -8px; + position: relative; overflow: hidden; display: block; - margin: 0 -8px 0 -8px; padding: 0; &:focus { @@ -42,6 +43,8 @@ } .slick-track { + // height: 100%; + position: relative; left: 0; top: 0; @@ -65,8 +68,8 @@ } .slick-slide { margin: 0 8px; - // width: 242px; + //código prévio float: left; height: 100%; min-height: 1px; @@ -74,9 +77,11 @@ [dir="rtl"] & { float: right; } + img { display: block; } + &.slick-loading img { display: none; } @@ -101,41 +106,51 @@ border: 1px solid transparent; } } + .slick-arrow { - font-size: 0; position: absolute; + top: 50%; + border: 0; + font-size: 0; + z-index: 4; + transform: translateY(-50%); } + .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") - no-repeat center center; - z-index: 4; + no-repeat center center; left: 10px; + } .slick-next { - z-index: 4; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; right: 10px; } -.slick-arrow.slick-hidden { - display: none; -} -.slick-dots { - li { - margin: 0.5em; - button { - overflow: hidden; - text-indent: 999999999px; - height: 1em; - width: 1em; - border-radius: 1em; - background-color: #fff; - :focus { - outline: none; - } - } - &.slick-active button { - &:focus { - outline: none; - } - } - } -} + +// .slick-arrow.slick-hidden { +// display: none; +// } + +// .slick-dots { +// li { +// margin: 0.5em; +// button { +// overflow: hidden; +// text-indent: 999999999px; +// height: 1em; +// width: 1em; +// border-radius: 1em; +// background-color: #fff; +// :focus { +// outline: none; +// } +// } +// &.slick-active button { +// &:focus { +// outline: none; +// } +// } +// } +// } + diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 1b1c50e..01bd1c6 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -12,7 +12,7 @@ &__prateleira { // margin-top: 101px; height: 448px; - background-color: green; + // background-color: green; width: 100%; } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 756f5f9..828a4f2 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1,31 +1,100 @@ /* _prateleira.scss */ .footerCheckout__prateleira { - // estilos no _footer.scss -} + // margin-top: 101px; + height: 448px; + // background-color: green; -.prateleira__carousel { - margin: 0; - list-style-type: none; -} + .prateleira__title { + margin: 0 0 20px; + line-height: 38px; + font-family: $font-family-secundary; + font-size: 24px; + font-weight: 400; + // font-style: normal; + text-align: center; + color: $black-500; + } -.prateleira__item { - width: 242px; - height: 390px; - background: red; + .prateleira__carousel { + // (_slick.scss .slick-slider) + margin: 0; + height: 390px; + } + .prateleira__item { + // height: 100%; + // background: yellow; - &--image-container { - width: 242px; + button { + border: none; + border-radius: 8px; + line-height: 18px; + font-size: 13px; + font-family: $font-family; + font-weight: 700; + color: $color-white; + background: $blue-300; + text-align: center; + text-transform: uppercase; + + font-style: normal; + display: flex; + align-items: center; + letter-spacing: 0.05em; + } + + &--image { height: 242px; - - img { - width: 242px; - height: 242px; - } } &--description { - background: yellow; + display: flex; + flex-direction: column; + gap: 20px; } + &--name { + margin: 20px 0 0; + font-family: $font-family; + // font-style: normal; + // font-weight: 400; + line-height: 18px; + font-size: 13px; + text-align: center; + color: $black-500; + } + + &--options { + margin: 0 auto; + display: flex; + gap: 5px; + list-style: none; + + button { + padding: 5px; + } + } + + &--link { + button { + width: 100%; + padding: 12px 0; + justify-content: center; + } + } + } } + +// .slick-track { + +// &:nth-child(3) { + +// div li div { +// background: red; +// } +// // &--image-container { +// // //#B1D7F1; +// // } +// } +// } + diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 296527a..06f0f95 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -12,13 +12,15 @@ $color-white: #ffffff; $color-gray3: #f0f0f0; $color-gray-rename: #c4c4c4; +$color-gray2: #7d7d7d; +$gray-100: #EDEDED; $gray-300: #989898; $blue-300: #00C8FF; +$color-gray5: #e5e5e5; + $color-gray: #6c6c6c; -$color-gray2: #7d7d7d; $color-gray4: #8d8d8d; -$color-gray5: #e5e5e5; $color-blue: #4267b2;