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

feat: Adiciona CSS para o slick

Browse Source
This commit is contained in:
SamuelCondack 2022-12-15 18:34:56 -03:00
parent a5e5625f9f
commit 4f60536048
3 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,6 +98,9 @@ export default class Footer {
observer.observe(target, config);
}
fetchApiData() {
this.list.innerHTML = `
<h3>Você também pode gostar:</h3>
`;
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)

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

@ -15,10 +15,22 @@ footer .footerCheckout__wrapper {
width: 100%;
margin: auto auto 0 auto;
}
//footer
.footerCheckout__prateleira
//, header {
{
display: block !important;
h3 {
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #000000;
text-align: center;
}
width: 79.53125%;
margin: 0 auto;
.itemList{
@ -26,9 +38,12 @@ footer .footerCheckout__wrapper {
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0px 8px 0px 8px;
}
.productImg{
background-color: #ededed;
display: flex;
gap: 16px;
}
.productName{
text-align: center;
@ -39,6 +54,7 @@ footer .footerCheckout__wrapper {
font-size: 13px;
line-height: 18px;
color: #000000;
width: 100%;
}
.itemSku{
display: flex;
@ -47,13 +63,21 @@ footer .footerCheckout__wrapper {
justify-content: center;
gap: 5px;
padding-bottom: 20px;
width: 100%;
p{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
margin: 0;
padding: 5px;
color: white;
background: #00C8FF;
border-radius: 8px;
margin: 0;
letter-spacing: 0.05em;
text-transform: uppercase;
}
}
.productLink{
@ -66,6 +90,13 @@ footer .footerCheckout__wrapper {
background: #00C8FF;
border-radius: 8px;
margin-bottom: 56px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
&:hover{
text-decoration: none;
}
@ -76,6 +107,7 @@ footer .footerCheckout__wrapper {
top: 30%;
}
.slick-next{
border: 0;
color: #858585;
bottom: 65%;
}

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

@ -62,6 +62,7 @@
}
}
.slick-slide {
margin-right: 16px;
float: left;
height: 100%;
min-height: 1px;
@ -104,11 +105,19 @@
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
z-index: 4;
left: 10px;
left: 20px;
border: 0;
color: #858585;
top: 30%;
}
.slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center;
z-index: 4;
right: 10px;
right: 20px;
border: 0;
color: #858585;
bottom: 65%;
}
.slick-arrow.slick-hidden {
display: none;