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

development #1

Merged
andreamatsunaga merged 17 commits from development into main 2022-12-19 04:49:09 +00:00
Conversation 0 Commits 17 Files Changed 15 +172 -63
7 changed files with 172 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5130891892 - Show all commits

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

@ -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>
<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> </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
}); });
} }

1
checkout/src/arquivos/sass/checkout.scss
View File

@ -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";

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

@ -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;
} // }
} // }
// }
// }

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

@ -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%;

105
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -1,31 +1,100 @@
/* _prateleira.scss */ /* _prateleira.scss */
.footerCheckout__prateleira { .footerCheckout__prateleira {
// estilos no _footer.scss // margin-top: 101px;
} height: 448px;
// background-color: green;
.prateleira__carousel { .prateleira__title {
margin: 0; margin: 0 0 20px;
list-style-type: none; 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 { .prateleira__carousel {
width: 242px; // (_slick.scss .slick-slider)
height: 390px; margin: 0;
background: red; height: 390px;
}
.prateleira__item {
// height: 100%;
// background: yellow;
&--image-container { button {
width: 242px; @include buttonStyle();
// 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; height: 242px;
img {
width: 242px;
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;
// // }
// }
// }

18
checkout/src/arquivos/sass/utils/_mixin.scss
View File

@ -80,6 +80,24 @@
&::-webkit-input-placeholder { @content; } &::-webkit-input-placeholder { @content; }
} }
@mixin buttonStyle($width: 100%, $color: #ffffff, $bg-color: #00C8FF) {
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;
}
@mixin hardware($backface: true, $perspective: 1000) { @mixin hardware($backface: true, $perspective: 1000) {
@if $backface { @if $backface {
backface-visibility: hidden; backface-visibility: hidden;

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -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;