diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ba51747..ec5c645 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -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 += `
`)
- );
-
- payments.innerHTML = ``;
-
- vericatedVtex.innerHTML = insertImage(
+ if (verifacatedContents) {
+ let creditStructure = "";
+ let verificatedVtexStructure = insertImage(
"vtexPCI",
'class="footerCheckout__verificatedVtex"'
);
+
+ let creditTypes = this.creditPaymentsName();
+
+ creditTypes.forEach((creditType) => {
+ creditStructure += ``;
+ });
+
+ paymentCreditContent.innerHTML = ``;
+ 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 = `Powered By${insertImage(
+ let verificatedContents =
+ this.isExistElement(poweredByContent) && this.isExistElement(developedByContent);
+
+ if (verificatedContents) {
+ poweredByContent.innerHTML = `Powered By${insertImage(
"logoVTEX",
'class="footerCheckout__logo footerCheckout__logo--vtex"'
)}`;
- developedBy.innerHTML = `Developed By${insertImage(
+
+ developedByContent.innerHTML = `Developed By${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 {
`;
});
- this.self.children[1].innerHTML = `
+ this.shelf.children[1].innerHTML = `
${structure.trim()}
`;
}
- innerSelfList() {
- this.self.innerHTML = `
+ createdInitialShelfList() {
+ this.shelf.innerHTML = `
Você também pode gostar:
- `;
+
+ `;
+ }
+
+ 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;
}
}