forked from M3-Academy/m3-academy-template-checkout
feat: adiciona prateleira com slick
This commit is contained in:
parent
1cf74c1973
commit
6c8b821e8c
BIN
checkout/src/arquivos/assets/imgs/arrowleft.png
Normal file
BIN
checkout/src/arquivos/assets/imgs/arrowleft.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
BIN
checkout/src/arquivos/assets/imgs/arrowright.png
Normal file
BIN
checkout/src/arquivos/assets/imgs/arrowright.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
@ -8,8 +8,11 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
// this.onUpdate();
|
||||
this.addPrateleira();
|
||||
window.addEventListener("hashchange", this.addPrateleira.bind(this));
|
||||
|
||||
$(window).on("orderFormUpdated.vtex", this.addPrateleira.bind(this));
|
||||
|
||||
/* this.addPrateleira(); */
|
||||
this.addStamps();
|
||||
this.addCarrossel();
|
||||
}
|
||||
@ -21,20 +24,7 @@ export default class Footer {
|
||||
this.prateleira = await waitElement(".footerCheckout__prateleira");
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
//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
|
||||
// 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 config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async onUpdate() {}
|
||||
async addCarrossel(elemento) {
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
@ -48,36 +38,73 @@ export default class Footer {
|
||||
.then((response) => response.json())
|
||||
.then((response) => response)
|
||||
.catch((err) => console.error(err));
|
||||
console.log(orderForm);
|
||||
/* console.log(orderForm); */
|
||||
orderForm.forEach((element) => {
|
||||
const containerProduto = document.createElement("div");
|
||||
containerProduto.innerHTML = `<div> <img src=${
|
||||
containerProduto.classList.add("container-produto");
|
||||
containerProduto.innerHTML = `<img class="product-img" src=${
|
||||
element.items[0].images[0].imageUrl
|
||||
} > <span>${element.productName} </span> <div class="btn-tamanho"> ${element.items.map(
|
||||
(item) => {
|
||||
return `<button>${item.name}</button>`;
|
||||
}
|
||||
)} </div>
|
||||
} > <span class="span-item-name">${
|
||||
element.productName
|
||||
} </span> <div class="btn-tamanho"> ${element.items
|
||||
.map((item) => {
|
||||
const name = item.name;
|
||||
/* console.log(item.name); */
|
||||
return `<button class="btn-item-name">${name}</button>`;
|
||||
})
|
||||
.join("")} </div>
|
||||
|
||||
<a href=${element.link}>Ver produto</a>
|
||||
<a class="btn-item-link" href=${element.link}>Ver produto</a>
|
||||
|
||||
</div>`;
|
||||
`;
|
||||
|
||||
container.appendChild(containerProduto);
|
||||
element.items.forEach((item) => {
|
||||
console.log(item);
|
||||
/* console.log(item); */
|
||||
});
|
||||
});
|
||||
}
|
||||
async addPrateleira() {
|
||||
const slickContainer = document.createElement("div");
|
||||
this.prateleira.appendChild(slickContainer);
|
||||
await this.apiProducts(slickContainer);
|
||||
await this.addCarrossel(slickContainer);
|
||||
console.log(this.prateleira);
|
||||
const url = window.location.hash;
|
||||
const orderForm = await fetch("/api/checkout/pub/orderForm/")
|
||||
.then((response) => response.json())
|
||||
.then((response) => response)
|
||||
.catch((err) => console.error(err));
|
||||
console.log(orderForm.items);
|
||||
if (orderForm.items.length > 0 && url === "#/cart") {
|
||||
const titlePrateleira = document.createElement("h2");
|
||||
titlePrateleira.classList.add("title-prateleira");
|
||||
titlePrateleira.innerText = "Você também pode gostar:";
|
||||
this.prateleira.appendChild(titlePrateleira);
|
||||
|
||||
this.prateleira.appendChild(slickContainer);
|
||||
await this.apiProducts(slickContainer);
|
||||
await this.addCarrossel(slickContainer);
|
||||
} else {
|
||||
slickContainer.remove();
|
||||
console.log(slickContainer);
|
||||
const slickInitialize = document.querySelector(".slick-initialized");
|
||||
slickInitialize.remove();
|
||||
const titleh2 = document.querySelector(".title-prateleira");
|
||||
titleh2.remove();
|
||||
}
|
||||
}
|
||||
|
||||
async addStamps() {
|
||||
const stampsContainer3 = await waitElement(".footerCheckout__developedBy");
|
||||
const query3 = document.querySelectorAll(".footerCheckout__developedBy");
|
||||
const arr3 = Array.from(query3);
|
||||
const cardList3 = ["logoVTEXM3Academy.png", "logoM3M3Academy.png"];
|
||||
query3[0].innerHTML = "";
|
||||
cardList3.forEach(function (item, index) {
|
||||
query3[0].innerHTML += `<span>${
|
||||
index === 0 ? "Powered By" : "Developed By"
|
||||
}</span> <img style="width: 42px; height: 16px; " src=${
|
||||
"https://agenciamagma.vteximg.com.br/arquivos/" + item
|
||||
} alt="">`;
|
||||
});
|
||||
|
||||
const stampsContainer2 = await waitElement(".footerCheckout__vtexpci");
|
||||
const query2 = document.querySelectorAll(".footerCheckout__vtexpci");
|
||||
const arr2 = Array.from(query2);
|
||||
@ -90,7 +117,6 @@ export default class Footer {
|
||||
const stampsContainer = await waitElement(".footerCheckout__payments");
|
||||
const query = document.querySelectorAll(".footerCheckout__payments");
|
||||
const arr = Array.from(query);
|
||||
console.log(arr);
|
||||
|
||||
const cardList = [
|
||||
"masterCardM3Academy.png",
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
margin-bottom: 56px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -101,14 +102,24 @@
|
||||
position: absolute;
|
||||
}
|
||||
.slick-prev {
|
||||
width: 14px;
|
||||
height: 29px;
|
||||
border: none;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
z-index: 4;
|
||||
left: 10px;
|
||||
left: 12px;
|
||||
bottom: 228px;
|
||||
}
|
||||
.slick-next {
|
||||
width: 14px;
|
||||
height: 29px;
|
||||
border: none;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
z-index: 4;
|
||||
right: 10px;
|
||||
right: 12px;
|
||||
bottom: 228px;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
/* _prateleira.scss */
|
||||
.prateleira-title {
|
||||
.title-prateleira {
|
||||
color: black;
|
||||
margin: 20px 0 20px;
|
||||
text-align: center;
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
@ -7,3 +9,70 @@
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.btn-item-name {
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
background: #00c8ff;
|
||||
border-radius: 8px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-item-link {
|
||||
padding: 12px 75px;
|
||||
color: #ffffff;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
background-color: #00c8ff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-tamanho {
|
||||
gap: 5px;
|
||||
display: flex;
|
||||
width: 242px;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.span-item-name {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.span-item-name {
|
||||
margin: 20px 0 20px 0;
|
||||
text-align: center;
|
||||
width: 242px;
|
||||
/* margin: 20px 28px; */
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* .bora {
|
||||
margin: 50px;
|
||||
}
|
||||
*/
|
||||
|
||||
.product-img {
|
||||
width: 242px;
|
||||
}
|
||||
|
||||
.container-produto {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user