SavioCarvalhoMoraes/m3-academy-template-checkout-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(footer): Slick funcionando

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2022-12-18 18:17:03 -03:00
parent 1badd9c828
commit ffb5a8a59d
4 changed files with 59 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
checkout/src/arquivos/js/components/Footer.js
View File

@ -53,6 +53,7 @@ export default class Footer {
this.onUpdate(); this.onUpdate();
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
this.listaInfocards.style.display = "flex"; this.listaInfocards.style.display = "flex";
//this.slickOn();
} }
if (window.location.hash != "#/cart") { if (window.location.hash != "#/cart") {
this.listaInfocards.style.display = "none"; this.listaInfocards.style.display = "none";
@ -66,12 +67,13 @@ export default class Footer {
let target = this.checkoutVazio; let target = this.checkoutVazio;
let prateleiraItens = this.prateleiraInfoCards; let prateleiraItens = this.prateleiraInfoCards;
let titulo = this.tituloCarrinho; let titulo = this.tituloCarrinho;
if (target.style.display == "none") { if (target.style.display == "none" && window.location.hash == "#/cart") {
titulo.style.display = "block"; titulo.style.display = "block";
this.pegarInfo( this.pegarInfo(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
); );
prateleiraItens.style.display = "flex"; prateleiraItens.style.display = "flex";
this.slickOn();
} else { } else {
titulo.style.display = "none"; titulo.style.display = "none";
prateleiraItens.style.display = "none"; prateleiraItens.style.display = "none";
@ -86,10 +88,12 @@ export default class Footer {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
console.log("oi", mutation); console.log("oi", mutation);
if (target.style.display != "none") { if (target.style.display != "none") {
//this.slickOff();
prateleiraItens.style.display = "none"; prateleiraItens.style.display = "none";
titulo.style.display = "none"; titulo.style.display = "none";
} else { } else {
prateleiraItens.style.display = "flex"; prateleiraItens.style.display = "flex";
//this.slickOn();
titulo.style.display = "block"; titulo.style.display = "block";
} }
}); });
@ -156,6 +160,7 @@ export default class Footer {
this.prateleiraInfoCards.innerHTML = `<h2 class="prateleira__subtitle">Você também pode gostar:</h2><ul class="infoCards">${this.estruturaInfoCard( this.prateleiraInfoCards.innerHTML = `<h2 class="prateleira__subtitle">Você também pode gostar:</h2><ul class="infoCards">${this.estruturaInfoCard(
Items Items
)}</ul>`; )}</ul>`;
this.slickOn();
} }
renderIconCreditCards() { renderIconCreditCards() {
@ -179,27 +184,40 @@ export default class Footer {
<li><a href="https://vtex.com/br-pt/"><span>Developed By</span><img class="iconDeveLM3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/> </a></li>`; <li><a href="https://vtex.com/br-pt/"><span>Developed By</span><img class="iconDeveLM3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/> </a></li>`;
} }
async trocaTitle() { trocaTitle() {
const tituloCart = document.querySelector(".empty-cart-title"); const tituloCart = document.querySelector(".empty-cart-title");
tituloCart.innerHTML = `<h2>SEU CARRINHO ESTÁ VAZIO</h2>`; tituloCart.innerHTML = `<h2>SEU CARRINHO ESTÁ VAZIO</h2>`;
this.subTitleCart.innerHTML = `<p></p>`; this.subTitleCart.innerHTML = `<p></p>`;
this.buttonCart.innerHTML = `Continuar comprando`; this.buttonCart.innerHTML = `Continuar comprando`;
} }
async trocaFrete() { trocaFrete() {
this.freteCarrinho.innerHTML = `Frete`; this.freteCarrinho.innerHTML = `Frete`;
} }
async trocaUnidade() { trocaUnidade() {
this.unidadeCarrinho.innerHTML = `Unidade`; this.unidadeCarrinho.innerHTML = `Unidade`;
} }
async trocaNotiCliente() { trocaNotiCliente() {
this.notiCliente.innerHTML = ``; this.notiCliente.innerHTML = ``;
} }
/* /*
async trocaNoCep() { async trocaNoCep() {
this.noCep.innerHTML = `Não sei meu código postal`; this.noCep.innerHTML = `Não sei meu código postal`;
}*/ }*/
async trocaIdentificao() {
trocaIdentificao() {
this.identificacaoUser.innerHTML = `Identificação`; this.identificacaoUser.innerHTML = `Identificação`;
} }
//slick
slickOn() {
$(".infoCards").slick({
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
});
}
slickOff() {
$(".infoCards").slick("unslick");
}
} }

3
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -9,7 +9,7 @@ html {
} }
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
width: 94.9734%; width: 100%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
@ -74,6 +74,7 @@ body {
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;

32
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -5,7 +5,7 @@
width: 100% !important; width: 100% !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-top: 1px solid #000000;
color: $color-gray2; color: $color-gray2;
&__wrapper { &__wrapper {
@ -13,14 +13,16 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 50px 0 0 0 !important; margin: 50px 0 0 0 !important;
border-top: 1px solid #000000;
} }
.container { .container {
padding: 27px 32px 24px 32px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
margin: 0 !important; //margin: 0 0 0 16px !important;
} }
&__prateleira { &__prateleira {
//display: none; //display: none;
@ -125,7 +127,11 @@
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; width: 269px;
margin-right: 45px;
&:span {
width: 269px;
}
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 24px;
@ -139,11 +145,16 @@
display: flex; display: flex;
justify-self: center; justify-self: center;
list-style: none; list-style: none;
margin-right: 166px;
flex-direction: row; flex-direction: row;
margin: 0; //margin-right: 189px;
ul {
margin: 0 0 0 0 !important;
}
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
margin-bottom: 12px; //margin-bottom: 12px;
} }
&__divider { &__divider {
@ -166,17 +177,18 @@
} }
&__developedBy { &__developedBy {
width: 18.6%; width: 26.6%;
align-items: center; align-items: center;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
li:last-child { li:last-child {
margin-left: 16px; margin-left: 5px;
} }
a { a {
width: 120px;
align-items: center; align-items: center;
color: $color-gray2; color: $color-gray2;
display: flex; display: flex;
@ -191,10 +203,10 @@
margin-right: 8px; margin-right: 8px;
} }
.iconDevV { .iconDevV {
width: 19.65%; width: 30.65%;
} }
.iconDeveLM3 { .iconDeveLM3 {
width: 15.65%; width: 30.65%;
} }
} }
} }

16
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -72,22 +72,28 @@
} }
li .progress-bar-line-1 { li .progress-bar-line-1 {
position: absolute; position: absolute;
left: 57%; left: 58%;
transform: translateY(-50%); transform: translateY(-50%);
bottom: 4px; bottom: 4px;
width: 212%; width: 176px;
height: 1px; height: 1px;
border-top: 1px solid #000; border-top: 1px solid #000;
} }
li .progress-bar-line-2 { li .progress-bar-line-2 {
position: absolute; position: absolute;
right: 59%; right: 60%;
transform: translateY(-50%); transform: translateY(-50%);
bottom: 5px; bottom: 4px;
width: 242%; width: 171px;
height: 1px; height: 1px;
border-top: 1px solid #000; border-top: 1px solid #000;
} }
p {
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
color: $color-black-100;
}
} }
} }
&__wrapper { &__wrapper {