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

feature/emptycart #1

Merged
Gabriel_Lehmann merged 3 commits from feature/emptycart into main 2022-12-18 22:33:00 +00:00
Conversation 0 Commits 3 Files Changed 7 +726 -95
7 changed files with 726 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import { data } from "jquery";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
@ -7,34 +8,233 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
// this.onUpdate(); this.createPaymentsIcons();
this.createVtexpciIcon();
this.createDevIcons();
this.onUpdate();
this.events();
}
events() {
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
this.listaPrateleira.style.display = "flex";
}
if (window.location.hash != "#/cart") {
this.listaPrateleira.style.display = "none";
}
});
addEventListener("resize", () => {
this.addCarrossel();
});
} }
async selectors() { 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.checkoutVazio = await waitElement(".empty-cart-content");
this.checkoutAtivo = await waitElement(".checkout-container");
this.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy");
this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
this.titulo = await waitElement(".transactions-container");
this.cartTitulo = await waitElement("#cart-title");
this.titleSlick = await waitElement(".transactions-container");
} }
onUpdate() { 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 target = this.checkoutVazio;
let list = this.listaPrateleira;
let cartTitle = this.cartTitulo;
let slickTitle = this.titleSlick;
if (target.style.display == "none" && window.location.hash == "#/cart") {
list.style.display = "flex";
list.style.display = "block";
this.fetchApi();
} else {
this.cartTitulo.style.display = "none";
list.style.display = "none";
}
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
if (!this.listaPrateleira.classList.contains("fetch")) {
this.fetchApi();
}
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
console.log(mutation.type); if (target.style.display != "none") {
list.style.display = "none";
cartTitle.style.display = "none";
if (list.style.display == "none") {
slickTitle.style.display = "none";
}
} else {
cartTitle.style.display = "block";
list.style.display = "flex";
}
}); });
}); });
observer.observe(target, config); observer.observe(target, config, cartTitle, slickTitle);
} }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemet = await waitElement(".slick-list");
$(elemento).slick({ if ($(elemet).hasClass("slick-initialized")) {
slidesToShow: 4, $(elemet).slick("unslick");
slidesToScroll: 1, }
}); if (window.innerWidth > 1024) {
$(elemet).not(".slick-initialized").slick({
slidesToShow: 4,
slidesToScroll: 1,
});
} else if (window.innerWidth > 375) {
$(elemet).not(".slick-initialized").slick({
slidesToShow: 3,
slidesToScroll: 1,
});
} else if (window.innerWidth <= 375) {
$(elemet).not(".slick-initialized").slick({
slidesToShow: 2,
slidesToScroll: 1,
});
}
}
createPaymentsIcons() {
this.payments.innerHTML = `
<ul class="payments-icons-wrapper">
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
alt=""
/>
</figure>
</li>
</ul>
`;
}
createVtexpciIcon() {
this.vtexpci.innerHTML = `
<figure class="vtex-icon">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
alt=""
/>
</figure>
`;
}
createDevIcons() {
this.devIncons.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<figure>
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
</figure>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<figure>
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
</figure>
</a>
</li>
`;
}
async fetchApi() {
this.titulo.innerHTML = `
<h3 class="title_slick">Você também pode gostar:</h3>
`;
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)
.then((response) => response.json())
.then((data) => {
const ul = document.createElement("ul");
ul.classList.add("slick-list");
this.listaPrateleira.appendChild(ul);
data.map((item) => {
let cores = "";
for (let i = 0; i < item.items.length; i++) {
cores += `<p>${item.items[i].name}</p>`;
}
const li = document.createElement("li");
li.setAttribute("name", item.itemId);
li.classList.add("slick-list__itemList");
li.innerHTML = `
<figure class="img-container">
<img class="itemImg" src="${item.items[0].images[0].imageUrl}">
</figure>
<figcaption class="itemtName">${item.productName}</figcaption>
<div class="itemSku">
${cores}
</div>
<a class="itemLink" type="button" href="${item.link}">VER PRODUTO</a>
`;
ul.appendChild(li);
this.listaPrateleira.classList.add("fetch");
});
})
.then(() => {
this.addCarrossel();
});
} }
} }

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

@ -8,14 +8,253 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); this.createProgressBar();
await this.progressBarProgress();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { this.item = await waitElement("#progressBar", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
}); });
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
}
createProgressBar() {
if (this.progressBar && window.innerWidth > 1024) {
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 progressBarList = document.querySelectorAll("#progressBar ul li");
progressBarList.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"
);
console.log("ativou 1");
}
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");
console.log("removeu 2");
}
}
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");
console.log("removeu 3");
}
}
} 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"
) {
console.log("vendo 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")
) {
console.log("remove 1");
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", () => {
console.log("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") {
console.log("vendo payment hash");
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")
) {
console.log("remove 1 hash");
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");
}
}
});
});
}
} }
} }

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

@ -1,38 +1,60 @@
.empty-cart { .btn {
font-family: $font-family; border-radius: 0%;
&-content { }
color: $color-black; .empty-cart {
text-align: center; p {
display: none;
@include mq(md, max) { }
padding: 0 16px;
} font-family: $font-family;
} &-content {
color: $color-black;
&-title { text-align: center;
font-size: 20px;
} @include mq(md, max) {
padding: 0 16px;
&-links { }
.link-choose-products { }
background: $color-black;
border: none; &-title {
border-radius: 5px; font-size: 24px;
transition: ease-in 0.22s all; text-transform: uppercase;
outline: none; }
font-family: $font-family;
font-style: normal; &-links {
font-weight: 500; .link-choose-products {
font-size: 14px; border: 1px solid black;
line-height: 16px; transition: ease-in 0.22s all;
text-align: center; outline: none;
letter-spacing: 0.05em; font-family: $font-family;
color: $color-white; font-style: normal;
text-transform: uppercase; font-weight: 500;
font-size: 14px;
&:hover { line-height: 16px;
background: lighten($color-black, 5); text-align: center;
} letter-spacing: 0.05em;
} color: $color-white;
} background: $color-white;
width: 327px;
margin-left: 575px;
text-transform: uppercase;
color: transparent;
display: flex;
flex-direction: column;
font-family: "Tenor Sans";
&::after {
content: "Continuar comprando";
color: $color-black;
position: absolute;
left: 0;
right: 0;
}
&:hover {
color: transparent;
background: lighten($color-black, 5);
}
}
}
} }

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

@ -7,9 +7,13 @@ html {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
} }
footer {
margin-top: auto;
}
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
width: 94.9734%; border-top: 1px solid black;
width: 100%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,

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

@ -1,47 +1,130 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; .container {
color: $color-gray2; display: flex;
flex-direction: column;
width: 100%;
padding: 7px 0;
margin: 0;
@include mq(dt, min) {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 15px 0 15px 0;
}
@include mq(tv, min) {
padding: 26px 0 26px 0;
}
}
&__wrapper { &__wrapper {
align-items: center; border-top: 1px solid $black;
display: flex;
justify-content: space-between; @media screen and (max-width: 490px) {
padding: 7px 0;
}
} }
&__address { &__address {
color: $color-gray2; color: $gray-500;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-weight: 400;
font-weight: normal; line-height: 14px;
font-size: 10px; font-size: 10px;
line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%;
@include mq(md, max) { @include mq(dt, max) {
margin-bottom: 24px; display: flex;
max-width: 100%; width: 100%;
order: 2;
margin-top: 17px;
span {
margin-left: 16px;
}
}
@include mq(dt, min) {
min-width: 269px;
margin-left: 32px;
}
@include mq(tv, min) {
font-size: 20px;
line-height: 27px;
min-width: 537px;
margin-left: 0;
} }
} }
&__stamps { &__stamps {
align-items: center;
display: flex; display: flex;
justify-self: center; height: 33px;
align-items: center;
list-style: none; list-style: none;
margin: 0 0 0 5px;
@include mq(md, max) { li {
align-self: center; height: 33px;
margin-bottom: 12px;
} }
&__divider { @include mq(dt, min) {
background-color: $color-gray4; justify-content: center;
display: inline-block; min-width: 404px;
height: 24px; margin: 0;
margin: 0 8px; }
width: 1px;
@include mq(tv, min) {
min-width: 690.52px;
}
.payments-icons-wrapper {
display: flex;
width: 100%;
list-style: none;
margin: 0;
gap: 4px;
figure {
padding: 6px 0 7px;
width: 35.65px;
height: 20px;
margin: 0;
@include mq(tv, min) {
width: 69.63px;
}
@include mq(Gf, max) {
width: 28px;
}
}
}
.footerCheckout__stamps__divider {
border-left: 1px solid $gray-125;
margin: 0 10px;
height: 33px;
padding: 0 0 9px;
@include mq(dt, min) {
margin-left: 11.35px;
}
}
.footerCheckout__vtexpci {
.vtex-icon {
width: 53px;
margin: 0;
}
@include mq(tv, min) {
.vtex-icon {
width: 103.52px;
height: 64.46px;
}
}
} }
} }
@ -51,18 +134,43 @@
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
li:last-child { @include mq(dt, max) {
display: flex;
width: 100%;
order: 3;
margin-top: 17px;
}
@include mq(dt, min) {
min-width: 217px;
margin-right: 22.5px;
}
li {
margin-left: 16px; margin-left: 16px;
figure {
margin: 0;
}
}
.vtex-icon {
width: 44.92px;
margin: 0;
}
.m3-icon {
width: 28.66px;
margin: 0;
} }
a { a {
align-items: center; align-items: center;
color: $color-gray2; color: $gray-500;
display: flex; display: flex;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 10px; font-size: 9px;
line-height: 12px; line-height: 12px;
text-decoration: none; text-decoration: none;
@ -70,5 +178,38 @@
margin-right: 8px; margin-right: 8px;
} }
} }
@include mq(tv, min) {
min-width: 388.98px;
margin-right: 0;
a {
font-size: 18px;
line-height: 25px;
}
li {
margin-left: 10px;
}
.vtex-icon {
width: 87.73px;
}
.m3-icon {
width: 55.98px;
}
}
}
.footerCheckout::after,
::before {
display: none;
content: none;
}
.footerCheckout::before,
::after {
display: none;
content: none;
} }
} }

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

@ -1,6 +1,10 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
width: 100%;
border-bottom: 1px solid black;
.container { .container {
padding: 29px 131px;
width: auto !important; width: auto !important;
} }
&__wrapper { &__wrapper {
@ -17,16 +21,21 @@
} }
&__safeBuy { &__safeBuy {
img {
height: 15px;
margin-right: 8px;
}
span { span {
align-items: center; align-items: center;
display: flex; // display: flex;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray; color: $color-black;
} }
i { i {

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

@ -2,7 +2,7 @@
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
$font-family: "Open Sans", sans-serif; $font-family: "Open Sans", sans-serif;
$font-family-secundary:"Tenor Sans", sans-serif; $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */ /* Colors */
$color-black: #292929; $color-black: #292929;
@ -19,20 +19,36 @@ $color-blue: #4267b2;
$color-green: #4caf50; $color-green: #4caf50;
/* Colors */
$black: #000;
$white: #fff;
$gray-50: #e5e5e5;
$gray-100: #f0f0f0;
$gray-125: #c4c4c4;
$gray-150: #989898;
$gray-200: #8d8d8d;
$gray-500: #292929;
$blue: #00c8ff;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, Gf: 328px,
sm: 576px, cstm: 400,
md: 768px, sm: 576px,
lg: 992px, md: 768px,
xl: 1200px lg: 992px,
dt: 1025px,
xl: 1200px,
tv: 2500px,
) !default; ) !default;
$z-index: ( $z-index: (
level1: 5, level1: 5,
level2: 10, level2: 10,
level3: 15, level3: 15,
level4: 20, level4: 20,
level5: 25 level5: 25,
) !default; ) !default;