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

Feature/Autenticacao #1

Merged
WilliamSimao merged 10 commits from Feature/Autenticacao into main 2022-12-19 03:17:14 +00:00
Conversation 0 Commits 10 Files Changed 14 +201 -51
4 changed files with 201 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6d2af82fc7 - Show all commits

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

@ -7,10 +7,12 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
// this.requestApi(); this.requestApi();
this.addCarrossel();
this.creatPaymentsIcons(); this.creatPaymentsIcons();
this.creatVtexIconPci(); this.creatVtexIconPci();
this.creatDevIconsM3(); this.creatDevIconsM3();
this.onUpdate();
} }
@ -33,22 +35,13 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
});
}
requestApi () { requestApi () {
this.divPrateleira.innerHTML = this.divPrateleira.innerHTML =
`<h3>Você também pode gostar:</h3> `<h3 class="footerCheckout__prateleira-title" >Você também pode gostar:</h3>
<ul class="ulProduct"></ul> <ul class="footerCheckout__prateleira-ul" id="footerCheckout__prateleira-ul-id"></ul>
` `
const api = 'https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319'; const api = 'https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319';
let itemStrutucture = ''; const ulProdut = document.querySelector('.footerCheckout__prateleira-ul');
const ulProdut = document.querySelectorAll('.ulProdut');
fetch(api) fetch(api)
.then((response) => { .then((response) => {
@ -56,60 +49,86 @@ export default class Footer {
}) })
.then((data) => { .then((data) => {
data.forEach((prod) => { data.forEach((prod) => {
itemStrutucture += ` const imgProd = prod.items[0].images[0].imageUrl;
` const nameProd = prod.productName;
const linkProd = prod.link;
ulProdut.innerHTML += `
<li class="footerCheckout__prateleira-li-prod">
<figure class="footerCheckout__prateleira-figure-prod">
<img src="${imgProd}" alt="Imagem Produto">
</figure>
<div class="footerCheckout__prateleira-div-text">
<h2>${nameProd}</h2>
<ul>
${prod.items.map((name) => `<li>
${name.name}</li>`).join('')}
</ul>
<a href="${linkProd}">
Ver Produto
</a>
</div>
</li>`
}) })
}); });
ulProdut = itemStrutucture;
}; };
async addCarrossel() {
const prateleiraProd = await waitElement("#footerCheckout__prateleira-ul-id");
if(window.screen.width > 1024) {
$(prateleiraProd).slick({
slidesToShow: 4,
slidesToScroll: 1,
infinite: false,
arrows: true,
});
}
}
creatPaymentsIcons () { creatPaymentsIcons () {
this.payments.innerHTML = ` this.payments.innerHTML = `
<ul class="footerCheckout__container-ul"> <ul class="footerCheckout__container-ul">
<li class="footerCheckout__wrapper-li"> <li class="footerCheckout__wrapper-li">
<figure class="footerCheckout__figure-img-tickets"> <figure class="footerCheckout__figure-img-tickets">
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="AmericaExpress"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="AmericaExpress"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="VisaCard"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="VisaCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"/>
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"/>
</figure> </figure>
</li> </li>
</ul>`; </ul>`;
} }
creatVtexIconPci () { creatVtexIconPci () {
this.vtexIconPci.innerHTML = ` this.vtexIconPci.innerHTML = `
<ul class="footerCheckout__container-ul"> <ul class="footerCheckout__container-ul">
<li class="footerCheckout__wrapper-li"> <li class="footerCheckout__wrapper-li">
<figure class="footerCheckout__figure-img-vtex"> <figure class="footerCheckout__figure-img-vtex">
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo Vtex"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo Vtex"/>
</figure> </figure>
</li> </li>
</ul>` </ul>`
} }
creatDevIconsM3 () { creatDevIconsM3 () {
this.devIcons.innerHTML = ` this.devIcons.innerHTML = `
<li class="footerCheckout__container-li-m3Icon"> <li class="footerCheckout__container-li-m3Icon">
<a href="https://vtex.com/br-pt/"> <a href="https://vtex.com/br-pt/">
<span>Powered By</span> <span>Powered By</span>
<figure class="footerCheckout__figure-img-vtexIcon"> <figure class="footerCheckout__figure-img-vtexIcon">
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="LogoVTEX"> <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="LogoVTEX">
</figure> </figure>
</a> </a>
</li> </li>
<li class="footerCheckout__container-li-m3Icon"> <li class="footerCheckout__container-li-m3Icon">
<a href="https://agenciam3.com/"> <a href="https://agenciam3.com/">
<span>Developed By</span> <span>Developed By</span>
<figure class="footerCheckout__figure-img-m3Icon"> <figure class="footerCheckout__figure-img-m3Icon">
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3"> <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="LogoM3">
</figure> </figure>
</a> </a>
</li>` </li>`
} }
} }

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

@ -43,9 +43,10 @@
position: relative; position: relative;
left: 0; left: 0;
top: 0; top: 0;
display: block; display: flex;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
column-gap: 16px;
&:before, &:before,
&:after { &:after {
@ -101,14 +102,18 @@
position: absolute; position: absolute;
} }
.slick-prev { .slick-prev {
border: none;
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;
z-index: 4; z-index: 4;
left: 10px; left: 10px;
} }
.slick-next { .slick-next {
border: none;
z-index: 4; z-index: 4;
right: 10px; right: 10px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center;
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {
display: none; display: none;
@ -134,3 +139,9 @@
} }
} }
} }
@media only screen and (width: 1280px) {
.slick-slide {
width: 242px !important;
}
}

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

@ -92,6 +92,8 @@
width: 100%; width: 100%;
} }
// CARDS FOOTER
&__container-ul { &__container-ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -106,12 +108,11 @@
&__figure-img-tickets { &__figure-img-tickets {
display: flex; display: flex;
column-gap: 13.22px; column-gap: 13.35px;
margin-right: 13.35px;
} }
&__figure-img-tickets img { &__figure-img-tickets img {
width: 35.65px; width: 100%;
height: 20px; height: 20px;
} }
@ -140,5 +141,123 @@
} }
// PRATELEIRA DE PRODUTOS
&__prateleira {
margin: 20px 132px 54px;
}
&__prateleira-title {
font-family: $font-family-secundary;
font-size: 24px;
font-weight: 400;
line-height: 38px;
font-style: normal;
color: $color-black-500;
text-align: center;
margin: 43px 0 20px;
}
&__prateleira-ul{
list-style-type:none;
display: flex;
align-items: center;
margin: 0;
}
&__prateleira-li-prod {
width: 100%;
}
&__prateleira-figure-prod {
margin: 0;
}
&__prateleira-figure-prod img {
object-fit: cover;
}
&__prateleira-div-text {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
&__prateleira-div-text ul {
margin: 0 0 20px;
list-style: none;
}
&__prateleira-div-text h2 {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
color: $color-black-500;
text-align: center;
margin: 20px 0;
}
&__prateleira-div-text ul {
column-gap: 5px;
display: flex;
align-items: center;
}
&__prateleira-div-text li {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0;
padding: 0;
background-color: $color-blue-200;
color: $color-white;
border-radius: 8px;
text-align: center;
font-size: 13px;
font-family: $font-family;
font-weight: 700;
font-style: normal;
line-height: 18px;
padding: 5px;
transition: ease-in-out 250ms;
border: 1px solid $color-blue-200;
}
&__prateleira-div-text a {
text-decoration: none;
justify-content: center;
display: flex;
width: 100%;
max-width: 242px;
background: $color-blue-200;
height: 42px;
align-items: center;
border-radius: 8px;
color: $color-white;
font-family: $font-family;
font-size: 13px;
font-weight: 700;
line-height: 18px;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: ease-in-out 250ms;
border: 1px solid $color-blue-200;
&:hover {
background-color: $color-white;
color: $color-blue-200;
}
}
} }
@media only screen and (width: 1280px){
.footerCheckout {
&__prateleira-li-prod {
width: 242px !important;
}
}
}

1
checkout/src/template-checkout/checkout-footer.html
View File

@ -37,3 +37,4 @@
</div> </div>
</footer> </footer>