forked from M3-Academy/m3-academy-template-checkout
feat: Adiciona prateleira
This commit is contained in:
parent
7749c9a557
commit
1ce7fe9b76
@ -3,17 +3,55 @@ import { waitElement } from "m3-utils";
|
|||||||
export default class Footer {
|
export default class Footer {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.init();
|
this.init();
|
||||||
|
this.requestShelf();
|
||||||
|
this.addCarrossel();
|
||||||
}
|
}
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
// this.onUpdate();
|
// this.onUpdate();
|
||||||
|
this.requestShelf();
|
||||||
|
this.addCarrossel();
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectors() {
|
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:
|
//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
|
// 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 = `
|
||||||
|
<p class="footerChekout__prateleira-title">Você também pode gostar</p>
|
||||||
|
<ul class="carrosel-ul"></ul>
|
||||||
|
`;
|
||||||
|
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 = `
|
||||||
|
<img src="${item.items[0].images[0].imageUrl}" alt="${item.productName}" />
|
||||||
|
<p class="product-name">${item.productName}</p>
|
||||||
|
<div class="product-variation">${item.items
|
||||||
|
.map((name) => {
|
||||||
|
return `<a name="product-variationvariation" class="product-variationvariation">${name.name}</a>`;
|
||||||
|
})
|
||||||
|
.join("")}</div>
|
||||||
|
<button class="show-product">Ver produto</button>
|
||||||
|
`;
|
||||||
|
prateleira.children[1].appendChild(li);
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpdate() {
|
onUpdate() {
|
||||||
@ -30,11 +68,15 @@ export default class Footer {
|
|||||||
|
|
||||||
observer.observe(target, config);
|
observer.observe(target, config);
|
||||||
}
|
}
|
||||||
|
|
||||||
async addCarrossel() {
|
async addCarrossel() {
|
||||||
const elemento = await waitElement("#my-element");
|
const elemento = await waitElement(".carrosel-ul");
|
||||||
$(elemento).slick({
|
$(elemento).slick({
|
||||||
slidesToShow: 4,
|
slidesToShow: 4,
|
||||||
slidesToScroll: 1,
|
slidesToScroll: 1,
|
||||||
|
arrows: true,
|
||||||
|
variableWidth: true,
|
||||||
|
infinite: false,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -70,7 +70,9 @@ export default class Header {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
</ul>`;
|
</ul>
|
||||||
|
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.progressBar && window.innerWidth <= 1024) {
|
if (this.progressBar && window.innerWidth <= 1024) {
|
||||||
|
@ -4,13 +4,19 @@
|
|||||||
color: $color-black;
|
color: $color-black;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-message {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-links {
|
&-links {
|
||||||
|
@ -49,7 +49,17 @@ body {
|
|||||||
}
|
}
|
||||||
.container-order-form,
|
.container-order-form,
|
||||||
.container-cart {
|
.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;
|
color: $color-black !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#cart-title,
|
#cart-title,
|
||||||
#orderform-title {
|
#orderform-title {
|
||||||
color: $color-gray2;
|
color: $color-gray2;
|
||||||
@ -76,6 +88,8 @@ body {
|
|||||||
margin: 40px 0 30px;
|
margin: 40px 0 30px;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
|
@ -95,13 +95,15 @@
|
|||||||
height: 1px;
|
height: 1px;
|
||||||
border-top: 1px solid #000000;
|
border-top: 1px solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: #000000;
|
background: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -132,7 +134,5 @@
|
|||||||
width: 12px;
|
width: 12px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user