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

Feat(Checkout): Cria função ProgressBar e prateleira(estilizada no desktop)

Browse Source
This commit is contained in:
Rhayllon Daudt 2022-12-17 22:58:13 -03:00
parent 93e053f401
commit 82062a7577
8 changed files with 306 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,4 +66,5 @@ export default class CheckoutUI {
);
});
}
}

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

@ -6,10 +6,16 @@ export default class Footer {
}
async init() {
this.list = await this.Api();
await this.selectors();
// this.onUpdate();
this.addIconsCardAndVtxpci();
this.addIconVtexAndM3();
this.createShelf();
this.shelfList = await waitElement(".footerCheckout__shelfList");
this.shelfItens();
// await this.shelfUpdate();
this.addCarrossel();
}
async selectors() {
@ -18,6 +24,11 @@ export default class Footer {
this.checkoutVazio = await waitElement(".empty-cart-content");
this.iconesCartoesAndVtexpci = await waitElement(".footerCheckout__stamps");
this.iconsVtexAndM3 = await waitElement(".footerCheckout__developedBy");
this.prateleira = await waitElement(".footerCheckout__prateleira");
this.itensShelf = await waitElement(".footerCheckout__prateleira", {
timeout: 5000,
interval: 1000,
});
}
onUpdate() {
@ -35,10 +46,12 @@ export default class Footer {
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
const elemento = await waitElement(".footerCheckout__shelfList");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
}
addIconVtexAndM3() {
@ -83,4 +96,48 @@ export default class Footer {
`;
}
}
createShelf() {
if (this.itensShelf) {
this.itensShelf.innerHTML = `
<div class="footerCheckout__prateleira-title-wrapper">
<h2 class="footerCheckout__prateleira-title" >Você também pode gostar:</h2>
</div>
<ul class="footerCheckout__shelfList"></ul>
`;
}
}
async shelfItens() {
let structure = "";
this.list.forEach((response) => {
const sku = response.skus.map(
(item) => `<li class="footerCheckout__shelfList-skus">${item}</li>`
);
structure += `
<li class="footerCheckout__shelfList-wrapper">
<figure class="footerCheckout__shelfList-wrapper" ><img src ="${response.img}"/></figure>
<figcaption class="footerCheckout__shelfList-name">${response.name}</figcaption>
<div class="footerCheckout__shelfList-skus-wrapper" ><ul class="footerCheckout__shelfList-skus-wrapper">${sku}</ul></div>
<button type="button" class="footerCheckout__shelfList-button"><a href="${response.link}">Ver Produto</a></button>
</li>
`;
});
this.shelfList.innerHTML = structure;
}
async Api() {
const api =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
return fetch(api)
.then((response) => response.json())
.then((data) => {
const peçaBase = data.map((response) => ({
name: response.productName,
skus: response.items.map((item) => item.name),
img: response.items[0].images[0].imageUrl,
link: response.link,
}));
return peçaBase;
});
}
}

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

@ -8,8 +8,8 @@ export default class Header {
async init() {
await this.selectors();
// console.log(this.item);
this.progressBarCronstructor();
await this.progressBarProgress();
}
async selectors() {
@ -18,7 +18,10 @@ export default class Header {
// timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
// interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
// });
this.progressBar = await waitElement(".progress-bar");
this.progressBar = await waitElement("#progressBar", {
timeout: 5000,
interval: 1000,
});
}
progressBarCronstructor() {
@ -29,7 +32,7 @@ export default class Header {
<div class="div-flex1">
<div class="div-itens">
<p class="p-text">Meu Carrinho</p>
<p class="p-bola"></p>
<p id="p-bola1" class="p-bola1"></p>
<p class="p-borda-1"></p>
</div>
</div>
@ -39,7 +42,7 @@ export default class Header {
<div class="div-flex2">
<div class="div-itens">
<p class="p-text">Dados Pessoais</p>
<p class="p-bola"></p>
<p id="p-bola2" class="p-bola2"></p>
<p class="p-borda-meio"></p>
</div>
</div>
@ -48,7 +51,7 @@ export default class Header {
<div class="div-flex3">
<div class="div-itens">
<p class="p-text">Pagamento</p>
<p class="p-bola"></p>
<p id="p-bola3" class="p-bola3"></p>
<p class="p-borda-2"></p>
</div>
</div>
@ -56,5 +59,124 @@ export default class Header {
</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) => {
const Bola1 = li.children[0].children[0].children["p-bola1"];
const Bola2 = li.children[0].children[0].children["p-bola2"];
const Bola3 = li.children[0].children[0].children["p-bola3"];
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (Bola1) {
Bola1.classList.add("active");
}
if (Bola2) {
if (Bola2.classList.contains("active")) {
Bola2.classList.remove("active");
}
}
if (Bola3) {
if (Bola3.classList.contains("active")) {
Bola3.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 (Bola1) {
if (Bola1.classList.contains("active")) {
Bola1.classList.remove("active");
}
}
if (Bola2) {
Bola2.classList.add("active");
}
if (Bola3) {
if (Bola3.classList.contains("active")) {
Bola3.classList.remove("active");
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
if (Bola1) {
if (Bola1.classList.contains("active")) {
Bola1.classList.remove("active");
}
}
if (Bola2) {
if (Bola2.classList.contains("active")) {
Bola2.classList.remove("active");
}
}
if (Bola3) {
Bola3.classList.add("active");
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (Bola1) {
Bola1.classList.add("active");
}
if (Bola2) {
if (Bola2.classList.contains("active")) {
Bola2.classList.remove("active");
}
}
if (Bola3) {
if (Bola3.classList.contains("active")) {
Bola3.classList.remove("active");
}
}
} else if (
window.location.hash === "#/email" ||
window.location.hash === "#/profile" ||
window.location.hash === "#/shipping"
) {
if (Bola1) {
if (Bola1.classList.contains("active")) {
Bola1.classList.remove("active");
}
}
if (Bola2) {
Bola2.classList.add("active");
}
if (Bola3) {
if (Bola3.classList.contains("active")) {
Bola3.classList.remove("active");
}
}
} else if (window.location.hash == "#/payment") {
if (Bola1) {
if (Bola1.classList.contains("active")) {
Bola1.classList.remove("active");
}
}
if (Bola2) {
if (Bola2.classList.contains("active")) {
Bola2.classList.remove("active");
}
}
if (Bola3) {
Bola3.classList.add("active");
}
}
});
});
}
}
}

1
checkout/src/arquivos/sass/checkout.scss
View File

@ -3,3 +3,4 @@
@import "./partials/header";
@import "./partials/footer";
@import "./checkout/checkout.scss";
@import "./partials/prateleira.scss";

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

@ -129,7 +129,7 @@ body {
margin-top: 47px;
}
}
div#client-profile-data.span6.client-profile-data{
div.step.accordion-group.client-profile-data {
.client-profile-email{
margin-bottom: 6px;
}
@ -179,14 +179,17 @@ body {
color: $color-gray9;
}
}
// a#payment-group-SPEIPaymentGroup.payment-group-item,
// a#payment-group-MercadoPagoPaymentGroup.payment-group-item,
// a#payment-group-PSEPaymentGroup.payment-group-item,
// a#payment-group-promissoryPaymentGroup.payment-group-item,
// a#payment-group-creditDirectSalePaymentGroup.payment-group-item,
// a#payment-group-creditControlPaymentGroup.payment-group-item {
// form.form-page.client-pre-email.anim-death.anim-current{
// span{
// div#client-profile-data.span6.client-profile-data span{
// font-size: 20px;
// line-height: 23px;
// }
// &::after{
// display: none;
// }
// }
// }
a#payment-group-creditCardPaymentGroup.payment-group-item,
a#payment-group-bankInvoicePaymentGroup.payment-group-item {
display: block;

10
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -99,16 +99,22 @@
.slick-arrow {
font-size: 0;
position: absolute;
top: 50%;
transform: translateY(-100%);
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
z-index: 4;
left: 10px;
left: 0;
border: none;
}
.slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center;
z-index: 4;
right: 10px;
right: 16px;
border: none;
}
.slick-arrow.slick-hidden {
display: none;

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

@ -35,7 +35,9 @@
font-family: $font-family-secundary;
color: $color-black2;
}
.p-bola{
.p-bola1,
.p-bola2,
.p-bola3 {
border: 1px solid $color-black2;
border-radius: 50%;
width: 10px;
@ -83,6 +85,9 @@
width: 100.8%;
transform: translateY(-7px);
}
.active{
background: $color-black2;
}
}
}
}

93
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -1 +1,94 @@
/* _prateleira.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
.footerCheckout__prateleira{
width: 79.38%;
margin-bottom: 54px;
}
.footerCheckout__shelfList{
margin: 0;
}
.footerCheckout__shelfList-wrapper{
margin: 0;
}
.footerCheckout__shelfList-wrapper,
.footerCheckout__shelfList-name,
.footerCheckout__shelfList-skus-wrapper,
.footerCheckout__shelfList-button {
margin-right: 16px;
}
.footerCheckout__prateleira-title{
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: $color-black2;
}
.footerCheckout__shelfList-name{
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
text-align: center;
color: $color-black2;
margin: 20px 0;
width: 95%;
}
.footerCheckout__shelfList-skus-wrapper{
.footerCheckout__shelfList-skus{
background: $color-blue2;
border-radius: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: max-content;
padding: 4px 5.6px 4px 5.6px;
color: $color-white;
margin-right: 5px;
letter-spacing: 0.05em;
text-transform: uppercase;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
}
display: flex;
text-align: center;
justify-content: center;
li::marker{
font-size: 0;
}
&#text{
font-size: 0;
}
}
.footerCheckout__shelfList-button{
justify-content: center;
width: 95%;
background: $color-blue2;
border-radius: 8px;
padding: 0;
border: none;
height: 42px;
margin: 20px 0 0 0;
a{
color: $color-white;
letter-spacing: 0.05em;
text-transform: uppercase;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
}
}
}