MateusLopes/m3-academy-template-checkout-Mateus-Lopes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: alterando texto da vtex

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-12-24 16:07:04 -03:00
parent f1c1f16df5
commit 936366587d
1 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,12 +13,9 @@ export default class 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.paymentIcons = await waitElement(".footerCheckout__stamps");
this.developedByIcons = await waitElement(".footerCheckout__developedBy");
this.checkoutVazio = await waitElement(".empty-cart-content");
// this.carrossel = await waitElement(".footerCheckout__prateleira");
}
footerIcons() {
@ -56,55 +53,62 @@ export default class Footer {
}
onUpdate() {
function changeTexts() {
document.querySelector(".shipping-date").innerText = "Frete";
document.querySelector(".product-price").innerText = "Unidade";
document.querySelector(".accordion-toggle span").innerText = "Identificação";
}
const cartTitle = document.querySelector("#cart-title");
const prateleira = document.querySelector(".footerCheckout__prateleira");
const hash = window.location.hash;
const chooseProductsBtn = document.querySelector("#cart-choose-products");
const linkBoxEdit = document.querySelector(".link-box-edit");
const locationHref = window.location.href;
//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 checkoutItemsQuantity = window.vtexjs.checkout.orderForm.items.length;
let target = this.checkoutVazio;
let config = { childList: true, attributes: true, attributeFilter: ["style"] };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log("funcionou");
console.log(target.style.display);
if (target.style.display === "block") {
mutations.forEach(function () {
if (
target.style.display === "block" ||
locationHref !== "https://m3academy.myvtex.com/checkout/#/cart"
) {
changeTexts();
chooseProductsBtn.innerText = "Continuar comprando";
prateleira.style.display = "none";
cartTitle.style.display = "none";
} else {
prateleira.style.display = "block";
cartTitle.style.display = "block";
if (locationHref !== "https://m3academy.myvtex.com/checkout/#/cart") {
cartTitle.style.display = "none";
prateleira.style.display = "none";
}
window.addEventListener("hashchange", () => {
console.log(hash);
console.log(locationHref);
if (hash !== "#/cart") {
cartTitle.style.display = "none";
prateleira.style.display = "none";
}
});
}
// if (window.vtexjs.checkout.orderForm.items.length == 0) {
// cartTitle.style.display = "none";
// } else {
// cartTitle.style.display = "block";
// }
// if (hash == "email" || hash == "profile" || hash == "shipping") {
// prateleira.style.display = "none";
// } else {
// prateleira.style.display = "block";
// }
window.addEventListener("hashchange", () => {
if (window.location.hash !== "#/cart") {
prateleira.style.display = "none";
} else {
prateleira.style.display = "block";
}
});
});
});
observer.observe(target, config);
function addTexts() {
const paymentsTitle = document.querySelector(
".accordion-toggle.collapsed.accordion-toggle-active"
);
let paymentsDescription =
'<p class="payments-description">Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados</p>';
paymentsTitle.insertAdjacentHTML("afterend", paymentsDescription);
}
setTimeout(addTexts, 5000);
// if (linkBoxEdit) {
// const linkBoxEdit = document.querySelector(".link-box-edit");
// let newEditIcon =
// '<img src="https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png" class="edit-icon" alt="Icone de edição" />';
// linkBoxEdit.insertAdjacentHTML("afterbegin", newEditIcon);
// }
}
addCarrossel() {
@ -116,10 +120,6 @@ export default class Footer {
const ul = document.createElement("ul");
carrossel.appendChild(ul);
// const slick = document.querySelector(".slick-track");
// const ul = document.createElement("ul");
// carrossel.appendChild(ul);
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)