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:feature/cart
Branches Tags
andreamatsunaga:main
andreamatsunaga:feature/cart
andreamatsunaga:development
andreamatsunaga:feature/header
andreamatsunaga:feature/responsiveness
andreamatsunaga:feature/order-form
andreamatsunaga:feature/footer
..
compare: andreamatsunaga:main
Branches Tags
andreamatsunaga:feature/cart
andreamatsunaga:development
andreamatsunaga:feature/header
andreamatsunaga:main
andreamatsunaga:feature/responsiveness
andreamatsunaga:feature/order-form
andreamatsunaga:feature/footer

2 Commits
feature/ca ... main

Author SHA1 Message Date
Andrea Matsunaga
b6fb8fc094 Merge pull request 'development' (#2) from development into main 
Reviewed-on: #2
 2022-12-19 04:54:38 +00:00
Andrea Matsunaga
e6b5ad810e Merge pull request 'development' (#1) from development into main 
Reviewed-on: #1
 2022-12-19 04:49:08 +00:00
8 changed files with 83 additions and 127 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,21 +25,22 @@ 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)
}
}
@ -57,64 +58,63 @@ 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.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";
}
}
if(this.checkoutVazio) {
console.log("entrou no if do onUpdate()")
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";
}
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,18 +123,17 @@ 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;
@ -142,6 +141,7 @@ 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,37 +248,38 @@ 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,7 +4,6 @@ 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,5 +1,4 @@
.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,16 +9,12 @@
@include mq(md, max) {
width: 100%;
}
// .cart-template { //
// margin-bottom: 0;
// }
}
.cart-template {
// height: 542px; (567 = 552px + mb15)
// background: red;
margin-bottom: 0;
margin: 0;
font-family: $font-family;
@include mq(md, max) {
@ -1172,16 +1168,3 @@
}
}
}
/*
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,3 +50,4 @@ body .container-main.container-order-form .orderform-template.active {
// }
}

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

@ -1,27 +1,20 @@
.empty-cart {
&-content {
margin: 170px 0 247px;
margin: 170px 0 262px;
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;
@include mq(xl, min) {
line-height: 65px;
}
@include mq(lg, max) {
line-height: 25px;
}
margin: 0 0 32px;
@include mq(sm, max) {
margin: 0 0 22px;
@ -29,25 +22,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;
}
}
}
@ -56,28 +49,16 @@
}
&-links {
width: 31.93%; //327px;
max-width: 323px;
width: 32%; //327px;
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 {
@ -98,7 +79,6 @@
&::after {
content: "Continuar comprando";
padding: 16px 26px;
line-height: 16px;
font-family: $font-family-secundary;
font-size: 14px;
@ -108,14 +88,6 @@
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,7 +16,8 @@ footer .footerCheckout__wrapper {
width: 100%;
// margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira {
footer .footerCheckout__prateleira,
header {
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: 375px,
cstm: 400px,
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 1025px,