forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'fix: corrige aparecimento de titulo quando o carrinho estiver vazio ou nao' (#11) from feature/tituloCartVazio into development
Reviewed-on: EmmanuelVitor/m3-academy-template-checkout-EmmanuelVitor#11
This commit is contained in:
commit
1cefaad311
@ -23,6 +23,7 @@ export default class Footer {
|
||||
this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci");
|
||||
this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy");
|
||||
this.footerCheckoutShelf = await waitElement(".footerCheckout__prateleira");
|
||||
this.cartTitle = await waitElement("#cart-title");
|
||||
|
||||
|
||||
|
||||
@ -35,20 +36,25 @@ 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
|
||||
|
||||
let target = this.checkoutVazio;
|
||||
let title = this.cartTitle;
|
||||
let shelf = this.footerCheckoutShelf;
|
||||
let config = { childList: true, attributes: true };
|
||||
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && this.checkoutVazio.style.display == "none") {
|
||||
title.style.visibility = "initial";
|
||||
shelf.classList.remove("none");
|
||||
this.createfooterShelf();
|
||||
} else {
|
||||
title.style.visibility = "hidden"
|
||||
shelf.classList.add("none");
|
||||
}
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
|
||||
title.style.visibility = "initial";
|
||||
shelf.classList.remove("none")
|
||||
this.createfooterShelf();
|
||||
} else if (window.location.hash != "#/cart") {
|
||||
title.style.visibility = "hidden"
|
||||
shelf.classList.add("none");
|
||||
|
||||
}
|
||||
@ -58,9 +64,11 @@ export default class Footer {
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (target.style.display == "none" && window.location.hash == "#/cart") {
|
||||
title.style.visibility = "initial";
|
||||
shelf.classList.remove("none");
|
||||
this.createfooterShelf();
|
||||
} else {
|
||||
title.style.visibility = "hidden"
|
||||
shelf.classList.add("none");
|
||||
|
||||
}
|
||||
|
||||
@ -1102,7 +1102,8 @@ li.hproduct.item.muted {
|
||||
|
||||
span.newsletter-text {
|
||||
@media (min-width: 2500px) {
|
||||
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
margin-left: 8.05px;
|
||||
}
|
||||
}
|
||||
@ -1114,6 +1115,13 @@ span.newsletter-text {
|
||||
}
|
||||
}
|
||||
|
||||
span.error {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 26px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressFormPart1 small {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
|
||||
@ -106,7 +106,6 @@
|
||||
|
||||
#payment-data-submit {
|
||||
background: $color-blue2;
|
||||
;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
@ -116,6 +115,9 @@
|
||||
margin: 0 auto;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
@ -557,11 +559,14 @@
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 40px;
|
||||
|
||||
@media (max-width:4900px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: $color-blue2;
|
||||
;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
@ -575,6 +580,12 @@
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
min-width: 543px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
}
|
||||
@ -588,6 +599,10 @@
|
||||
.srp-toggle {
|
||||
margin: 0 0 34px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
min-width: 543px;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
background-color: $color-white;
|
||||
border-radius: 100px;
|
||||
@ -612,6 +627,11 @@
|
||||
label {
|
||||
width: 50%;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $color-gray3;
|
||||
}
|
||||
@ -628,6 +648,11 @@
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@ -670,7 +695,7 @@
|
||||
left: 100%;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
top: 30%;
|
||||
top: 40%;
|
||||
margin-left: 18.04px;
|
||||
}
|
||||
|
||||
@ -721,6 +746,11 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 17px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 18px;
|
||||
line-height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1051,6 +1081,8 @@
|
||||
flex-direction: column;
|
||||
width: 343px;
|
||||
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
width: calc(100% - 32px);
|
||||
@ -1063,6 +1095,11 @@
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
@media (max-width:1025px) {
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.link-choose-more-products-wrapper {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@ -1156,9 +1193,12 @@
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.icon-lock:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.payment-group-list-btn {
|
||||
margin: 0;
|
||||
@ -1294,3 +1334,12 @@ i.icon.icon-remove.item-remove-ico {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
element.style {}
|
||||
|
||||
.row-fluid .full-cart {
|
||||
@media (max-width:490px) {
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,10 @@ footer .footerCheckout__prateleira,
|
||||
header {
|
||||
width: 79.53125%;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width:1024px) {
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@ -53,6 +57,10 @@ body {
|
||||
.container-order-form,
|
||||
.container-cart {
|
||||
width: 80%;
|
||||
|
||||
@media (max-width:1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -128,7 +128,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
bottom: 45.33%
|
||||
bottom: 48.33%
|
||||
}
|
||||
}
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
left: 13px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
@media (min-width:2500px) {
|
||||
font-size: 48px;
|
||||
line-height: 76px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__list {
|
||||
@ -35,6 +35,15 @@
|
||||
gap: 16.94px;
|
||||
}
|
||||
|
||||
@media (max-width:490px) {
|
||||
margin: 0 15px 56px;
|
||||
}
|
||||
|
||||
@media (min-width:370px) and (max-width:380px) {
|
||||
|
||||
margin: 0 0 56px;
|
||||
}
|
||||
|
||||
.footerCheckout__card {
|
||||
width: 100%;
|
||||
|
||||
@ -53,6 +62,10 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.footerCheckout__container {
|
||||
|
||||
display: flex;
|
||||
@ -62,6 +75,10 @@
|
||||
gap: 20px;
|
||||
height: auto;
|
||||
|
||||
@media (min-width:370px) and (max-width:380px) {
|
||||
width: 164px;
|
||||
}
|
||||
|
||||
li,
|
||||
a {
|
||||
|
||||
@ -154,9 +171,6 @@
|
||||
flex-wrap: wrap;
|
||||
min-height: 61px;
|
||||
|
||||
&__skuName {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user