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

development #2

Merged
andreamatsunaga merged 3 commits from development into main 2022-12-19 04:54:39 +00:00
Conversation 0 Commits 3 Files Changed 12 +405 -115
8 changed files with 405 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3b2da7666d - Show all commits

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

@ -1,3 +1,4 @@
import { timers } from "jquery";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
@ -7,42 +8,85 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.replaceEmptyCartContent(); await this.stampsHTML();
this.renderPrateleira(); await this.developedByHTML();
this.stampsHTML(); await this.replaceEmptyCartContent();
this.developedByHTML(); await this.renderPrateleira();
this.onUpdate(); await this.onUpdate();
await this.replaceCartContent();
await this.replaceSummaryContent();
// await this.replaceProfileContent();
} }
async selectors() { async selectors() {
console.log("iniciando selectors()")
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.cartTitle = await waitElement("#cart-title");
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.emptyCartTitle = await waitElement(".empty-cart-title"); this.emptyCartTitle = await waitElement(".empty-cart-title");
this.continueShopping = await waitElement("#cart-choose-products"); this.continueShopping = await waitElement("#cart-choose-products");
this.cart = await waitElement(".cart");
this.cartTitle = await waitElement("#cart-title");
this.frete = await waitElement(".shipping-date"); this.frete = await waitElement(".shipping-date");
this.unidade = await waitElement(".product-price"); this.unidade = await waitElement(".product-price");
this.iconMinus = await waitElement(".icon-minus-sign");
this.iconPlus = await waitElement(".icon-plus-sign");
this.prateleira = await waitElement(".footerCheckout__prateleira"); this.prateleira = await waitElement(".footerCheckout__prateleira");
this.naoSeiMeuCep = await waitElement(".ship-postalCode");
// this.prateleiraSlick = await waitElement(".prateleira__carousel") // this.prateleiraSlick = await waitElement(".prateleira__carousel")
} }
replaceEmptyCartContent() { async replaceEmptyCartContent() {
if (this.checkoutVazio) { if (this.checkoutVazio) {
console.log("entrou no if do replaceContent()") console.log("entrou no if do replaceEmptyCart()")
this.emptyCartTitle.textContent = "Seu Carrinho está vazio"; this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
console.log(this.emptyCartTitle)
this.continueShopping.textContent = "Continuar comprando"; this.continueShopping.textContent = "Continuar comprando";
this.frete.textContent = "Frete"; console.log(this.continueShopping)
this.unidade.textContent = "Unidade";
this.naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
} }
} }
onUpdate() { async replaceCartContent() {
console.log("entrou no replaceCart")
if(this.cart) {
console.log("entrou no if do replaceCart()")
console.log(this.cart)
this.frete.textContent = "Frete";
console.log(this.frete)
this.unidade.textContent = "Unidade";
console.log(this.unidade)
}
}
async replaceSummaryContent() {
console.log("entrou no replaceSummary()")
const naoSeiMeuCep = await waitElement(".ship-postalCode");
if(naoSeiMeuCep) {
console.log("entrou no if naoSeiMeuCep")
naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
console.log(naoSeiMeuCep)
}
}
// async replaceProfileContent() {
// if(this.identificacao) {
// }
// const identificacao = await waitElement(".accordion-heading");
// if(identificacao) {
// console.log("entrou no if identificacao")
// identificacao.children[0].children[1].textContent = "Identificação";
// console.log(identificacao)
// }
// }
async onUpdate() {
console.log("chamada do onUpdate()")
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //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 // 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 // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
@ -53,19 +97,18 @@ export default class Footer {
let config = { attributes: true }; let config = { attributes: true };
// this.cartTitle.style.display = "none"; // this.cartTitle.style.display = "none";
// this.prateleira.style.display = "none"; this.prateleira.style.display = "none";
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(() => { mutations.forEach(() => {
if(this.checkoutVazio.style.display == "block") { if(this.checkoutVazio.style.display == "block") {
console.log("Carrinho está vazio") console.log("Carrinho está vazio ou não está no #/cart")
this.cartTitle.style.display = "none"; this.cartTitle.style.display = "none";
this.prateleira.style.display = "none"; this.prateleira.style.display = "none";
} else { } else {
console.log("Carrinho NÃO está vazio e está no #/cart");
console.log("Carrinho NÃO está vazio");
this.cartTitle.style.display = "block"; this.cartTitle.style.display = "block";
this.prateleira.style.display = "block"; this.prateleira.style.display = "block";
} }
@ -73,12 +116,22 @@ export default class Footer {
}); });
observer.observe(target, config); observer.observe(target, config);
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
this.prateleira.style.display = "block";
} else {
this.cartTitle.style.display = "block";
this.prateleira.style.display = "none";
}
})
} }
} }
async renderPrateleira() { async renderPrateleira() {
if (this.prateleira) { if (this.prateleira && window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
const prateleiraTitle = document.createElement("h2"); const prateleiraTitle = document.createElement("h2");
const titleNode = document.createTextNode("Você também pode gostar:"); const titleNode = document.createTextNode("Você também pode gostar:");
@ -159,6 +212,8 @@ export default class Footer {
} }
async stampsHTML() { async stampsHTML() {
console.log("entrou no stamps")
const stamps = await waitElement('.footerCheckout__stamps'); const stamps = await waitElement('.footerCheckout__stamps');
// console.log(stamps.children[0], stamps.children[2]); // console.log(stamps.children[0], stamps.children[2]);
@ -204,6 +259,8 @@ export default class Footer {
} }
async developedByHTML() { async developedByHTML() {
console.log("entrou no developedBy")
const developedBy = await waitElement('.footerCheckout__developedBy'); const developedBy = await waitElement('.footerCheckout__developedBy');
// console.log(developedBy.children[0].children[0]); // console.log(developedBy.children[0].children[0]);

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

@ -182,16 +182,4 @@ export default class Header {
}) })
} }
} }
// async progressBarMove() {
// if (this.progressBar && window.innerWidth > 1024) {
// const progressBarList = document.querySelectorAll(("#progressBar ul li"));
// progressBarList.forEach((li) => {
// console.log("Aqui vem seu código")
// })
// }
// }
} }

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

@ -10,14 +10,21 @@
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border: none;
// border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
.link-cart { .link-cart {
a { a {
color: $black-300; font-family: $font-family-secundary;
font-size: 14px; font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
color: #000000;
&:hover { &:hover {
color: lighen($black-300, 10); color: lighen($black-300, 10);
@ -34,28 +41,43 @@
h3 { h3 {
margin-bottom: 16px; margin-bottom: 16px;
span { span, small {
color: #303030; line-height: 23px;
font-size: 24px; font-family: $font-family-secundary;
font-size: 20px;
font-weight: 400;
font-style: normal;
text-align: center;
text-transform: uppercase;
color: $black-500;
} }
small { // small {
color: $color-gray4; // color: $color-gray4;
} // }
} }
} }
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 24px;
input { input {
box-shadow: none; border: 1px solid $black-500;
color: $black-300; border-radius: 5px 0px 0px 5px;
font-family: $font-family; font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
// display: flex;
// align-items: center;
color: $black-500;
box-shadow: none;
padding: 0 16px; padding: 0 16px;
border: 2px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px;
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
@ -63,11 +85,23 @@
} }
button { button {
background-color: $black-300; height: 52px;
border-radius: 5px; padding: 12px 14px;
border: none; display: flex;
align-items: center;
border: none;
border-radius: 0px 8px 8px 0px;
line-height: 19px;
font-family: $font-family; font-family: $font-family;
height: 54px; font-size: 14px;
font-weight: 700;
font-style: normal;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
color: $black-500;
background: $blue-300;
right: 0; right: 0;
top: 0; top: 0;
@ -79,19 +113,36 @@
} }
span.help.error { span.help.error {
color: red; margin-top: 3px;
line-height: 16px;
font-family: $font-family;
font-size: 12px;
font-weight: 700;
font-style: normal;
text-align: center;
color: $red-300;
} }
} }
.emailInfo { .emailInfo {
padding: 16px; width: 400px;
height: 150px;
padding: 16px 16px 24px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid $black-500;
border-radius: 0; border-radius: 5px;
h3 { h3 {
color: #303030; margin: 0 0 9px;
margin: 0 0 8px 0; font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: #000000;
// margin: 0 0 8px 0;
} }
ul { ul {
@ -99,11 +150,18 @@
li { li {
span { span {
color: $black-300; font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
align-items: center;
color: #000000;
} }
i::before { i::before {
color: $black-300; color: $blue-300;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
@ -122,20 +180,48 @@
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border: 1px solid #F0F0F0;
border: 1px solid $color-gray4; border-radius: 8px;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 28px 17px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; font-family: 'Tenor Sans';
margin-bottom: 8px; font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #292929;
margin-bottom: 15px;
padding: 0; padding: 0;
i::before { i::before {
fill: #303030; display: none;
} }
.icon-user {
~ span {
font-size: 0;
}
&::after {
content: "Identificação";
line-height: 19px;
font-family: $font-family-secundary;
font-size: 16px;
font-weight: 400;
font-style: normal;
color: $black-300;
letter-spacing: 0.05em;
text-shadow: none;
vertical-align: middle;
}
}
} }
a { a {
@ -147,28 +233,47 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
// &::after {
// content: "";
// width: 20px;
// height: 20px;
// background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
// }
} }
} }
.accordion-inner { .accordion-inner {
padding: 0; padding: 0;
.box-client-info {
margin-bottom: 44px;
padding-top: 11px;
}
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $black-300; display: none;
} }
p { p {
margin-bottom: 16px;
label { label {
color: $black-300; font-family: 'Open Sans';
font-weight: 500; font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #7D7D7D;
} }
select, select,
input { input {
border-radius: 0; padding: 12px;
border: 1px solid $color-gray4; border: 1px solid #E0E0E0;
border-radius: 5px;
box-shadow: none; box-shadow: none;
} }
@ -178,6 +283,8 @@
} }
.box-client-info-pj { .box-client-info-pj {
display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: $black-300; color: $black-300;
@ -191,19 +298,32 @@
} }
button.submit { button.submit {
width: 100%;
background: #00C8FF;
border-radius: 8px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #FFFFFF;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
background: $black-300; margin-bottom: 16px;
margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
&:hover { &:hover {
background: lighten($black-300, 5); background: lighten($blue-300, 5);
} }
&:active { &:active {
background: darken($black-300, 5); background: darken($blue-300, 5);
} }
} }

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

@ -51,14 +51,23 @@
} }
.cart-fixed { .cart-fixed {
// border: 1px solid #E5E5E5;
border-radius: 8px;
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
h2 { h2 {
margin-bottom: 34px;
padding: 0;
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #292929;
text-align: left;
background: $color-white; background: $color-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
} }
.item-unavailable { .item-unavailable {
@ -83,10 +92,41 @@
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
img {
width: 60px;
height: 60px;
transform: translateX(-1);
}
span.badge {
display: none;
}
.shipping-date, .shipping-date,
.price { .price {
color: #7d7d7d; color: #7d7d7d;
} }
span.product-name,
span.shipping-date {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #000000;
}
span.price {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
color: #292929;
}
} }
} }
@ -95,11 +135,22 @@
background: $color-white; background: $color-white;
} }
#go-to-cart-button a { #go-to-cart-button {
color: #303030; margin: 10px 0;
text-decoration: underline;
a {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
text-decoration-line: underline;
color: #000000;
}
} }
.summary-totalizers { .summary-totalizers {
td.info { td.info {
width: 100%; width: 100%;
@ -107,12 +158,29 @@
} }
#payment-data-submit { #payment-data-submit {
background: $black-300; background: #298541;
border-radius: 8px;
border: none; border: none;
border-radius: 0;
color: $color-white; color: $color-white;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
span {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #FFFFFF;
}
.icon-lock {
display: none;
}
&:hover { &:hover {
background: lighten($black-300, 5); background: lighten($black-300, 5);
} }
@ -133,14 +201,14 @@
// border-collapse: separate; // border-collapse: separate;
// border-spacing: 16px; // border-spacing: 16px;
.product-item { // .product-item {
// height: 60px; // // height: 60px;
// background: green; // // background: green;
} // }
thead tr { // thead tr {
// background: purple; // // background: purple;
} // }
th { th {
padding: 0; padding: 0;
@ -911,6 +979,13 @@
} }
.accordion-group { .accordion-group {
table {
outline: 1px solid #E5E5E5;
// border-radius: 0 0 8px 8px;
// border-top: none;
}
tr { tr {
padding: 10px 0; padding: 10px 0;
line-height: 16px; line-height: 16px;
@ -930,12 +1005,18 @@
&.info, &.info,
&.monetary { &.monetary {
border-bottom: 1px solid #E0E0E0;
box-shadow: none;
font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
color: $black-300; text-align: right;
padding: 10px 0; color: #7D7D7D;
padding: 25px 17px;
} }
&.info { &.info {
@ -951,12 +1032,29 @@
tfoot { tfoot {
td.info, td.info,
td.monetary { td.monetary {
padding: 30px 17px 22px;
line-height: 25px; line-height: 25px;
font-family: $font-family; font-family: $font-family;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
color: $black-300; color: $black-300;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
}
td.info {
font-size: 18px;
line-height: 25px;
}
td.monetary {
font-size: 14px;
line-height: 19px;
text-align: right;
} }
} }
} }

42
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -5,7 +5,49 @@ body .container-main.container-order-form .orderform-template.active {
margin-right: 0; margin-right: 0;
float: right; float: right;
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
.payment-data {
background: red;
}
} }
} }
.link-gift-card {
a {
display: none;
}
}
.payment-group-list-btn {
// a {
// color: yellow;
// &:nth-child(1),
// &:nth-child(2),
// &:nth-child(3),
// &:nth-child(4),
// {
// }
// }
a:nth-child(n+1):nth-child(-n+4),
a:nth-child(n+6):nth-child(-n+9),
a:nth-child(n+11):nth-child(-n+15)
{
display: none;
}
// a {
// display: none;
// }
}

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

@ -130,15 +130,12 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
.slick-prev { .slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;
no-repeat center center;
left: 10px; left: 10px;
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;

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

@ -73,9 +73,6 @@
button { button {
padding: 5px; padding: 5px;
} }
display: flex;
flex-direction: column;
gap: 20px;
} }
&--name { &--name {
@ -89,16 +86,7 @@
color: $black-500; color: $black-500;
} }
&--options {
margin: 0 auto;
display: flex;
gap: 5px;
list-style: none;
button {
padding: 5px;
}
}
&--link { &--link {
button { button {
@ -116,7 +104,6 @@
} }
} }
} }
}
// .slick-track { // .slick-track {

1
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -17,6 +17,7 @@ $gray-100: #EDEDED;
$gray-300: #989898; $gray-300: #989898;
$blue-300: #00C8FF; $blue-300: #00C8FF;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$red-300: #FF0000;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;