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

fix: corrige aparecimento de titulo quando o carrinho estiver vazio ou nao #11

Merged
emmanuelvitor merged 1 commits from feature/tituloCartVazio into development 2022-12-26 00:06:17 +00:00
Conversation 0 Commits 1 Files Changed 6 +98 -11
6 changed files with 98 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,7 @@ export default class Footer {
this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci"); this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci");
this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy"); this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy");
this.footerCheckoutShelf = await waitElement(".footerCheckout__prateleira"); 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 // 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 target = this.checkoutVazio;
let title = this.cartTitle;
let shelf = this.footerCheckoutShelf; let shelf = this.footerCheckoutShelf;
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && this.checkoutVazio.style.display == "none") { if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && this.checkoutVazio.style.display == "none") {
title.style.visibility = "initial";
shelf.classList.remove("none"); shelf.classList.remove("none");
this.createfooterShelf(); this.createfooterShelf();
} else { } else {
title.style.visibility = "hidden"
shelf.classList.add("none"); shelf.classList.add("none");
} }
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
title.style.visibility = "initial";
shelf.classList.remove("none") shelf.classList.remove("none")
this.createfooterShelf(); this.createfooterShelf();
} else if (window.location.hash != "#/cart") { } else if (window.location.hash != "#/cart") {
title.style.visibility = "hidden"
shelf.classList.add("none"); shelf.classList.add("none");
} }
@ -58,9 +64,11 @@ export default class Footer {
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
if (target.style.display == "none" && window.location.hash == "#/cart") { if (target.style.display == "none" && window.location.hash == "#/cart") {
title.style.visibility = "initial";
shelf.classList.remove("none"); shelf.classList.remove("none");
this.createfooterShelf(); this.createfooterShelf();
} else { } else {
title.style.visibility = "hidden"
shelf.classList.add("none"); shelf.classList.add("none");
} }

10
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -1102,7 +1102,8 @@ li.hproduct.item.muted {
span.newsletter-text { span.newsletter-text {
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
margin-left: 8.05px; 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 { .vtex-omnishipping-1-x-addressFormPart1 small {
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-size: 24px; font-size: 24px;

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

@ -106,7 +106,6 @@
#payment-data-submit { #payment-data-submit {
background: $color-blue2; background: $color-blue2;
;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: $color-white; color: $color-white;
@ -116,6 +115,9 @@
margin: 0 auto; margin: 0 auto;
@media (min-width: 2500px) { @media (min-width: 2500px) {
display: flex;
justify-content: center;
align-items: center;
font-size: 28px; font-size: 28px;
line-height: 38px; line-height: 38px;
} }
@ -557,11 +559,14 @@
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 40px; margin-bottom: 40px;
@media (max-width:4900px) {
margin-bottom: 0;
}
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-blue2; background-color: $color-blue2;
;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-white;
@ -575,6 +580,12 @@
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
min-width: 543px;
}
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-black, 5);
} }
@ -588,6 +599,10 @@
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 34px;
@media (min-width: 2500px) {
min-width: 543px;
}
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
border-radius: 100px; border-radius: 100px;
@ -612,6 +627,11 @@
label { label {
width: 50%; width: 50%;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 38px;
}
&:active { &:active {
background-color: $color-gray3; background-color: $color-gray3;
} }
@ -628,6 +648,11 @@
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
margin-bottom: 12px; margin-bottom: 12px;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 33px;
}
} }
input { input {
@ -670,7 +695,7 @@
left: 100%; left: 100%;
font-size: 28px; font-size: 28px;
line-height: 38px; line-height: 38px;
top: 30%; top: 40%;
margin-left: 18.04px; margin-left: 18.04px;
} }
@ -721,6 +746,11 @@
left: 0; left: 0;
width: 100%; width: 100%;
top: 17px; top: 17px;
@media (min-width: 2500px) {
font-size: 18px;
line-height: 45px;
}
} }
} }
} }
@ -1051,6 +1081,8 @@
flex-direction: column; flex-direction: column;
width: 343px; width: 343px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
@ -1063,6 +1095,11 @@
padding-bottom: 50px; padding-bottom: 50px;
} }
@media (max-width:1025px) {
margin-bottom: 0;
}
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
display: block; display: block;
text-align: center; text-align: center;
@ -1156,9 +1193,12 @@
display: none; display: none;
} }
} }
.icon-lock:before {
display: none;
}
.payment-group-list-btn { .payment-group-list-btn {
margin: 0; margin: 0;
@ -1294,3 +1334,12 @@ i.icon.icon-remove.item-remove-ico {
font-size: 28px; font-size: 28px;
} }
} }
element.style {}
.row-fluid .full-cart {
@media (max-width:490px) {
margin-bottom: 0;
}
}

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

@ -18,6 +18,10 @@ footer .footerCheckout__prateleira,
header { header {
width: 79.53125%; width: 79.53125%;
margin: 0 auto; margin: 0 auto;
@media (max-width:1024px) {
width: 98%;
}
} }
body { body {
@ -53,6 +57,10 @@ body {
.container-order-form, .container-order-form,
.container-cart { .container-cart {
width: 80%; width: 80%;
@media (max-width:1024px) {
width: 100%;
}
} }
} }

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

@ -128,7 +128,7 @@
} }
@media (max-width: 490px) { @media (max-width: 490px) {
bottom: 45.33% bottom: 48.33%
} }
} }
@ -142,7 +142,7 @@
} }
@media (max-width: 490px) { @media (max-width: 490px) {
left: 13px; left: 10px;
} }
} }

22
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -22,8 +22,8 @@
@media (min-width:2500px) { @media (min-width:2500px) {
font-size: 48px; font-size: 48px;
line-height: 76px; line-height: 76px;
} }
} }
&__list { &__list {
@ -35,6 +35,15 @@
gap: 16.94px; 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 { .footerCheckout__card {
width: 100%; width: 100%;
@ -53,6 +62,10 @@
.footerCheckout__container { .footerCheckout__container {
display: flex; display: flex;
@ -62,6 +75,10 @@
gap: 20px; gap: 20px;
height: auto; height: auto;
@media (min-width:370px) and (max-width:380px) {
width: 164px;
}
li, li,
a { a {
@ -154,9 +171,6 @@
flex-wrap: wrap; flex-wrap: wrap;
min-height: 61px; min-height: 61px;
&__skuName {
height: 28px;
}
} }
} }