forked from M3-Academy/m3-academy-template-checkout
feat: criação do slick funcional
This commit is contained in:
parent
8ddcf526e3
commit
8e3afa9951
@ -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';
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user