forked from M3-Academy/m3-academy-template-checkout
feat(footer): cria prateleira desktop com slick
This commit is contained in:
parent
0080bdeb41
commit
38e4860722
@ -8,6 +8,7 @@ export default class Footer {
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.replaceEmptyCartContent();
|
||||
this.renderPrateleira();
|
||||
this.stampsHTML();
|
||||
this.developedByHTML();
|
||||
this.onUpdate();
|
||||
@ -21,10 +22,12 @@ export default class Footer {
|
||||
this.emptyCartTitle = await waitElement(".empty-cart-title");
|
||||
this.continueShopping = await waitElement("#cart-choose-products");
|
||||
this.prateleira = await waitElement(".footerCheckout__prateleira");
|
||||
// this.prateleiraSlick = await waitElement(".prateleira__carousel")
|
||||
}
|
||||
|
||||
replaceEmptyCartContent() {
|
||||
if (this.checkoutVazio) {
|
||||
console.log("entrou no if do replaceContent()")
|
||||
this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
|
||||
this.continueShopping.textContent = "Continuar comprando";
|
||||
}
|
||||
@ -35,21 +38,24 @@ export default class Footer {
|
||||
// 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
|
||||
if(this.checkoutVazio) {
|
||||
console.log("entrou no if do onUpdate()")
|
||||
|
||||
let target = this.checkoutVazio;
|
||||
let config = { attributes: true };
|
||||
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "none";
|
||||
// this.cartTitle.style.display = "none";
|
||||
// this.prateleira.style.display = "none";
|
||||
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
console.log("mutation type: ", mutation.typ)
|
||||
console.log("rolou mutation")
|
||||
mutations.forEach(() => {
|
||||
|
||||
if(this.checkoutVazio.style.display == "block") {
|
||||
console.log("Carrinho está vazio")
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "none";
|
||||
|
||||
} else {
|
||||
|
||||
console.log("Carrinho NÃO está vazio");
|
||||
this.cartTitle.style.display = "block";
|
||||
this.prateleira.style.display = "block";
|
||||
@ -61,13 +67,73 @@ export default class Footer {
|
||||
}
|
||||
}
|
||||
|
||||
// async addCarrossel() {
|
||||
// const elemento = await waitElement("#my-element");
|
||||
// $(elemento).slick({
|
||||
// slidesToShow: 4,
|
||||
// slidesToScroll: 1,
|
||||
// });
|
||||
// }
|
||||
async renderPrateleira() {
|
||||
if (this.prateleira) {
|
||||
|
||||
const prateleiraSlick = document.createElement("ul");
|
||||
prateleiraSlick.classList.add("prateleira__carousel");
|
||||
|
||||
const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319");
|
||||
console.log("await fetch response:", response);
|
||||
const productsList = await response.json();
|
||||
console.log("await fetch productsList:", productsList);
|
||||
|
||||
let cardsStructure = "";
|
||||
|
||||
if(productsList) {
|
||||
|
||||
productsList.forEach((product) => {
|
||||
console.log(product)
|
||||
|
||||
const productImageUrl = product.items[0].images[0].imageUrl;
|
||||
console.log("productImageUrl:", productImageUrl);
|
||||
const productName = product.productName;
|
||||
console.log("productName:", productName);
|
||||
const productSkus = product.items;
|
||||
console.log("productSkus:", productSkus);
|
||||
let skusStructure = "";
|
||||
|
||||
productSkus.forEach((sku) => {
|
||||
console.log("sku:", sku);
|
||||
skusStructure += `
|
||||
<li>
|
||||
<button type="button">${sku.name}</button>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
|
||||
cardsStructure += `
|
||||
<li class="prateleira__item">
|
||||
<div class="prateleira__item--image-container">
|
||||
<img class="prateleira__item--image" src="${productImageUrl}" />
|
||||
</div>
|
||||
<div class="prateleira__item--description">
|
||||
<p class="prateleira__item--name">${productName}</p>
|
||||
<ul class="prateleira__item--options">${skusStructure}</ul>
|
||||
<button type="button" class="prateleira__item--button">Ver produto</button>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
|
||||
prateleiraSlick.innerHTML = cardsStructure;
|
||||
this.prateleira.appendChild(prateleiraSlick);
|
||||
|
||||
if(window.innerWidth > 1024) {
|
||||
this.addCarrossel(prateleiraSlick);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async addCarrossel(element) {
|
||||
console.log("chamada do addCarrossel()");
|
||||
// const elemento = await waitElement(this.prateleiraSlick);
|
||||
$(element).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
}
|
||||
|
||||
async stampsHTML() {
|
||||
const stamps = await waitElement('.footerCheckout__stamps');
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
.checkout-container {
|
||||
// background: yellow;
|
||||
// height: 100%;
|
||||
// box-sizing: border-box;
|
||||
|
||||
// &:before,
|
||||
// &:after {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
|
||||
.client-pre-email {
|
||||
border-color: $color-gray4;
|
||||
font-family: $font-family;
|
||||
@ -287,3 +297,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .transactions-container {
|
||||
// height: 0;
|
||||
|
||||
// &::before,
|
||||
// &::after {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,22 +1,38 @@
|
||||
.container {
|
||||
// background: salmon;
|
||||
|
||||
// &:before,
|
||||
// &:after {
|
||||
// display: none;
|
||||
// };
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
// background: red;
|
||||
margin: 0;
|
||||
|
||||
|
||||
font-family: $font-family;
|
||||
@include mq(md, max) {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.item-unit-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 3px solid $color-gray3;
|
||||
box-sizing: border-box;
|
||||
// margin: 0;
|
||||
// background: purple;
|
||||
// border: 1px solid red;
|
||||
// $color-gray3;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0px 0 25px 0;
|
||||
@ -24,10 +40,31 @@
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// .cart-items {
|
||||
// font-family: $font-family-secundary;
|
||||
|
||||
// thead {
|
||||
// line-height: 16px;
|
||||
// font-size: 14px;
|
||||
// // font-style: normal;
|
||||
// // font-weight: 400;
|
||||
// color: $black-300;
|
||||
// }
|
||||
|
||||
// .product-image img {
|
||||
// display: block;
|
||||
// width: 60px;
|
||||
// height: 60px;
|
||||
// transform: scaleX(-1);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.cart-fixed.affix {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
@ -48,7 +85,7 @@
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 1px solid $color-gray4;
|
||||
// border: 1px solid $color-gray4;
|
||||
|
||||
ul li {
|
||||
border-top: none;
|
||||
@ -749,6 +786,8 @@
|
||||
flex-direction: column;
|
||||
width: 343px;
|
||||
|
||||
margin-bottom: 43px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
width: calc(100% - 32px);
|
||||
|
||||
@ -51,3 +51,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
/* Slider */
|
||||
|
||||
.slick-slider {
|
||||
margin: 0;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@ -18,7 +20,7 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin: 0 -8px 0 -8px;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
@ -62,6 +64,9 @@
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
margin: 0 8px;
|
||||
// width: 242px;
|
||||
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
|
||||
@ -1 +1,31 @@
|
||||
/* _prateleira.scss */
|
||||
.footerCheckout__prateleira {
|
||||
// estilos no _footer.scss
|
||||
}
|
||||
|
||||
.prateleira__carousel {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.prateleira__item {
|
||||
width: 242px;
|
||||
height: 390px;
|
||||
background: red;
|
||||
|
||||
|
||||
&--image-container {
|
||||
width: 242px;
|
||||
height: 242px;
|
||||
|
||||
img {
|
||||
width: 242px;
|
||||
height: 242px;
|
||||
}
|
||||
}
|
||||
|
||||
&--description {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -2,7 +2,60 @@
|
||||
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no footer, deverá ser feito através de javaScript. -->
|
||||
|
||||
<footer class="footerCheckout">
|
||||
<div class="footerCheckout__prateleira"></div>
|
||||
<div class="footerCheckout__prateleira">
|
||||
|
||||
|
||||
<li class="prateleira__item">
|
||||
<div class="prateleira__item--image-container">
|
||||
<img class="prateleira__item--image" src="${item.image}" />
|
||||
</div>
|
||||
<div class="prateleira__item--description">
|
||||
<p class="prateleira__item--name">${item.title}</p>
|
||||
<ul class="prateleira__item--options">
|
||||
<li>
|
||||
<button type="button"></button>
|
||||
</li>
|
||||
</ul>
|
||||
<button type="button" class="prateleira__item--button">Ver produto</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<!-- <ul class="prateleira__carousel">
|
||||
<li class="prateleira__card">
|
||||
<div class="prateleira__card--">
|
||||
<img class="prateleira__card--image" src="${imageUrl}" />
|
||||
</div>
|
||||
<div class="prateleira__card--description">
|
||||
<p class="prateleira__card--title">
|
||||
${product.productName}
|
||||
</p>
|
||||
<div class="prateleira__card--options">
|
||||
|
||||
</div>
|
||||
<button class="prateleira__card--button">VER PRODUTO</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="prateleira__card">
|
||||
<div class="prateleira__card--">
|
||||
<img class="prateleira__card--image" src="${imageUrl}" />
|
||||
</div>
|
||||
<div class="prateleira__card--description">
|
||||
<p class="prateleira__card--title">
|
||||
${product.productName}
|
||||
</p>
|
||||
<div class="prateleira__card--options">
|
||||
|
||||
</div>
|
||||
<button class="prateleira__card--button">VER PRODUTO</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="footerCheckout__wrapper">
|
||||
<div class="footerCheckout__address">
|
||||
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user