feat: Cria slick desktop mobile
This commit is contained in:
parent
6a9204c926
commit
d1a2e5f605
@ -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();
|
||||
|
||||
@ -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 = `
|
||||
<img class="prateleira__image" src="${jpg}" />
|
||||
<h2 class="prateleira__product-name">${item.productName}</h2>
|
||||
<ul class="prateleira__options">
|
||||
${ul.innerHTML}
|
||||
</ul>
|
||||
<button class="prateleira__button">VER PRODUTO</button>
|
||||
`;
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,3 +5,4 @@
|
||||
@import "./partials/footer";
|
||||
@import "./partials/menu";
|
||||
@import "./partials/autenticacao";
|
||||
@import "./partials/prateleira";
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user