Amandaalmeida/m3-academy-template-checkout-amanda-almeida
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(prateleira): adiciona prateleira ao footer e slick na parteleira

Browse Source
This commit is contained in:
amanda almeida 2022-12-12 18:34:21 -03:00
parent ce56b0ba48
commit 808df85d99
1 changed files with 81 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,8 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
await this.addImagesFooter(); await this.addImagesFooter();
await this.shelfCreation();
await this.addCarrossel();
// this.onUpdate(); // this.onUpdate();
} }
@ -31,13 +33,7 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
});
}
async addImagesFooter() { async addImagesFooter() {
const imagesListStamps = document.querySelectorAll(".footerCheckout .footerCheckout__wrapper .container .footerCheckout__stamps"); const imagesListStamps = document.querySelectorAll(".footerCheckout .footerCheckout__wrapper .container .footerCheckout__stamps");
@ -73,4 +69,82 @@ export default class Footer {
} }
}) })
} }
async shelfCreation() {
const url = 'https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319';
fetch(url)
.then((resp) => {
return resp.json();
})
.then((data) => {
let products = data;
console.log(products);
const prateleira = document.querySelector('.footerCheckout__prateleira')
const img = document.createElement('img');
console.log(prateleira)
prateleira.innerHTML = `
<ul class="footerCheckout__products">
<li>
<figure><img src=${products[0].items[0].images[0].imageUrl}><figcaption>${products[0].productName}</figcaption></figure>
<ul>
<li><button>${products[0].items[0].name}</button></li>
<li><button>${products[0].items[1].name}</button></li>
<li><button>${products[0].items[2].name}</button></li>
</ul>
<a href=${products[0].link}><button>VER PRODUTO</button></a>
</li>
<li>
<figure><img src=${products[1].items[0].images[0].imageUrl}><figcaption>${products[1].productName}</figcaption></figure>
<ul>
<li><button>${products[1].items[0].name}</button></li>
<li><button>${products[1].items[1].name}</button></li>
<li><button>${products[1].items[2].name}</button></li>
<li><button>${products[1].items[3].name}</button></li>
<li><button>${products[1].items[4].name}</button></li>
</ul>
<a href=${products[1].link}><button>VER PRODUTO</button></a>
</li>
<li>
<figure><img src=${products[2].items[0].images[0].imageUrl}><figcaption>${products[2].productName}</figcaption></figure>
<ul>
<li><button>${products[2].items[0].name}</button></li>
<li><button>${products[2].items[1].name}</button></li>
<li><button>${products[2].items[2].name}</button></li>
<li><button>${products[2].items[3].name}</button></li>
<li><button>${products[2].items[4].name}</button></li>
</ul>
<a href=${products[2].link}><button>VER PRODUTO</button></a>
</li>
<li>
<figure><img src=${products[3].items[0].images[0].imageUrl}><figcaption>${products[3].productName}</figcaption></figure>
<ul>
<li><button>${products[3].items[0].name}</button></li>
<li><button>${products[3].items[1].name}</button></li>
<li><button>${products[3].items[2].name}</button></li>
</ul>
<a href=${products[3].link}><button>VER PRODUTO</button></a>
</li>
<li>
<figure><img src=${products[4].items[0].images[0].imageUrl}><figcaption>${products[4].productName}</figcaption></figure>
<ul>
<li><button>${products[4].items[0].name}</button></li>
</ul>
<a href=${products[4].link}><button>VER PRODUTO</button></a>
</li>
</ul>
`
})
}
async addCarrossel() {
const products = await waitElement(".footerCheckout__products");
$(products).slick({
slidesToShow: 4,
slidesToScroll: 1,
});
}
} }