forked from M3-Academy/m3-academy-template-checkout
feat(cart-fill): created intial styles and product self not styled and fix header,footer,checkout-empty
This commit is contained in:
parent
cf15ad2f14
commit
27a64b361b
@ -87,19 +87,22 @@ export default class Footer {
|
||||
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
|
||||
|
||||
if (this.checkoutEmpty && this.checkoutContainer) {
|
||||
if (this.checkoutContainer.classList.contains("container-cart-fill")) {
|
||||
this.checkoutContainer.classList.remove("container-cart-fill");
|
||||
} else {
|
||||
if (this.checkoutEmpty.style.display === "none") {
|
||||
this.checkoutContainer.classList.add("container-cart-fill");
|
||||
} else {
|
||||
this.checkoutContainer.classList.remove("container-fill");
|
||||
}
|
||||
|
||||
if (
|
||||
window.location.href.endsWith("#/cart") &&
|
||||
this.checkoutContainer.classList.contains("container-cart-fill")
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
console.log("API");
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
|
||||
let target = this.checkoutEmpty;
|
||||
@ -107,18 +110,22 @@ export default class Footer {
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
for (let i = 0; i < mutations.length; i++) {
|
||||
if (mutations[i].attributeName === "style") {
|
||||
if (this.checkoutContainer.classList.contains("container-cart-fill")) {
|
||||
this.checkoutContainer.classList.remove("container-cart-fill");
|
||||
} else {
|
||||
if (this.checkoutEmpty.style.display === "none") {
|
||||
this.checkoutContainer.classList.add("container-cart-fill");
|
||||
} else {
|
||||
this.checkoutContainer.classList.remove("container-cart-fill");
|
||||
}
|
||||
|
||||
if (
|
||||
window.location.href.endsWith("#/cart") &&
|
||||
this.checkoutContainer.classList.contains("container-cart-fill")
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
|
||||
break;
|
||||
@ -127,13 +134,43 @@ export default class Footer {
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (
|
||||
this.checkoutContainer.classList.contains("container-cart-fill") &&
|
||||
this.checkoutContainer.classList.contains("container-cart") &&
|
||||
window.location.href.endsWith("#/cart")
|
||||
) {
|
||||
this.innerSelfList();
|
||||
this.innerToSelf();
|
||||
this.addCarrossel();
|
||||
} else {
|
||||
this.self.innerHTML = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
addCarrossel() {
|
||||
$(this.self).slick({
|
||||
$(this.self.children[1]).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
@ -154,7 +191,7 @@ export default class Footer {
|
||||
let datas = await this.getProducts();
|
||||
|
||||
datas.forEach(() => {
|
||||
$(this.self).slick("unslick");
|
||||
$(this.self.children[1]).slick("unslick");
|
||||
|
||||
this.createdCardsProducts(datas);
|
||||
|
||||
@ -166,7 +203,8 @@ export default class Footer {
|
||||
let structure = "";
|
||||
|
||||
data.forEach((data) => {
|
||||
structure += `<div>
|
||||
structure += `<li>
|
||||
<div>
|
||||
<div>
|
||||
<figure>
|
||||
<img src="${data.items[0].images[0].imageUrl}" alt="">
|
||||
@ -190,9 +228,19 @@ export default class Footer {
|
||||
Ver Produto
|
||||
</span>
|
||||
</a>
|
||||
</div>`;
|
||||
</div></li>`;
|
||||
});
|
||||
|
||||
this.self.innerHTML = structure.trim();
|
||||
this.self.children[1].innerHTML = `
|
||||
${structure.trim()}
|
||||
`;
|
||||
}
|
||||
|
||||
innerSelfList() {
|
||||
this.self.innerHTML = `
|
||||
<div>
|
||||
<h2>Você também pode gostar:</h2>
|
||||
</div>
|
||||
<ul class="self-list"></ul>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,6 @@ function OnProgress(target) {
|
||||
<div class="progress-content">
|
||||
<p>Dados Pessoais</p>
|
||||
<span class="progress-bullet"></span>
|
||||
<span class="progress-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.container {
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
.container-cart.container-cart-fill {
|
||||
width: 100%;
|
||||
|
||||
#cart-title {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
font-family: $font-family-100;
|
||||
@include mq(md, max) {
|
||||
|
||||
@ -10,9 +10,10 @@
|
||||
background-color: $clr-common-white;
|
||||
}
|
||||
|
||||
.container-cart {
|
||||
.container-main.container-cart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 16px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -21,43 +22,37 @@
|
||||
#cart-title {
|
||||
display: none !important;
|
||||
}
|
||||
.cart-template,
|
||||
.checkout-container {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.checkout-container,
|
||||
.cart-template {
|
||||
min-height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px) {
|
||||
.checkout-container {
|
||||
width: fluid(300px, 375px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.link-choose-products {
|
||||
width: fluid(250px, 343px);
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.link-choose-products {
|
||||
width: fluid(250px, 300px);
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.transactions-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.checkout-container {
|
||||
width: fluid(400px, 1280px);
|
||||
padding: 0;
|
||||
}
|
||||
width: fluid(400px, 1280px);
|
||||
padding: 0 !important;
|
||||
max-width: none;
|
||||
|
||||
.link-choose-products {
|
||||
width: fluid(327px, 400px);
|
||||
max-width: none;
|
||||
max-width: 327px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: fluid(659px, 2500px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-cart {
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
.footerCheckout {
|
||||
padding: 16px 25px 18.88px 8px;
|
||||
|
||||
@include mq("md", min) {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout {
|
||||
border-top: 1px solid $clr-common-black;
|
||||
color: $clr-gray-400;
|
||||
|
||||
&__wrapper {
|
||||
border-top: 1px solid $clr-common-black;
|
||||
padding: 16px 25px 18.88px 8px;
|
||||
|
||||
@include mq("md", min) {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
order: 0;
|
||||
margin: 0 0 16px;
|
||||
|
||||
@ -161,7 +161,7 @@ body :where(ul, li, ol) {
|
||||
.progress-item {
|
||||
&--left,
|
||||
&--right {
|
||||
width: 39.9183%;
|
||||
width: 40%;
|
||||
|
||||
.progress-line {
|
||||
position: absolute;
|
||||
@ -183,14 +183,18 @@ body :where(ul, li, ol) {
|
||||
}
|
||||
}
|
||||
|
||||
&--center {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
&--right {
|
||||
.progress-container {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
left: 29%;
|
||||
transform: translateX(-50%);
|
||||
right: 72%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user