diff --git a/checkout/src/arquivos/assets/imgs/arrowleft.png b/checkout/src/arquivos/assets/imgs/arrowleft.png new file mode 100644 index 0000000..6037105 Binary files /dev/null and b/checkout/src/arquivos/assets/imgs/arrowleft.png differ diff --git a/checkout/src/arquivos/assets/imgs/arrowright.png b/checkout/src/arquivos/assets/imgs/arrowright.png new file mode 100644 index 0000000..d4dd21f Binary files /dev/null and b/checkout/src/arquivos/assets/imgs/arrowright.png differ diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 78fc647..f004854 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,8 +8,11 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); - this.addPrateleira(); + window.addEventListener("hashchange", this.addPrateleira.bind(this)); + + $(window).on("orderFormUpdated.vtex", this.addPrateleira.bind(this)); + + /* this.addPrateleira(); */ this.addStamps(); this.addCarrossel(); } @@ -21,20 +24,7 @@ export default class Footer { this.prateleira = await waitElement(".footerCheckout__prateleira"); } - onUpdate() { - //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 = this.checkoutVazio; - let config = { childList: true, attributes: true }; - let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); - }); - - observer.observe(target, config); - } + async onUpdate() {} async addCarrossel(elemento) { $(elemento).slick({ slidesToShow: 4, @@ -48,36 +38,73 @@ export default class Footer { .then((response) => response.json()) .then((response) => response) .catch((err) => console.error(err)); - console.log(orderForm); + /* console.log(orderForm); */ orderForm.forEach((element) => { const containerProduto = document.createElement("div"); - containerProduto.innerHTML = `
${element.productName}
${element.items.map( - (item) => { - return ``; - } - )}
+ } > ${ + element.productName + }
${element.items + .map((item) => { + const name = item.name; + /* console.log(item.name); */ + return ``; + }) + .join("")}
- Ver produto + Ver produto -
`; + `; container.appendChild(containerProduto); element.items.forEach((item) => { - console.log(item); + /* console.log(item); */ }); }); } async addPrateleira() { const slickContainer = document.createElement("div"); - this.prateleira.appendChild(slickContainer); - await this.apiProducts(slickContainer); - await this.addCarrossel(slickContainer); - console.log(this.prateleira); + const url = window.location.hash; + const orderForm = await fetch("/api/checkout/pub/orderForm/") + .then((response) => response.json()) + .then((response) => response) + .catch((err) => console.error(err)); + console.log(orderForm.items); + if (orderForm.items.length > 0 && url === "#/cart") { + const titlePrateleira = document.createElement("h2"); + titlePrateleira.classList.add("title-prateleira"); + titlePrateleira.innerText = "Você também pode gostar:"; + this.prateleira.appendChild(titlePrateleira); + + this.prateleira.appendChild(slickContainer); + await this.apiProducts(slickContainer); + await this.addCarrossel(slickContainer); + } else { + slickContainer.remove(); + console.log(slickContainer); + const slickInitialize = document.querySelector(".slick-initialized"); + slickInitialize.remove(); + const titleh2 = document.querySelector(".title-prateleira"); + titleh2.remove(); + } } async addStamps() { + const stampsContainer3 = await waitElement(".footerCheckout__developedBy"); + const query3 = document.querySelectorAll(".footerCheckout__developedBy"); + const arr3 = Array.from(query3); + const cardList3 = ["logoVTEXM3Academy.png", "logoM3M3Academy.png"]; + query3[0].innerHTML = ""; + cardList3.forEach(function (item, index) { + query3[0].innerHTML += `${ + index === 0 ? "Powered By" : "Developed By" + } `; + }); + const stampsContainer2 = await waitElement(".footerCheckout__vtexpci"); const query2 = document.querySelectorAll(".footerCheckout__vtexpci"); const arr2 = Array.from(query2); @@ -90,7 +117,6 @@ export default class Footer { const stampsContainer = await waitElement(".footerCheckout__payments"); const query = document.querySelectorAll(".footerCheckout__payments"); const arr = Array.from(query); - console.log(arr); const cardList = [ "masterCardM3Academy.png", diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..fe2a629 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -40,6 +40,7 @@ } .slick-track { + margin-bottom: 56px; position: relative; left: 0; top: 0; @@ -101,14 +102,24 @@ position: absolute; } .slick-prev { + width: 14px; + height: 29px; + border: none; background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; z-index: 4; - left: 10px; + left: 12px; + bottom: 228px; } .slick-next { + width: 14px; + height: 29px; + border: none; + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; z-index: 4; - right: 10px; + right: 12px; + bottom: 228px; } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 87f72d1..6d3799d 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1,5 +1,7 @@ /* _prateleira.scss */ -.prateleira-title { +.title-prateleira { + color: black; + margin: 20px 0 20px; text-align: center; font-family: "Tenor Sans"; font-style: normal; @@ -7,3 +9,70 @@ font-size: 24px; line-height: 38px; } + +.btn-item-name { + border: none; + color: #ffffff; + background: #00c8ff; + border-radius: 8px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 13px; + text-transform: uppercase; +} + +.btn-item-link { + padding: 12px 75px; + color: #ffffff; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 13px; + border-radius: 8px; + background-color: #00c8ff; + text-transform: uppercase; +} + +.btn-tamanho { + gap: 5px; + display: flex; + width: 242px; + justify-content: center; + margin-bottom: 20px; +} + +.span-item-name { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 13px; +} + +.span-item-name { + margin: 20px 0 20px 0; + text-align: center; + width: 242px; + /* margin: 20px 28px; */ + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 13px; + color: #000000; +} + +/* .bora { + margin: 50px; +} + */ + +.product-img { + width: 242px; +} + +.container-produto { + display: flex !important; + flex-direction: column; + justify-content: center; + align-items: center; +}