From cf15ad2f14275e3c379440efc5821a59b8af7639 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Thu, 15 Dec 2022 12:56:30 -0300 Subject: [PATCH 1/4] feat(checkout-cart-fill): created carousel slider using slick and get datas from api --- checkout/src/arquivos/js/components/Footer.js | 83 ++++++++++++++++++- 1 file changed, 80 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 398d48f..252f9bb 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() { @@ -92,6 +93,15 @@ export default class Footer { this.checkoutContainer.classList.add("container-cart-fill"); } + if ( + window.location.href.endsWith("#/cart") && + this.checkoutContainer.classList.contains("container-cart-fill") + ) { + console.log("API"); + this.innerToSelf(); + this.addCarrossel(); + } + let target = this.checkoutEmpty; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { @@ -103,6 +113,14 @@ export default class Footer { this.checkoutContainer.classList.add("container-cart-fill"); } + if ( + window.location.href.endsWith("#/cart") && + this.checkoutContainer.classList.contains("container-cart-fill") + ) { + this.innerToSelf(); + this.addCarrossel(); + } + break; } } @@ -111,11 +129,70 @@ export default class Footer { observer.observe(target, config); } } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ + + addCarrossel() { + $(this.self).slick({ slidesToShow: 4, slidesToScroll: 1, }); } + + 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).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.innerHTML = structure.trim(); + } } From 27a64b361b4ebc79974ee24e2482d36a33ab2570 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Thu, 15 Dec 2022 19:45:22 -0300 Subject: [PATCH 2/4] feat(cart-fill): created intial styles and product self not styled and fix header,footer,checkout-empty --- checkout/src/arquivos/js/components/Footer.js | 80 +++++++++++++++---- checkout/src/arquivos/js/components/Header.js | 1 - .../sass/checkout/_checkout-carrinho.scss | 9 ++- .../sass/checkout/_checkout-vazio.scss | 43 +++++----- .../src/arquivos/sass/partials/_footer.scss | 18 ++--- .../src/arquivos/sass/partials/_header.scss | 10 ++- 6 files changed, 104 insertions(+), 57 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 252f9bb..ba51747 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -87,19 +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 ( - window.location.href.endsWith("#/cart") && - this.checkoutContainer.classList.contains("container-cart-fill") + this.checkoutContainer.classList.contains("container-cart-fill") && + this.checkoutContainer.classList.contains("container-cart") && + window.location.href.endsWith("#/cart") ) { - console.log("API"); + this.innerSelfList(); this.innerToSelf(); this.addCarrossel(); + } else { + this.self.innerHTML = ""; } let target = this.checkoutEmpty; @@ -107,18 +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 ( - window.location.href.endsWith("#/cart") && - this.checkoutContainer.classList.contains("container-cart-fill") + 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; @@ -127,13 +134,43 @@ 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 = ""; + } + }); } } addCarrossel() { - $(this.self).slick({ + $(this.self.children[1]).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + }, + }, + + { + breakpoint: 600, + settings: { + slidesToShow: 2, + }, + }, + ], }); } @@ -154,7 +191,7 @@ export default class Footer { let datas = await this.getProducts(); datas.forEach(() => { - $(this.self).slick("unslick"); + $(this.self.children[1]).slick("unslick"); this.createdCardsProducts(datas); @@ -166,7 +203,8 @@ export default class Footer { let structure = ""; data.forEach((data) => { - structure += `
+ structure += `
  • +
    @@ -190,9 +228,19 @@ export default class Footer { Ver Produto -
    `; +
    • `; }); - this.self.innerHTML = structure.trim(); + 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..30c7422 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,9 +1,10 @@ -.container { - @include mq(md, max) { - width: 100%; +.container-cart.container-cart-fill { + width: 100%; + + #cart-title { + display: flex !important; } } - .cart-template { font-family: $font-family-100; @include mq(md, max) { 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/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 70608e8..9ad8a36 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; 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%); } } } From 5ac8c77b79c49d75c4bf5b669bd27ee566ba6500 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Fri, 16 Dec 2022 01:15:10 -0300 Subject: [PATCH 3/4] feat(cart-fill): Initial styles were created for calculating delivery for small devices --- .../sass/checkout/_checkout-carrinho.scss | 158 +++++++++++++----- .../src/arquivos/sass/checkout/_checkout.scss | 4 - .../src/arquivos/sass/utils/_variaveis.scss | 2 + 3 files changed, 120 insertions(+), 44 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 30c7422..3461e68 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -1,10 +1,15 @@ -.container-cart.container-cart-fill { - width: 100%; - - #cart-title { - display: flex !important; - } +@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 { font-family: $font-family-100; @include mq(md, max) { @@ -342,6 +347,7 @@ .summary { .cart-more-options { margin: 0; + float: none; width: max-content; .srp-container { @@ -401,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%; @@ -445,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 { @@ -482,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 { @@ -591,9 +586,10 @@ } } - &-totalizers { + &-totalizers.totalizers { padding: 0; width: 346px; + float: none; .coupon-data { #cart-link-coupon-add { @@ -609,7 +605,6 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $clr-blue-500; text-decoration: none; } } @@ -674,10 +669,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; @@ -716,6 +710,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; @@ -732,21 +727,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; @@ -777,14 +776,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; @@ -800,8 +798,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; @@ -811,3 +809,83 @@ } } } + +.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; + } + + .link-coupon-add, + .link-choose-more-products { + color: $clr-common-black; + + span { + color: $clr-common-black; + } + } + + .srp-container, + .cart-more-options, + .cart-more-options .srp-data { + width: 100%; + } + + .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: 58%; + width: 62.682215743%; + display: flex; + align-items: flex-start; + flex-direction: column; + + .input-small { + width: 100%; + } + } + + .srp-pc-input { + width: 42%; + width: 34.985422741%; + margin-top: 5px; + } + + .srp-data { + margin-bottom: 48.35px; + } + + .totalizers { + padding: 0 16px; + width: 100%; + } + + .srp-container { + max-width: none; + } + + .cart-links-bottom { + width: 100%; + padding: 0 16px; + margin-bottom: 43.42px; + } +} 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/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, From 015ddc2fcbde6a6d3f42693eab2971437ce35ba3 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Fri, 16 Dec 2022 17:59:46 -0300 Subject: [PATCH 4/4] feat(cart-fill): created initial styles for table and small, large devices --- .../sass/checkout/_checkout-carrinho.scss | 233 +++++++++++++++++- .../src/arquivos/sass/partials/_footer.scss | 13 + 2 files changed, 241 insertions(+), 5 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 3461e68..1b9807d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -588,7 +588,6 @@ &-totalizers.totalizers { padding: 0; - width: 346px; float: none; .coupon-data { @@ -825,6 +824,62 @@ 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; @@ -834,12 +889,35 @@ } } + .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%; } @@ -853,7 +931,6 @@ } .ship-postalCode { - width: 58%; width: 62.682215743%; display: flex; align-items: flex-start; @@ -865,7 +942,6 @@ } .srp-pc-input { - width: 42%; width: 34.985422741%; margin-top: 5px; } @@ -879,13 +955,160 @@ width: 100%; } - .srp-container { - max-width: none; + .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/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 9ad8a36..7daec6d 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -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; + } + } +}