WellingtonDuarteSantos/m3-academy-template-checkout-wellington-duarte-santos
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat(cart): Ajuste sem itens no carrinho' (#1) from feature/cart into development

Browse Source 
Reviewed-on: #1
This commit is contained in:
Wellington Duarte Santos 2022-12-18 18:30:23 +00:00
commit 9a7bd60935
3 changed files with 48 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,19 +7,41 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
this.onUpdate();
await this.hideCartTitle();
}
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.checkoutTitle = await waitElement("#cart-title");
this.cartChooseProducts = await waitElement("#cart-choose-products");
this.productName = await waitElement("#product-name", {
timeout: 5000,
interval: 1000,
});
}
async hideCartTitle() {
if (this.checkoutVazio) {
console.log("Carrinho Vazio, removendo título");
this.checkoutTitle.classList.add("hidden");
}
// if (this.productName) {
// console.log("Produto Encontrado, adicionando título");
// if (this.checkoutTitle.classList.contains("hidden")) {
// console.log("Titulo tá escondido");
// this.checkoutTitle.classList.remove("hidden");
// this.checkoutTitle.classList.add("visible");
// }
// }
}
onUpdate() {
//Função qeu 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
// 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 checkoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio;
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
@ -29,7 +51,10 @@ export default class Footer {
});
observer.observe(target, config);
this.cartChooseProducts.innerHTML = "Continuar Comprando";
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({

17
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -18,24 +18,29 @@
&-links {
.link-choose-products {
background: $color-black;
border: none;
border-radius: 5px;
background: white;
border: 1px solid #000000;
transition: ease-in 0.22s all;
outline: none;
font-family: $font-family;
font-family: "Tenor Sans";
font-style: normal;
font-weight: 500;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-white;
color: #000;
text-transform: uppercase;
cursor: pointer;
padding: 16px 65px;
&:hover {
background: lighten($color-black, 5);
}
}
}
&-message {
display: none;
}
}

10
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -66,9 +66,17 @@ body {
color: $color-black !important;
}
.hidden {
display: none;
}
.visible {
display: block;
}
#cart-title,
#orderform-title {
color: $color-gray2;
color: #292929;
font-family: $font-family;
margin: 40px 0 30px;
letter-spacing: 0.1em;