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

feat adicionando css ao slick e corrigindo bugs

Browse Source
This commit is contained in:
PATRICK DE SOUZA SILVA 2022-12-20 22:05:08 -03:00
parent 3d7e8a8f20
commit db748daa31
8 changed files with 169 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ export default class Footer {
this.addPaymentsIcons();
this.addPciIcons();
this.onUpdateShelf();
this.addVtexIcon();
}
async selectors() {
@ -20,6 +21,10 @@ export default class Footer {
this.paymentIconsContainer = await waitElement(".footerCheckout__payments");
this.iconPci = await waitElement(".footerCheckout__vtexpci");
this.shelfContainer = $(".footerCheckout__prateleira");
this.footer = $(".footerCheckout");
this.vtexIcon = $("a[href='https://vtex.com/br-pt/']");
this.m3Icon = $("a[href='https://agenciam3.com/']");
this.titleFooter = $(".footer-title");
}
onUpdate() {
@ -29,9 +34,12 @@ export default class Footer {
let target = this.checkoutVazio;
let config = { attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutations.forEach(() => {
if (target.style.display === "block") {
console.log(this.titleFooter);
this.shelfContainer.empty();
this.titleFooter.remove();
$(".slick-slider").removeClass("slick-slider slick-initialized");
} else {
this.createShelf();
@ -65,6 +73,7 @@ export default class Footer {
if (hash !== "cart") {
this.shelfContainer.empty();
this.titleFooter.remove();
$(".slick-slider").removeClass("slick-slider slick-initialized");
} else {
this.createShelf();
@ -128,6 +137,17 @@ export default class Footer {
this.iconPci.innerHTML = html;
}
}
addVtexIcon() {
const logoM3Academy = `<span>Developed By</span>
<img src="/arquivos/logoM3M3Academy.png" alt=""/>
`;
const logoVtex = `<span>Powered By</span>
<img src="/arquivos/logoVTEXM3Academy.png" alt=""/>`;
this.vtexIcon.html(logoVtex);
this.m3Icon.html(logoM3Academy);
}
async createShelf() {
const data = await fetch(
@ -135,6 +155,7 @@ export default class Footer {
);
const products = await data.json();
const hash = window.location.hash.replace("#/", "");
const shelfTitle = `<h2 class="footer-title">Você também pode gostar:</h2>`;
const html = products.map(
(product) => `
@ -144,7 +165,7 @@ export default class Footer {
}>
<span class="product-card__description">${product.productName}</span>
<div class="product-card__skus">
${product.items.map((item) => `<button>${item.name}</button>`)}
${product.items.map((item) => `<button>${item.name}</button>`).join(",")}
</div>
<button class="product-card__btn" >
<a class="product-card__link" >ver produto</a>
@ -155,6 +176,7 @@ export default class Footer {
if (this.shelfContainer && hash === "cart") {
this.shelfContainer.html(html);
this.footer.prepend(shelfTitle);
}
}
}

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

@ -3,3 +3,4 @@
@import "./partials/header";
@import "./partials/footer";
@import "./checkout/checkout.scss";
@import "./partials/prateleira.scss";

15
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -43,21 +43,6 @@
text-transform: uppercase;
padding: 16px;
// background: $color-black;
// border: none;
// border-radius: 5px;
// transition: ease-in 0.22s all;
// outline: none;
// font-family: $font-family;
// font-style: normal;
// font-weight: 500;
// font-size: 14px;
// line-height: 16px;
// text-align: center;
// letter-spacing: 0.05em;
// color: $color-white;
// text-transform: uppercase;
&:hover {
background: lighten($color-black, 5);
}

13
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -9,17 +9,8 @@ html {
min-height: 100%;
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {
padding: 29px 0px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid black;
}
body {
display: flex;

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

@ -62,6 +62,7 @@
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
@ -135,58 +136,3 @@
}
}
/* _prateleira.scss */
.product-card {
.product-card__img {
width: 100%;
max-width: 75.7789%;
}
.product-card__description {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 35px;
text-align: center;
color: #000000;
margin-bottom: 20px;
}
.product-card__skus {
button {
cursor: pointer;
background-color: $color-blue2;
padding: 8px;
border: none;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 26px;
line-height: 35px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
}
.product-card__btn {
margin-top: 10px;
background-color: $color-blue2;
border-radius: 8px;
width: 100%;
max-width: 485px;
padding: 12px;
}
.product-card__link {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 26px;
line-height: 35px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
}

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

@ -3,21 +3,49 @@
border-top: none;
color: $color-gray2;
.footer-title {
font-family: $font-family-secundary;
font-weight: 400;
font-size: 48px;
line-height: 76px;
text-align: center;
color: $color-black3;
}
.container {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
&::before {
display: none;
}
&::after {
display: none;
}
}
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
border: 1px solid black;
margin-top: 54px;
padding: 16px 63px;
}
&__address {
color: $color-gray2;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
max-width: 40%;
font-weight: 400;
font-size: 20px;
line-height: 27px;
text-transform: capitalize;
color: #292929;
@include mq(md, max) {
margin-bottom: 24px;
@ -30,6 +58,7 @@
display: flex;
justify-self: center;
list-style: none;
margin: 0;
@include mq(md, max) {
align-self: center;
@ -43,6 +72,14 @@
margin: 0 8px;
width: 1px;
}
img {
width: 69px;
}
}
&__vtexpci {
img {
width: 103px;
}
}
&__developedBy {
@ -53,6 +90,9 @@
li:last-child {
margin-left: 16px;
a img {
max-width: 55px;
}
}
a {
@ -66,10 +106,19 @@
line-height: 12px;
text-decoration: none;
span {
margin-right: 8px;
}
}
}
img {
max-width: 87px;
}
span {
margin-right: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #292929;
}
}
}
}

6
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,4 +1,10 @@
/* _header.scss */
header {
padding: 29px 0px;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid black;
}
.headerCheckout {
.container {
width: 79.53125%;

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

@ -0,0 +1,82 @@
/* _prateleira.scss */
.footerCheckout__prateleira {
padding: 0 253px;
.slick-prev {
left: 270px;
}
.slick-next {
// background-image: url("/arquivos/arrow-right-M3Academy.svg");
background-image: url("/checkout/src/arquivos/assets/svgs/arrow-right-mini-M3Academy.svg");
right: 270px;
background-color: transparent;
}
.slick-arrow {
top: calc(50% - 26px);
width: 26px;
height: 58px;
padding: 0;
border: none;
background-size: contain;
background-repeat: no-repeat;
}
.slick-slide {
padding: 0 8px;
}
}
.product-card {
&__img {
width: 100%;
}
&__description {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 26px;
line-height: 35px;
text-align: center;
display: block;
color: #000000;
margin-bottom: 20px;
}
&__skus {
display: flex;
justify-content: center;
button {
cursor: pointer;
background-color: $color-blue2;
padding: 8px;
border: none;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 26px;
line-height: 35px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
}
&__btn {
margin-top: 10px;
background-color: $color-blue2;
border-radius: 8px;
width: 100%;
padding: 12px;
border: none;
}
&__link {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 26px;
line-height: 35px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #ffffff;
}
}