Rafael_Sampaio_de_Oliveira/m3-academy-template-checkout-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona css do footer para desktop 1280px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2022-12-14 07:27:08 -03:00
parent e0ad9dc347
commit 419d04772c
5 changed files with 147 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
checkout/src/arquivos/js/components/Footer.js
View File

@ -7,50 +7,70 @@ export default class Footer {
async init() { async init() {
this.list = await this.fetchApiData(); this.list = await this.fetchApiData();
await this.selectors();
this.cartTitle = await waitElement("#cart-title"); this.cartTitle = await waitElement("#cart-title");
console.log(this.cartTitle);
await this.cartUpdate();
this.emptyTitle = await waitElement(".empty-cart-title"); this.emptyTitle = await waitElement(".empty-cart-title");
this.emptyButton = await waitElement(".link-choose-products"); this.emptyButton = await waitElement(".link-choose-products");
this.paymentsMethods = await waitElement(".footerCheckout__payments");
this.certification = await waitElement(".footerCheckout__vtexpci");
this.developedBy = await waitElement(".footerCheckout__developedBy");
this.emptyCartTitle(); this.emptyCartTitle();
this.emptyCartButton(); this.emptyCartButton();
await this.selectors(); this.addPaymentsMethodsIcons();
this.addCertificationIcon();
this.addDevelopedByIcons();
this.events(); this.events();
this.cartUpdate();
this.items = await waitElement(".footerCheckout__prateleira-container"); this.items = await waitElement(".footerCheckout__prateleira-container");
console.log(this.items, "console de items"); console.log(this.items, "console de items");
this.renderItems(); await this.renderItems();
await this.addCarrossel(); await this.addCarrossel();
} }
async selectors() { async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // 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", {
this.prateleira = await waitElement(".footerCheckout__prateleira"); timeout: 5000,
interval: 1,
});
this.prateleira = await waitElement(".footerCheckout__prateleira", {
timeout: 5000,
interval: 1,
});
} }
events() { events() {
window.addEventListener("hashchange", this.outPrateleira.bind(this)); window.addEventListener("hashchange", this.outPrateleira.bind(this));
} }
cartUpdate() { async cartUpdate() {
console.log("cartUpdate"); console.log("cartUpdate");
//Função que fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //Função que 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 // 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 // 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 target = this.checkoutVazio;
console.log("target");
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { console.log("config");
let observer = await new MutationObserver((mutations) => {
console.log("observer");
mutations.map((mutation) => { mutations.map((mutation) => {
const cartStatus = mutation.target.attributes.style.nodeValue; const cartStatus = mutation.target.attributes.style.nodeValue;
console.log(cartStatus); console.log(cartStatus);
if (cartStatus === "display: none;") { if (cartStatus === "display: none;") {
this.cartTitle.classList.remove("inactive");
this.renderPrateleira(); this.renderPrateleira();
console.log("Adiciona Prateleira");
this.cartTitle.classList.remove("inactive");
console.log("Adiciona Título");
} else if (cartStatus === "display: block;") { } else if (cartStatus === "display: block;") {
this.cartTitle.classList.add("inactive");
this.removePrateleira(); this.removePrateleira();
console.log("Remove Prateleira");
this.cartTitle.classList.add("inactive");
console.log("Remove Título");
} }
}); });
}); });
@ -75,7 +95,7 @@ export default class Footer {
}); });
} }
renderPrateleira() { async renderPrateleira() {
let itemsStructure = ` let itemsStructure = `
<div class="footerCheckout__prateleira__title"> <div class="footerCheckout__prateleira__title">
<h2>Você também pode gostar:</h2> <h2>Você também pode gostar:</h2>
@ -89,7 +109,7 @@ export default class Footer {
this.prateleira.innerHTML = itemsStructure; this.prateleira.innerHTML = itemsStructure;
} }
renderItems() { async renderItems() {
let itemsCards = ``; let itemsCards = ``;
this.list.forEach((item) => { this.list.forEach((item) => {
const sku = item.skus.map((resp) => `<li>${resp}</li>`); const sku = item.skus.map((resp) => `<li>${resp}</li>`);
@ -98,7 +118,7 @@ export default class Footer {
<figure> <figure>
<img <img
src="${item.image}" src="${item.image}"
alt="Imagem Ponto Turístico" alt="Imagem do Produto"
/> />
</figure> </figure>
<div class="items__detail"> <div class="items__detail">
@ -139,6 +159,61 @@ export default class Footer {
this.emptyButton.innerHTML = `Continuar Comprando`; this.emptyButton.innerHTML = `Continuar Comprando`;
} }
addPaymentsMethodsIcons() {
this.paymentsMethods.innerHTML = `
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Ícone método pagamento" />
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Ícone método pagamento" />
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Ícone método pagamento" />
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Ícone método pagamento" />
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Ícone método pagamento" />
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Ícone método pagamento" />
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Ícone método pagamento" />
</li>
`;
}
addCertificationIcon() {
this.certification.innerHTML = `
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Ícone Certificado" />
</li>
`;
}
addDevelopedByIcons() {
this.developedBy.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<span class="vetexIcon">
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo da Vtex" />
</span>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<span class="m3Icon">
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo da M3"/>
</span>
</a>
</li>
`;
}
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement(".footerCheckout__prateleira-container"); const elemento = await waitElement(".footerCheckout__prateleira-container");
$(elemento).slick({ $(elemento).slick({

20
checkout/src/arquivos/js/components/Header.js
View File

@ -8,9 +8,9 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
// this.events();
this.progressBarHTML(); this.progressBarHTML();
await this.progressBarProgress(); await this.progressBarProgress();
// console.log(this.progressBar);
} }
async selectors() { async selectors() {
@ -25,6 +25,10 @@ export default class Header {
}); });
} }
events() {
window.addEventListener("resize", this.displayWindowSize.bind(this));
}
progressBarHTML() { progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
@ -35,11 +39,19 @@ export default class Header {
</ul> </ul>
`; `;
} }
if (this.progressBar && window.innerHTML <= 1024) {
this.progressBar.innerHTML = `${" "}`;
}
} }
// displayWindowSize() {
// let width = window.outerWidth;
// if (width > 1024) {
// this.progressBar.classList.remove("inactive");
// }
// if (width <= 1024) {
// this.progressBar.classList.add("inactive");
// }
// }
async progressBarProgress() { async progressBarProgress() {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
const progressBarList = document.querySelectorAll("#progressBar ul li"); const progressBarList = document.querySelectorAll("#progressBar ul li");

45
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -133,9 +133,6 @@
} }
&__wrapper { &__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 56px !important; margin-top: 56px !important;
border-top: 1px solid $color-black; border-top: 1px solid $color-black;
width: 100% !important; width: 100% !important;
@ -144,17 +141,23 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 95%;
height: 65px; height: 65px;
&::before,
&::after {
display: none;
}
} }
} }
&__address { &__address {
color: $color-gray2; color: $color-gray2;
font-family: $font-family; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 14px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
@ -167,8 +170,22 @@
&__stamps { &__stamps {
align-items: center; align-items: center;
display: flex; display: flex;
justify-self: center; justify-content: space-between;
list-style: none; list-style: none;
width: 33.224%;
max-width: 404px;
span {
display: flex;
justify-content: space-between;
height: 20px;
gap: 13px;
img {
display: block;
height: 100%;
}
}
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
@ -184,6 +201,10 @@
} }
} }
&__vtexpci {
height: 33px !important;
}
&__developedBy { &__developedBy {
align-items: center; align-items: center;
display: flex; display: flex;
@ -206,7 +227,15 @@
text-decoration: none; text-decoration: none;
span { span {
margin-right: 8px; display: flex;
justify-content: center;
align-items: center;
}
img {
display: block;
height: 16px;
margin-left: 8px;
} }
} }
} }

6
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -90,6 +90,12 @@
border-top: 1px solid $color-black; border-top: 1px solid $color-black;
} }
} }
@media (max-width: 1024px) {
.progress-bar {
display: none;
}
}
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -10,7 +10,7 @@ $color-black: #000000;
$color-white: #ffffff; $color-white: #ffffff;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #292929;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;