diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..a1c360e 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,34 +7,113 @@ export default class Footer {
async init() {
await this.selectors();
- // this.onUpdate();
+ this.onUpdate();
+ this.checkoutPayments = await waitElement(".footerCheckout__payments");
+ this.checkoutVtexPci = await waitElement(".footerCheckout__vtexpci");
+ await this.footerPayments();
+ await this.vtexPci();
}
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.footerContainerPrateleira = await waitElement(".footerCheckout__prateleira");
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);
+ console.log("oioioio");
+ mutations.forEach((mutationRecord) => {
+ console.log(mutationRecord);
+ if (
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" &&
+ this.checkoutVazio.style.display == "none"
+ ) {
+ this.prateleiraHTML();
+ }
+ if (this.checkoutVazio.style.display == "block") {
+ this.footerContainerPrateleira.innerHTML = "";
+ }
+ window.addEventListener("hashchange", () => {
+ if (
+ window.location.hash == "#/cart" &&
+ this.checkoutVazio.style.display === "none"
+ ) {
+ this.prateleiraHTML();
+ }
+ if (
+ window.location.hash !== "#/cart" &&
+ this.checkoutVazio.style.display === "none"
+ ) {
+ this.footerContainerPrateleira.innerHTML = "";
+ }
+ });
});
});
- observer.observe(target, config);
+ observer.observe(this.checkoutVazio, { attributes: true, attributeFilter: ["style"] });
}
- async addCarrossel() {
- const elemento = await waitElement("#my-element");
- $(elemento).slick({
- slidesToShow: 4,
- slidesToScroll: 1,
+ prateleiraHTML() {
+ this.footerContainerPrateleira.innerHTML = `
Você também pode gostar:
`;
+ fetch(
+ "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+ ).then((response) => {
+ if (response.ok) {
+ response.json().then((res) => {
+ res.map((prod) => {
+ const skus = document.createElement("ul");
+ prod.items.map((item) => {
+ const sku = document.createElement("li");
+ sku.innerHTML = `${item.name}`;
+ skus.append(sku);
+ });
+ const produto = document.createElement("li");
+ produto.classList.add("footerCheckout__prateleira__produto");
+ produto.innerHTML = ``;
+ produto.children[0].children["skus"].innerHTML = skus.innerHTML;
+ this.footerContainerPrateleira.children["prateleiraCheckout"].append(
+ produto
+ );
+ });
+ this.addCarrossel();
+ });
+ } else {
+ console.log("algo deu errado");
+ }
});
}
+ async addCarrossel() {
+ const prateleira = await waitElement("#prateleiraCheckout");
+ if ($(prateleira)) {
+ $(prateleira).slick({
+ slidesToShow: 4,
+ slidesToScroll: 1,
+ arrows: true,
+ infinite: false,
+ variableWidth: true,
+ });
+ }
+ }
+
+ async footerPayments() {
+ if (this.checkoutPayments) {
+ this.checkoutPayments.innerHTML = `
+
+
+
+
+
+
+
+
+ `;
+ }
+ }
+ async vtexPci() {
+ if (this.checkoutVtexPci) {
+ this.checkoutVtexPci.innerHTML = `
+
+
+ `;
+ }
+ }
}
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 74460fb..6afefe1 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -62,6 +62,7 @@
}
}
.slick-slide {
+ margin: 0 8px;
float: left;
height: 100%;
min-height: 1px;
@@ -99,6 +100,7 @@
.slick-arrow {
font-size: 0;
position: absolute;
+ border: none;
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
@@ -107,13 +109,20 @@
left: 10px;
}
.slick-next {
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+ no-repeat center center;
z-index: 4;
right: 10px;
}
.slick-arrow.slick-hidden {
- display: none;
+ display: none !important;
}
.slick-dots {
+ display: flex;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
li {
margin: 0.5em;
button {
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..0ffb8c8 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -2,11 +2,77 @@
.footerCheckout {
border-top: none;
color: $color-gray2;
+ &__prateleira {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ h3 {
+ font-size: 32px;
+ }
+ ul {
+ margin: 0;
+ }
+ &__wrapper {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ padding: 50px 0;
+ li {
+ list-style-type: none;
+ }
+ img {
+ width: 100%;
+ background-color: #ededed;
+ }
+ }
+ &__produto {
+ width: 242px !important;
+ ul {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 20px;
+ .skus {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ li {
+ padding: 5px;
+ }
+ }
+ .skus li,
+ .verProdBtn a {
+ color: #fff;
+ font-weight: 500;
+ }
+ .skus li,
+ .verProdBtn {
+ background: #00c8ff;
+ border-radius: 8px;
+ }
+ .verProdBtn {
+ width: 100%;
+ text-align: center;
+ text-transform: uppercase;
+ padding: 12px 0;
+ }
+ }
+ }
+ }
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
+ .container {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ }
}
&__address {
@@ -44,6 +110,13 @@
width: 1px;
}
}
+ &__vtexpci,
+ &__payments {
+ font-size: 0;
+ img {
+ width: 35.65px;
+ }
+ }
&__developedBy {
align-items: center;
@@ -51,8 +124,38 @@
list-style-type: none;
margin: 0;
+ li:first-child {
+ // margin-left: 16px;
+ a {
+ span {
+ display: flex;
+ &::after {
+ content: "";
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png")
+ no-repeat center center;
+ display: block;
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+ }
+
li:last-child {
- margin-left: 16px;
+ // margin-left: 16px;
+ a {
+ span {
+ display: flex;
+ &::after {
+ content: "";
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png")
+ no-repeat center center;
+ display: block;
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
}
a {
@@ -62,12 +165,26 @@
font-family: $font-family;
font-style: normal;
font-weight: normal;
- font-size: 10px;
+ font-size: 0px;
line-height: 12px;
text-decoration: none;
span {
margin-right: 8px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 9px;
+ line-height: 12px;
+ color: #292929;
+ &::after {
+ content: "";
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png")
+ no-repeat center center;
+ display: block;
+ width: 44.92px;
+ height: auto;
+ }
}
}
}