HenriqueSantosSantana/m3-academy-template-checkout-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

develop #11

Merged
HenriqueSantosSantana merged 37 commits from develop into main 2022-12-26 17:04:35 +00:00
Conversation 0 Commits 37 Files Changed 17 +115 -91
1 changed files with 115 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ef83674ad5 - Show all commits

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

@ -13,8 +13,12 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.innerToPayments();
this.innerDevelopedBy(); this.createdToPaymentsInFooter();
this.createdToDevelopedBy();
this.onloadWindowVerificatedShelf();
this.onUpdate(); this.onUpdate();
} }
@ -25,55 +29,55 @@ export default class Footer {
this.paymentContainer = await waitElement(".footerCheckout__stamps"); this.paymentContainer = await waitElement(".footerCheckout__stamps");
this.developedByContainer = await waitElement(".footerCheckout__developedBy"); this.developedByContainer = await waitElement(".footerCheckout__developedBy");
this.checkoutContainer = await waitElement(".container-main"); this.checkoutContainer = await waitElement(".container-main");
this.self = await waitElement(".footerCheckout__prateleira"); this.shelf = await waitElement(".footerCheckout__prateleira");
} }
innerToPayments() { createdToPaymentsInFooter() {
if (this.paymentContainer) { if (this.isExistElement(this.paymentContainer)) {
const payments = this.paymentContainer.children[0].children[0]; const paymentCreditContent = this.paymentContainer.children[0].children[0];
const vericatedVtex = this.paymentContainer.children[2].children[0]; const verificatedVtexPCI = this.paymentContainer.children[2].children[0];
if (payments && vericatedVtex) { let verifacatedContents =
let structure = ""; this.isExistElement(paymentCreditContent) &&
const paymentsTypes = [ this.isExistElement(verificatedVtexPCI);
"masterCard",
"visa",
"amex",
"elo",
"hiperCard",
"payPal",
"boleto",
];
paymentsTypes.forEach( if (verifacatedContents) {
(payment) => let creditStructure = "";
(structure += `<li class="footerCheckout__creditItem" >${insertImage( let verificatedVtexStructure = insertImage(
payment,
'class="footerCheckout__creditImage"'
)}</li>`)
);
payments.innerHTML = `<ul class="footerCheckout__creditList">${structure}</ul>`;
vericatedVtex.innerHTML = insertImage(
"vtexPCI", "vtexPCI",
'class="footerCheckout__verificatedVtex"' '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() { createdToDevelopedBy() {
if (this.developedByContainer) { if (this.isExistElement(this.developedByContainer)) {
const poweredBy = this.developedByContainer.children[0].children[0]; const poweredByContent = this.developedByContainer.children[0].children[0];
const developedBy = this.developedByContainer.children[1].children[0]; const developedByContent = this.developedByContainer.children[1].children[0];
if (poweredBy && developedBy) { let verificatedContents =
poweredBy.innerHTML = `<span>Powered By</span>${insertImage( this.isExistElement(poweredByContent) && this.isExistElement(developedByContent);
if (verificatedContents) {
poweredByContent.innerHTML = `<span>Powered By</span>${insertImage(
"logoVTEX", "logoVTEX",
'class="footerCheckout__logo footerCheckout__logo--vtex"' 'class="footerCheckout__logo footerCheckout__logo--vtex"'
)}`; )}`;
developedBy.innerHTML = `<span>Developed By</span>${insertImage(
developedByContent.innerHTML = `<span>Developed By</span>${insertImage(
"logoM3", "logoM3",
'class="footerCheckout__logo footerCheckout__logo--m3"' '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() { onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //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 // 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 (this.checkoutEmpty && this.checkoutContainer) { let verificatedContents =
if (this.checkoutEmpty.style.display === "none") { this.isExistElement(this.checkoutEmpty) && this.isExistElement(this.checkoutContainer);
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 = "";
}
if (verificatedContents) {
let target = this.checkoutEmpty; let target = this.checkoutEmpty;
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
/* prettier-ignore */
for (let i = 0; i < mutations.length; i++) { for (let i = 0; i < mutations.length; i++) {
if (mutations[i].attributeName === "style") { if (mutations[i].attributeName === "style") {
if (this.checkoutEmpty.style.display === "none") { if (this.checkoutEmpty.style.display === "none") {
this.checkoutContainer.classList.add("container-cart-fill"); this.addClassToElement(this.checkoutContainer, "container-cart-fill");
} else { } else {
this.checkoutContainer.classList.remove("container-cart-fill"); this.removeClassToElement(this.checkoutContainer,"container-cart-fill");
} }
if ( this.onloadWindowVerificatedShelf();
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 = "";
}
break; break;
} }
@ -135,24 +138,12 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", this.onloadWindowVerificatedShelf.bind(this));
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 = "";
}
});
} }
} }
addCarrossel() { addCarrossel() {
$(this.self.children[1]).slick({ $(this.shelf.children[1]).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
arrows: true, arrows: true,
@ -174,24 +165,26 @@ export default class Footer {
}); });
} }
async getProducts() { async requestAPIProducts() {
let url = (name) => { let url = (name) => {
let domain = "https://m3academy.myvtex.com/"; let domain = "https://m3academy.myvtex.com/";
return domain + name; 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; return response;
} }
async innerToSelf() { async createdProductsToShelf() {
let datas = await this.getProducts(); let datas = await this.requestAPIProducts();
datas.forEach(() => { datas.forEach(() => {
$(this.self.children[1]).slick("unslick"); $(this.shelf.children[1]).slick("unslick");
this.createdCardsProducts(datas); this.createdCardsProducts(datas);
@ -231,16 +224,47 @@ export default class Footer {
</div></li>`; </div></li>`;
}); });
this.self.children[1].innerHTML = ` this.shelf.children[1].innerHTML = `
${structure.trim()} ${structure.trim()}
`; `;
} }
innerSelfList() { createdInitialShelfList() {
this.self.innerHTML = ` this.shelf.innerHTML = `
<div> <div>
<h2>Você também pode gostar:</h2> <h2>Você também pode gostar:</h2>
</div> </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;
} }
} }