diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..ebf385f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,11 +8,13 @@ export default class Footer { async init() { await this.selectors(); // this.onUpdate(); + this.footer(); } 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.divFooter = await waitElement(".footerCheckout__wrapper"); this.checkoutVazio = await waitElement(".empty-cart-content"); } @@ -37,4 +39,97 @@ export default class Footer { slidesToScroll: 1, }); } + + createShelf() { + if (this.itensShelf) { + this.itensShelf.innerHTML = ` +
+

Você também pode gostar:

+
+ + `; + } + } + + async shelfItens() { + let structure = ""; + + this.list.forEach((response) => { + const sku = response.skus.map((item) => `
  • ${item}
    • `); + + structure += ` +
  • +
    +
    ${response.name}
    +
    + +
    • + `; + }); + this.shelfList.innerHTML = structure; + } + + async requestApi() { + const api = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + return fetch(api) + .then((response) => response.json()) + .then((data) => { + const prodInfo = data.map((response) => ({ + name: response.productName, + skus: response.items.map((item) => item.name), + img: response.items[0].images[0].imageUrl, + link: response.link, + })); + return prodInfo; + }); + } + + footer() { + this.divFooter.innerHTML = ` +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
    + + + +
    + `; + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..ca11fdf 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,12 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + this.progressBarHtml(); + await this.progressBarEvolution(); } async selectors() { - this.item = await waitElement("#my-element", { - //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar - timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise - interval: 1000, // vai verificar a cada 1 segundo se o elemento existe - }); + this.header = await waitElement(".headerCheckout"); + this.progressBar = await waitElement("#progressBar"); } } diff --git a/checkout/src/arquivos/js/components/fetchapi.js b/checkout/src/arquivos/js/components/fetchapi.js new file mode 100644 index 0000000..6144cef --- /dev/null +++ b/checkout/src/arquivos/js/components/fetchapi.js @@ -0,0 +1,7 @@ +function fetchApiData() { + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => console.log(data)); +} diff --git a/checkout/src/arquivos/js/components/fetchapi__.html b/checkout/src/arquivos/js/components/fetchapi__.html new file mode 100644 index 0000000..079d20b --- /dev/null +++ b/checkout/src/arquivos/js/components/fetchapi__.html @@ -0,0 +1,20 @@ + + + + + + api teste + + +
    +

    + teste api m3 +

    + + + +
    + + + + diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..9139698 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -63,7 +63,7 @@ .shipping-date, .price { - color: #7d7d7d; + color: #989898; } } } @@ -155,9 +155,9 @@ } a { - color: $color-blue; + color: $color-black; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; @@ -253,10 +253,15 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-white; display: block; - font-weight: 500; - padding: 1px 12px; + font-weight: bold; + margin: 1px 12px; + background: #00C8FF; + border-radius: 50%; + width: 16px; + height: 16px; + } } @@ -733,11 +738,13 @@ tfoot { td.info, td.monetary { + font-family: 'Open Sans'; font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; - color: $color-black; + line-height: 25px; + + color: $color-black-black; } } } @@ -771,18 +778,19 @@ } a { - font-family: $font-family; + font-family: 'Tenor Sans'; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-blue; + text-align: right; + color: #000000; } } .btn-place-order-wrapper { a { - background: $color-green; + background: #00C8FF; border: none; border-radius: 5px; display: block; @@ -791,20 +799,18 @@ padding: 12px 19px; &:hover { - background-color: darken($color-green, 5); + background-color: darken($color-blue, 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; + color: $color-black-black; + font-weight: 700; + font-size: 14px; line-height: 19px; - text-shadow: none; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..17c9853 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -9,30 +9,41 @@ } } + &-title { - font-size: 20px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + color: $color-black; } + &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; - outline: none; - font-family: $font-family; + font-family: $font-family-secundary; + width: 327px; + height: 48px; + background: transparent; + border: 1px solid #000000; + // transition: ease-in 0.22s all; + // outline: none; + border-radius: 0; + font-style: normal; - font-weight: 500; + font-weight: 400; font-size: 14px; line-height: 16px; text-align: center; - letter-spacing: 0.05em; - color: $color-white; + // letter-spacing: 0.05em; + color: $color-black; text-transform: uppercase; + cursor: pointer; + - &:hover { - background: lighten($color-black, 5); - } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..4d80989 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -57,9 +57,9 @@ body { background: $color-black; text-shadow: none; - &:hover { - background: lighten($color-black, 15%); - } + // &:hover { + // background: lighten($color-black, 15%); + // } } .emailInfo h3 { @@ -70,15 +70,16 @@ body { #orderform-title { color: $color-gray2; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; + font-weight: 700; + font-size: 24px; + line-height: 33px; margin: 40px 0 30px; - letter-spacing: 0.1em; text-transform: uppercase; + @include mq(md, max) { margin-left: 30px; + } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..6e57192 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,6 +1,16 @@ /* _footer.scss */ + +.conteiner_footer { + display: flex; + align-items: center; + align-content: space-between; + margin-top: 16px !important; + margin: 0 auto; +} + + .footerCheckout { - border-top: none; + border-top: 1px solid $color-black; color: $color-gray2; &__wrapper { @@ -10,14 +20,16 @@ } &__address { - color: $color-gray2; font-family: $font-family; font-style: normal; - font-weight: normal; font-size: 10px; - line-height: 12px; text-transform: capitalize; - max-width: 40%; + // max-width: 40%; + font-weight: 400; + font-size: 10px; + line-height: 14px; + text-transform: capitalize; + color: $color-black; @include mq(md, max) { margin-bottom: 24px; @@ -51,6 +63,7 @@ list-style-type: none; margin: 0; + li:last-child { margin-left: 16px; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..8e96fe8 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -11,12 +11,18 @@ &__logo { img { - height: 52px; + height: 37.14px; width: auto; } } &__safeBuy { + display: flex; + img { + width: 12px; + height: 15px; + margin-right: 8px; + } span { align-items: center; display: flex; @@ -31,6 +37,7 @@ i { margin-right: 8px; + } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..14e5617 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-black-black: #000000; $color-white: #fff; diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..02257dc 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -16,7 +16,7 @@
  • - Aqui: vtex pci icon + Aqui: vtex pci icon