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

fix(footer): corrige footer #5

Merged
ViniciusDeniz merged 1 commits from bugfix/footer into main 2022-12-19 03:30:51 +00:00
Conversation 0 Commits 1 Files Changed 1 +39 -39
1 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,8 +33,8 @@ export default class Footer {
// 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;
letconfig = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
letobserver = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
console.log(mutation.type); console.log(mutation.type);
}); });
@ -46,34 +46,34 @@ export default class Footer {
createPrateleira() { createPrateleira() {
if (this.itensShelf) { if (this.itensShelf) {
this.itensShelf.innerHTML = ` this.itensShelf.innerHTML = `
<div class="footerCheckout__prateleira-title"> <div class="footerCheckout__prateleira-title">
<h2>Você também pode gostar:</h2> <h2>Você também pode gostar:</h2>
</div> </div>
<ul class="footerCheckout__carrossel-itens"></ul> <ul class="footerCheckout__carrossel-itens"></ul>
`; `;
} }
} }
async itensPrateleira() { async itensPrateleira() {
letstructure = ""; let structure = "";
this.list.forEach((response) => { this.list.forEach((response) => {
const sku = response.skus.map((item) => `<li>${item}</li>`); const sku = response.skus.map((item) => `<li>${item}</li>`);
structure += ` structure += `
<li> <li>
<figure><img src ="${response.img}"/></figure> <figure><img src ="${response.img}"/></figure>
<figcaption>${response.name}</figcaption> <figcaption>${response.name}</figcaption>
<div><ul>${sku}</ul></div> <div><ul>${sku}</ul></div>
<button type="button"><a href="${response.link}">Ver Produto</a></button> <button type="button"><a href="${response.link}">Ver Produto</a></button>
</li> </li>
`; `;
}); });
this.prateleira.innerHTML = structure; this.prateleira.innerHTML = structure;
} }
async fetchPrateleira() { async fetchPrateleira() {
constapi = const api =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
return fetch(api) return fetch(api)
.then((response) => response.json()) .then((response) => response.json())
@ -100,37 +100,37 @@ export default class Footer {
creditCardIconsHTML() { creditCardIconsHTML() {
this.creditCardIcons.innerHTML = ` this.creditCardIcons.innerHTML = `
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li> <li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li>
<li><span class="footerCheckout__stamps__divider"></span></li> <li><span class="footerCheckout_stamps_divider"></span></li>
<li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li> <li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li>
`; `;
} }
developedByIconsHTML() { developedByIconsHTML() {
this.developedByIcons.innerHTML = ` this.developedByIcons.innerHTML = `
<li> <li>
<div class="by-vtex"> <div class="by-vtex">
<a href="https://vtex.com.br-pt/"> <a href="https://vtex.com.br-pt/">
<span>Powered By</span> <span>Powered By</span>
</a> </a>
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" /> <img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
</div> </div>
</li> </li>
<li> <li>
<div class="by-m3"> <div class="by-m3">
<a href="https://vtex.com.br-pt/"> <a href="https://vtex.com.br-pt/">
<span>Developed By</span> <span>Developed By</span>
</a> </a>
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" /> <img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
</div> </div>
</li> </li>
`; `;
} }
} }