Merge pull request 'feature/footer' (#3) from feature/footer into main

Reviewed-on: #3
This commit is contained in:
Gabriel Gomes Fernandes 2022-12-19 08:58:49 +00:00
commit c0216b73a4
4 changed files with 499 additions and 22 deletions

View File

@ -6,14 +6,61 @@ export default class Footer {
}
async init() {
this.list = await this.fetchPrateleira();
await this.selectors();
// this.onUpdate();
this.createPrateleira();
this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
this.itensPrateleira();
this.addCarrossel();
await this.displaySlick();
this.creditCardIconsHTML();
this.developedByIconsHTML();
}
async selectors() {
//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.itensShelf = await waitElement(".footerCheckout__prateleira", {
timeout: 5000,
interval: 1000,
});
this.creditCardIcons = await waitElement(".footerCheckout__stamps");
this.developedByIcons = await waitElement(".footerCheckout__developedBy");
}
async displaySlick() {
const orderForm = await window.vtexjs.checkout.getOrderForm();
const items = orderForm.items.length;
const _this = this;
$(window).on("orderFormUpdated.vtex", (evt, oF) => {
if (oF.items.length <= 0) {
_this.itensShelf.style.display = "none";
} else {
if (window.location.hash !== "#/shipping" && window.location.hash !== "#/payment") {
_this.itensShelf.style.display = "block";
}
}
});
window.addEventListener("hashchange", async () => {
if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") {
_this.itensShelf.style.display = "none";
} else {
const orderForm = await window.vtexjs.checkout.getOrderForm();
const items = orderForm.items.length;
if (items > 0) {
_this.itensShelf.style.display = "block";
}
}
});
if (
items === 0 ||
window.location.hash === "#/shipping" ||
window.location.hash === "#/payment"
) {
this.itensShelf.style.display = "none";
}
}
onUpdate() {
@ -30,11 +77,115 @@ export default class Footer {
observer.observe(target, config);
}
createPrateleira() {
if (this.itensShelf) {
this.itensShelf.innerHTML = `
<div class="footerCheckout__prateleira-title">
<h2>Você também pode gostar:</h2>
</div>
<ul class="footerCheckout__carrossel-itens"></ul>
`;
}
}
async itensPrateleira() {
let structure = "";
this.list.forEach((response) => {
const sku = response.skus.map((item) => `<li>${item}</li>`);
structure += `
<li class="slick">
<figure class="container-img"><img src ="${response.img}"/></figure>
<figcaption class="name-picture">${response.name}</figcaption>
<div><ul class= "number" >${sku.join("")}</ul></div>
<button type="button"><a href="${response.link}">Ver Produto</a></button>
</li>
`;
});
this.prateleira.innerHTML = structure;
}
async fetchPrateleira() {
const api =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
return fetch(api)
.then((response) => response.json())
.then((data) => {
const prodInfo = data.map((response) => ({
name: response.productName,
skus: response.items.map((item) => item.name),
img: response.items[0].images[0].imageUrl,
link: response.link,
}));
return prodInfo;
});
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
const elemento = await waitElement(".footerCheckout__carrossel-itens");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
infinite: true,
responsive: [
{
breakpoint: 1279,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
{
breakpoint: 790,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
],
});
}
creditCardIconsHTML() {
this.creditCardIcons.innerHTML = `
<li><img class="master" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
<li><img class="visa" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
<li><img class="amex" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
<li><img class="elo" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li>
<li><img class="hiper" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
<li><img class="paypal" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
<li><img class="boleto" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li>
<li><span class="footerCheckout__stamps__divider"></span></li>
<li class="vtex-pci"><img class="vtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li>
`;
}
developedByIconsHTML() {
this.developedByIcons.innerHTML = `
<li>
<div class="by-vtex">
<a href="https://vtex.com.br-pt/">
<span>Powered By</span>
</a>
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
</div>
</li>
<li>
<div class="by-m3">
<a href="https://vtex.com.br-pt/">
<span>Developed By</span>
</a>
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
</div>
</li>
`;
}
}

View File

@ -1,4 +1,119 @@
/* Slider */
.footerCheckout__prateleira {
.footerCheckout__prateleira-title {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #000000;
margin-bottom: 20px;
}
ul.footerCheckout__carrossel-itens {
display: flex;
list-style: none;
align-items: center;
margin: 0 132px;
@include mq(xl, max) {
margin: 0 16px;
}
.container-img {
margin: 0;
margin-bottom: 20px;
img {
height: 242px;
width: 100%;
object-fit: cover;
}
}
figcaption.name-picture {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
text-align: center;
color: #000000;
margin-bottom: 20px;
}
li.slick {
ul.number {
display: flex;
list-style: none;
margin: 0;
justify-content: center;
margin-bottom: 20px;
text {
display: none;
}
li {
background: #00c8ff;
border-radius: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
padding: 5px;
margin: 0 2.5px;
}
}
button {
height: 42px;
width: 100%;
background: #00c8ff;
border-radius: 8px;
border: 0;
a {
font-family: "Open Sans";
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
}
}
.slick-dots {
display: none !important;
}
.slick-next {
content: "";
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg");
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
height: 29.47px;
width: 13px;
border: 0;
cursor: pointer;
}
.slick-prev {
content: "";
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg");
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent;
height: 29.47px;
width: 13px;
border: 0;
cursor: pointer;
}
}
}
.slick-slider {
position: relative;
@ -18,7 +133,7 @@
position: relative;
overflow: hidden;
display: block;
margin: 0;
margin: 0 -8px;
padding: 0;
&:focus {
@ -62,6 +177,7 @@
}
}
.slick-slide {
margin: 0 8px;
float: left;
height: 100%;
min-height: 1px;

View File

@ -1,35 +1,75 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
&__wrapper {
align-items: center;
display: flex;
}
.container {
border-top: 1px solid $color-black;
display: flex;
align-items: center;
padding: 0 16px;
width: 100%;
justify-content: space-between;
@media (min-width: 1200px) {
width: 100%;
}
@include mq(md, max) {
margin: 0 0 0 9px;
display: grid;
}
}
.color-img {
background-color: rgb(238, 238, 238);
}
&__address {
color: $color-gray2;
font-family: $font-family;
font-style: normal;
font-weight: normal;
color: $color-gray2;
margin: 27px 0 24px 0;
width: 269px;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
max-width: 40%;
@include mq(md, max) {
@include mq(xl, max) {
margin-bottom: 24px;
max-width: 100%;
}
@include mq(2xl, min) {
font-family: $font-family;
color: $color-black;
width: 537px;
font-size: 20px;
line-height: 27px;
text-transform: capitalize;
}
@include mq(xl, max) {
margin: 0px 0 16px 7px;
font-family: $font-family;
color: $color-black;
font-size: 10px;
line-height: 14px;
width: 269px;
text-transform: capitalize;
}
}
&__stamps {
align-items: center;
display: flex;
align-items: center;
justify-self: center;
list-style: none;
width: 404px;
margin: 16px auto 16px auto;
@include mq(md, max) {
align-self: center;
@ -37,33 +77,66 @@
}
&__divider {
background-color: $color-gray4;
display: inline-block;
background-color: $color-gray4;
height: 24px;
margin: 0 8px;
width: 1px;
}
@include mq(2xl, min) {
width: 690px;
}
@include mq(xl, max) {
width: 342px;
order: -1;
}
}
&__developedBy {
align-items: center;
display: flex;
list-style-type: none;
align-items: center;
margin: 0;
margin-bottom: 16px;
list-style-type: none;
li:last-child {
margin-left: 16px;
.vtex-logo,
.m3-logo {
height: 16px;
margin-right: 8px;
}
.by-m3 {
display: flex;
}
.by-vtex {
display: flex;
}
.list {
@include mq(2xl, min) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
width: 388px;
}
@include mq(xl, max) {
margin: 0 0 16px 7px;
}
}
a {
align-items: center;
color: $color-gray2;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
color: $color-gray2;
font-size: 10px;
line-height: 12px;
align-items: center;
text-decoration: none;
span {

View File

@ -1 +1,138 @@
/* _prateleira.scss */
.footerCheckout {
.container-carrossel-item {
margin: 0 132px;
@include mq(md, max) {
margin: 0 16px;
}
}
.slick-slide {
width: 242px;
margin: 0 16px 0 0;
}
.prateleira-title {
display: flex;
justify-content: center;
font-family: $font-family-secundary;
color: $color-black-500;
margin: 0 0 20px 0;
font-size: 24px;
line-height: 38px;
text-align: center;
@include mq(xl, min) {
font-family: $font-family-secundary;
color: $color-black-500;
font-size: 48px;
line-height: 76px;
text-align: center;
}
@include mq(sm, max) {
font-size: 14px;
line-height: 28px;
}
}
.prateleira-sku {
display: flex;
justify-content: center;
margin-bottom: 20px;
@include mq(sm, max) {
flex-wrap: wrap;
}
.sku {
display: flex;
font-family: $font-family;
color: $color-white-500;
background: $color-blue-100;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
margin-left: 5px;
border-radius: 8px;
min-width: 9.3%;
padding: 4px;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
text-decoration: none;
@include mq(xl, min) {
display: flex;
align-items: center;
text-align: center;
font-family: $font-family;
color: $color-white-500;
font-weight: 700;
font-size: 26px;
line-height: 35px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
@include mq(sm, max) {
margin-bottom: 10px;
}
}
}
.prateleira-name {
display: flex;
justify-content: center;
text-align: center;
margin: 20px 0;
@include mq(xl, min) {
font-family: $font-family;
color: $color-black-500;
font-size: 26px;
line-height: 35px;
text-align: center;
}
@include mq(sm, max) {
font-size: 13px;
line-height: 18px;
text-align: center;
}
}
.prateleira-button {
font-family: $font-family;
color: $color-white-500;
background: $color-blue-100;
text-transform: uppercase;
font-size: 13px;
line-height: 18px;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 56px;
width: 100%;
height: 42px;
border: none;
border-radius: 8px;
text-align: center;
align-items: center;
@include mq(xl, min) {
font-family: $font-family;
color: $color-white-500;
font-weight: 700;
font-size: 26px;
line-height: 35px;
letter-spacing: 0.05em;
align-items: center;
text-align: center;
text-transform: uppercase;
}
}
}