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

feature/optimization #1

Merged
josecarloslins merged 16 commits from feature/optimization into main 2022-12-17 01:38:19 +00:00
Conversation 0 Commits 16 Files Changed 14 +230 -32
7 changed files with 230 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f2bf016fd7 - Show all commits

2
checkout/src/arquivos/js/checkout.js
View File

@ -7,7 +7,7 @@ import Content from "./components/content";
const m3Checkout = new Container({
appName: "m3-checkout",
components: [CheckoutUI, Content, Header, Footer],
components: [CheckoutUI, Header, Footer],
});
m3Checkout.start();

15
checkout/src/arquivos/js/components/Content.js
View File

@ -1,3 +1,4 @@
import { hasData } from "jquery";
import { waitElement } from "m3-utils";
export default class Content {
@ -6,6 +7,7 @@ export default class Content {
}
async selectors() {
this.titleMyCart = await waitElement("#cart-title");
this.h2CartEmpty = await waitElement(".empty-cart-title", {
timeout: 5000,
interval: 1000,
@ -14,15 +16,28 @@ export default class Content {
timeout: 5000,
interval: 1000,
});
this.cartContent = await waitElement(".cart");
}
async init() {
await this.selectors();
await this.insertHTML();
await this.modificadedHTML();
}
async insertHTML() {
this.h2CartEmpty.innerHTML = `Seu carrinho está vazio`;
this.btnCartEmpty.innerHTML = `Continuar Comprando`;
}
// async modificadedHTML() {
// let monitorDisplay = this.cartContent.style.display;
// window.sty
// if (this.cartContent.style.display === "none") {
// console.log("oioioi");
// this.titleMyCart.classList.add("cartTitleInvisible");
// } else if (this.titleMyCart.classList.contains("cartTitleInvisible")) {
// this.titleMyCart.classList.remove("cartTitleInvisible");
// }
// }
}

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

@ -7,6 +7,7 @@ export default class Footer {
async init() {
await this.selectors();
await this.addImagesFooter();
// this.onUpdate();
}
@ -14,6 +15,8 @@ export default class Footer {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content");
this.checkoutPayments = await waitElement(".footerCheckout__stamps");
this.developBy = await waitElement(".footerCheckout__developedBy");
}
onUpdate() {
@ -37,4 +40,29 @@ export default class Footer {
slidesToScroll: 1,
});
}
async addImagesFooter() {
this.checkoutPayments.children[0].innerHTML = `
<div class="footerCheckout__payments">
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Master Card" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Logo Visa" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Logo American Express" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Logo Elo" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hipercardM3Academy.png" alt="Logo HiperCard" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Logo PayPal" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Logo Boleto" />
</div>
`;
this.checkoutPayments.children[2].innerHTML = `
<div class="footerCheckout__payments">
<img class="vtexIcon" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo VTEX PCI Certificado" />
</div>
`;
this.developBy.children[0].children[0].innerHTML = `
<span>Powered by</span><img class="logoVtexFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo VTEX" />
`;
this.developBy.children[1].children[0].innerHTML = `
<span>Developed by</span><img class="logoM3Footer" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo M3" />
`;
}
}

1
checkout/src/arquivos/js/components/Header.js
View File

@ -38,7 +38,6 @@ export default class Header {
async progressBarDots() {
if (this.progressBar && window.screen.width > 1024) {
const progressBarList = document.querySelectorAll("#progressBar ol li");
console.log(progressBarList);
progressBarList.forEach((li) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {

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

@ -11,21 +11,34 @@
}
&-title {
font-size: 0;
margin: 0;
line-height: 0;
&::before {
content: "Seu carrinho está vazio";
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-transform: uppercase;
margin: 0;
}
}
&-links {
.link-choose-products {
font-size: 0;
background: $color-white;
border: 1px solid $color-black-neutra;
transition: ease-in 0.22s all;
border-radius: 0;
box-sizing: border-box;
width: 34.4936%;
height: 48px;
margin: 32px 0 0 0;
padding-top: 15px;
&::before {
content: "Continuar comprando";
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
@ -34,12 +47,7 @@
text-align: center;
text-transform: uppercase;
color: $color-black-neutra;
box-sizing: border-box;
width: 34.4936%;
height: 48px;
margin: 32px 0 0 0;
padding-top: 15px;
}
&:hover {
background: $color-white;
@ -48,7 +56,6 @@
}
}
#cart-title,
.empty-cart-message,
.transactions-container {
display: none !important;
@ -57,3 +64,7 @@
.cart-template {
margin: 0 !important;
}
.cartTitleInvisible {
display: none !important;
}

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

@ -7,15 +7,29 @@
align-items: center;
display: flex;
justify-content: space-between;
margin: 0;
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0;
&::before,
&::after {
display: none;
}
}
}
&__address {
color: $color-gray2;
color: $color-black;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
line-height: 13.62px;
text-transform: capitalize;
max-width: 40%;
@ -38,13 +52,27 @@
&__divider {
background-color: $color-gray4;
display: inline-block;
display: block;
align-items: center;
height: 24px;
margin: 0 8px;
width: 1px;
}
}
&__payments {
.paymentFooter {
width: 35.65px;
height: 20px;
margin-right: 13.35px;
}
.vtexIcon {
width: 53px;
height: 33px;
margin-left: 10px;
}
}
&__developedBy {
align-items: center;
display: flex;
@ -57,18 +85,28 @@
a {
align-items: center;
color: $color-gray2;
color: $color-black;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
font-weight: 400;
font-size: 9px;
line-height: 12px;
text-decoration: none;
span {
margin-right: 8px;
}
margin-right: 11px;
}
}
.logoVtexFooter {
width: 44.92px;
height: 16px;
}
.logoM3Footer {
width: 28.66px;
height: 15.65px;
}
}
}

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

@ -1,22 +1,127 @@
/* _header.scss */
.headerCheckout {
.container {
width: auto !important;
width: 79.53125%;
height: 96px;
display: flex;
align-items: center;
}
&__wrapper {
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
#progressBar {
width: 43.1237%;
position: relative;
}
.ProgressBar {
width: 100%;
display: grid;
grid-template-columns: 1fr max-content 1fr;
margin: 0;
&::after {
content: "";
position: absolute;
width: 80%;
height: 1px;
background-color: #000000;
top: 29px;
left: 51%;
transform: translate(-50%, -50%);
z-index: -1;
@media (min-width: 1140px) {
width: 82%;
}
@media (min-width: 1270px) {
width: 84%;
}
@media (min-width: 1440px) {
width: 87%;
}
@media (min-width: 1810px) {
width: 89%;
}
@media (min-width: 2160px) {
width: 91%;
}
@media (min-width: 2880px) {
width: 93%;
}
@media (min-width: 3510px) {
width: 95%;
}
}
.ProgressBar-step {
list-style: none;
position: relative;
&:first-child::after {
content: none;
}
span {
display: grid;
grid-template-areas:
"texto"
"dot";
width: max-content;
white-space: nowrap;
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
&::before {
grid-area: dot;
justify-self: center;
content: "";
width: 12px;
height: 12px;
border: 1px solid #000000;
border-radius: 100%;
display: block;
background-color: #ffffff;
margin-top: 9px;
box-sizing: border-box;
}
}
.active {
&::before {
background-color: #000000;
}
}
}
.stepThree {
justify-self: end;
}
}
}
&__logo {
width: 155.58px;
img {
height: 52px;
width: auto;
height: 37.14px;
width: 100%;
}
}
&__safeBuy {
display: flex;
align-items: center;
span {
align-items: center;
display: flex;
@ -26,10 +131,12 @@
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-gray;
color: $color-black;
}
i {
img {
height: 15px;
margin-right: 8px;
}
}