forked from M3-Academy/m3-academy-template-checkout
feat(footer):slick inicializado
This commit is contained in:
parent
3802b0c524
commit
add2cb8a68
@ -8,35 +8,94 @@ export default class Footer {
|
||||
async init() {
|
||||
await this.selectors();
|
||||
await this.addCarrossel();
|
||||
// this.onUpdate();
|
||||
await this.empytStart()
|
||||
await this.onUpdate();
|
||||
}
|
||||
|
||||
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.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content", {
|
||||
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
});
|
||||
this.slick = await waitElement(".footerCheckout__prateleira");
|
||||
this.Footer = await waitElement(".footerCheckout");
|
||||
this.Fds = document.createElement("div")
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
async empytStart(){
|
||||
let target2 = this.slick;
|
||||
let Footer = this.Footer;
|
||||
console.log(Footer)
|
||||
let ExistsAtt = document.querySelector('.empty-cart-content[style="display: flex;"]');
|
||||
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){
|
||||
if(!!ExistsAtt){
|
||||
console.log(!!ExistsAtt,"empyt cart existe"); //true
|
||||
target2.classList.add('hide')
|
||||
Footer.classList.remove('footerCheckout__ComSlick')
|
||||
}else{
|
||||
console.log(!!ExistsAtt,"empyt cart não existe"); //false
|
||||
target2.classList.remove('hide')
|
||||
Footer.classList.add('footerCheckout__ComSlick')
|
||||
}
|
||||
}
|
||||
}
|
||||
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 target2 = this.slick;
|
||||
let Footer = this.Footer;
|
||||
let config = {
|
||||
childList: true,
|
||||
attributes: true,
|
||||
attributeOldValue:true,
|
||||
attributeFilter:["style"],
|
||||
subtree:false,
|
||||
characterData:true,
|
||||
characterDataOldValue:true};
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
console.log("mutation is ->",mutation.type, mutation.attributeName,mutation.oldValue,mutation);
|
||||
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){
|
||||
if(mutation.oldValue == "display: none;"){
|
||||
console.log("entrei no if",mutation.oldValue)
|
||||
target2.classList.add('hide')
|
||||
Footer.classList.remove('footerCheckout__ComSlick')
|
||||
}else{
|
||||
console.log("entrei no else",mutation.oldValue)
|
||||
target2.classList.remove('hide')
|
||||
Footer.classList.add('footerCheckout__ComSlick')
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("footerCheckout__prateleira");
|
||||
$(elemento).slick({
|
||||
let target2 = this.slick;
|
||||
let divRegua = this.Fds;
|
||||
console.log(this.Fds)
|
||||
divRegua.classList.add('Regua')
|
||||
this.Footer.appendChild(divRegua)
|
||||
target2.classList.add('hide')
|
||||
this.slick.innerHTML =
|
||||
`
|
||||
<div class="quadrado"> 1 </div>
|
||||
<div class="quadrado"> 2 </div>
|
||||
<div class="quadrado"> 3 </div>
|
||||
<div class="quadrado"> 4 </div>
|
||||
<div class="quadrado"> 5 </div>
|
||||
`
|
||||
$(this.slick).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
initialSlide: 0,
|
||||
variableWidth:true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,6 @@ export default class Header {
|
||||
window.addEventListener("hashchange", this.stepProgress.bind(this));
|
||||
await this.event();
|
||||
await this.progress();
|
||||
await this.stepProgress();
|
||||
console.log(this.item);
|
||||
}
|
||||
|
||||
@ -23,6 +22,8 @@ export default class Header {
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
});
|
||||
this.step = document.querySelector('.completed');
|
||||
this.slick = await waitElement(".footerCheckout__prateleira");
|
||||
this.Footer = await waitElement(".footerCheckout");
|
||||
}
|
||||
async event(){
|
||||
|
||||
@ -45,18 +46,23 @@ export default class Header {
|
||||
</li>
|
||||
</ul>
|
||||
`
|
||||
await this.stepProgress();
|
||||
}
|
||||
async stepProgress(){
|
||||
const progressList = document.querySelectorAll("#progressBar ul li")
|
||||
const step1 = document.getElementById("step_1")
|
||||
const step2 = document.getElementById("step_2")
|
||||
const step3 = document.getElementById("step_3")
|
||||
let target2 = this.slick;
|
||||
let Footer = this.Footer;
|
||||
progressList.forEach((li) => {
|
||||
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){
|
||||
if(li.children[1].id === "step_1"){
|
||||
step2.classList.remove('completed');
|
||||
step3.classList.remove('completed');
|
||||
li.children[1].classList.toggle('completed');
|
||||
li.children[1].classList.add('completed');
|
||||
target2.classList.toggle('hide')
|
||||
Footer.classList.add('footerCheckout__ComSlick')
|
||||
}
|
||||
}
|
||||
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email"
|
||||
@ -65,16 +71,18 @@ export default class Header {
|
||||
if(li.children[1].id === "step_2"){
|
||||
step1.classList.remove('completed');
|
||||
step3.classList.remove('completed');
|
||||
console.log(li,"esse é o children 2")
|
||||
li.children[1].classList.add('completed');
|
||||
target2.classList.add('hide');
|
||||
Footer.classList.remove('footerCheckout__ComSlick');
|
||||
}
|
||||
}
|
||||
if(window.location.href =="https://m3academy.myvtex.com/checkout/#/payment"){
|
||||
if(li.children[1].id === "step_3"){
|
||||
step1.classList.remove('completed');
|
||||
step2.classList.remove('completed');
|
||||
console.log(li,"esse é o children 3")
|
||||
li.children[1].classList.toggle('completed');
|
||||
li.children[1].classList.add('completed');
|
||||
target2.classList.add('hide');
|
||||
Footer.classList.remove('footerCheckout__ComSlick');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
position: relative;
|
||||
border-top: 1px solid;
|
||||
color: $color-gray2;
|
||||
margin-top: 100px;
|
||||
&__ComSlick{
|
||||
margin-top: 900px !important;
|
||||
}
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 67px;
|
||||
border-bottom: 1px solid $color-black;
|
||||
// right: 0;
|
||||
// width: 100%;
|
||||
// height: 67px;
|
||||
// border-bottom: 1px solid red;
|
||||
// $color-black
|
||||
}
|
||||
&__payments{
|
||||
&__images{
|
||||
@ -23,12 +28,11 @@
|
||||
}
|
||||
&__wrapper {
|
||||
position: relative;
|
||||
width: 100 !important;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
.container{
|
||||
position: absolute;
|
||||
top: 94px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
@ -107,4 +111,39 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&__prateleira{
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
width: 100% !important;
|
||||
height: 390px;
|
||||
padding-left: 7.4803149606299%;
|
||||
margin-bottom: 54px !important;
|
||||
top: -445px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: 15.33203125%;
|
||||
.quadrado{
|
||||
text-align: center;
|
||||
width: 83.818897637795%!important;
|
||||
height: 390px;
|
||||
margin-left: 16px;
|
||||
background: pink;
|
||||
}
|
||||
.slick-slide{
|
||||
width: 258px !important;
|
||||
}
|
||||
.slick-list {
|
||||
width: 1016px;
|
||||
left: 34px;
|
||||
}
|
||||
}
|
||||
.Regua{
|
||||
background: blue;
|
||||
position: absolute;
|
||||
top: -485px;
|
||||
left: 126px;
|
||||
z-index: -1;
|
||||
width: 1016px;
|
||||
height: 466px !important;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user