diff --git a/checkout/src/arquivos/js/checkout.js b/checkout/src/arquivos/js/checkout.js
index a303198..5d5f403 100644
--- a/checkout/src/arquivos/js/checkout.js
+++ b/checkout/src/arquivos/js/checkout.js
@@ -6,11 +6,10 @@ import Footer from "./components/Footer";
import Cart from "./components/Cart";
import Email from "./components/Email";
import Shipping from "./components/Shipping";
-import Payment from "./components/Payment";
const m3Checkout = new Container({
appName: "m3-checkout",
- components: [CheckoutUI, Header, Footer, Cart, Email, Shipping, Payment],
+ components: [CheckoutUI, Header, Footer, Cart, Email, Shipping],
});
m3Checkout.start();
diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index b28262f..7d641c0 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,17 +8,77 @@ export default class Footer {
async init() {
this.imgLinks = "https://agenciamagma.vteximg.com.br/arquivos/";
await this.selectors();
+ this.events();
this.buildIconList();
this.buildDevelopedByList();
- // this.onUpdate();
+ this.buildSlickItems();
+ this.onUpdate();
}
async selectors() {
this.footerIconList = await waitElement(".footerCheckout__stamps");
this.footerDevelopedByList = await waitElement(".footerCheckout__developedBy");
- //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(".empty-cart-content", {
+ timeout: 5000,
+ interval: 1000,
+ });
+ this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
+ }
+
+ events() {
+ window.addEventListener("hashchange", this.onUpdate.bind(this));
+ }
+
+ buildSlickItems() {
+ const slickItems = fetch(
+ "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+ )
+ .then(function (response) {
+ return response.json();
+ })
+ .then(function (data) {
+ const slickItems = data.map((item) => {
+ const div = document.createElement("div");
+
+ const ul = document.createElement("ul");
+
+ const items = item.items;
+
+ items.forEach((item) => {
+ const li = document.createElement("li");
+ li.classList.add("prateleira__option");
+
+ li.innerHTML = item.name;
+
+ ul.appendChild(li);
+ });
+
+ div.classList.add("prateleira__item");
+ const jpg = item.items[0].images[0].imageUrl;
+ div.innerHTML = `
+
+
${item.productName}
+
+
+ `;
+
+ return div;
+ });
+
+ return slickItems;
+ });
+
+ const buildSlickItems = () => {
+ slickItems.then((items) => {
+ items.forEach((item) => {
+ this.footerPrateleira.appendChild(item);
+ });
+ });
+ };
+
+ buildSlickItems();
}
buildIconList() {
@@ -87,25 +147,64 @@ export default class Footer {
});
}
- // 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);
- // });
- // });
+ 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
+ this.footerPrateleira.style.display = "none";
- // observer.observe(target, config);
- // }
- // async addCarrossel() {
- // const elemento = await waitElement("#my-element");
- // $(elemento).slick({
- // slidesToShow: 4,
- // slidesToScroll: 1,
- // });
- // }
+ if (
+ window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" &&
+ this.checkoutVazio.style.display === "none"
+ )
+ this.footerPrateleira.style.display = "";
+
+ let target = this.checkoutVazio;
+ let config = { childList: true, attributes: true };
+ let observer = new MutationObserver((mutations) => {
+ mutations.forEach(
+ function (mutation) {
+ console.log(mutation);
+ if (mutation.type === "attributes" && mutation.attributeName === "style") {
+ if (target.style.display === "none") {
+ console.log("carrinho cheio");
+
+ if (!this.footerPrateleira.classList.contains("slick-initialized"))
+ this.addCarrossel();
+ this.footerPrateleira.style.display = "";
+ } else {
+ this.footerPrateleira.style.display = "none";
+ console.log("carrinho vazio");
+ }
+ }
+ }.bind(this)
+ );
+ });
+
+ observer.observe(target, config);
+ }
+
+ addCarrossel() {
+ const elemento = this.footerPrateleira;
+ $(elemento).slick({
+ slidesToShow: 4,
+ slidesToScroll: 1,
+ responsive: [
+ {
+ breakpoint: 1025,
+ settings: {
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ },
+ },
+ {
+ breakpoint: 768,
+ settings: {
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ },
+ },
+ ],
+ });
+ }
}
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index e508622..5872a24 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -5,3 +5,4 @@
@import "./partials/footer";
@import "./partials/menu";
@import "./partials/autenticacao";
+@import "./partials/prateleira";
diff --git a/checkout/src/arquivos/sass/partials/_autenticacao.scss b/checkout/src/arquivos/sass/partials/_autenticacao.scss
index 396b7e1..6b4c7ef 100644
--- a/checkout/src/arquivos/sass/partials/_autenticacao.scss
+++ b/checkout/src/arquivos/sass/partials/_autenticacao.scss
@@ -263,11 +263,6 @@
.accordion-body {
p {
- @include mq(mobile, max) {
- width: 100%;
- max-width: -webkit-fill-available;
- }
-
&.client-email {
width: 100%;
margin-bottom: 16px;
@@ -282,6 +277,10 @@
margin: 0;
width: 46%;
+ @include mq(mobile, max) {
+ width: 100%;
+ }
+
&::placeholder {
font-weight: 400;
font-size: 14px;
@@ -292,7 +291,8 @@
&.client-last-name {
@include mq(mobile, max) {
- margin-right: 15px;
+ margin-right: 15px !important;
+ max-width: -webkit-fill-available;
}
}
@@ -302,6 +302,10 @@
flex-direction: column;
margin: 0;
width: 46%;
+
+ @include mq(mobile, max) {
+ width: 100%;
+ }
}
&.client-last-name {
@@ -354,6 +358,10 @@
div {
width: 46%;
+ p {
+ width: 100%;
+ }
+
@include mq(mobile, max) {
width: 100%;
max-width: -webkit-fill-available;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 9248f1e..6097b8c 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,10 +1,12 @@
/* _footer.scss */
.footerCheckout {
- border-top: 1px solid $black-500;
- padding: 16px 32px;
+ &__wrapper {
+ border-top: 1px solid $black-500;
+ padding: 16px 32px;
- @include mq(mobile, max) {
- padding: 22px 8px 16px;
+ @include mq(mobile, max) {
+ padding: 22px 8px 16px;
+ }
}
.container {
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..0c32d76 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,198 @@
/* _prateleira.scss */
+.footerCheckout__prateleira {
+ padding: 0 132px 56px;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+
+ &::before {
+ content: "Você também pode gostar:";
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: $black-500;
+ font-family: $font-family-secundary;
+ text-align: center;
+
+ @include mq(4k, min) {
+ font-size: 48px;
+ line-height: 76px;
+ }
+ }
+
+ @include mq(tablet, max) {
+ padding-right: 15px;
+ }
+
+ @include mq(mobile, max) {
+ padding: 0 17px 54px 16px;
+ }
+
+ .slick-arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: map-get($z-index, level1);
+ }
+
+ .slick-list {
+ margin-top: 20px;
+ }
+
+ .slick-prev {
+ left: 142px;
+ border: none;
+ background-color: transparent;
+ outline: 0;
+ background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") !important;
+ background-size: contain;
+ background-repeat: no-repeat;
+ width: 13px;
+ height: 29px;
+
+ @include mq(tablet, max) {
+ left: 16px;
+ }
+
+ @include mq(mobile, max) {
+ left: 26px;
+ }
+
+ @include mq(4k, min) {
+ width: 26px;
+ height: 58px;
+ }
+ }
+
+ .slick-next {
+ right: 142px;
+ border: none;
+ background-color: transparent;
+ outline: 0;
+ background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") !important;
+ background-size: contain;
+ background-repeat: no-repeat;
+ width: 13px;
+ height: 29px;
+
+ @include mq(tablet, max) {
+ right: 16px;
+ }
+
+ @include mq(mobile, max) {
+ right: 26px;
+ }
+
+ @include mq(4k, min) {
+ width: 26px;
+ height: 58px;
+ }
+ }
+
+ .slick-track {
+ display: flex;
+ }
+
+ .slick-slide {
+ height: auto;
+
+ & > div,
+ .prateleira__item {
+ height: 100%;
+ display: flex !important;
+ flex-direction: column;
+ margin: 0 4px;
+ max-width: -webkit-fill-available;
+ }
+ }
+
+ .prateleira {
+ &__product-name {
+ font-weight: 400;
+ font-size: 13px;
+ text-align: center;
+ line-height: 18px;
+ color: $black-500;
+ margin: 20px 0;
+
+ @include mq(4k, min) {
+ font-size: 26px;
+ line-height: 35px;
+ }
+ }
+
+ &__options {
+ flex: 1;
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ list-style-type: none;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 20px;
+ }
+
+ &__option {
+ margin-right: 5px;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ color: $white-500;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ background-color: $blue-500;
+ border-radius: 8px;
+ padding: 5px;
+ cursor: pointer;
+
+ @include mq(mobile, min) {
+ &:hover {
+ background: $blue-600;
+ }
+
+ &:active {
+ background: $blue-500;
+ }
+ }
+
+ @include mq(4k, min) {
+ font-size: 26px;
+ line-height: 35px;
+ }
+
+ &:last-of-type {
+ margin-right: 0;
+ }
+ }
+
+ &__button {
+ border: none;
+ width: 100%;
+ background: $blue-500;
+ border-radius: 8px;
+ padding: 12px 0;
+ font-weight: 700;
+ font-size: 13px;
+ line-height: 18px;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: $white-500;
+
+ @include mq(mobile, min) {
+ &:hover {
+ background: $blue-600;
+ }
+
+ &:active {
+ background: $blue-500;
+ }
+ }
+
+ @include mq(4k, min) {
+ font-size: 26px;
+ line-height: 35px;
+ }
+ }
+ }
+}