Feat(Checkout): Cria mudanças Js!

This commit is contained in:
Rhayllon Daudt 2022-12-26 19:19:34 -03:00
parent 6ec191d212
commit e4f1a76fac
3 changed files with 9257 additions and 30 deletions

View File

@ -8,18 +8,12 @@ export default class Footer {
async init() {
this.list = await this.Api();
await this.selectors();
// this.onUpdate();
this.onUpdate();
this.addIconsCardAndVtxpci();
this.addIconVtexAndM3();
this.createShelf();
this.shelfList = await waitElement(".footerCheckout__shelfList");
this.shelfItens();
if (window.innerWidth > 1024){
this.addCarrossel();
}
if (window.innerWidth < 1024){
this.addCarrosselMobile();
}
this.prateleiraView();
}
@ -35,41 +29,77 @@ export default class Footer {
timeout: 5000,
interval: 1000,
});
this.pratWrapper = await waitElement(".footerCheckout")
this.pratWrapper = await waitElement(".footerCheckout");
}
onUpdate() {
async 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 pratchange = this.pratWrapper;
const elemento = await waitElement(".footerCheckout__shelfList");
let config = { childList: false, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
if (mutation.attributeName === "style") {
if (pratchange.children[0]) {
pratchange.children[0].classList.add("view");
}
if (window.innerWidth > 1024){
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
}
if (window.innerWidth < 1024){
$(elemento).slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
}
if (window.innerWidth < 600){
$(elemento).slick({
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
}
}
});
});
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement(".footerCheckout__shelfList");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
}
async addCarrosselMobile() {
const elemento = await waitElement(".footerCheckout__shelfList");
$(elemento).slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
// async addCarrossel() {
// const elemento = await waitElement(".footerCheckout__shelfList");
// $(elemento).slick({
// slidesToShow: 4,
// slidesToScroll: 1,
// arrows: true,
// infinite: false,
// });
// }
async advie() {
if (this.pratWrapper.children[0]) {
this.pratWrapper.children[0].classList.add("view");
}
}
// async addCarrosselMobile() {
// const elemento = await waitElement(".footerCheckout__shelfList");
// $(elemento).slick({
// slidesToShow: 3,
// slidesToScroll: 1,
// arrows: true,
// infinite: false,
// });
// }
addIconVtexAndM3() {
if (this.iconsVtexAndM3) {
this.iconsVtexAndM3.innerHTML = `
@ -165,7 +195,7 @@ export default class Footer {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (prat) {
prat.classList.add("view");
prat.classList.add("");
}
} else if (

View File

@ -126,7 +126,8 @@ body {
display: none;
}
}
div.cart-fixed.cart-fixed-transition.affix-top {
div.cart-fixed.cart-fixed-transition.affix-top,
div.cart-fixed.cart-fixed-transition.affix {
.Items {
border-top: 1px solid $color-gray10;
border-bottom: 1px solid $color-gray10;

9196
yarn.lock Normal file

File diff suppressed because it is too large Load Diff