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

feature/footer #4

Merged
ViniciusDeniz merged 3 commits from feature/footer into main 2022-12-19 02:35:14 +00:00
Conversation 0 Commits 3 Files Changed 5 +121 -342
5 changed files with 121 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,98 +1,31 @@
// import { waitElement } from "m3-utils";
// export default class Footer {
// constructor() {
// this.init();
// }
// async init() {
// await this.selectors();
// // this.onUpdate();
// }
// 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");
// }
// 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
// let target = this.checkoutVazio;
// let config = { childList: true, attributes: true };
// let observer = new MutationObserver((mutations) => {
// mutations.forEach(function (mutation) {
// console.log(mutation.type);
// });
// });
// observer.observe(target, config);
// }
// async addCarrossel() {
// const elemento = await waitElement("#my-element");
// $(elemento).slick({
// slidesToShow: 4,
// slidesToScroll: 1,
// });
// }
// }
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
constructor() { constructor() {
this.init(); this.init();
this.requestShelf();
this.addCarrossel();
} }
async init() { async init() {
this.list = await this.fetchPrateleira();
await this.selectors(); await this.selectors();
// this.onUpdate(); // this.onUpdate();
this.requestShelf(); this.createPrateleira();
this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
this.itensPrateleira();
this.addCarrossel(); this.addCarrossel();
this.creditCardIconsHTML();
this.developedByIconsHTML();
} }
async selectors() { async selectors() {
this.itensShelf = await waitElement(".footerCheckout__prateleira"); this.itensShelf = await waitElement(".footerCheckout__prateleira", {
// this.itensShelf = await waitElement(".empty-cart-content") timeout: 5000,
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: interval: 1000,
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement });
// this.checkoutVazio = await waitElement(".container-cart", { this.creditCardIcons = await waitElement(".footerCheckout__stamps");
this.developedByIcons = await waitElement(".footerCheckout__developedBy");
// });
}
requestShelf() {
let prateleira = this.itensShelf;
prateleira.innerHTML = `
<p class="footerChekout__prateleira-title">Você também pode gostar</p>
<ul class="carrosel-ul"></ul>
`;
const api =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
const prodUl = document.querySelector("carrosel-ul");
fetch(api)
.then((response) => response.json())
.then(function (data) {
return data.map(function (item) {
let li = document.createElement("li");
li.setAttribute("id", item.productId);
li.innerHTML = `
<img src="${item.items[0].images[0].imageUrl}" alt="${item.productName}" />
<p class="product-name">${item.productName}</p>
<div class="product-variation">${item.items
.map((name) => {
return `<a name="product-variationvariation" class="product-variationvariation">${name.name}</a>`;
})
.join("")}</div>
<button class="show-product">Ver produto</button>
`;
prateleira.children[1].appendChild(li);
});
});
} }
onUpdate() { onUpdate() {
@ -100,8 +33,8 @@ export default class Footer {
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // 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 chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio; let target = this.checkoutVazio;
let config = { childList: true, attributes: true }; letconfig = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { letobserver = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
console.log(mutation.type); console.log(mutation.type);
}); });
@ -109,14 +42,95 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
createPrateleira() {
if (this.itensShelf) {
this.itensShelf.innerHTML = `
<div class="footerCheckout__prateleira-title">
<h2>Você também pode gostar:</h2>
</div>
<ul class="footerCheckout__carrossel-itens"></ul>
`;
}
}
async itensPrateleira() {
letstructure = "";
this.list.forEach((response) => {
const sku = response.skus.map((item) => `<li>${item}</li>`);
structure += `
<li>
<figure><img src ="${response.img}"/></figure>
<figcaption>${response.name}</figcaption>
<div><ul>${sku}</ul></div>
<button type="button"><a href="${response.link}">Ver Produto</a></button>
</li>
`;
});
this.prateleira.innerHTML = structure;
}
async fetchPrateleira() {
constapi =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
return fetch(api)
.then((response) => response.json())
.then((data) => {
const prodInfo = data.map((response) => ({
name: response.productName,
skus: response.items.map((item) => item.name),
img: response.items[0].images[0].imageUrl,
link: response.link,
}));
return prodInfo;
});
}
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement(".carrosel-ul"); const elemento = await waitElement(".footerCheckout__carrossel-itens");
$(elemento).slick({ $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
arrows: true, arrows: true,
variableWidth: true,
infinite: false, infinite: false,
}); });
} }
creditCardIconsHTML() {
this.creditCardIcons.innerHTML = `
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li>
<li><span class="footerCheckout__stamps__divider"></span></li>
<li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li>
`;
}
developedByIconsHTML() {
this.developedByIcons.innerHTML = `
<li>
<div class="by-vtex">
<a href="https://vtex.com.br-pt/">
<span>Powered By</span>
</a>
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
</div>
</li>
<li>
<div class="by-m3">
<a href="https://vtex.com.br-pt/">
<span>Developed By</span>
</a>
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
</div>
</li>
`;
}
} }

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

@ -1,216 +1,3 @@
// // // import waitForEl from "../helpers/waitForEl";
// import { waitElement } from "m3-utils";
// Export default class Header {
// constructor() {
// this.init();
// }
// async init() {
// await this.selectors();
// this.progressBarHTML();
// await this.progressBarProgress();
// }
// async selectors() {
// this.header = await waitElement(".headerCheckout");
// this.progressBar = await waitElement("#progressBar");
// }
// progressBarHTML() {
// if (this.progressBar && window.innerWidth > 1024) {
// // <img src="imgs/amex.png"/ this.progressBar.innerHTML
// this.progressBar.innerHTML = '<ul>
// <li><div class="containerLi"><div><p class="progress-bar-text">Meu Carrinho</p><p id="progress-bar-circle-1" class="progress-bar-circle-1"></p><p class="progress-bar-line-1"></p> </div></div></li>
// <li class="central"><div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
// <li><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p class="progress-bar-line-2"></p></div></div></li>
// </ul>';
// }
// if (this.progressBar && window.innerWidth <= 1024) {
// this.progressBar.innerHTML = '';
// }
// }
// async progressBarProgress() {
// if (this.progressBar && window.innerWidth > 1024) {
// const progressBarLista = document.querySelectorAll("#progressBar ul li");
// progressBarLista.forEach((li) => {
// if (window.location.href==="https://m3academy.myvtex.com/checkout/#/cart") {
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
// "active");
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if (
// li.children(0).children[0].children[
// "progress-bar-circle-2"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-2"
// ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.remove("active");
// }
// }
// } else if (
// window.location.href==="https://m3academy.myvtex.com/checkout/#/email" ||
// window.location.href== "https://m3academy.myvtex.com/checkout/#/profile" ||
// window.location.href=="https://m3academy.myvtex.com/checkout/#/shipping"
// ){
// if(li.children[0].children[0].children["progress-bar-circle-1"]){
// if(li.children[0].children[0].children[
// "progress-bar-circle-1"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-1"
// ].classList.remove("active");
// }
// }
// }
// if(li.children[0].children[0].children["progress-bar-circle-2"]){
// li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
// "active"
// );
// }
// if(li.children[0].children[0].children["progress-bar-circle-3"]){
// if(
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.contains["active"]
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.remove["active"];
// }
// } else if(
// window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
// ){
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-1"].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if(
// li.children[0].children[0].children[
// "progress-bar-circle-2"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-2" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
// "active");
// }
// }
// window.addEventListener("hashchange", © ) => {
// if (window.location.hash="#/cart") {
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// li.children[0].children[0].children[ "progress-bar-circle-1"
// ].classList.add("active");
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if (
// li.children(0).children[0].children[
// "progress-bar-circle-2" ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-2" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.remove("active");
// }
// } else if (
// window.location.hash=="#/email" ||
// window.location.hash =="#/profile" ||
// window.location.hash=="#/shipping"){
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// li.children[0].children[0].children[
// "progress-bar-circle-2"
// ].classList.add("active");
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// if (
// li.children[0].children[0].children[ "progress-bar-circle-3"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-3" ].classList.remove("active");
// }
// }
// } else if (window.location.hash=="#/payment") {
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-2" ].classList.contains("active") ){
// li.children[0].children[0].children[
// "progress-bar-circle-2" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.add("active");
// }
// }
// });
// });
// }
// }
// }
// import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Header { export default class Header {

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

@ -855,3 +855,14 @@
} }
} }
} }
@media (max-width: 1024px) {
.btn-place-order-wrapper{
max-width:100%;
}
.cart-links-bottom a {
width: 100%;
display: flex;
justify-content: center;
}
}

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

@ -1,7 +1,6 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; border-top: 1px solid $color-black;
color: $color-gray2;
&__wrapper { &__wrapper {
align-items: center; align-items: center;

52
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,44 +1,11 @@
// /* _header.scss */
// .headerCheckout {
// .container {
// width: auto !important;
// }
// &__wrapper {
// align-items: center;
// display: flex;
// justify-content: space-between;
// }
// &__logo {
// img {
// height: 52px;
// width: auto;
// }
// }
// &__safeBuy {
// span {
// align-items: center;
// display: flex;
// text-transform: uppercase;
// font-family: $font-family;
// font-style: normal;
// font-weight: normal;
// font-size: 12px;
// line-height: 14px;
// color: $color-gray;
// }
// i {
// margin-right: 8px;
// }
// }
// }
/* _header.scss */
.headerCheckout { .headerCheckout {
border-bottom: 1px solid $color-black;
height: 96px;
width: 100%;
display: flex;
align-items: center;
.container { .container {
width: auto !important; width: 100%;
#progressBar { #progressBar {
width: 439px; width: 439px;
@ -47,7 +14,7 @@
list-style-type: none; list-style-type: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-around;
margin: 0; margin: 0;
} }
@ -143,7 +110,8 @@
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
width: 100%;
} }
&__logo { &__logo {
@ -164,7 +132,7 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
color: $color-gray; color: $color-black;
} }
img { img {