andreamatsunaga/m3-academy-template-checkout-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: andreamatsunaga:main
Branches Tags
andreamatsunaga:main
andreamatsunaga:feature/cart
andreamatsunaga:development
andreamatsunaga:feature/header
andreamatsunaga:feature/responsiveness
andreamatsunaga:feature/order-form
andreamatsunaga:feature/footer
..
compare: andreamatsunaga:feature/cart
Branches Tags
andreamatsunaga:feature/cart
andreamatsunaga:development
andreamatsunaga:feature/header
andreamatsunaga:main
andreamatsunaga:feature/responsiveness
andreamatsunaga:feature/order-form
andreamatsunaga:feature/footer

1 Commits
main ... feature/ca

Author SHA1 Message Date
Andrea Matsunaga
7fc41445af feat: ajusta responsividade do empty cart 2022-12-24 01:53:50 -03:00
8 changed files with 127 additions and 83 deletions
Show Stats Expand all files Collapse all files

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

@ -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";
this.prateleira.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", () => {
// 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";
// }
// });
}
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";
}
})
}
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,15 +169,15 @@ export default class Footer {
</a>
</div>
</li>
`
})
`;
});
this.prateleira.appendChild(prateleiraTitle);
this.prateleira.appendChild(prateleiraSlick);
prateleiraSlick.innerHTML = cardsStructure;
// if(window.innerWidth > 1024) {
this.addCarrossel(prateleiraSlick);
this.addCarrossel(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')
}
}

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

@ -4,6 +4,7 @@ import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
console.log("constructor do header")
}
async init() {

1
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -1,4 +1,5 @@
.checkout-container {
// height: 542px; (567px)
// background: yellow;
// height: 100%;
// box-sizing: border-box;

21
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -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
*/

1
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -50,4 +50,3 @@ body .container-main.container-order-form .orderform-template.active {
// }
}

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

@ -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 {

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

@ -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;
}

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

@ -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,