forked from M3-Academy/m3-academy-template-checkout
Compare commits
1 Commits
main
...
feature/ca
Author | SHA1 | Date | |
---|---|---|---|
7fc41445af |
@ -16,7 +16,7 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
console.log("iniciando selectors()")
|
||||
console.log("iniciando 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");
|
||||
@ -25,22 +25,21 @@ export default class Footer {
|
||||
this.frete = await waitElement(".shipping-date");
|
||||
this.unidade = await waitElement(".product-price");
|
||||
|
||||
|
||||
this.prateleira = await waitElement(".footerCheckout__prateleira");
|
||||
|
||||
// this.prateleiraSlick = await waitElement(".prateleira__carousel")
|
||||
}
|
||||
|
||||
async replaceCartContent() {
|
||||
console.log("entrou no replaceCart")
|
||||
console.log("entrou no replaceCart");
|
||||
|
||||
if(this.cart) {
|
||||
console.log("entrou no if do replaceCart()")
|
||||
console.log(this.cart)
|
||||
if (this.cart) {
|
||||
console.log("entrou no if do replaceCart()");
|
||||
console.log(this.cart);
|
||||
this.frete.textContent = "Frete";
|
||||
console.log(this.frete)
|
||||
console.log(this.frete);
|
||||
this.unidade.textContent = "Unidade";
|
||||
console.log(this.unidade)
|
||||
console.log(this.unidade);
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,63 +57,64 @@ export default class Footer {
|
||||
// }
|
||||
|
||||
async onUpdate() {
|
||||
console.log("chamada do onUpdate()")
|
||||
console.log("chamada do onUpdate()");
|
||||
//Função qeu 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
|
||||
if(this.checkoutVazio) {
|
||||
console.log("entrou no if do onUpdate()")
|
||||
if (this.checkoutVazio) {
|
||||
console.log("entrou no if do onUpdate()");
|
||||
|
||||
if (this.checkoutVazio.style.display == "block") {
|
||||
console.log("Carrinho está vazio");
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "none";
|
||||
} else {
|
||||
console.log("Carrinho NÃO está vazio");
|
||||
this.cartTitle.style.display = "block";
|
||||
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
console.log("Está no #/cart");
|
||||
this.prateleira.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
let target = this.checkoutVazio;
|
||||
let config = { attributes: true };
|
||||
|
||||
if(this.checkoutVazio.style.display == "block") {
|
||||
console.log("Carrinho está vazio ou não está no #/cart")
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "none";
|
||||
|
||||
} else {
|
||||
console.log("Carrinho NÃO está vazio e está no #/cart");
|
||||
this.cartTitle.style.display = "block";
|
||||
this.prateleira.style.display = "block";
|
||||
}
|
||||
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(() => {
|
||||
|
||||
if(this.checkoutVazio.style.display == "block") {
|
||||
console.log("Carrinho está vazio ou não está no #/cart")
|
||||
if (this.checkoutVazio.style.display == "block") {
|
||||
console.log("Carrinho está vazio ou não está no #/cart");
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "none";
|
||||
|
||||
} else {
|
||||
console.log("Carrinho NÃO está vazio e está no #/cart");
|
||||
this.cartTitle.style.display = "block";
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
this.prateleira.style.display = "block";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
// window.addEventListener("hashchange", () => {
|
||||
// if (window.location.hash == "#/cart") {
|
||||
// this.cartTitle.style.display = "none";
|
||||
// this.prateleira.style.display = "block";
|
||||
// // this.renderPrateleira();
|
||||
// } else {
|
||||
// this.cartTitle.style.display = "block";
|
||||
// this.prateleira.style.display = "none";
|
||||
// }
|
||||
// });
|
||||
|
||||
if (window.location.hash == "#/cart") {
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "block";
|
||||
// this.renderPrateleira();
|
||||
} else {
|
||||
this.cartTitle.style.display = "block";
|
||||
this.prateleira.style.display = "none";
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async renderPrateleira() {
|
||||
|
||||
if (this.prateleira) {
|
||||
|
||||
const prateleiraTitle = document.createElement("h2");
|
||||
const titleNode = document.createTextNode("Você também pode gostar:");
|
||||
prateleiraTitle.classList.add("prateleira__title");
|
||||
@ -123,17 +123,18 @@ export default class Footer {
|
||||
const prateleiraSlick = document.createElement("ul");
|
||||
prateleiraSlick.classList.add("prateleira__carousel");
|
||||
|
||||
const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319");
|
||||
const response = await fetch(
|
||||
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
|
||||
);
|
||||
console.log("await fetch response:", response);
|
||||
const productsList = await response.json();
|
||||
console.log("await fetch productsList:", productsList);
|
||||
|
||||
let cardsStructure = "";
|
||||
|
||||
if(productsList) {
|
||||
|
||||
if (productsList) {
|
||||
productsList.forEach((product) => {
|
||||
console.log(product)
|
||||
console.log(product);
|
||||
|
||||
const productImageUrl = product.items[0].images[0].imageUrl;
|
||||
const productName = product.productName;
|
||||
@ -141,7 +142,6 @@ export default class Footer {
|
||||
const productLink = product.link;
|
||||
let skusStructure = "";
|
||||
|
||||
|
||||
console.log("productImageUrl:", productImageUrl);
|
||||
console.log("productName:", productName);
|
||||
console.log("productSkus:", productSkus);
|
||||
@ -153,8 +153,8 @@ export default class Footer {
|
||||
<li>
|
||||
<button type="button">${sku.name}</button>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
`;
|
||||
});
|
||||
|
||||
cardsStructure += `
|
||||
<li class="prateleira__item">
|
||||
@ -169,8 +169,8 @@ export default class Footer {
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
`;
|
||||
});
|
||||
|
||||
this.prateleira.appendChild(prateleiraTitle);
|
||||
this.prateleira.appendChild(prateleiraSlick);
|
||||
@ -199,22 +199,22 @@ export default class Footer {
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
async stampsHTML() {
|
||||
console.log("entrou no stamps")
|
||||
console.log("entrou no stamps");
|
||||
|
||||
const stamps = await waitElement('.footerCheckout__stamps');
|
||||
const stamps = await waitElement(".footerCheckout__stamps");
|
||||
|
||||
// console.log(stamps.children[0], stamps.children[2]);
|
||||
|
||||
@ -248,38 +248,37 @@ export default class Footer {
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
`
|
||||
`;
|
||||
|
||||
const certifiedStructure = `
|
||||
<img class="footerCheckout__vtexpci footerCheckout__payments--certified" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
|
||||
`
|
||||
`;
|
||||
|
||||
stamps.children[0].innerHTML = paymentsStructure;
|
||||
stamps.children[2].innerHTML = certifiedStructure;
|
||||
}
|
||||
|
||||
async developedByHTML() {
|
||||
console.log("entrou no developedBy")
|
||||
console.log("entrou no developedBy");
|
||||
|
||||
const developedBy = await waitElement('.footerCheckout__developedBy');
|
||||
const developedBy = await waitElement(".footerCheckout__developedBy");
|
||||
|
||||
// console.log(developedBy.children[0].children[0]);
|
||||
|
||||
const vtexIcon = `
|
||||
<span>Powered By</span>
|
||||
<img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="" />
|
||||
`
|
||||
`;
|
||||
|
||||
const m3Icon = `
|
||||
<span>Powered By</span>
|
||||
<img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="" />
|
||||
`
|
||||
`;
|
||||
|
||||
developedBy.children[0].children[0].innerHTML = vtexIcon;
|
||||
developedBy.children[1].children[0].innerHTML = m3Icon;
|
||||
|
||||
// developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link')
|
||||
// developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ import { waitElement } from "m3-utils";
|
||||
export default class Header {
|
||||
constructor() {
|
||||
this.init();
|
||||
console.log("constructor do header")
|
||||
}
|
||||
|
||||
async init() {
|
||||
|
@ -1,4 +1,5 @@
|
||||
.checkout-container {
|
||||
// height: 542px; (567px)
|
||||
// background: yellow;
|
||||
// height: 100%;
|
||||
// box-sizing: border-box;
|
||||
|
@ -9,12 +9,16 @@
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// .cart-template { //
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
// height: 542px; (567 = 552px + mb15)
|
||||
// background: red;
|
||||
margin: 0;
|
||||
|
||||
margin-bottom: 0;
|
||||
|
||||
font-family: $font-family;
|
||||
@include mq(md, max) {
|
||||
@ -1168,3 +1172,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
checkout-container row-fluid cart-active
|
||||
cart-template full-cart span12 active
|
||||
cart-template-holder
|
||||
empty-cart-content
|
||||
empty-cart-title
|
||||
empty-cart-message
|
||||
clearfix empty-cart-links
|
||||
cart
|
||||
*/
|
||||
|
@ -50,4 +50,3 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
@ -1,20 +1,27 @@
|
||||
.empty-cart {
|
||||
|
||||
&-content {
|
||||
margin: 170px 0 262px;
|
||||
margin: 170px 0 247px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
// @include mq(md, max) {
|
||||
// padding: 0 16px;
|
||||
// }
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 0 0 29px;
|
||||
line-height: 33px;
|
||||
font-size: 0;
|
||||
margin: 0 0 32px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
margin: 0 0 22px;
|
||||
@ -22,25 +29,25 @@
|
||||
|
||||
&::after {
|
||||
content: "Seu Carrinho está vazio";
|
||||
line-height: 33px;
|
||||
font-family: $font-family;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: $black-500;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
vertical-align: bottom;
|
||||
|
||||
@include mq(xl, min) {
|
||||
line-height: 65px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
line-height: 25px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@include mq(xs, max) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,16 +56,28 @@
|
||||
}
|
||||
|
||||
&-links {
|
||||
width: 32%; //327px;
|
||||
width: 31.93%; //327px;
|
||||
max-width: 323px;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
|
||||
@include mq(xl, min) {
|
||||
max-width: 645px;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
width: 30.52%;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 39.33%;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.link-choose-products {
|
||||
@ -79,6 +98,7 @@
|
||||
|
||||
&::after {
|
||||
content: "Continuar comprando";
|
||||
padding: 16px 26px;
|
||||
line-height: 16px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 14px;
|
||||
@ -88,6 +108,14 @@
|
||||
line-height: 33px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@include mq(xs, max) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
@ -16,8 +16,7 @@ footer .footerCheckout__wrapper {
|
||||
width: 100%;
|
||||
// margin: auto auto 0 auto;
|
||||
}
|
||||
footer .footerCheckout__prateleira,
|
||||
header {
|
||||
footer .footerCheckout__prateleira {
|
||||
width: 79.53125%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
@ -30,8 +30,8 @@ $color-green: #4caf50;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
xs: 375px,
|
||||
cstm: 400px,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 1025px,
|
||||
|
Loading…
Reference in New Issue
Block a user