diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 398d48f..ba51747 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -25,6 +25,7 @@ export default class Footer { this.paymentContainer = await waitElement(".footerCheckout__stamps"); this.developedByContainer = await waitElement(".footerCheckout__developedBy"); this.checkoutContainer = await waitElement(".container-main"); + this.self = await waitElement(".footerCheckout__prateleira"); } innerToPayments() { @@ -86,10 +87,22 @@ export default class Footer { // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver if (this.checkoutEmpty && this.checkoutContainer) { - if (this.checkoutContainer.classList.contains("container-cart-fill")) { - this.checkoutContainer.classList.remove("container-cart-fill"); - } else { + if (this.checkoutEmpty.style.display === "none") { this.checkoutContainer.classList.add("container-cart-fill"); + } else { + this.checkoutContainer.classList.remove("container-fill"); + } + + if ( + this.checkoutContainer.classList.contains("container-cart-fill") && + this.checkoutContainer.classList.contains("container-cart") && + window.location.href.endsWith("#/cart") + ) { + this.innerSelfList(); + this.innerToSelf(); + this.addCarrossel(); + } else { + this.self.innerHTML = ""; } let target = this.checkoutEmpty; @@ -97,10 +110,22 @@ export default class Footer { let observer = new MutationObserver((mutations) => { for (let i = 0; i < mutations.length; i++) { if (mutations[i].attributeName === "style") { - if (this.checkoutContainer.classList.contains("container-cart-fill")) { - this.checkoutContainer.classList.remove("container-cart-fill"); - } else { + if (this.checkoutEmpty.style.display === "none") { this.checkoutContainer.classList.add("container-cart-fill"); + } else { + this.checkoutContainer.classList.remove("container-cart-fill"); + } + + if ( + this.checkoutContainer.classList.contains("container-cart-fill") && + this.checkoutContainer.classList.contains("container-cart") && + window.location.href.endsWith("#/cart") + ) { + this.innerSelfList(); + this.innerToSelf(); + this.addCarrossel(); + } else { + this.self.innerHTML = ""; } break; @@ -109,13 +134,113 @@ export default class Footer { }); observer.observe(target, config); + + window.addEventListener("hashchange", () => { + if ( + this.checkoutContainer.classList.contains("container-cart-fill") && + this.checkoutContainer.classList.contains("container-cart") && + window.location.href.endsWith("#/cart") + ) { + this.innerSelfList(); + this.innerToSelf(); + this.addCarrossel(); + } else { + this.self.innerHTML = ""; + } + }); } } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ + + addCarrossel() { + $(this.self.children[1]).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + }, + }, + + { + breakpoint: 600, + settings: { + slidesToShow: 2, + }, + }, + ], }); } + + async getProducts() { + let url = (name) => { + let domain = "https://m3academy.myvtex.com/"; + return domain + name; + }; + + let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319")); + + let response = await API.then((res) => res.json()); + + return response; + } + + async innerToSelf() { + let datas = await this.getProducts(); + + datas.forEach(() => { + $(this.self.children[1]).slick("unslick"); + + this.createdCardsProducts(datas); + + this.addCarrossel(); + }); + } + + createdCardsProducts(data) { + let structure = ""; + + data.forEach((data) => { + structure += `
  • +
    +
    +
    + +
    + +

    + ${data.productName} +

    +
    + +
    + ${data.items.reduce((acc, item) => { + return (acc += `
    + ${item.name} +
    `); + }, "")} +
    + + + + Ver Produto + + +
    • `; + }); + + this.self.children[1].innerHTML = ` + ${structure.trim()} + `; + } + + innerSelfList() { + this.self.innerHTML = ` +
    +

    Você também pode gostar:

    +
    + `; + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index fe7e30f..844fd82 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -29,7 +29,6 @@ function OnProgress(target) {

    Dados Pessoais

    -
    diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 90d323c..1b9807d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,7 +1,13 @@ -.container { - @include mq(md, max) { - width: 100%; - } +@mixin btn-primary-blue-black() { + border: none; + color: $clr-common-black; + background: $clr-primary-blue-500; +} + +@mixin btn-primary-blue-white() { + border: none; + color: $clr-common-white; + background: $clr-primary-blue-500; } .cart-template { @@ -341,6 +347,7 @@ .summary { .cart-more-options { margin: 0; + float: none; width: max-content; .srp-container { @@ -400,15 +407,10 @@ width: calc(100vw - 32px); } - @include mq(md, max) { - margin-bottom: 40px; - } - .srp-pickup-my-location__button { - background-color: $clr-gray-600; - border: none; + @include btn-primary-blue-white(); + border-radius: 5px; - color: $clr-common-white; outline: none; width: 100%; @@ -444,12 +446,12 @@ } &__current { - border: 1px solid $clr-blue-500; + border: 1px solid $clr-common-black; border-radius: 100px; } .blue { - color: $clr-blue-500; + color: $clr-common-black; } label { @@ -481,23 +483,17 @@ font-size: 12px; height: 36px; padding: 12px 8px; - width: 172px; } & ~ button { - background-color: $clr-gray-600; - border: none; + @include btn-primary-blue-white(); + border-radius: 5px; - color: $clr-common-white; font-size: 12px; height: 36px; letter-spacing: 1px; outline: none; - position: absolute; - right: -150px; - top: 36px; transition: all 0.2s linear; - width: 96px; text-transform: uppercase; &:hover { @@ -590,9 +586,9 @@ } } - &-totalizers { + &-totalizers.totalizers { padding: 0; - width: 346px; + float: none; .coupon-data { #cart-link-coupon-add { @@ -608,7 +604,6 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $clr-blue-500; text-decoration: none; } } @@ -673,10 +668,9 @@ } button { - background: $clr-gray-600; - border: none; + @include btn-primary-blue-white(); + border-radius: 5px; - color: $clr-common-white; font-size: 12px; height: 36px; letter-spacing: 1px; @@ -715,6 +709,7 @@ font-style: normal; font-weight: normal; font-size: 14px; + font-family: $font-family-200; line-height: 16px; color: $clr-gray-600; padding: 12px 0; @@ -731,21 +726,25 @@ } tfoot { - td.info, - td.monetary { - font-style: normal; - font-weight: normal; - font-size: 18px; - line-height: 21px; - color: $clr-gray-600; + tr { + td.info, + td.monetary { + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 21px; + font-family: $font-family-100; + color: $clr-gray-600; + } } } } } } - .cart-links-bottom { + .cart-links-bottom.cart-links { display: flex; + float: none; flex-direction: column; width: 343px; @@ -776,14 +775,13 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $clr-blue-500; } } .btn-place-order-wrapper { a { - background: $clr-green-500; - border: none; + @include btn-primary-blue-black(); + border-radius: 5px; display: block; font-size: 0; @@ -799,8 +797,8 @@ font-family: $font-family-100; font-weight: 500; font-size: 13px; + color: inherit; letter-spacing: 0.05em; - color: $clr-common-white; text-transform: uppercase; vertical-align: middle; line-height: 19px; @@ -810,3 +808,307 @@ } } } + +.container-cart.container-cart-fill { + width: 100%; + padding: 0 !important; + + #cart-title { + display: flex !important; + width: 100%; + padding: 0 16px; + text-align: left; + } + + .ship-country { + display: none; + } + + .cart-template { + .item-quantity-change { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + background: #00c8ff; + border-radius: 100%; + + .icon-plus-sign, + .icon-minus-sign { + position: relative; + width: 100%; + height: 100%; + + &::before { + content: ""; + position: absolute; + padding: 0; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: $clr-common-white; + } + } + + .icon-plus-sign { + &::after { + content: ""; + position: absolute; + padding: 0; + top: 50%; + left: 50%; + width: 2px; + height: 10px; + transform: translate(-50%, -50%); + background-color: $clr-common-white; + } + + &::before { + width: 10px; + height: 2px; + } + } + + .icon-minus-sign { + &::before { + width: 10px; + height: 2px; + } + } + } + } + + .link-coupon-add, + .link-choose-more-products { + color: $clr-common-black; + + span { + color: $clr-common-black; + } + } + + .cart-more-options { + padding: 0 16px; + } + + .srp-container, + .cart-more-options, + .cart-more-options .srp-data { + width: 100%; + } + + .cart-template { + th.shipping-date { + font-size: 0px; + + &::before { + content: "Frete"; + font-size: 14px; + } + } + + th.product-price { + font-size: 0px; + &::before { + content: "Unidade"; + font-size: 14px; + } + } + } + + .srp-postal-code__form { + width: 100%; + } + + .vtex-shipping-preview-0-x-postalCodeForgotten { + display: flex; + gap: 8px; + width: 100%; + align-items: center; + justify-content: flex-start; + } + + .ship-postalCode { + width: 62.682215743%; + display: flex; + align-items: flex-start; + flex-direction: column; + + .input-small { + width: 100%; + } + } + + .srp-pc-input { + width: 34.985422741%; + margin-top: 5px; + } + + .srp-data { + margin-bottom: 48.35px; + } + + .totalizers { + padding: 0 16px; + width: 100%; + } + + .cart-more-options { + .srp-container { + padding: 0; + max-width: none; + } + } + + .cart-links-bottom { + width: 100%; + padding: 0 16px; + margin-bottom: 43.42px; + + .link-choose-more-products-wrapper { + margin: 0 0 14.91px; + } + } + + .coupon-column .coupon-fields { + span { + width: 100%; + display: flex; + align-items: center; + } + } + + .cart-template .cart-items td.quantity { + border: 1px solid #ddd; + border-radius: 8px; + padding: 10px; + + input { + border: none; + padding: 0 10px; + box-sizing: content-box; + } + } + + @media screen and (min-width: 600px) { + .totalizers { + padding: 0 16px; + margin: 0; + } + + .cart-more-options { + .srp-container { + padding: 0 16px; + } + + .srp-data { + width: 343px; + } + } + + .cart-template .cart-items th { + vertical-align: top; + } + + .cart-template-holder { + padding: 0 16px; + } + } + + @media screen and (min-width: 1280px) { + width: fluid(1018px, 1280px); + + .cart-template .cart-items td.quantity { + margin: 6px auto 0 0; + } + + .cart-template { + .shipping-date, + .product-price, + .quantity-price { + text-align: left; + padding: 5px 0; + } + } + + .cart-template-holder { + padding: 0; + } + + .product-name { + width: auto; + } + + .cart-template .cart-items th { + text-align: left; + padding-bottom: 16px; + } + + #cart-title { + padding: 0; + } + + .cart { + margin-bottom: 48px; + } + + .cart-more-options { + padding: 0; + + .srp-container { + padding: 0; + } + + .srp-data { + margin-bottom: 0; + } + } + + .row-fluid.summary { + width: 100%; + margin: 0 auto; + } + + .cart-more-options { + width: fluid(280px, 1018px); + float: left; + + .srp-container { + .srp-content { + .srp-main-title { + margin-top: 0; + } + } + } + } + + .cart-links-bottom.cart-links { + width: fluid(354px, 1018px); + display: flex; + align-items: flex-end; + float: right; + padding: 0; + margin: 0 auto; + } + + .btn-place-order-wrapper { + width: 100%; + } + + .link-choose-more-products-wrapper { + width: 100%; + text-align: center; + } + + .cart-totalizers.totalizers { + width: fluid(354px, 1018px); + float: right; + padding: 0; + margin-left: 0; + margin-right: 0; + margin-bottom: 0; + } + } +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index eae28f7..9046b23 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -10,9 +10,10 @@ background-color: $clr-common-white; } -.container-cart { +.container-main.container-cart { width: 100%; height: 100%; + padding: 0 16px !important; display: flex; align-items: center; justify-content: center; @@ -21,43 +22,37 @@ #cart-title { display: none !important; } - .cart-template, - .checkout-container { - min-height: auto; - } - - .checkout-container { - padding: 0 16px; - } + .checkout-container, .cart-template { + min-height: auto; margin: 0; } - @media screen and (min-width: 375px) { - .checkout-container { - width: fluid(300px, 375px); - margin: 0 auto; - } + .link-choose-products { + width: fluid(250px, 343px); + max-width: 250px; + margin: 0 auto; + } - .link-choose-products { - width: fluid(250px, 300px); - max-width: 250px; - margin: 0 auto; - } + .transactions-container { + display: none; } @media screen and (min-width: 1025px) { - .checkout-container { - width: fluid(400px, 1280px); - padding: 0; - } + width: fluid(400px, 1280px); + padding: 0 !important; + max-width: none; .link-choose-products { width: fluid(327px, 400px); - max-width: none; + max-width: 327px; } } + + @media screen and (min-width: 2500px) { + width: fluid(659px, 2500px); + } } .empty-cart { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 50d09aa..8d374f4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -57,10 +57,6 @@ body { margin: 40px 0 30px; letter-spacing: 0.1em; text-transform: uppercase; - - @include mq(md, max) { - margin-left: 30px; - } } .dropdown { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 70608e8..7daec6d 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,15 +1,15 @@ .footerCheckout { - padding: 16px 25px 18.88px 8px; - - @include mq("md", min) { - padding: 16px 0; - } -} - -.footerCheckout { - border-top: 1px solid $clr-common-black; color: $clr-gray-400; + &__wrapper { + border-top: 1px solid $clr-common-black; + padding: 16px 25px 18.88px 8px; + + @include mq("md", min) { + padding: 16px 0; + } + } + &__stamps { order: 0; margin: 0 0 16px; @@ -182,3 +182,16 @@ } } } + +.footerCheckout__prateleira { + div { + h2 { + width: 100%; + font-size: 14px; + text-align: center; + font-weight: 400; + font-family: $font-family-200; + color: $clr-common-black; + } + } +} diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 741b5b4..e63d11c 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -161,7 +161,7 @@ body :where(ul, li, ol) { .progress-item { &--left, &--right { - width: 39.9183%; + width: 40%; .progress-line { position: absolute; @@ -183,14 +183,18 @@ body :where(ul, li, ol) { } } + &--center { + width: 90px; + } + &--right { .progress-container { align-items: flex-end; } .progress-line { - left: 29%; - transform: translateX(-50%); + right: 72%; + transform: translateX(50%); } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 7f541c2..dfa332c 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -21,6 +21,8 @@ $clr-blue-500: #4267b2; $clr-green-500: #4caf50; +$clr-primary-blue-500: #00c8ff; + /* Grid breakpoints */ $grid-breakpoints: ( xxs: 0,