EleonoraOtz/m3-academy-template-checkout-eleonoraotz
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Ajusta função da prateleira

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2022-12-22 14:10:34 -03:00
parent c9ace74e74
commit cf90b8690f
6 changed files with 204 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,15 +8,16 @@ export default class Footer {
async init() {
this.list = await this.fetchPrateleira();
await this.selectors();
// this.onUpdate();
this.createPrateleira();
this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
this.itensPrateleira();
this.addCarrossel();
this.creditCardIconsHTML();
this.developedByIconsHTML();
if (window.location.hash === "#/cart") {
await this.onUpdate();
}
// this.createPrateleira();
this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
this.itensPrateleira();
this.events();
this.addCarrossel();
}
async selectors() {
@ -24,25 +25,63 @@ export default class Footer {
timeout: 5000,
interval: 1000,
});
this.checkoutVazio = await waitElement(".empty-cart-content");
this.creditCardIcons = await waitElement(".footerCheckout__stamps");
this.developedByIcons = await waitElement(".footerCheckout__developedBy");
}
onUpdate() {
async onUpdate() {
//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
let target = this.checkoutVazio;
const cartTitle = document.querySelector("#cart-title");
let config = { childList: true, attributes: true };
// let observer = new MutationObserver((mutations) => {
// // mutations.forEach(function (mutation) {
// // console.log("observer");
// mutations.map((mutation.target.attributes.style.nodeValue); => {
// const cartStatus = mutation.target.attributes.style.nodeValue;
// console.log("cartStatus");
// if (cartStatus == "display: none;") {
// this.createPrateleira();
// this.cartTitle.classList.remove("inactive");
// } else if (cartStatus == "display: block;") {
// this.removePrateleira();
// this.cartTitle.classList.add("inactive");
// }
// });
// // });
// });
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
mutations.map((mutation) => {
console.log(mutation.target.attributes.style.nodeValue);
if (mutation.target.attributes.style.nodeValue == "display: none;") {
this.createPrateleira();
// this.cartTitle.classList.remove("inactive");
} else if (mutation.target.attributes.style.nodeValue == "display: block;") {
this.removePrateleira();
// this.cartTitle.classList.add("inactive");
}
});
});
observer.observe(target, config);
}
hashChange(e) {
if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
this.itensP.classList.add("desativado");
} else {
this.itensP.classList.remove("desativado");
}
}
createPrateleira() {
if (this.itensP) {
this.itensP.innerHTML = `
@ -52,6 +91,10 @@ export default class Footer {
}
}
removePrateleira() {
this.itensP.innerHTML = ``;
}
async itensPrateleira() {
let structure = "";
@ -86,31 +129,8 @@ export default class Footer {
});
}
async addCarrossel() {
const elemento = await waitElement(".footerCheckout__carrossel-itens");
if (window.innerWidth > 1024) {
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
} else if (window.innerWidth <= 1024 && window.innerWidth > 375) {
$(elemento).slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
} else if (window.innerWidth <= 375) {
$(elemento).slick({
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
}
events() {
window.addEventListener("hashchange", this.hashChange.bind(this));
}
creditCardIconsHTML() {
@ -148,4 +168,47 @@ export default class Footer {
</li>
`;
}
async addCarrossel() {
const elemento = await waitElement(".footerCheckout__carrossel-itens");
// if (window.innerWidth > 1024) {
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
infinite: false,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
},
},
{
breakpoint: 601,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
],
});
// } else if (window.innerWidth <= 1024 && window.innerWidth > 599) {
// $(elemento).slick({
// slidesToShow: 3,
// slidesToScroll: 1,
// arrows: true,
// infinite: false,
// });
// } else if (window.innerWidth <= 599) {
// $(elemento).slick({
// slidesToShow: 2,
// slidesToScroll: 1,
// arrows: true,
// infinite: false,
// });
// }
}
}

72
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -21,9 +21,10 @@
box-sizing: border-box;
border-radius: 5px;
padding: 16px 29px 16px 16px;
margin-bottom: 48px;
margin-bottom: 16px;
@include mq(md, max) {
padding: 16px;
margin: 0px 0 25px 0;
border-left: none;
border-right: none;
@ -132,7 +133,6 @@
td.info {
width: 100%;
}
}
#payment-data-submit {
@ -173,6 +173,11 @@
.cart-items {
.product-item {
padding: 16px 0;
@media (max-width: 1024px) {
border-top: 0 !important;
padding-top: 0;
}
}
th {
@ -184,7 +189,18 @@
line-height: 16px;
text-align: left;
@include mq(md, max) {
&.product-price {
&:after {
content: "Unidade";
background-color: $white;
}
}
@media (max-width: 1024px) {
&.product,
&.product-price,
&.quantity,
&.quantity-price,
&.shipping-date {
display: none;
@ -206,6 +222,10 @@
margin: 0;
width: 20.2%;
@media (max-width: 375px) {
width: 100% !important;
}
img {
width: 100%;
@ -231,6 +251,11 @@
color: $black-500;
white-space: normal;
@media (max-width: 375px) {
padding: 0 !important;
// margin-left: 48px;
}
@include mq(lg, max) {
width: 250px;
}
@ -249,9 +274,19 @@
text-decoration: none;
}
@media (max-width: 490px) {
margin-left: 23px;
@media (min-width: 768px) and (max-width: 1024px) {
width: 100%;
margin-left: 0;
}
@media (max-width: 375px) {
width: 80% !important;
margin-left: 11px;
}
// @media (max-width: 490px) {
// margin-left: 23px;
// }
}
.brand,
@ -295,7 +330,8 @@
font-size: 12px;
line-height: 14px;
text-decoration-line: line-through;
@include mq(sm, max) {
@media (max-width: 375px) {
font-size: 12px;
line-height: 14px;
}
@ -310,29 +346,30 @@
}
td.quantity {
display: flex;
display: flex !important;
align-items: center;
justify-content: center;
margin: 11px 79px 0 0;
padding: 0;
height: 34px;
width: 99px;
width: 99px !important;
// width: max-content !important;
box-sizing: border-box;
border: 1px solid $gray-300;
border-radius: 8px;
@media (max-width: 490px) {
margin-left: 84px !important;
margin-left: 70px !important;
width: 80px !important;
}
input {
background-color: $white;
background-color: transparent;
border: 0 none;
display: block;
max-height: 38px;
margin: 0 !important;
// padding: 8px 0;
padding: 0;
width: 38px;
color: $black-500;
box-shadow: none;
@ -356,6 +393,7 @@
font-weight: 700;
line-height: 10px;
border-radius: 50%;
margin: auto;
padding: 3px 0;
width: 16px;
@ -489,9 +527,13 @@
line-height: 33px;
color: $black-500;
@include mq(md, max) {
margin-top: 0;
@media (max-width: 375px) {
margin: 13px 0 11px;
}
// @include mq(md, max) {
// margin-top: 0;
// }
}
.srp-description {
@ -500,6 +542,10 @@
font-size: 12px;
line-height: 18px;
margin: 0 0 12px;
@media (max-width: 375px) {
font-size: 14px;
}
}
button.shp-open-options {

9
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -1,5 +1,6 @@
.empty-cart {
font-family: $font-family;
&-content {
color: #292929;
text-align: center;
@ -24,11 +25,17 @@
text-transform: uppercase;
margin-bottom: 35px;
@media (max-width: 1024px) {
@media (min-width: 376px) and (max-width: 1024px) {
font-size: 18px;
line-height: 25px;
margin: 235px 0 22px;
}
@media (max-width: 375px) {
font-size: 18px;
line-height: 25px;
margin: 180px 0 22px;
}
}
&-message {

11
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -81,7 +81,6 @@
img {
display: block;
}
&.slick-loading img {
display: none;
@ -117,13 +116,21 @@
z-index: 4;
border: none;
left: 20px;
@media (max-width: 375px) {
left: 2px;
}
}
.slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center;
no-repeat center center;
z-index: 4;
border: none;
right: 20px;
@media (max-width: 375px) {
right: 15px;
}
}
.slick-arrow.slick-hidden {
display: none;

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

@ -24,6 +24,11 @@
line-height: 38px;
text-align: center;
color: $black-500;
@media (max-width: 375px) {
font-size: 14px;
line-height: 28px;
}
}
.product-info {
@ -81,7 +86,7 @@
background-color: $vivid-blue;
border: none;
border-radius: 8px;
font-family: "Open Sans";
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 13px;
@ -119,8 +124,8 @@
margin-top: 56px;
@media (max-width: 1024px) {
}
// @media (max-width: 1024px) {
// }
.container {
border-top: 1px solid #000;
@ -167,25 +172,24 @@
margin-top: 13px;
}
@media (max-width: 1024px) {
width: 90%;
margin: 22px 0 40px 16px;
@media (min-width: 768px) and (max-width: 1024px) {
width: 33.5%;
margin: 22px 0 23px 16px;
}
@media (min-width: 376px) and (max-width: 767px) {
width: 87%;
margin: 22px 0 23px 8px;
}
@media (max-width: 375px) {
width: 91.2%;
order: 1;
gap: 4px;
// margin: 23px 0;
margin: 22px 0 23px 8px;
}
@include mq(md, max) {
align-self: center;
// margin-bottom: 12px;
}
&__divider {
content: "";
background-color: $gray-400;
@ -268,4 +272,9 @@
}
}
}
.desativado {
display: none !important;
}
}

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

@ -140,12 +140,16 @@
width: 19.213%;
}
@media screen and (min-width: 376px) and (max-width: 1024px) {
@media (min-width: 768px) and (max-width: 1024px) {
width: 16.59%;
}
@media (min-width: 376px) and (max-width: 767px) {
width: 39.283%;
}
@media (max-width: 375px) {
width: 41.49%;
width: 45.4%;
}
}
@ -165,8 +169,8 @@
padding: 0 0 0 8px;
color: $black-400;
@media (max-width: 1024px) {
}
// @media (max-width: 1024px) {
// }
@media (min-width: 2500px) {
font-size: 24px;