forked from M3-Academy/m3-academy-template-checkout
refactor(footer): created more functions for using and more clean code
This commit is contained in:
parent
d8a33abb9b
commit
6c8ad5a1f0
@ -13,8 +13,12 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.innerToPayments();
|
||||
this.innerDevelopedBy();
|
||||
|
||||
this.createdToPaymentsInFooter();
|
||||
this.createdToDevelopedBy();
|
||||
|
||||
this.onloadWindowVerificatedShelf();
|
||||
|
||||
this.onUpdate();
|
||||
}
|
||||
|
||||
@ -25,55 +29,55 @@ export default class Footer {
|
||||
this.paymentContainer = await waitElement(".footerCheckout__stamps");
|
||||
this.developedByContainer = await waitElement(".footerCheckout__developedBy");
|
||||
this.checkoutContainer = await waitElement(".container-main");
|
||||
this.self = await waitElement(".footerCheckout__prateleira");
|
||||
this.shelf = await waitElement(".footerCheckout__prateleira");
|
||||
}
|
||||
|
||||
innerToPayments() {
|
||||
if (this.paymentContainer) {
|
||||
const payments = this.paymentContainer.children[0].children[0];
|
||||
const vericatedVtex = this.paymentContainer.children[2].children[0];
|
||||
createdToPaymentsInFooter() {
|
||||
if (this.isExistElement(this.paymentContainer)) {
|
||||
const paymentCreditContent = this.paymentContainer.children[0].children[0];
|
||||
const verificatedVtexPCI = this.paymentContainer.children[2].children[0];
|
||||
|
||||
if (payments && vericatedVtex) {
|
||||
let structure = "";
|
||||
const paymentsTypes = [
|
||||
"masterCard",
|
||||
"visa",
|
||||
"amex",
|
||||
"elo",
|
||||
"hiperCard",
|
||||
"payPal",
|
||||
"boleto",
|
||||
];
|
||||
let verifacatedContents =
|
||||
this.isExistElement(paymentCreditContent) &&
|
||||
this.isExistElement(verificatedVtexPCI);
|
||||
|
||||
paymentsTypes.forEach(
|
||||
(payment) =>
|
||||
(structure += `<li class="footerCheckout__creditItem" >${insertImage(
|
||||
payment,
|
||||
'class="footerCheckout__creditImage"'
|
||||
)}</li>`)
|
||||
);
|
||||
|
||||
payments.innerHTML = `<ul class="footerCheckout__creditList">${structure}</ul>`;
|
||||
|
||||
vericatedVtex.innerHTML = insertImage(
|
||||
if (verifacatedContents) {
|
||||
let creditStructure = "";
|
||||
let verificatedVtexStructure = insertImage(
|
||||
"vtexPCI",
|
||||
'class="footerCheckout__verificatedVtex"'
|
||||
);
|
||||
|
||||
let creditTypes = this.creditPaymentsName();
|
||||
|
||||
creditTypes.forEach((creditType) => {
|
||||
creditStructure += `<li class="footerCheckout__creditItem" >${insertImage(
|
||||
creditType,
|
||||
'class="footerCheckout__creditImage"'
|
||||
)}</li>`;
|
||||
});
|
||||
|
||||
paymentCreditContent.innerHTML = `<ul class="footerCheckout__creditList">${creditStructure}</ul>`;
|
||||
verificatedVtexPCI.innerHTML = verificatedVtexStructure;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
innerDevelopedBy() {
|
||||
if (this.developedByContainer) {
|
||||
const poweredBy = this.developedByContainer.children[0].children[0];
|
||||
const developedBy = this.developedByContainer.children[1].children[0];
|
||||
createdToDevelopedBy() {
|
||||
if (this.isExistElement(this.developedByContainer)) {
|
||||
const poweredByContent = this.developedByContainer.children[0].children[0];
|
||||
const developedByContent = this.developedByContainer.children[1].children[0];
|
||||
|
||||
if (poweredBy && developedBy) {
|
||||
poweredBy.innerHTML = `<span>Powered By</span>${insertImage(
|
||||
let verificatedContents =
|
||||
this.isExistElement(poweredByContent) && this.isExistElement(developedByContent);
|
||||
|
||||
if (verificatedContents) {
|
||||
poweredByContent.innerHTML = `<span>Powered By</span>${insertImage(
|
||||
"logoVTEX",
|
||||
'class="footerCheckout__logo footerCheckout__logo--vtex"'
|
||||
)}`;
|
||||
developedBy.innerHTML = `<span>Developed By</span>${insertImage(
|
||||
|
||||
developedByContent.innerHTML = `<span>Developed By</span>${insertImage(
|
||||
"logoM3",
|
||||
'class="footerCheckout__logo footerCheckout__logo--m3"'
|
||||
)}`;
|
||||
@ -81,52 +85,51 @@ export default class Footer {
|
||||
}
|
||||
}
|
||||
|
||||
onloadWindowVerificatedShelf() {
|
||||
let checkoutEmpty = this.checkoutEmpty;
|
||||
let checkoutContainer = this.checkoutContainer;
|
||||
|
||||
if (checkoutEmpty.style.display === "none") {
|
||||
this.addClassToElement(checkoutContainer, "container-cart-fill");
|
||||
} else {
|
||||
this.removeClassToElement(checkoutContainer, "container-fill");
|
||||
}
|
||||
|
||||
if (
|
||||
this.getElementClass(checkoutContainer, "container-cart-fill") &&
|
||||
this.getElementClass(checkoutContainer, "container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.createdInitialShelfList();
|
||||
this.createdProductsToShelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.shelf.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
if (this.checkoutEmpty && this.checkoutContainer) {
|
||||
if (this.checkoutEmpty.style.display === "none") {
|
||||
this.checkoutContainer.classList.add("container-cart-fill");
|
||||
} else {
|
||||
this.checkoutContainer.classList.remove("container-fill");
|
||||
}
|
||||
|
||||
if (
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
let verificatedContents =
|
||||
this.isExistElement(this.checkoutEmpty) && this.isExistElement(this.checkoutContainer);
|
||||
|
||||
if (verificatedContents) {
|
||||
let target = this.checkoutEmpty;
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
/* prettier-ignore */
|
||||
for (let i = 0; i < mutations.length; i++) {
|
||||
if (mutations[i].attributeName === "style") {
|
||||
if (this.checkoutEmpty.style.display === "none") {
|
||||
this.checkoutContainer.classList.add("container-cart-fill");
|
||||
this.addClassToElement(this.checkoutContainer, "container-cart-fill");
|
||||
} else {
|
||||
this.checkoutContainer.classList.remove("container-cart-fill");
|
||||
this.removeClassToElement(this.checkoutContainer,"container-cart-fill");
|
||||
}
|
||||
|
||||
if (
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
this.onloadWindowVerificatedShelf();
|
||||
|
||||
break;
|
||||
}
|
||||
@ -135,24 +138,12 @@ export default class Footer {
|
||||
|
||||
observer.observe(target, config);
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
});
|
||||
window.addEventListener("hashchange", this.onloadWindowVerificatedShelf.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
addCarrossel() {
|
||||
$(this.self.children[1]).slick({
|
||||
$(this.shelf.children[1]).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
@ -174,24 +165,26 @@ export default class Footer {
|
||||
});
|
||||
}
|
||||
|
||||
async getProducts() {
|
||||
async requestAPIProducts() {
|
||||
let url = (name) => {
|
||||
let domain = "https://m3academy.myvtex.com/";
|
||||
return domain + name;
|
||||
};
|
||||
|
||||
let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319"));
|
||||
let featchProducts = fetch(
|
||||
url("api/catalog_system/pub/products/search/?fq=productClusterIds:319")
|
||||
);
|
||||
|
||||
let response = await API.then((res) => res.json());
|
||||
let response = await featchProducts.then((res) => res.json());
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
async innerToSelf() {
|
||||
let datas = await this.getProducts();
|
||||
async createdProductsToShelf() {
|
||||
let datas = await this.requestAPIProducts();
|
||||
|
||||
datas.forEach(() => {
|
||||
$(this.self.children[1]).slick("unslick");
|
||||
$(this.shelf.children[1]).slick("unslick");
|
||||
|
||||
this.createdCardsProducts(datas);
|
||||
|
||||
@ -231,16 +224,47 @@ export default class Footer {
|
||||
</div></li>`;
|
||||
});
|
||||
|
||||
this.self.children[1].innerHTML = `
|
||||
this.shelf.children[1].innerHTML = `
|
||||
${structure.trim()}
|
||||
`;
|
||||
}
|
||||
|
||||
innerSelfList() {
|
||||
this.self.innerHTML = `
|
||||
createdInitialShelfList() {
|
||||
this.shelf.innerHTML = `
|
||||
<div>
|
||||
<h2>Você também pode gostar:</h2>
|
||||
</div>
|
||||
<ul class="self-list"></ul>`;
|
||||
<ul class="self-list"></ul>
|
||||
`;
|
||||
}
|
||||
|
||||
addClassToElement(element, name) {
|
||||
element.classList.add(name);
|
||||
}
|
||||
|
||||
removeClassToElement(element, name) {
|
||||
element.classList.remove(name);
|
||||
}
|
||||
|
||||
getElementClass(element, name) {
|
||||
return element.classList.contains(name);
|
||||
}
|
||||
|
||||
isExistElement(element) {
|
||||
return !!element;
|
||||
}
|
||||
|
||||
creditPaymentsName() {
|
||||
const creditPaymentsTypes = [
|
||||
"masterCard",
|
||||
"visa",
|
||||
"amex",
|
||||
"elo",
|
||||
"hiperCard",
|
||||
"payPal",
|
||||
"boleto",
|
||||
];
|
||||
|
||||
return creditPaymentsTypes;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user