forked from M3-Academy/m3-academy-template-checkout
feat: construcao e estilizacao do slick
This commit is contained in:
parent
0ca3260ce2
commit
045de99933
@ -12,6 +12,7 @@ export default class Footer {
|
||||
this.changeTextBtnChooseProducts()
|
||||
this.setImagesFooter()
|
||||
this.onUpdate();
|
||||
this.addCarrossel()
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
@ -20,6 +21,7 @@ export default class Footer {
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.titleCart = await waitElement("#cart-title");
|
||||
this.btnChooseProducts = await waitElement("#cart-choose-products");
|
||||
this.footer = await waitElement(".footerCheckout");
|
||||
this.footerStamps = await waitElement(".footerCheckout__stamps");
|
||||
this.footerDevelopment = await waitElement(".footerCheckout__developedBy");
|
||||
}
|
||||
@ -46,7 +48,7 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
const elemento = await waitElement(".footerCheckout__prateleira__container-Slick");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
@ -136,7 +138,46 @@ export default class Footer {
|
||||
}
|
||||
|
||||
createShelf(data) {
|
||||
const containerPrateleira = document.querySelector(".footerCheckout__prateleira");
|
||||
const containerSlick = document.createElement('div')
|
||||
containerSlick.classList.add("footerCheckout__prateleira__container-Slick")
|
||||
const contentTextYouLike = document.createElement('span')
|
||||
contentTextYouLike.classList.add("footerCheckout__prateleira__textYouLike")
|
||||
contentTextYouLike.innerText = "Você também pode gostar:"
|
||||
const products = data
|
||||
console.log(products)
|
||||
containerPrateleira.appendChild(contentTextYouLike)
|
||||
containerPrateleira.appendChild(containerSlick)
|
||||
products.forEach(product => {
|
||||
const cardProduct = document.createElement('div')
|
||||
cardProduct.classList.add("cardProduct")
|
||||
const productName = product.productName
|
||||
const productLink = product.link
|
||||
const skus = product.items
|
||||
const imgProduct = product.items[0].images[0].imageUrl
|
||||
let containerCardProduct = ""
|
||||
containerCardProduct += `
|
||||
<div class="cardProduct__contentImg">
|
||||
<img src="${imgProduct}" />
|
||||
<div>
|
||||
<div class="cardProduct__contentName">
|
||||
<span>${productName}</span>
|
||||
</div>
|
||||
<div class="cardProduct__contentVariation">
|
||||
`
|
||||
for (let i = 0; i < skus.length; i++) {
|
||||
const sku = skus[i]
|
||||
containerCardProduct += `<span>${sku.name}</span> `
|
||||
}
|
||||
|
||||
containerCardProduct += `</div>
|
||||
<div class="cardProduct__contentBtn">
|
||||
<a href="${productLink}">
|
||||
<span>Ver produto</span>
|
||||
</a>
|
||||
</div>
|
||||
`
|
||||
cardProduct.innerHTML = containerCardProduct
|
||||
containerSlick.append(cardProduct)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,108 @@ footer .footerCheckout__wrapper {
|
||||
width: 94.9734%;
|
||||
margin: auto auto 0 auto;
|
||||
}
|
||||
|
||||
.footerCheckout__prateleira {
|
||||
width: 100% !important;
|
||||
border-bottom: 1px solid $color-black;
|
||||
padding-bottom: 3.37rem;
|
||||
|
||||
&__textYouLike {
|
||||
width: 100%;
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $color-black;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
&__container-Slick {
|
||||
width: 79.53125%;
|
||||
margin: 0 auto;
|
||||
|
||||
.slick-slide {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
top: 50%;
|
||||
left: 22px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg) no-repeat center center;
|
||||
top: 50%;
|
||||
right: 22px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cardProduct__contentName {
|
||||
margin: 1.25rem 0;
|
||||
|
||||
span {
|
||||
font-family: $font-family;
|
||||
color: $color-black;
|
||||
font-size: 0.813rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.cardProduct__contentVariation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.313rem;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
background-color: #00c8ff;
|
||||
color: #fff;
|
||||
font-family: "Open Sans",sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: .813rem;
|
||||
padding: 0.313rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* margin: 2px 0;
|
||||
white-space: nowrap;
|
||||
display: inline-block; */
|
||||
}
|
||||
|
||||
.cardProduct__contentBtn {
|
||||
margin-top: 1.125rem;
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $color-blue2;
|
||||
padding: 0.75rem 0;
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer .footerCheckout__prateleira,
|
||||
header {
|
||||
width: 79.53125%;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
border-top: 1px solid $color-black;
|
||||
color: $color-gray2;
|
||||
padding: 1rem 0;
|
||||
|
||||
@ -14,6 +13,7 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1.3rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,6 +27,10 @@
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex: 1;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
@ -34,9 +38,14 @@
|
||||
}
|
||||
|
||||
&__payments {
|
||||
img {
|
||||
li {
|
||||
width: 32.78px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
@ -44,6 +53,12 @@
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
gap: 0.873rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
@ -65,6 +80,10 @@
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user