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

Merge pull request 'fix(footer): corrige footer' (#5) from bugfix/footer into main

Browse Source 
Reviewed-on: #5
This commit is contained in:
ViniciusDeniz 2022-12-19 03:30:50 +00:00
commit 28938f0ac5
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
// 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;
letconfig = { childList: true, attributes: true };
letobserver = new MutationObserver((mutations) => {
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
@ -46,34 +46,34 @@ export default class Footer {
createPrateleira() {
if (this.itensShelf) {
this.itensShelf.innerHTML = `
<div class="footerCheckout__prateleira-title">
<h2>Você também pode gostar:</h2>
</div>
<ul class="footerCheckout__carrossel-itens"></ul>
<div class="footerCheckout__prateleira-title">
<h2>Você também pode gostar:</h2>
</div>
<ul class="footerCheckout__carrossel-itens"></ul>
`;
}
}
async itensPrateleira() {
letstructure = "";
let structure = "";
this.list.forEach((response) => {
const sku = response.skus.map((item) => `<li>${item}</li>`);
structure += `
<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>
<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.prateleira.innerHTML = structure;
}
async fetchPrateleira() {
constapi =
const api =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
return fetch(api)
.then((response) => response.json())
@ -100,37 +100,37 @@ export default class Footer {
creditCardIconsHTML() {
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/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/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/payPalM3Academy.png" alt="PayPal"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></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><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/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/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/boletoM3Academy.png" alt="Boleto"></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>
`;
}
developedByIconsHTML() {
this.developedByIcons.innerHTML = `
<li>
<div class="by-vtex">
<a href="https://vtex.com.br-pt/">
<span>Powered By</span>
</a>
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
</div>
</li>
<li>
<div class="by-vtex">
<a href="https://vtex.com.br-pt/">
<span>Powered By</span>
</a>
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
</div>
</li>
<li>
<div class="by-m3">
<a href="https://vtex.com.br-pt/">
<span>Developed By</span>
</a>
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
</div>
</li>
<li>
<div class="by-m3">
<a href="https://vtex.com.br-pt/">
<span>Developed By</span>
</a>
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
</div>
</li>
`;
}
}