forked from M3-Academy/m3-academy-template-checkout
Merge branch 'feature/Header' into develop
This commit is contained in:
commit
551a136408
@ -7,13 +7,114 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
// this.onUpdate();
|
||||
this.createPaymentsIcons();
|
||||
this.createVtexpciIcon();
|
||||
this.createDevIcons();
|
||||
}
|
||||
|
||||
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.payments = await waitElement(".footerCheckout__payments");
|
||||
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
|
||||
this.devIncons = await waitElement(".footerCheckout__developedBy");
|
||||
}
|
||||
createPaymentsIcons() {
|
||||
this.payments.innerHTML = `
|
||||
<ul class="payments-icons-wrapper">
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createVtexpciIcon() {
|
||||
this.vtexpci.innerHTML = `
|
||||
<figure class="vtex-icon">
|
||||
<img class="vtex-icon"
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
`;
|
||||
}
|
||||
|
||||
createDevIcons() {
|
||||
this.devIncons.innerHTML = `
|
||||
<li>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<span>Powered By</span>
|
||||
<figure>
|
||||
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
<figure>
|
||||
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// import waitForEl from "../helpers/waitForEl";
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Header {
|
||||
@ -8,14 +7,226 @@ export default class Header {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
console.log(this.item);
|
||||
this.progressBarHTML();
|
||||
await this.progressBarProgress();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.item = await waitElement("#my-element", {
|
||||
//#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.header = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
}
|
||||
|
||||
progressBarHTML() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
this.progressBar.innerHTML = `
|
||||
<ul>
|
||||
<li><div class="containerLi"><div><p class="progress-bar-text">Meu Carinho</p><p id="progress-bar-circle-1" class="progress-bar-circle-1"></p><p class="progress-bar-line-1"></p></div></div></li>
|
||||
|
||||
<li class="central"><div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
|
||||
|
||||
<li><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p class="progress-bar-line-2"></p></div></div></li>
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
if (this.progressBar && window.innerHTML <= 1024) {
|
||||
this.progressBar.innerHTML = ``;
|
||||
}
|
||||
}
|
||||
|
||||
async progressBarProgress() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||
progressBarLista.forEach((li) => {
|
||||
if (window.location.href === "http://m3academy.myvtex.com/checkout/#/cart") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.href === "http://m3academy.myvtex.com/checkout/#/email" ||
|
||||
window.location.href == "http://m3academy.myvtex.com/checkout/#/profile" ||
|
||||
window.location.href === "http://m3academy.myvtex.com/checkout/#/shipping"
|
||||
) {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.href === "http://m3academy.myvtex.com/checkout/#/payment"
|
||||
) {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
}
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (window.location.hash == "#/cart") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.add("active");
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.hash == "#/email" ||
|
||||
window.location.hash == "#/profile" ||
|
||||
window.location.hash == "#/shipping"
|
||||
) {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.add("active");
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
} else if (window.location.hash == "#/payment") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.add("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
&__logo {
|
||||
img {
|
||||
height: 52px;
|
||||
height: 37.14px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@ -33,4 +33,92 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
#progressBar{
|
||||
width: 446px;
|
||||
ul{
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 !important;
|
||||
}
|
||||
li .containerLi{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
li.central .containerLi{
|
||||
align-items: center;
|
||||
margin-left: 7px;
|
||||
}
|
||||
li:last-child .containerLi{
|
||||
align-items: flex-end;
|
||||
}
|
||||
li .containerLi div{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Tenor Sans", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #000;
|
||||
width: 39.9183%;
|
||||
@media (min-width: 2500px){
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
li.central{
|
||||
width: auto;
|
||||
}
|
||||
li #progress-bar-circle-1,
|
||||
li #progress-bar-circle-2,
|
||||
li #progress-bar-circle-3{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 50%;
|
||||
@media (min-width: 2500px){
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
li #progress-bar-circle-1.active,
|
||||
li #progress-bar-circle-2.active,
|
||||
li #progress-bar-circle-3.active{
|
||||
border: none;
|
||||
background-color: #000000;
|
||||
}
|
||||
li .progress-bar-line-1{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
transform: translateY(-50%);
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px solid #000000;
|
||||
}
|
||||
li .progress-bar-line-2{
|
||||
position: absolute;
|
||||
right: 21%;
|
||||
transform: translateY(-50%);
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px solid #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user