diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..d8f8193 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,11 +8,16 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
+ this.addProductShelf();
+ this.addCarrossel();
}
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.footerShelf = await waitElement(".footerCheckout__prateleira");
+ this.footerAddress = await waitElement("footerCheckout__address");
+ this.footerStamps = await waitElement(".footerCheckout__stamps");
+ this.footerCheckoutPayment = await waitElement("footerCheckout__payments");
+ this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
this.checkoutVazio = await waitElement(".empty-cart-content");
}
@@ -30,11 +35,67 @@ export default class Footer {
observer.observe(target, config);
}
+
+ addProductShelf() {
+ const createNode = (element) => {
+ return document.createElement(element);
+ };
+
+ // let image = this.footerStamps;
+ let shelf = this.footerShelf;
+ shelf.innerHTML = `
+
+
Você também pode gostar
+
+ `;
+
+ const url =
+ "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+
+ fetch(url)
+ .then((resp) => resp.json())
+ .then(function (data) {
+ console.log(data);
+ return data.map(function (product) {
+ let li = createNode("li");
+ li.setAttribute("id", product.productId);
+ li.setAttribute("class", "card");
+ li.innerHTML = `
+
+
+
+
+
+
+ `;
+
+ shelf.children[1].appendChild(li);
+ });
+ });
+ }
+
async addCarrossel() {
- const elemento = await waitElement("#my-element");
+ const elemento = await waitElement(".container-carrousel-item");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
});
}
}
+
+// let img = createNode("img");
+// let span = createNode("span");
+// img.src = `${produto.items[0].images[0].images}`
+// span.innerHTML = `${product.name.first} ${product.name.last}`;
+// append(li, img);
+// append(li, span);
+// append(div, li);
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 0ff3caf..5a93efb 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -8,7 +8,6 @@ export default class Header {
async init() {
await this.selectors();
- // console.log(this.item);
this.progressBarHtml();
this.progressBarProgress();
window.addEventListener("hashchange", () => {
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index 771070c..a6d143a 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -2,4 +2,6 @@
@import "./lib/slick";
@import "./partials/header";
@import "./partials/footer";
+@import "./partials/prateleira.scss";
@import "./checkout/checkout.scss";
+
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..68e09ff 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,86 @@
/* _prateleira.scss */
+.container-carrousel-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+}
+
+.card {
+ width: 242px;
+ height: 390px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 54px;
+}
+
+.title-card {
+ font-family: 'Open Sans';
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 18px;
+ text-align: center;
+ color: #000000;
+ margin-bottom: 20px;
+}
+
+.footer-card {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center ;
+ padding: 0 20px 20px;
+}
+
+
+.button-card {
+ width:242px;
+ height:42px;
+ background: #00C8FF;
+ border-radius: 8px;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: #FFFFFF;
+ padding: 12px 0;
+}
+
+.button-div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.image-card {
+ width: 242px;
+ height: 242px;
+}
+
+img {
+ height: 0;
+ max-width: 242px;
+ margin-bottom: 20px;
+}
+.sku {
+ width: 26px;
+ height: 28px;
+ background: #00C8FF;
+ border-radius: 8px;
+ padding: 5px;
+ color: #FFFFFF;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+}
+
+// .sku:nth-child(10) {
+// width: 80px;
+// height: 28px;
+// }
diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html
index 6246210..2cf5bfa 100644
--- a/checkout/src/template-checkout/checkout-footer.html
+++ b/checkout/src/template-checkout/checkout-footer.html
@@ -36,3 +36,4 @@
+