BernardoWaldhelm/m3-academy-template-checkout-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): ajustando function footer onUpdate

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-12-22 11:28:38 -03:00
parent 8a97acd616
commit bd2589b086
3 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
checkout/src/arquivos/js/components/Footer.js
View File

@ -23,6 +23,7 @@ export default class Footer {
} }
async prateleiraFooterHTML() { async prateleiraFooterHTML() {
this.footerPrateleira.innerHTML = ``;
this.footerPrateleira.innerHTML += ` this.footerPrateleira.innerHTML += `
<h2 class="footerCheckout__prateleira__title"> Você também pode gostar: </h2> <h2 class="footerCheckout__prateleira__title"> Você também pode gostar: </h2>
<ul class="footerCheckout__prateleira__list"></ul>`; <ul class="footerCheckout__prateleira__list"></ul>`;
@ -155,43 +156,49 @@ export default class Footer {
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // 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 // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
if (window.location.hash == "#/cart") { // if (window.location.hash != "#/cart") {
this.myCart.classList.add("inactive"); // this.myCart.classList.add("inactive");
} // }
//monitorar display none -> target.style.display === "none" //monitorar display none -> target.style.display === "none"
let target = this.checkoutVazio; let target = this.checkoutVazio;
if (
window.location.href == "https://m3academy.myvtex.com/checkout/#/cart" &&
this.checkoutVazio.style.display == "none"
) {
this.footerPrateleira.classList.remove("inactive");
this.prateleiraFooterHTML();
} else {
this.footerPrateleira.classList.add("inactive");
this.myCart.classList.add("inactive");
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart" && target.style.display == "none") {
this.myCart.classList.remove("inactive");
this.footerPrateleira.classList.remove("inactive");
this.footerPrateleira.innerHTML = "";
this.prateleiraFooterHTML();
} else {
this.footerPrateleira.classList.add("inactive");
this.myCart.classList.add("inactive");
}
});
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(() => { mutations.forEach(() => {
if (target.style.display == "none") { if (target.style.display == "none" && window.location.hash == "#/cart") {
this.footerPrateleira.classList.remove("inactive"); this.footerPrateleira.classList.remove("inactive");
this.myCart.classList.remove("inactive"); this.myCart.classList.remove("inactive");
this.footerPrateleira.innerHTML = "";
this.prateleiraFooterHTML(); this.prateleiraFooterHTML();
} else { } else {
this.footerPrateleira.classList.add("inactive"); this.footerPrateleira.classList.add("inactive");
this.myCart.classList.add("inactive"); this.myCart.classList.add("inactive");
this.footerPrateleira.innerHTML = "";
}
});
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (target.style.display == "none") {
this.myCart.classList.remove("inactive");
this.footerPrateleira.classList.remove("inactive");
this.footerPrateleira.innerHTML = "";
this.prateleiraFooterHTML();
} else {
this.myCart.classList.add("inactive");
}
} else {
this.footerPrateleira.classList.add("inactive");
this.myCart.classList.add("inactive");
this.footerPrateleira.innerHTML = "";
} }
}); });
}); });
observer.observe(this.checkoutVazio, { observer.observe(target, {
childList: true,
attributes: true, attributes: true,
}); });
} }

6
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -115,7 +115,7 @@
line-height: 33px; line-height: 33px;
display: flex; display: flex;
align-items: center; align-items: center;
text-align: start; text-align: flex-start;
letter-spacing: 0.05em; letter-spacing: 0.05em;
border-radius: 5px; border-radius: 5px;
@ -304,7 +304,7 @@
line-height: 37px; line-height: 37px;
color: $color-black-1; color: $color-black-1;
display: flex; display: flex;
justify-content: start; justify-content: flex-start;
align-items: center; align-items: center;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{ @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
@ -500,7 +500,7 @@
line-height: 33px; line-height: 33px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: start; justify-content: flex-start;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;

2
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -128,7 +128,7 @@
&__developedBy { &__developedBy {
display: flex; display: flex;
justify-content: end; justify-content: flex-end;
align-items: center; align-items: center;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;