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