forked from M3-Academy/m3-academy-template-checkout
development #1
@ -68,8 +68,14 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async renderPrateleira() {
|
||||
|
||||
if (this.prateleira) {
|
||||
|
||||
const prateleiraTitle = document.createElement("h2");
|
||||
const titleNode = document.createTextNode("Você também pode gostar:");
|
||||
prateleiraTitle.classList.add("prateleira__title");
|
||||
prateleiraTitle.appendChild(titleNode);
|
||||
|
||||
const prateleiraSlick = document.createElement("ul");
|
||||
prateleiraSlick.classList.add("prateleira__carousel");
|
||||
|
||||
@ -86,13 +92,17 @@ export default class Footer {
|
||||
console.log(product)
|
||||
|
||||
const productImageUrl = product.items[0].images[0].imageUrl;
|
||||
console.log("productImageUrl:", productImageUrl);
|
||||
const productName = product.productName;
|
||||
console.log("productName:", productName);
|
||||
const productSkus = product.items;
|
||||
console.log("productSkus:", productSkus);
|
||||
const productLink = product.link;
|
||||
let skusStructure = "";
|
||||
|
||||
|
||||
console.log("productImageUrl:", productImageUrl);
|
||||
console.log("productName:", productName);
|
||||
console.log("productSkus:", productSkus);
|
||||
console.log("productLink:", productLink);
|
||||
|
||||
productSkus.forEach((sku) => {
|
||||
console.log("sku:", sku);
|
||||
skusStructure += `
|
||||
@ -110,14 +120,17 @@ export default class Footer {
|
||||
<div class="prateleira__item--description">
|
||||
<p class="prateleira__item--name">${productName}</p>
|
||||
<ul class="prateleira__item--options">${skusStructure}</ul>
|
||||
<button type="button" class="prateleira__item--button">Ver produto</button>
|
||||
<a class="prateleira__item--link" href="${productLink}">
|
||||
<button type="button" class="prateleira__item--button">Ver produto</button>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
|
||||
prateleiraSlick.innerHTML = cardsStructure;
|
||||
this.prateleira.appendChild(prateleiraTitle);
|
||||
this.prateleira.appendChild(prateleiraSlick);
|
||||
prateleiraSlick.innerHTML = cardsStructure;
|
||||
|
||||
if(window.innerWidth > 1024) {
|
||||
this.addCarrossel(prateleiraSlick);
|
||||
@ -132,6 +145,7 @@ export default class Footer {
|
||||
$(element).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: false
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
@import "./lib/slick";
|
||||
@import "./partials/header";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/prateleira";
|
||||
@import "./checkout/checkout.scss";
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
/* Slider */
|
||||
|
||||
.slick-slider {
|
||||
margin: 0;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@ -16,11 +14,14 @@
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
// height: 100%;
|
||||
margin: 0 -8px 0 -8px;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0 -8px 0 -8px;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
@ -42,6 +43,8 @@
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
// height: 100%;
|
||||
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -65,8 +68,8 @@
|
||||
}
|
||||
.slick-slide {
|
||||
margin: 0 8px;
|
||||
// width: 242px;
|
||||
|
||||
//código prévio
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
@ -74,9 +77,11 @@
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
@ -101,41 +106,50 @@
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border: 0;
|
||||
font-size: 0;
|
||||
z-index: 4;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
z-index: 4;
|
||||
no-repeat center center;
|
||||
left: 10px;
|
||||
|
||||
}
|
||||
.slick-next {
|
||||
z-index: 4;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
right: 10px;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
.slick-dots {
|
||||
li {
|
||||
margin: 0.5em;
|
||||
button {
|
||||
overflow: hidden;
|
||||
text-indent: 999999999px;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border-radius: 1em;
|
||||
background-color: #fff;
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
&.slick-active button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .slick-arrow.slick-hidden {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// .slick-dots {
|
||||
// li {
|
||||
// margin: 0.5em;
|
||||
// button {
|
||||
// overflow: hidden;
|
||||
// text-indent: 999999999px;
|
||||
// height: 1em;
|
||||
// width: 1em;
|
||||
// border-radius: 1em;
|
||||
// background-color: #fff;
|
||||
// :focus {
|
||||
// outline: none;
|
||||
// }
|
||||
// }
|
||||
// &.slick-active button {
|
||||
// &:focus {
|
||||
// outline: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -9,13 +9,6 @@
|
||||
// border-top: none;
|
||||
// color: $color-gray2;
|
||||
|
||||
&__prateleira {
|
||||
// margin-top: 101px;
|
||||
height: 448px;
|
||||
background-color: green;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
@ -1,31 +1,99 @@
|
||||
/* _prateleira.scss */
|
||||
.footerCheckout__prateleira {
|
||||
// estilos no _footer.scss
|
||||
}
|
||||
// margin-top: 101px;
|
||||
height: 448px;
|
||||
// background-color: green;
|
||||
|
||||
.prateleira__carousel {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.prateleira__title {
|
||||
margin: 0 0 20px;
|
||||
line-height: 38px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
// font-style: normal;
|
||||
text-align: center;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
.prateleira__item {
|
||||
width: 242px;
|
||||
height: 390px;
|
||||
background: red;
|
||||
.prateleira__carousel {
|
||||
// (_slick.scss .slick-slider)
|
||||
margin: 0;
|
||||
height: 390px;
|
||||
}
|
||||
|
||||
.prateleira__item {
|
||||
// height: 100%;
|
||||
// background: yellow;
|
||||
|
||||
&--image-container {
|
||||
width: 242px;
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
line-height: 18px;
|
||||
font-size: 13px;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
color: $color-white;
|
||||
background: $blue-300;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
&--image {
|
||||
height: 242px;
|
||||
|
||||
img {
|
||||
width: 242px;
|
||||
height: 242px;
|
||||
}
|
||||
}
|
||||
|
||||
&--description {
|
||||
background: yellow;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
&--name {
|
||||
margin: 20px 0 0;
|
||||
font-family: $font-family;
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
line-height: 18px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
&--options {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
list-style: none;
|
||||
|
||||
button {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .slick-track {
|
||||
|
||||
// &:nth-child(3) {
|
||||
|
||||
// div li div {
|
||||
// background: red;
|
||||
// }
|
||||
// // &--image-container {
|
||||
// // //#B1D7F1;
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -8,7 +8,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
|
||||
$black-300: #292929;
|
||||
$black-500: #000000;
|
||||
|
||||
$color-white: #fff;
|
||||
$color-white: #ffffff;
|
||||
|
||||
$color-gray-rename: #c4c4c4;
|
||||
$blue-300: #00C8FF;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user