forked from M3-Academy/m3-academy-template-checkout
feat(slick): add itens no slick
This commit is contained in:
parent
ae44ae9dd1
commit
14311f1b28
@ -8,7 +8,8 @@ export default class Footer {
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.footerIcons();
|
||||
// this.onUpdate();
|
||||
this.addCarrossel();
|
||||
this.onUpdate();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
@ -17,10 +18,10 @@ export default class Footer {
|
||||
this.paymentIcons = await waitElement(".footerCheckout__stamps");
|
||||
this.developedByIcons = await waitElement(".footerCheckout__developedBy");
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
// this.carrossel = await waitElement(".footerCheckout__prateleira");
|
||||
}
|
||||
|
||||
footerIcons() {
|
||||
console.log(this.paymentIcons);
|
||||
this.paymentIcons.innerHTML = `
|
||||
<li class="footerCheckout__payments">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
|
||||
@ -55,6 +56,8 @@ export default class Footer {
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
const title = document.querySelector("#cart-title");
|
||||
const prateleira = document.querySelector(".footerCheckout__prateleira");
|
||||
//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
|
||||
@ -62,17 +65,93 @@ export default class Footer {
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
if (window.vtexjs.checkout.orderForm.items.length == 0) {
|
||||
title.style.display = "none";
|
||||
prateleira.style.display = "none";
|
||||
} else {
|
||||
prateleira.style.display = "block";
|
||||
title.style.display = "block";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
|
||||
addCarrossel() {
|
||||
const carrossel = document.querySelector(".footerCheckout__prateleira");
|
||||
const title = document.createElement("h2");
|
||||
title.setAttribute("class", "prateleira-title");
|
||||
title.innerText = "Você também pode gostar:";
|
||||
carrossel.appendChild(title);
|
||||
const ul = document.createElement("ul");
|
||||
carrossel.appendChild(ul);
|
||||
|
||||
// const slick = document.querySelector(".slick-track");
|
||||
|
||||
// const ul = document.createElement("ul");
|
||||
// carrossel.appendChild(ul);
|
||||
fetch(
|
||||
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
|
||||
)
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function (data) {
|
||||
data.map((item) => {
|
||||
const li = document.createElement("li");
|
||||
li.setAttribute("class", "product-card card");
|
||||
ul.appendChild(li);
|
||||
|
||||
let categoriesValues = item.items
|
||||
.filter((categoryValue) => {
|
||||
if (categoryValue.name) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
.map((categoryValue) => {
|
||||
return `<li class="product-category">${categoryValue.name}</li>`;
|
||||
})
|
||||
.toString()
|
||||
.replaceAll(",", "");
|
||||
|
||||
li.innerHTML = `
|
||||
<img src="${item.items[0].images[0].imageUrl}" alt="Imagem de ${item.productName}">
|
||||
<h4 class="product-name">${item.productName}</h4>
|
||||
<ul class="product-skus" id="catego">
|
||||
${categoriesValues}
|
||||
</ul>
|
||||
<button class="product-btn" href="${item.link}">Ver produto</button>
|
||||
`;
|
||||
$(ul).slick({
|
||||
infinite: false,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
$(ul).slick("unslick");
|
||||
});
|
||||
$(ul).slick({
|
||||
infinite: false,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 376,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@ export default class Header {
|
||||
await this.selectors();
|
||||
this.progressBarHTML();
|
||||
await this.progressBarWorking();
|
||||
// this.mutationOvserver();
|
||||
// await this.changeTexts();
|
||||
}
|
||||
|
||||
@ -253,4 +254,29 @@ export default class Header {
|
||||
// let texto = (chooseProductsBtn.innerHTML = "Continuar comprando");
|
||||
// console.log(chooseProductsBtn);
|
||||
// }
|
||||
|
||||
mutationOvserver() {
|
||||
// seleciona o nó alvo
|
||||
var target = document.querySelector(".cart-items tbody");
|
||||
|
||||
// cria uma nova instância de observador
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
});
|
||||
});
|
||||
|
||||
// configuração do observador:
|
||||
var config = {
|
||||
childList: true,
|
||||
attributes: true,
|
||||
characterData: true,
|
||||
subtree: true,
|
||||
attributeOldValue: true,
|
||||
characterDataOldValue: true,
|
||||
};
|
||||
|
||||
// passar o nó alvo, bem como as opções de observação
|
||||
observer.observe(target, config);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
@import "./lib/slick";
|
||||
@import "./partials/header";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/prateleira";
|
||||
@import "./checkout/checkout.scss";
|
||||
|
||||
@ -278,7 +278,7 @@
|
||||
display: block;
|
||||
max-height: 38px;
|
||||
margin: 0 !important;
|
||||
padding: 8px 0;
|
||||
padding: 0;
|
||||
width: 38px;
|
||||
color: $color-black;
|
||||
box-shadow: none;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.empty-cart {
|
||||
font-family: $font-family;
|
||||
margin-bottom: 200px;
|
||||
&-content {
|
||||
color: $color-black2;
|
||||
text-align: center;
|
||||
@ -14,8 +15,13 @@
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 33px;
|
||||
margin-top: 170px;
|
||||
margin-bottom: 32px;
|
||||
color: black;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 18px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&-message {
|
||||
@ -38,7 +44,7 @@
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
width: 31.95%;
|
||||
width: 327px;
|
||||
height: 48px;
|
||||
letter-spacing: 0.05em;
|
||||
color: black;
|
||||
@ -46,6 +52,10 @@
|
||||
|
||||
transition: ease-in 0.22s all;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black2, 5);
|
||||
}
|
||||
|
||||
@ -46,6 +46,9 @@ body {
|
||||
.container-order-form,
|
||||
.container-cart {
|
||||
width: 80%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 96%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -70,7 +70,14 @@
|
||||
float: right;
|
||||
}
|
||||
img {
|
||||
background-color: $color-gray15;
|
||||
display: block;
|
||||
@media (max-width: 1024px) {
|
||||
width: 94.83% !important;
|
||||
}
|
||||
@media (max-width: 375px) {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
@ -98,15 +105,20 @@
|
||||
}
|
||||
.slick-arrow {
|
||||
font-size: 0;
|
||||
border: none;
|
||||
position: absolute;
|
||||
bottom: 195px;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
.slick-prev {
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center
|
||||
center;
|
||||
z-index: 4;
|
||||
left: 10px;
|
||||
}
|
||||
.slick-next {
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") no-repeat center
|
||||
center;
|
||||
z-index: 4;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@ -14,6 +14,12 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
align-items: unset;
|
||||
margin-left: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
|
||||
@ -7,6 +7,16 @@
|
||||
width: 79.53125% !important;
|
||||
margin-top: 29.02px;
|
||||
margin-bottom: 29.86px;
|
||||
@media (max-width: 1024px) {
|
||||
width: auto !important;
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#progressBar {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@ -46,7 +56,7 @@
|
||||
.progress-bar-line-2 {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: black;
|
||||
background: $color-black;
|
||||
bottom: 6px;
|
||||
}
|
||||
|
||||
@ -60,9 +70,11 @@
|
||||
right: 38px;
|
||||
}
|
||||
|
||||
.progress-bar-active {
|
||||
background: black;
|
||||
border: 1px solid black;
|
||||
#progress-bar-circle-1.active,
|
||||
#progress-bar-circle-2.active,
|
||||
#progress-bar-circle-3.active {
|
||||
background: $color-black;
|
||||
border: 1px solid $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -72,6 +84,11 @@
|
||||
img {
|
||||
height: 37.14px;
|
||||
width: 155.58px;
|
||||
// @media (max-width: 1024px) {
|
||||
// max-width: none;
|
||||
// width: 122.44%;
|
||||
// height: auto;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1 +1,87 @@
|
||||
/* _prateleira.scss */
|
||||
.footerCheckout__prateleira {
|
||||
@media (max-width: 1024px) {
|
||||
width: 97% !important;
|
||||
}
|
||||
@media (max-width: 375px) {
|
||||
width: 92% !important;
|
||||
}
|
||||
.prateleira-title {
|
||||
font-family: $font-family-secondary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: $color-black;
|
||||
text-align: center;
|
||||
margin: 43px 0 20px 0;
|
||||
}
|
||||
|
||||
.slick-initialized {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: $color-black;
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: $color-blue2;
|
||||
color: $color-white;
|
||||
font-family: $font-family;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.product-skus {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
gap: 5px;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
flex-wrap: wrap;
|
||||
height: 60px;
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-category {
|
||||
background-color: $color-blue2;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-family: $font-family;
|
||||
padding: 5px;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,6 +24,7 @@ $color-gray11: #f4f5f7;
|
||||
$color-gray12: #b3b3b3;
|
||||
$color-gray13: #58595b;
|
||||
$color-gray14: #fbfbfb;
|
||||
$color-gray15: #eeee;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
$color-blue2: #00c8ff;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user