diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index b34a32a..8fb2575 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -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 =
+ `
+ 1
+ 2
+ 3
+ 4
+ 5
+ `
+ $(this.slick).slick({
slidesToShow: 4,
slidesToScroll: 1,
+ infinite: true,
+ initialSlide: 0,
+ variableWidth:true,
});
}
}
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 148eda7..af111a8 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -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 {
`
+ 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');
}
}
})
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 20a1ea1..3846abe 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -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;
+ }
}