diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index f5bc92d..665d0c2 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,10 +8,8 @@ export default class Footer {
async init() {
await this.selectors();
await this.carrinho();
- this.requestApi();
- this.addCarrossel();
-
- // this.onUpdate();
+ this.prateleira();
+ this.onUpdate();
}
async selectors() {
@@ -27,15 +25,32 @@ export default class Footer {
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
}
+ async prateleira() {
+ if (this.checkoutVazio.style.display == "none") {
+ this.requestApi();
+ this.addCarrossel();
+ window.addEventListener("hashchange", () => {
+ if (window.location.hash !== "#/cart") {
+ this.removePrateleira();
+ }
+ if (window.location.hash == "#/cart") {
+ this.requestApi();
+ this.addCarrossel();
+ }
+ });
+ }
+ }
+
+ async removePrateleira() {
+ let prateleira = this.footerPrateleira;
+ prateleira.innerHTML = ``;
+ }
+
async requestApi() {
let prateleira = this.footerPrateleira;
prateleira.innerHTML = `
Você também pode gostar:
`;
- /*let prateleira = `TESTE
- `;
- this.footerPrateleira.innerHTML = prateleira;*/
-
const url = `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`;
fetch(url)
.then((response) => {
@@ -62,7 +77,8 @@ export default class Footer {
}
async addCarrossel() {
- const prateleira = await waitElement(".carrosel-items");
+ const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 });
+
if (window.screen.width > 1024) {
$(prateleira).slick({
slidesToShow: 4,
@@ -73,25 +89,32 @@ export default class Footer {
}
}
- carrinho() {
- this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
- this.continuarCompra.innerHTML = `continuar comprando`;
- this.frete.innerHTML = `Frete`;
- this.unidade.innerHTML = `Unidade`;
- }
-
- onUpdate() {
+ async 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);
+ mutations.map((mutation) => {
+ const display = mutation.target.attributes.style.nodeValue;
+ console.log(mutation);
+
+ if (display == "display: none;") {
+ this.prateleira();
+ } else if (display == "display: block;") {
+ this.removePrateleira();
+ }
});
});
observer.observe(target, config);
}
+
+ carrinho() {
+ this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
+ this.continuarCompra.innerHTML = `continuar comprando`;
+ this.frete.innerHTML = `Frete`;
+ this.unidade.innerHTML = `Unidade`;
+ }
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 94b4110..211fbbf 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -529,7 +529,9 @@ h1#orderform-title {
}
}
+ /*PAGAMENTO*/
.payment-data {
+ /*ICONE DE EDITAR CAIXA*/
.payment-edit-link {
display: flex !important;
margin-left: auto;
@@ -551,21 +553,6 @@ h1#orderform-title {
}
}
}
- /*position: relative;
- .accordion-group {
- &::before {
- content: "";
- display: flex;
- width: 20.26px;
- height: 20.89px;
- background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png")
- no-repeat center center;
- background-size: contain;
- cursor: pointer;
- position: absolute;
- left: 90%;
- }
- }*/
}
.box-client-info-pj {