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); observer.observe(target, config);
} }
fetchApiData() { fetchApiData() {
this.list.innerHTML = `
<h3>Você também pode gostar:</h3>
`;
fetch( fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" "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%; width: 100%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
} }
//footer //footer
.footerCheckout__prateleira .footerCheckout__prateleira
//, header { //, 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%; width: 79.53125%;
margin: 0 auto; margin: 0 auto;
.itemList{ .itemList{
@ -26,9 +38,12 @@ footer .footerCheckout__wrapper {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
margin: 0px 8px 0px 8px;
} }
.productImg{ .productImg{
background-color: #ededed; background-color: #ededed;
display: flex;
gap: 16px;
} }
.productName{ .productName{
text-align: center; text-align: center;
@ -39,6 +54,7 @@ footer .footerCheckout__wrapper {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
color: #000000; color: #000000;
width: 100%;
} }
.itemSku{ .itemSku{
display: flex; display: flex;
@ -47,13 +63,21 @@ footer .footerCheckout__wrapper {
justify-content: center; justify-content: center;
gap: 5px; gap: 5px;
padding-bottom: 20px; padding-bottom: 20px;
width: 100%;
p{ p{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 18px;
margin: 0; margin: 0;
padding: 5px; padding: 5px;
color: white; color: white;
background: #00C8FF; background: #00C8FF;
border-radius: 8px; border-radius: 8px;
margin: 0; margin: 0;
letter-spacing: 0.05em;
text-transform: uppercase;
} }
} }
.productLink{ .productLink{
@ -66,6 +90,13 @@ footer .footerCheckout__wrapper {
background: #00C8FF; background: #00C8FF;
border-radius: 8px; border-radius: 8px;
margin-bottom: 56px; 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{ &:hover{
text-decoration: none; text-decoration: none;
} }
@ -76,6 +107,7 @@ footer .footerCheckout__wrapper {
top: 30%; top: 30%;
} }
.slick-next{ .slick-next{
border: 0;
color: #858585; color: #858585;
bottom: 65%; bottom: 65%;
} }

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

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