forked from M3-Academy/m3-academy-template-checkout
feat(footer):Criando footer
This commit is contained in:
parent
2123afe1a4
commit
069ff9e7ce
@ -8,11 +8,16 @@ export default class Footer {
|
||||
async init() {
|
||||
await this.selectors();
|
||||
// this.onUpdate();
|
||||
this.addProductShelf();
|
||||
this.addCarrossel();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
|
||||
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
|
||||
this.footerShelf = await waitElement(".footerCheckout__prateleira");
|
||||
this.footerAddress = await waitElement("footerCheckout__address");
|
||||
this.footerStamps = await waitElement(".footerCheckout__stamps");
|
||||
this.footerCheckoutPayment = await waitElement("footerCheckout__payments");
|
||||
this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
}
|
||||
|
||||
@ -30,11 +35,67 @@ export default class Footer {
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
|
||||
addProductShelf() {
|
||||
const createNode = (element) => {
|
||||
return document.createElement(element);
|
||||
};
|
||||
|
||||
// let image = this.footerStamps;
|
||||
let shelf = this.footerShelf;
|
||||
shelf.innerHTML = `
|
||||
|
||||
<h2>Você também pode gostar</h2>
|
||||
<ul class="container-carrousel-item"></ul>
|
||||
`;
|
||||
|
||||
const url =
|
||||
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
|
||||
|
||||
fetch(url)
|
||||
.then((resp) => resp.json())
|
||||
.then(function (data) {
|
||||
console.log(data);
|
||||
return data.map(function (product) {
|
||||
let li = createNode("li");
|
||||
li.setAttribute("id", product.productId);
|
||||
li.setAttribute("class", "card");
|
||||
li.innerHTML = `
|
||||
<figure>
|
||||
<img class="image-card"src="${product.items[0].images[0].imageUrl}" alt=""/>
|
||||
<h2 class="title-card">${product.productName}</h2>
|
||||
</figure>
|
||||
<div class="footer-card">
|
||||
${product.items.map((size) => {
|
||||
return `<label class="sku" name="size">${size.name}</label>
|
||||
<input name="size" type="radio" style="display:none">
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<button class="button-card">Ver Produto</button>
|
||||
</div>
|
||||
|
||||
`;
|
||||
|
||||
shelf.children[1].appendChild(li);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
const elemento = await waitElement(".container-carrousel-item");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// let img = createNode("img");
|
||||
// let span = createNode("span");
|
||||
// img.src = `${produto.items[0].images[0].images}`
|
||||
// span.innerHTML = `${product.name.first} ${product.name.last}`;
|
||||
// append(li, img);
|
||||
// append(li, span);
|
||||
// append(div, li);
|
||||
|
||||
@ -8,7 +8,6 @@ export default class Header {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
// console.log(this.item);
|
||||
this.progressBarHtml();
|
||||
this.progressBarProgress();
|
||||
window.addEventListener("hashchange", () => {
|
||||
|
||||
@ -2,4 +2,6 @@
|
||||
@import "./lib/slick";
|
||||
@import "./partials/header";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/prateleira.scss";
|
||||
@import "./checkout/checkout.scss";
|
||||
|
||||
|
||||
@ -1 +1,86 @@
|
||||
/* _prateleira.scss */
|
||||
.container-carrousel-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 242px;
|
||||
height: 390px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.title-card {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center ;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
.button-card {
|
||||
width:242px;
|
||||
height:42px;
|
||||
background: #00C8FF;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.button-div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.image-card {
|
||||
width: 242px;
|
||||
height: 242px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 0;
|
||||
max-width: 242px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sku {
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
background: #00C8FF;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// .sku:nth-child(10) {
|
||||
// width: 80px;
|
||||
// height: 28px;
|
||||
// }
|
||||
|
||||
@ -36,3 +36,4 @@
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user