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() {
this.list = await this.fetchApiData();
await this.selectors();
this.cartTitle = await waitElement("#cart-title");
console.log(this.cartTitle);
await this.cartUpdate();
this.emptyTitle = await waitElement(".empty-cart-title");
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.emptyCartButton();
await this.selectors();
this.addPaymentsMethodsIcons();
this.addCertificationIcon();
this.addDevelopedByIcons();
this.events();
this.cartUpdate();
this.items = await waitElement(".footerCheckout__prateleira-container");
console.log(this.items, "console de items");
this.renderItems();
await this.renderItems();
await this.addCarrossel();
}
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.prateleira = await waitElement(".footerCheckout__prateleira");
this.checkoutVazio = await waitElement(".empty-cart-content", {
timeout: 5000,
interval: 1,
});
this.prateleira = await waitElement(".footerCheckout__prateleira", {
timeout: 5000,
interval: 1,
});
}
events() {
window.addEventListener("hashchange", this.outPrateleira.bind(this));
}
cartUpdate() {
async cartUpdate() {
console.log("cartUpdate");
//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
let target = this.checkoutVazio;
console.log("target");
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) => {
const cartStatus = mutation.target.attributes.style.nodeValue;
console.log(cartStatus);
if (cartStatus === "display: none;") {
this.cartTitle.classList.remove("inactive");
this.renderPrateleira();
console.log("Adiciona Prateleira");
this.cartTitle.classList.remove("inactive");
console.log("Adiciona Título");
} else if (cartStatus === "display: block;") {
this.cartTitle.classList.add("inactive");
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 = `
<div class="footerCheckout__prateleira__title">
<h2>Você também pode gostar:</h2>
@ -89,7 +109,7 @@ export default class Footer {
this.prateleira.innerHTML = itemsStructure;
}
renderItems() {
async renderItems() {
let itemsCards = ``;
this.list.forEach((item) => {
const sku = item.skus.map((resp) => `<li>${resp}</li>`);
@ -98,7 +118,7 @@ export default class Footer {
<figure>
<img
src="${item.image}"
alt="Imagem Ponto Turístico"
alt="Imagem do Produto"
/>
</figure>
<div class="items__detail">
@ -139,6 +159,61 @@ export default class Footer {
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() {
const elemento = await waitElement(".footerCheckout__prateleira-container");
$(elemento).slick({

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

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

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

@ -133,9 +133,6 @@
}
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 56px !important;
border-top: 1px solid $color-black;
width: 100% !important;
@ -144,17 +141,23 @@
display: flex;
justify-content: space-between;
align-items: center;
width: 95%;
height: 65px;
&::before,
&::after {
display: none;
}
}
}
&__address {
color: $color-gray2;
font-family: $font-family;
font-family: "Open Sans";
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
line-height: 14px;
text-transform: capitalize;
max-width: 40%;
@ -167,8 +170,22 @@
&__stamps {
align-items: center;
display: flex;
justify-self: center;
justify-content: space-between;
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) {
align-self: center;
@ -184,6 +201,10 @@
}
}
&__vtexpci {
height: 33px !important;
}
&__developedBy {
align-items: center;
display: flex;
@ -206,7 +227,15 @@
text-decoration: none;
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;
}
}
@media (max-width: 1024px) {
.progress-bar {
display: none;
}
}
}
&__wrapper {
align-items: center;

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

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