diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..c7f1dc1 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -3,17 +3,55 @@ import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
+ this.requestShelf();
+ this.addCarrossel();
}
async init() {
await this.selectors();
// this.onUpdate();
+ this.requestShelf();
+ this.addCarrossel();
}
async selectors() {
+ this.itensShelf = await waitElement(".footerCheckout__prateleira");
+ // this.itensShelf = await waitElement(".empty-cart-content")
//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(".container-cart", {
+
+ // });
+ }
+
+ requestShelf() {
+ let prateleira = this.itensShelf;
+ prateleira.innerHTML = `
+
+
+ `;
+ const api =
+ "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+
+ fetch(api)
+ .then((response) => response.json())
+ .then(function (data) {
+ return data.map(function (item) {
+ let li = document.createElement("li");
+ li.setAttribute("id", item.productId);
+ li.innerHTML = `
+
+ ${item.productName}
+ ${item.items
+ .map((name) => {
+ return `
${name.name}`;
+ })
+ .join("")}
+
+ `;
+ prateleira.children[1].appendChild(li);
+ });
+ });
}
onUpdate() {
@@ -30,11 +68,15 @@ export default class Footer {
observer.observe(target, config);
}
+
async addCarrossel() {
- const elemento = await waitElement("#my-element");
+ const elemento = await waitElement(".carrosel-ul");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
+ arrows: true,
+ variableWidth: true,
+ infinite: false,
});
}
}
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index cf7990c..aa48675 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -70,7 +70,9 @@ export default class Header {
- `;
+
+
+ `;
}
if (this.progressBar && window.innerWidth <= 1024) {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 08f74e9..9a3ba5c 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -4,13 +4,19 @@
color: $color-black;
text-align: center;
+
@include mq(md, max) {
padding: 0 16px;
}
}
+ &-message {
+ display: none;
+ }
+
&-title {
font-size: 20px;
+ text-transform: uppercase;
}
&-links {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 618eff4..1421241 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -49,7 +49,17 @@ body {
}
.container-order-form,
.container-cart {
- width: 80%;
+ width: 100%;
+ }
+
+ .container-cart::after, .container-cart::before {
+
+ box-sizing: border-box;
+ position: absolute;
+ width: 100%;
+
+ border-bottom: 1px solid #000000;
+
}
}
@@ -66,6 +76,8 @@ body {
color: $color-black !important;
}
+
+
#cart-title,
#orderform-title {
color: $color-gray2;
@@ -76,6 +88,8 @@ body {
margin: 40px 0 30px;
letter-spacing: 0.1em;
text-transform: uppercase;
+ opacity: 0;
+
@include mq(md, max) {
margin-left: 30px;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 91610fe..cc8f53f 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -3,7 +3,7 @@
.container {
width: auto !important;
#progressBar {
- width:439px ;
+ width: 439px;
ul {
list-style-type: none;
@@ -49,7 +49,7 @@
line-height: 28px;
color: #000000;
width: 39.9103%;
- @media (min-width: 2500px){
+ @media (min-width: 2500px) {
font-size: 24px;
}
}
@@ -95,13 +95,15 @@
height: 1px;
border-top: 1px solid #000000;
}
-
}
.active {
background: #000000;
}
+
}
+
+
&__wrapper {
align-items: center;
display: flex;
@@ -132,7 +134,5 @@
width: 12px;
margin-right: 8px;
}
-
-
}
}