diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..d8f8193 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,11 +8,16 @@ export default class Footer { async init() { await this.selectors(); // this.onUpdate(); + this.addProductShelf(); + this.addCarrossel(); } 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.footerShelf = await waitElement(".footerCheckout__prateleira"); + this.footerAddress = await waitElement("footerCheckout__address"); + this.footerStamps = await waitElement(".footerCheckout__stamps"); + this.footerCheckoutPayment = await waitElement("footerCheckout__payments"); + this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy"); this.checkoutVazio = await waitElement(".empty-cart-content"); } @@ -30,11 +35,67 @@ export default class Footer { observer.observe(target, config); } + + addProductShelf() { + const createNode = (element) => { + return document.createElement(element); + }; + + // let image = this.footerStamps; + let shelf = this.footerShelf; + shelf.innerHTML = ` + +

Você também pode gostar

+ + `; + + const url = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + + fetch(url) + .then((resp) => resp.json()) + .then(function (data) { + console.log(data); + return data.map(function (product) { + let li = createNode("li"); + li.setAttribute("id", product.productId); + li.setAttribute("class", "card"); + li.innerHTML = ` +
+ +

${product.productName}

+
+ +
+ +
+ + `; + + shelf.children[1].appendChild(li); + }); + }); + } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".container-carrousel-item"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, }); } } + +// let img = createNode("img"); +// let span = createNode("span"); +// img.src = `${produto.items[0].images[0].images}` +// span.innerHTML = `${product.name.first} ${product.name.last}`; +// append(li, img); +// append(li, span); +// append(div, li); diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 0ff3caf..5a93efb 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,7 +8,6 @@ export default class Header { async init() { await this.selectors(); - // console.log(this.item); this.progressBarHtml(); this.progressBarProgress(); window.addEventListener("hashchange", () => { diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..a6d143a 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -2,4 +2,6 @@ @import "./lib/slick"; @import "./partials/header"; @import "./partials/footer"; +@import "./partials/prateleira.scss"; @import "./checkout/checkout.scss"; + diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..68e09ff 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,86 @@ /* _prateleira.scss */ +.container-carrousel-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 16px; +} + +.card { + width: 242px; + height: 390px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 54px; +} + +.title-card { + font-family: 'Open Sans'; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: #000000; + margin-bottom: 20px; +} + +.footer-card { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center ; + padding: 0 20px 20px; +} + + +.button-card { + width:242px; + height:42px; + background: #00C8FF; + border-radius: 8px; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #FFFFFF; + padding: 12px 0; +} + +.button-div { + display: flex; + justify-content: center; + align-items: center; +} +.image-card { + width: 242px; + height: 242px; +} + +img { + height: 0; + max-width: 242px; + margin-bottom: 20px; +} +.sku { + width: 26px; + height: 28px; + background: #00C8FF; + border-radius: 8px; + padding: 5px; + color: #FFFFFF; + font-weight: 700; + font-size: 13px; + line-height: 18px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +// .sku:nth-child(10) { +// width: 80px; +// height: 28px; +// } diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html index 6246210..2cf5bfa 100644 --- a/checkout/src/template-checkout/checkout-footer.html +++ b/checkout/src/template-checkout/checkout-footer.html @@ -36,3 +36,4 @@ +