diff --git a/checkout/src/arquivos/assets/imgs/arrowleft.png b/checkout/src/arquivos/assets/imgs/arrowleft.png
new file mode 100644
index 0000000..6037105
Binary files /dev/null and b/checkout/src/arquivos/assets/imgs/arrowleft.png differ
diff --git a/checkout/src/arquivos/assets/imgs/arrowright.png b/checkout/src/arquivos/assets/imgs/arrowright.png
new file mode 100644
index 0000000..d4dd21f
Binary files /dev/null and b/checkout/src/arquivos/assets/imgs/arrowright.png differ
diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 78fc647..f004854 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,8 +8,11 @@ export default class Footer {
async init() {
await this.selectors();
- // this.onUpdate();
- this.addPrateleira();
+ window.addEventListener("hashchange", this.addPrateleira.bind(this));
+
+ $(window).on("orderFormUpdated.vtex", this.addPrateleira.bind(this));
+
+ /* this.addPrateleira(); */
this.addStamps();
this.addCarrossel();
}
@@ -21,20 +24,7 @@ export default class Footer {
this.prateleira = await waitElement(".footerCheckout__prateleira");
}
- 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);
- });
- });
-
- observer.observe(target, config);
- }
+ async onUpdate() {}
async addCarrossel(elemento) {
$(elemento).slick({
slidesToShow: 4,
@@ -48,36 +38,73 @@ export default class Footer {
.then((response) => response.json())
.then((response) => response)
.catch((err) => console.error(err));
- console.log(orderForm);
+ /* console.log(orderForm); */
orderForm.forEach((element) => {
const containerProduto = document.createElement("div");
- containerProduto.innerHTML = `
${element.productName} ${element.items.map(
- (item) => {
- return ``;
- }
- )}
+ } >
${
+ element.productName
+ } ${element.items
+ .map((item) => {
+ const name = item.name;
+ /* console.log(item.name); */
+ return ``;
+ })
+ .join("")}
-
Ver produto
+
Ver produto
-
`;
+ `;
container.appendChild(containerProduto);
element.items.forEach((item) => {
- console.log(item);
+ /* console.log(item); */
});
});
}
async addPrateleira() {
const slickContainer = document.createElement("div");
- this.prateleira.appendChild(slickContainer);
- await this.apiProducts(slickContainer);
- await this.addCarrossel(slickContainer);
- console.log(this.prateleira);
+ const url = window.location.hash;
+ const orderForm = await fetch("/api/checkout/pub/orderForm/")
+ .then((response) => response.json())
+ .then((response) => response)
+ .catch((err) => console.error(err));
+ console.log(orderForm.items);
+ if (orderForm.items.length > 0 && url === "#/cart") {
+ const titlePrateleira = document.createElement("h2");
+ titlePrateleira.classList.add("title-prateleira");
+ titlePrateleira.innerText = "Você também pode gostar:";
+ this.prateleira.appendChild(titlePrateleira);
+
+ this.prateleira.appendChild(slickContainer);
+ await this.apiProducts(slickContainer);
+ await this.addCarrossel(slickContainer);
+ } else {
+ slickContainer.remove();
+ console.log(slickContainer);
+ const slickInitialize = document.querySelector(".slick-initialized");
+ slickInitialize.remove();
+ const titleh2 = document.querySelector(".title-prateleira");
+ titleh2.remove();
+ }
}
async addStamps() {
+ const stampsContainer3 = await waitElement(".footerCheckout__developedBy");
+ const query3 = document.querySelectorAll(".footerCheckout__developedBy");
+ const arr3 = Array.from(query3);
+ const cardList3 = ["logoVTEXM3Academy.png", "logoM3M3Academy.png"];
+ query3[0].innerHTML = "";
+ cardList3.forEach(function (item, index) {
+ query3[0].innerHTML += `${
+ index === 0 ? "Powered By" : "Developed By"
+ } `;
+ });
+
const stampsContainer2 = await waitElement(".footerCheckout__vtexpci");
const query2 = document.querySelectorAll(".footerCheckout__vtexpci");
const arr2 = Array.from(query2);
@@ -90,7 +117,6 @@ export default class Footer {
const stampsContainer = await waitElement(".footerCheckout__payments");
const query = document.querySelectorAll(".footerCheckout__payments");
const arr = Array.from(query);
- console.log(arr);
const cardList = [
"masterCardM3Academy.png",
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 74460fb..fe2a629 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -40,6 +40,7 @@
}
.slick-track {
+ margin-bottom: 56px;
position: relative;
left: 0;
top: 0;
@@ -101,14 +102,24 @@
position: absolute;
}
.slick-prev {
+ width: 14px;
+ height: 29px;
+ border: none;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
z-index: 4;
- left: 10px;
+ left: 12px;
+ bottom: 228px;
}
.slick-next {
+ width: 14px;
+ height: 29px;
+ border: none;
+ background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+ no-repeat center center;
z-index: 4;
- right: 10px;
+ right: 12px;
+ bottom: 228px;
}
.slick-arrow.slick-hidden {
display: none;
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 87f72d1..6d3799d 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1,5 +1,7 @@
/* _prateleira.scss */
-.prateleira-title {
+.title-prateleira {
+ color: black;
+ margin: 20px 0 20px;
text-align: center;
font-family: "Tenor Sans";
font-style: normal;
@@ -7,3 +9,70 @@
font-size: 24px;
line-height: 38px;
}
+
+.btn-item-name {
+ border: none;
+ color: #ffffff;
+ background: #00c8ff;
+ border-radius: 8px;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ text-transform: uppercase;
+}
+
+.btn-item-link {
+ padding: 12px 75px;
+ color: #ffffff;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 13px;
+ border-radius: 8px;
+ background-color: #00c8ff;
+ text-transform: uppercase;
+}
+
+.btn-tamanho {
+ gap: 5px;
+ display: flex;
+ width: 242px;
+ justify-content: center;
+ margin-bottom: 20px;
+}
+
+.span-item-name {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 13px;
+}
+
+.span-item-name {
+ margin: 20px 0 20px 0;
+ text-align: center;
+ width: 242px;
+ /* margin: 20px 28px; */
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 13px;
+ color: #000000;
+}
+
+/* .bora {
+ margin: 50px;
+}
+ */
+
+.product-img {
+ width: 242px;
+}
+
+.container-produto {
+ display: flex !important;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}