diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js
index f68f3b2..6e4aff7 100644
--- a/checkout/src/arquivos/js/components/CheckoutUI.js
+++ b/checkout/src/arquivos/js/components/CheckoutUI.js
@@ -66,4 +66,5 @@ export default class CheckoutUI {
);
});
}
+
}
diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 203e20f..1247c4b 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -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 = `
+
+
+ `;
+ }
+ }
+ async shelfItens() {
+ let structure = "";
+
+ this.list.forEach((response) => {
+ const sku = response.skus.map(
+ (item) => ``
+ );
+
+ structure += `
+
+ `;
+ });
+ 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;
+ });
+ }
}
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 65843ae..b36a173 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -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 {
@@ -39,7 +42,7 @@ export default class Header {
@@ -48,7 +51,7 @@ export default class Header {
@@ -56,5 +59,124 @@ export default class Header {
`;
}
+ 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");
+ }
+ }
+ });
+ });
+ }
}
}
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index 771070c..c6f1a38 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -3,3 +3,4 @@
@import "./partials/header";
@import "./partials/footer";
@import "./checkout/checkout.scss";
+@import "./partials/prateleira.scss";
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 078423f..3b46e0d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -129,8 +129,8 @@ body {
margin-top: 47px;
}
}
- div#client-profile-data.span6.client-profile-data{
- .client-profile-email{
+ div.step.accordion-group.client-profile-data {
+ .client-profile-email{
margin-bottom: 6px;
}
.client-profile-summary{
@@ -179,13 +179,16 @@ 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 {
- // display: none;
+ // 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 {
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 74460fb..6af1493 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -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;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 82bce17..76bdaa9 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -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;
+ }
}
}
}
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..0e2c226 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -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;
+ }
+ }
+}