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 #1

Merged
andreamatsunaga merged 17 commits from development into main 2022-12-19 04:49:09 +00:00
Conversation 0 Commits 17 Files Changed 15 +9475 -26
6 changed files with 9475 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2a9ca7bd4f - Show all commits

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

@ -3,6 +3,8 @@ import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
this.stampsHTML();
this.developedByHTML();
}
async init() {
@ -30,6 +32,7 @@ export default class Footer {
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({
@ -37,4 +40,72 @@ export default class Footer {
slidesToScroll: 1,
});
}
async stampsHTML() {
const stamps = await waitElement('.footerCheckout__stamps');
// console.log(stamps.children[0], stamps.children[2]);
const paymentsStructure = `
<ul class="footerCheckout__payments">
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="" />
</li>
<li class="footerCheckout__payments--card">
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
</li>
</ul>
`
const certifiedStructure = `
<img class="footerCheckout__vtexpci footerCheckout__payments--certified" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
`
stamps.children[0].innerHTML = paymentsStructure;
stamps.children[2].innerHTML = certifiedStructure;
}
async developedByHTML() {
const developedBy = await waitElement('.footerCheckout__developedBy');
console.log(developedBy.children[0].children[0]);
const vtexIcon = `
<span>Powered By</span>
<img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="" />
`
const m3Icon = `
<span>Powered By</span>
<img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="" />
`
developedBy.children[0].children[0].innerHTML = vtexIcon;
developedBy.children[1].children[0].innerHTML = m3Icon;
developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link')
developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
}
}

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

@ -3,14 +3,18 @@
@import "./checkout-pagamento";
@import "./checkout-autenticacao";
* {
box-sizing: border-box;
}
html {
height: 100%;
min-height: 100%;
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
width: 100%;
// margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {

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

@ -1,23 +1,70 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
flex-direction: column;
// background: cyan;
// border-top: none;
// color: $color-gray2;
// &__prateleira {
// height: 100px;
// background-color: green;
// width: 100%;
// }
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
padding: 16px 32px;
border-top: 1px solid $black-500;
// background-color: magenta;
// // // align-items: center;
// // // display: flex;
// // // justify-content: space-between;
}
.container {
margin: 0;
// padding: 0;
width: 100%;
// height: 100%;
// display: flex;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
// text-align: center;
// // // grid-auto-flow: column;
// // // grid-auto-columns: max-content;
// // justify-content: space-between;
// // margin: 0;
// background-color: yellowgreen;
&::before,
&::after {
display: none;
}
}
&__address {
color: $color-gray2;
color: $black-300;
font-family: $font-family;
font-style: normal;
font-weight: normal;
// font-style: normal;
// font-weight: normal;
font-size: 10px;
line-height: 12px;
line-height: 14px;
text-transform: capitalize;
max-width: 40%;
// max-width: 40%;
justify-self: flex-start;
@include mq(md, max) {
margin-bottom: 24px;
@ -26,49 +73,76 @@
}
&__stamps {
align-items: center;
display: flex;
align-items: center;
justify-self: center;
list-style: none;
margin: 0;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
}
&__divider {
background-color: $color-gray4;
display: inline-block;
background-color: $color-gray-rename;
display: block;
height: 24px;
margin: 0 8px;
margin: 0 10px 0 13px;
width: 1px;
}
}
&__payments {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 13px;
list-style: none;
margin: 0;
img {
display: block;
height: 20px;
width: auto;
}
}
&__vtexpci {
display: block;
width: 53px;
height: 33px;
}
&__developedBy {
align-items: center;
display: flex;
list-style-type: none;
gap: 10px;
list-style: none;
margin: 0;
li:last-child {
margin-left: 16px;
}
justify-self: flex-end;
a {
align-items: center;
color: $color-gray2;
color: $black-300;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
// font-style: normal;
// font-weight: normal;
font-size: 9px;
line-height: 12px;
text-decoration: none;
span {
margin-right: 8px;
margin-right: 10px;
}
}
&__icons {
display: block;
height: 16px;
width: auto;
}
}
}

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

@ -3,6 +3,7 @@
// position: relative;
margin: 0;
padding: 30px 131px;
width: 100%;
border-bottom: 1px solid $black-500;
.container {

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

@ -16,6 +16,8 @@ $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-gray-rename: #c4c4c4;
$color-blue: #4267b2;
$color-green: #4caf50;

9297
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff