forked from M3-Academy/m3-academy-template-checkout
feat(footer):footer estruturado
This commit is contained in:
parent
b5d3f3c905
commit
3802b0c524
@ -7,6 +7,7 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
await this.addCarrossel();
|
||||
// this.onUpdate();
|
||||
}
|
||||
|
||||
@ -14,6 +15,7 @@ export default class Footer {
|
||||
//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.slick = await waitElement(".footerCheckout__prateleira");
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
@ -31,7 +33,7 @@ export default class Footer {
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
const elemento = await waitElement("footerCheckout__prateleira");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
|
||||
@ -51,36 +51,30 @@ export default class Header {
|
||||
const step1 = document.getElementById("step_1")
|
||||
const step2 = document.getElementById("step_2")
|
||||
const step3 = document.getElementById("step_3")
|
||||
console.log(step1,"primeiro circulo")
|
||||
console.log(step2,"segundo circulo")
|
||||
console.log(step3,"terceiro circulo")
|
||||
progressList.forEach((li) => {
|
||||
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart"){
|
||||
console.log("estou no cart")
|
||||
if(li.children[1].id === "step_1"){
|
||||
step2.classList.remove('completed');
|
||||
step3.classList.remove('completed');
|
||||
li.children[1].classList.toggle('completed');
|
||||
}
|
||||
}
|
||||
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email"){
|
||||
console.log("estou no email")
|
||||
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/email"
|
||||
|| window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
|
||||
|| window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"){
|
||||
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.toggle('completed');
|
||||
li.children[1].classList.add('completed');
|
||||
}
|
||||
}
|
||||
if(window.location.href == "https://m3academy.myvtex.com/checkout/#/profile"
|
||||
|| window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
|
||||
|| window.location.href == "https://m3academy.myvtex.com/checkout/#/payment"){
|
||||
console.log("estou no profile")
|
||||
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.add('completed');
|
||||
li.children[1].classList.toggle('completed');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -9,7 +9,7 @@ export default class Footer {
|
||||
async init() {
|
||||
await this.selectors();
|
||||
await this.event();
|
||||
await this.TextBtn();
|
||||
await this.TextTransfer();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
@ -18,13 +18,80 @@ export default class Footer {
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
});
|
||||
|
||||
this.IconPayFot = await waitElement(".footerCheckout__payments", {
|
||||
//#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.IconVtex = await waitElement(".footerCheckout__vtexpci", {
|
||||
//#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
|
||||
});
|
||||
}
|
||||
async event() {
|
||||
|
||||
|
||||
|
||||
}
|
||||
async TextBtn(){
|
||||
async TextTransfer(){
|
||||
const IconDev = document.querySelector(".footerCheckout__developedBy")
|
||||
|
||||
IconDev.children[0].children[0].innerHTML=`
|
||||
<span>Powered by</span>
|
||||
<img class="VtexM3"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"
|
||||
alt="M3 Academy"/>
|
||||
`
|
||||
IconDev.children[1].children[0].innerHTML=`
|
||||
<span>Developed by</span>
|
||||
<img class="VtexM3_2"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"
|
||||
alt="M3 Academy"/>
|
||||
`
|
||||
this.IconVtex.innerHTML=`
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/vtex-pci-200.png"
|
||||
alt="M3 Academy"/>
|
||||
`
|
||||
this.IconPayFot.innerHTML=`
|
||||
<ol class="footerCheckout__payments__images">
|
||||
<li id="img-1" class="images_pay-card">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/Master.png"
|
||||
alt="M3 Academy"/>
|
||||
</li>
|
||||
<li id="img-2" class="images_pay-card">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/Visa.png"
|
||||
alt="M3 Academy"/>
|
||||
</li>
|
||||
<li id="img-3" class="images_pay-card">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/americanexpress.png"
|
||||
alt="M3 Academy"/>
|
||||
</li>
|
||||
<li id="img-4" class="images_pay-card">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/Elo.png"
|
||||
alt="M3 Academy"/>
|
||||
</li>
|
||||
<li id="img-5" class="images_pay-card">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/Hiper.png"
|
||||
alt="M3 Academy"/>
|
||||
</li>
|
||||
<li id="img-6" class="images_pay-card">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/paypal.png"
|
||||
alt="M3 Academy"/>
|
||||
</li>
|
||||
<li id="img-7" class="images_pay-card">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/Boleto.png"
|
||||
alt="M3 Academy"/>
|
||||
</li>
|
||||
</ol>`
|
||||
|
||||
this.buttonText.innerHTML =`
|
||||
CONTINUAR COMPRANDO
|
||||
`
|
||||
|
||||
@ -3,10 +3,38 @@
|
||||
border-top: none;
|
||||
color: $color-gray2;
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 67px;
|
||||
border-bottom: 1px solid $color-black;
|
||||
}
|
||||
&__payments{
|
||||
&__images{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.images_pay-card{
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
.container{
|
||||
position: absolute;
|
||||
top: 94px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&__address {
|
||||
@ -51,6 +79,14 @@
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
.VtexM3{
|
||||
width: 44px;
|
||||
height: 16px;
|
||||
}
|
||||
.VtexM3_2{
|
||||
width: 28px;
|
||||
height: 16px;
|
||||
}
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user