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

commit final

Browse Source
This commit is contained in:
Nathalia Sardou 2022-12-18 23:36:15 -03:00
parent 101a190c15
commit 05e1c0cb83
7 changed files with 170 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,22 +8,22 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.createPaymentsIcons(); this.Icons();
this.createVtexpciIcon(); this.vtexIcons();
this.createDevIcons(); this.devIcons();
this.onUpdate(); this.update();
this.events(); this.events();
} }
events() { events() {
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
this.onUpdate(); this.update();
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { if (window.location.hash == "#/cart" && this.cktVazio.style.display == "none") {
this.listaPrateleira.style.display = "flex"; this.prateleira.style.display = "flex";
this.titleSlick.style.display = "block"; this.titleSlick.style.display = "block";
} }
if (window.location.hash != "#/cart") { if (window.location.hash != "#/cart") {
this.listaPrateleira.style.display = "none"; this.prateleira.style.display = "none";
this.titleSlick.style.display = "none"; this.titleSlick.style.display = "none";
} }
}); });
@ -33,36 +33,36 @@ export default class Footer {
} }
async selectors() { async selectors() {
this.checkoutVazio = await waitElement(".empty-cart-content"); this.cktVazio = await waitElement(".empty-cart-content");
this.checkoutAtivo = await waitElement(".checkout-container"); this.cktAtivo = await waitElement(".checkout-container");
this.payments = await waitElement(".footerCheckout__payments"); this.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy"); this.iconsDev = await waitElement(".footerCheckout__developedBy");
this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); this.prateleira = await waitElement(".footerCheckout__prateleira");
this.titulo = await waitElement(".transactions-container"); this.title = await waitElement(".transactions-container");
this.cartTitulo = await waitElement("#cart-title"); this.carttitle = await waitElement("#cart-title");
this.titleSlick = await waitElement(".transactions-container"); this.titleSlick = await waitElement(".transactions-container");
} }
onUpdate() { update() {
let target = this.checkoutVazio; let target = this.cktVazio;
let list = this.listaPrateleira; let list = this.prateleira;
let cartTitle = this.cartTitulo; let cartTitle = this.carttitle;
let slickTitle = this.titleSlick; let slickTitle = this.titleSlick;
if (target.style.display == "none" && window.location.hash == "#/cart") { if (target.style.display == "none" && window.location.hash == "#/cart") {
list.style.display = "flex"; list.style.display = "flex";
list.style.display = "block"; list.style.display = "block";
if (!this.listaPrateleira.classList.contains("fetch")) { if (!this.prateleira.classList.contains("fetch")) {
this.fetchApi(); this.fetchApi();
} }
} else { } else {
this.cartTitulo.style.display = "none"; this.carttitle.style.display = "none";
list.style.display = "none"; list.style.display = "none";
} }
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
if (!this.listaPrateleira.classList.contains("fetch")) { if (!this.prateleira.classList.contains("fetch")) {
this.fetchApi(); this.fetchApi();
} }
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
@ -106,7 +106,7 @@ export default class Footer {
} }
} }
createPaymentsIcons() { Icons() {
this.payments.innerHTML = ` this.payments.innerHTML = `
<ul class="payments-icons-wrapper"> <ul class="payments-icons-wrapper">
<li> <li>
@ -169,7 +169,7 @@ export default class Footer {
`; `;
} }
createVtexpciIcon() { vtexIcons() {
this.vtexpci.innerHTML = ` this.vtexpci.innerHTML = `
<figure class="vtex-icon"> <figure class="vtex-icon">
<img <img
@ -180,8 +180,8 @@ export default class Footer {
`; `;
} }
createDevIcons() { devIcons() {
this.devIncons.innerHTML = ` this.iconsDev.innerHTML = `
<li> <li>
<a href="https://vtex.com/br-pt/"> <a href="https://vtex.com/br-pt/">
<span>Powered By</span> <span>Powered By</span>
@ -203,7 +203,7 @@ export default class Footer {
} }
async fetchApi() { async fetchApi() {
this.titulo.innerHTML = ` this.title.innerHTML = `
<h3 class="title_slick">Você também pode gostar:</h3> <h3 class="title_slick">Você também pode gostar:</h3>
`; `;
@ -214,7 +214,7 @@ export default class Footer {
.then((data) => { .then((data) => {
const ul = document.createElement("ul"); const ul = document.createElement("ul");
ul.classList.add("slick-list"); ul.classList.add("slick-list");
this.listaPrateleira.appendChild(ul); this.prateleira.appendChild(ul);
data.map((item) => { data.map((item) => {
let cores = ""; let cores = "";
@ -236,7 +236,7 @@ export default class Footer {
<a class="itemLink" type="button" href="${item.link}">VER PRODUTO</a> <a class="itemLink" type="button" href="${item.link}">VER PRODUTO</a>
`; `;
ul.appendChild(li); ul.appendChild(li);
this.listaPrateleira.classList.add("fetch"); this.prateleira.classList.add("fetch");
}); });
}) })
.then(() => { .then(() => {

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

@ -1,4 +1,4 @@
// import waitForEl from "../helpers/waitForEl"; import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Header { export default class Header {

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

@ -191,6 +191,9 @@
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray7; border: 1px solid $color-gray7;
box-shadow: none; box-shadow: none;
display: flex;
min-width: 80%;
padding: 10px;
} }
@ -241,9 +244,11 @@
} }
.shp-lean { .shp-lean {
border: 1px solid $color-gray4; border: 1px solid $color-gray2;
border-radius: 0; border-radius: 8px;
width: 100%;
height: 100%;
color: $color-gray8;
label { label {
background-color: $color-white; background-color: $color-white;
box-shadow: none; box-shadow: none;
@ -251,7 +256,7 @@
padding: 8px 12px; padding: 8px 12px;
svg path { svg path {
fill: #d8c8ac; fill: $color-black;
} }
} }
} }
@ -269,9 +274,9 @@
.address-summary { .address-summary {
background: none; background: none;
border-color: $color-gray4; border-color: $color-gray2;
border-radius: 0; border-radius: 8px;
color: #303030; color: $color-gray8;
padding: 12px; padding: 12px;
@include mq(md, max) { @include mq(md, max) {

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

@ -76,9 +76,6 @@
#go-to-cart-button a { #go-to-cart-button a {
color: #303030; color: #303030;
position: relative;
bottom: 30px;
right: 5px;
text-decoration: none; text-decoration: none;
} }
@ -494,7 +491,7 @@
} }
.blue { .blue {
color: $color-blue; color: $color-black;
} }
label { label {
@ -752,11 +749,10 @@
border-color: #e5e5e5; border-color: #e5e5e5;
font-family: $font-family; font-family: $font-family;
font-weight: 700; font-weight: 700;
border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
&:last-child{ &:nth-child(0){
border-bottom: none; border-top: none;
} }
td { td {
&.empty { &.empty {
display: none; display: none;
@ -830,7 +826,8 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black;
text-decoration: none;
} }
} }

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

@ -1,11 +1,49 @@
body .container-main.container-order-form .orderform-template.active { body .container-main.container-order-form .orderform-template.active {
.mini-cart { .mini-cart {
width: 32.3242%; width: 32.3242%;
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
} }
.payment-group{
.payment-group-item-text {
background-position: right center;
background-repeat: no-repeat;
font-size: 12px;
line-height: 28px;
margin-bottom: -2px;
padding: 8px 0;
padding-right: 40px;
border: 1px solid #000;
border-radius: 8px;
color: #000;
text-align: center;
}
a{
display: none;
a:first-child{
display: none;
}
}
a[data-name='Depósito']{
display:block;
}
a[data-name='American Express']{
display:block;
}
a[data-name='Pix']{
display:block;
}
a[data-name='Boleto Bancário']{
display:block;
}
}
} }

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

@ -18,69 +18,101 @@
img { img {
height: 38px; height: 38px;
width:156px; width:156px;
position: relative;
bottom: 10px;
} }
} }
.progress-container{ .progress-bar {
display: flex; display: flex;
justify-content: space-between; right: 31.5%;
position: relative; top: 33%;
margin-bottom: 25px;
margin-top: 20px;
max-width: 100%;
width: 360px;
align-items: flex-start;
align-content: flex-start;
}
@media (max-width: 1024px) {
display: none;
}
.progress-container::before{ @media (min-width: 2500px) {
content: ''; right: 41%;
background-color: $color-black; }
position:absolute;
top: 50%;
/*left: 0;*/
transform: translateY(-50%);
height: 1px;
width: 100.01%;
z-index: -1;
transition: 0.4s ease;
}
.progress{ .containerLi {
background-color: $color-black; display: flex;
position:absolute; position: relative;
top: 50%; align-items: center;
left: 0; }
transform: translateY(-50%); ul {
height: 4px; display: flex;
width: 0%; margin: 0;
z-index: -1; gap: 100px;
transition: 0.4s ease; list-style: none;
} }
p{ p {
margin-bottom: 60px; margin-bottom: 0;
} }
.circle{ &-text {
background-color: #fff; font-family: $font-family-secundary;
color: #999; font-weight: 400;
border-radius: 50%; font-size: 12px;
height: 12px; line-height: 14px;
width: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid $color-black;
transition: 0.4 ease;
}
.circle.active{ @media (min-width: 2500px) {
background-color: $color-black; font-size: 24px;
line-height: 28px;
}
}
} &-line-1,
&-line-2 {
position: absolute;
width: 169px;
top: 82%;
left: 55%;
border: 1px solid $color-black;
@media (min-width: 2500px) {
width: 240px;
top: 79%;
left: 55%;
}
}
&-line-2 {
width: 166px;
left: -223%;
@media (min-width: 2500px) {
width: 230px;
left: -143%;
}
}
&-circle-1,
&-circle-2,
&-circle-3 {
display: flex;
height: 10px;
width: 10px;
align-self: center;
background: $color-white;
border: 1px solid $color-black;
border-radius: 50%;
margin-left: 40%;
margin-top: 9px;
padding: 0;
@media (min-width: 2500px) {
height: 22px;
width: 22px;
}
}
.active {
background: $color-black;
}
}
&__safeBuy { &__safeBuy {
display: flex; display: flex;

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

@ -16,6 +16,8 @@ $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #c4c4c4; $color-gray6: #c4c4c4;
$color-gray7: #ededed; $color-gray7: #ededed;
$color-gray8: #e0e0e0;
$color-gray9: #f0f0f0;
$color-blue: #4267b2; $color-blue: #4267b2;