diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ae02531..7ca15ae 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,13 +7,19 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.onUpdate(); + this.addPaymentsIcons(); + this.addPciIcons(); + this.onUpdateShelf(); } async selectors() { //Para verificar se o carrinho está vazio e remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.checkoutVazio = await waitElement(".empty-cart-content"); + this.paymentIconsContainer = await waitElement(".footerCheckout__payments"); + this.iconPci = await waitElement(".footerCheckout__vtexpci"); + this.shelfContainer = $(".footerCheckout__prateleira"); } onUpdate() { @@ -21,22 +27,130 @@ export default class Footer { // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver let target = this.checkoutVazio; - let config = { childList: true, attributes: true }; + let config = { attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); + mutations.forEach((mutation) => { + if (target.style.display === "block") { + this.shelfContainer.empty(); + $(".slick-slider").removeClass("slick-slider slick-initialized"); + } else { + this.createShelf(); + } }); }); observer.observe(target, config); } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - if ($(elemento)) { - $(elemento).slick({ + + async onUpdateShelf() { + //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: + // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver + // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver + let target = await waitElement(".footerCheckout__prateleira"); + let config = { childList: true }; + let observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.addedNodes.length > 0) { + if ($(".slick-slide").length <= 0) { + this.addCarrossel(this.shelfContainer); + } + } + }); + }); + + observer.observe(target, config); + + $(window).on("hashchange", () => { + const hash = window.location.hash.replace("#/", ""); + + if (hash !== "cart") { + this.shelfContainer.empty(); + $(".slick-slider").removeClass("slick-slider slick-initialized"); + } else { + this.createShelf(); + } + }); + } + + async addCarrossel(element) { + if (element) { + element.slick({ + lazyLoad: "ondemand", + dots: false, + arrows: true, + infinite: true, slidesToShow: 4, slidesToScroll: 1, + speed: 500, + responsive: [ + { + breakpoint: 1024, + settings: { + lazyLoad: "ondemand", + slidesToShow: 3, + slidesToScroll: 1, + }, + }, + { + breakpoint: 375, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + }, + }, + ], }); } } + + addPaymentsIcons() { + const html = ` + + + + + + + + `; + + if (this.paymentIconsContainer) { + this.paymentIconsContainer.innerHTML = html; + } + } + + addPciIcons() { + const html = ` + + `; + + if (this.iconPci) { + this.iconPci.innerHTML = html; + } + } + + async createShelf() { + const data = await fetch( + "/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ); + const products = await data.json(); + const hash = window.location.hash.replace("#/", ""); + + const html = products.map( + (product) => ` +
+ ` + ); + + if (this.shelfContainer && hash === "cart") { + this.shelfContainer.html(html); + } + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index c9d6666..3138faa 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -48,11 +48,12 @@ export default class Header { this.progressBar.innerHTML = progressBar; this.isActive(); } + isActive() { $(`.progress-bar__status.active`).removeClass("active"); const hash = window.location.hash.replace("#/", ""); $(`.progress-bar__status.${hash}`).addClass("active"); - console.log(`.progress-bar__status .${hash}`); + if (hash === "email" || hash === "shipping") { $(`.progress-bar__status.profile`).addClass("active"); } diff --git a/checkout/src/arquivos/js/config/slick.js b/checkout/src/arquivos/js/config/slick.js deleted file mode 100644 index e69de29..0000000 diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..e1ffa9c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,392 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + .client-pre-email { + border-color: $color-gray4; + font-family: $font-family; + padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; + .link-cart { + a { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 28px; + line-height: 33px; + text-transform: uppercase; + color: $color-black3; - &:hover { - color: lighen($color-black, 10); - } - } - } + &:hover { + color: lighen($color-black, 10); + } + } + } - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - h3 { - margin-bottom: 16px; + h3 { + margin-top: -85px; + margin-bottom: 23px; - span { - color: #303030; - font-size: 24px; - } + span { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 40px; + line-height: 47px; + text-transform: uppercase; - small { - color: $color-gray4; - } - } - } + color: $color-black3; + } - .client-email { - margin: 0 0 16px; + small { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 40px; + line-height: 47px; + text-transform: uppercase; - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + color: $color-black3; + } + } + } - @media (max-width: 490px) { - width: auto; - } - } + .client-email { + margin: 0 0 16px; - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + input { + width: 100%; + max-width: 765px; + margin-right: 205px; + box-shadow: none; + color: $color-black3; + font-family: $font-family; + padding: 0 16px; + border: 1px solid $color-black3; + box-sizing: border-box; + border-radius: 5px 0px 0px 5px; - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + @media (max-width: 490px) { + width: auto; + } + } - span.help.error { - color: red; - } - } + button { + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; + border: none; + font-family: $font-family; + font-weight: 700; + font-size: 28px; + line-height: 38px; + text-transform: uppercase; + color: $color-black3; + height: 54px; + width: 100%; + max-width: 219px; + right: 188px; + top: 0; - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - h3 { - color: #303030; - margin: 0 0 8px 0; - } + span.help.error { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-red; + } + } - ul { - margin: 0; + .emailInfo { + width: 100%; + max-width: 777px; + max-height: 239px; + padding: 16px 16px 26px; + background-color: $color-white; + border: 1px solid $color-gray4; + border-radius: 0; - li { - span { - color: $color-black; - } + h3 { + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + margin: 0 0 14px 0; + } - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + ul { + margin: 0; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + li { + margin-top: 1px; + line-height: unset; + span { + color: $color-black; + } - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + i::before { + color: $color-blue2; + font-size: 1.5rem; + opacity: 1; + } + } + } - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + .icon-lock { + position: absolute; + font-size: unset; + bottom: -23px; + right: 1px; + color: #eaf0ea; + z-index: 1; - i::before { - fill: #303030; - } - } + &::before { + color: $color-black; + font-size: 153px; + opacity: 0.5; + } + } + } + } - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0; + border: 1px solid $color-gray4; + font-family: $font-family; + padding: 16px; - .accordion-inner { - padding: 0; + .accordion-heading { + span { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 32px; + line-height: 37px; - /* General configurations */ + color: $color-black; - .client-notice { - color: $color-black; - } + margin-bottom: 8px; + padding: 0; - p { - label { - color: $color-black; - font-weight: 500; - } + i::before { + fill: #303030; + } + } - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } - .help.error { - color: red; - } - } + .accordion-inner { + padding: 0; - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + /* General configurations */ - .state-inscription-box span { - font-weight: 500; - } + .client-notice { + color: $color-black; + } + .input-small { + width: 100%; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + p { + label { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 38px; + color: $color-gray2; + display: flex; + } - &:hover { - background: lighten($color-black, 5); - } + select, + input { + width: 100%; + box-sizing: border-box; + border-radius: 0; + border: 1px solid $color-gray4; + box-shadow: none; + height: 61px; - &:active { - background: darken($color-black, 5); - } - } + opt-in-newsletter { + width: 35px; + height: 35px; + margin-right: 8px; + } + } - /* Shipping configurations */ + .help.error { + color: red; + } - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + &.client-email { + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + &.client-first-name, + &.client-document { + width: calc(50% - 14.5px); + margin-right: 28px; + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + &.client-last-name, + &.client-phone { + width: calc(50% - 14.5px); + } + } - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; + font-weight: 500; + text-decoration: underline; + } + } - svg path { - fill: #d8c8ac; - } - } - } - } + .state-inscription-box span { + font-weight: 500; + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + button.submit { + font-family: $font-family; + font-weight: 700; + font-size: 28px; + line-height: 38px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $color-white; + border: none; + border-radius: 5px; + background: $color-blue2; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; + width: 100%; + &:hover { + background: lighten($color-blue3, 5); + } - .shp-summary-group-info { - border-color: $color-gray4; - } + &:active { + background: darken($color-blue4, 5); + } + } - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + /* Shipping configurations */ - @include mq(md, max) { - background-position: 8px 9px; - } + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 0; - .shp-summary-group-price { - padding-right: 16px; - } + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - .shp-summary-package { - padding-left: 16px; - } + svg path { + fill: #d8c8ac; + } + } + } + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + .shp-summary-group-info { + border-color: $color-gray4; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; + + @include mq(md, max) { + background-position: 8px 9px; + } + + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } + + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } + + .shp-summary-group-price { + padding-right: 16px; + } + + .shp-summary-package { + padding-left: 16px; + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + border: 1px solid #d8c8ac; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 824a486..35bd8fd 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -35,8 +35,9 @@ background: $color-white; border: none; color: #303030; - font-size: 60px; + font-size: 28px; font-weight: 500; + text-align: left; } .item-unavailable { @@ -506,6 +507,10 @@ display: none; } .ship-postalCode { + display: flex; + flex-direction: column; + width: 100%; + label { font-family: $font-family; color: $color-black3; @@ -538,13 +543,11 @@ height: auto; letter-spacing: 1px; outline: none; - position: absolute; - right: -150px; - top: 36px; transition: all 0.2s linear; width: 100%; max-width: 194px; text-transform: uppercase; + margin-top: 12px; &:hover { background-color: lighten($color-blue3, 5); diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 1ddf151..06b2980 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,11 +2,11 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; -$color-black2:#303030; +$color-black2: #303030; $color-black3: #000000; $color-white: #fff; @@ -17,29 +17,30 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #989898; -$color-gray7:#c4c4c4; +$color-gray7: #c4c4c4; $color-blue: #4267b2; -$color-blue2:#00C8FF; -$color-blue3:#00b7ff; -$color-blue4:#00b7ffc2; +$color-blue2: #00c8ff; +$color-blue3: #00b7ff; +$color-blue4: #00b7ffc2; $color-green: #4caf50; +$color-red: #ff0000; /* 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; diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 96f8f4d..aff1f3b 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -12,7 +12,8 @@ /> - + +