feat: criação do slick funcional

This commit is contained in:
Matheus Mariosa 2022-12-20 17:46:31 -03:00
parent 8ddcf526e3
commit 8e3afa9951
2 changed files with 79 additions and 6 deletions

View File

@ -6,11 +6,14 @@ export default class Footer {
} }
async init() { async init() {
this.API = await this.FechtAPI()
await this.selectors(); await this.selectors();
this.createHtmlCarrosel();
this.prateleiraul = await waitElement(".prateleira_carroselul");
this.onUpdate();
this.createli()
this.adicionaPayments(); this.adicionaPayments();
//await this.removeh1checkout(); await this.adicionandoDevelopBy();
await this.adicionandoDevelopBy()
// this.onUpdate();
} }
async selectors() { async selectors() {
@ -18,6 +21,10 @@ export default class Footer {
this.payments = await waitElement(".footerCheckout__payments"); this.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devolperBy = await waitElement(".footerCheckout__developedBy"); this.devolperBy = await waitElement(".footerCheckout__developedBy");
this.prateleira = await waitElement(".footerCheckout__prateleira", {
timeout: 5000,
interval: 1000,
});
} }
adicionaPayments() { adicionaPayments() {
@ -67,31 +74,89 @@ export default class Footer {
//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
let target = this.checkoutVazio; let target = this.checkoutVazio;
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
let removeClassh3 = document.getElementById("removeClassh3")
let removeClassul = document.getElementById("removeClassul")
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
console.log(mutation.type); const checkoutTarget = mutation.target.attributes.style.nodeValue;
console.log(checkoutTarget)
if(checkoutTarget === "display: none;"){
removeClassh3.classList.remove("displayNone")
removeClassul.classList.remove('displayNone')
console.log("iou")
}else if(checkoutTarget === "display: block;"){
removeClassh3.classList.add("displayNone")
removeClassul.classList.add("displayNone")
}
}); });
}); });
observer.observe(target, config); observer.observe(target, config);
} }
createHtmlCarrosel (){
if(this.prateleira){
this.prateleira.innerHTML = `
<h3 id="removeClassh3" class="prateleira-title displayNone">Você também pode gostar:</h3>
<ul id="removeClassul" class="prateleira_carroselul displayNone"></ul>
`
}
}
async FechtAPI(){
return fetch(`https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`)
.then((response) => response.json())
.then((res) => {
const infoLi = res.map((response) => ({
name: response.productName,
skus: response.items.map((item) => item.name),
img: response.items[0].images[0].imageUrl,
link: response.link,
}));
return infoLi
});
}
async createli() {
let structureLi = ""
this.API.forEach((response) => {
const sku = response.skus.map((item) => `<li>${item}</li>`);
structureLi += `
<li>
<figure><img src ="${response.img}"/></figure>
<figcaption>${response.name}</figcaption>
<div><ul>${sku}</ul></div>
<button type="button"><a href="${response.link}">Ver Produto</a></button>
</li>
`;
})
this.prateleiraul.innerHTML = structureLi;
}
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemento = await waitElement(".prateleira_carrosel")
if ($(elemento)) { if ($(elemento)) {
$(elemento).slick({ $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
arrows: true,
Infinity: false,
}); });
} }
} }
/*async removeh1checkout() { /*async removeh1checkout() {
const cardTitle = await waitElement('#cart-title') const cardTitle = await waitElement('#cart-title')
if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/cart') { if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/cart') {
cardTitle.style.display = 'none'; cardTitle.style. = 'none';
} else { } else {
cardTitle.style.display = 'block'; cardTitle.style.display = 'block';
} }

View File

@ -3,6 +3,14 @@
border-top: 1px solid black; border-top: 1px solid black;
color: $color-gray2; color: $color-gray2;
.footerCheckout__prateleira{
display: block;
.displayNone{
display: none;
}
}
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;