Thiago.bronisio/m3-academy-template-checkout-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat: adiciona a prateleira de produtos e footer responsivo em todas as telas' (#4) from feature/prateleira-style into main

Browse Source 
Reviewed-on: #4
This commit is contained in:
Thiago Bronisio Damascena 2022-12-16 02:24:45 +00:00
commit c3ef8b1c6e
4 changed files with 364 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,6 @@ import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
}
async init() {
@ -50,14 +48,15 @@ export default class Footer {
<img src="${product.items[0].images[0].imageUrl}" alt="Imagem ${product.productName}" />
<figcaption>${product.productName}</figcaption>
</figure>
<div>
<label name="tamanho">
${product.items.name}
</label>
<input name="tamanho" type="radio"/>
<div class="container-tamanho-cores">${product.items.map((nameProduct) => {
return ` <input name="tamanho" type="radio"/>
<label name="tamanho">
${nameProduct.name}
</label>`
}).join("")}
</div>
<div>
<button> </button>
<div class="container-button-prateleira">
<a href=""><button>Ver produto</button></a>
</div>
`
footerPrat.children[1].appendChild(li)
@ -70,15 +69,15 @@ export default class Footer {
`
iconCard.innerHTML = `
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Imagem Master Card"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Imagem Visa Card"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Imagem American Express"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Imagem Elo Card"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Imagem Hiper Card"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Imagem PayPal"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Imagem Boleto"/></li>
<li><span class="footerCheckout__stamps__divider"> </span></li>
<li class="footerCheckout__stamps__item"><img class="iconVtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Imagem Vtex" /></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Imagem Master Card"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Imagem Visa Card"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Imagem American Express"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Imagem Elo Card"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Imagem Hiper Card"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Imagem PayPal"/></li>
<li class="footerCheckout__stamps__item"><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Imagem Boleto"/></li>
<li><span class="footerCheckout__stamps__divider"> </span></li>
<li class="footerCheckout__stamps__item"><img class="iconVtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Imagem Vtex" /></li>
`
developedBy.innerHTML = `
<li class="footerCheckout__developedBy__item-Vtex"><p>Powered By</p><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Imagem VTEX"/> </li>
@ -108,6 +107,24 @@ export default class Footer {
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 376,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
}
},
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
}
}
]
});
}
}

4
checkout/src/arquivos/js/components/Header.js
View File

@ -14,7 +14,7 @@ export default class Header {
async selectors() {
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar")
this.progressBar = await waitElement("#progressBar");
}
progressBarHTML() {
@ -31,7 +31,7 @@ export default class Header {
<li></li>
</ul>
`
}
};
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}

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

@ -2,24 +2,277 @@
padding: 0 16px;
position: relative;
&__prateleira {
margin-bottom: 123px;
@media screen and (min-width: 2500px) {
margin-bottom: 156px;
}
@media screen and (max-width: 1024px) {
margin-bottom: 188px;
}
h2 {
display: flex;
margin: 0 0 20px;
font-weight: 400;
line-height: 38px;
font-size: 24px;
justify-content: center;
font-family: $font-family-secundary;
@media screen and (min-width: 2500px) {
font-size: 48px;
line-height: 76px;
}
}
.container-carousel-item {
display: flex;
margin: 0;
padding: 0 116px;
list-style: none;
@media screen and (min-width: 2500px) {
padding: 0 237px;
}
@media screen and (max-width: 1024px) {
padding: 0;
}
li {
width: 96.1% !important;
@media screen and (min-width: 1280px) and (max-width: 1281px) {
width: 242px !important;
margin-right: 16px;
}
@media screen and (min-width: 2500px) and (max-width: 2501px) {
width: 485.07px !important;
margin-right: 16.93px;
}
@media screen and (min-width: 1023px) and (max-width: 1024px) {
width: 320px !important;
margin-right: 15px;
}
figure {
margin: 0;
img {
width: 100%;
background: $color-gray-100;
}
figcaption {
display: flex;
margin-top: 20px;
justify-content: center;
font-weight: 400;
font-size: 13px;
align-items: center;
text-align: center;
line-height: 18px;
font-family: $font-family;
@media screen and (min-width: 2500px) {
font-size: 26px;
line-height: 35px;
}
@media screen and (min-width: 726px) and (max-width: 1024px) {
margin: 20px 0;
}
@media screen and (min-width: 376px) and (max-width: 725px) {
margin-top: 11px;
min-height: 36px;
}
@media screen and (min-width: 1025px) and (max-width: 1188px) {
min-height: 36px;
}
}
}
.container-tamanho-cores {
display: flex;
margin-top: 20px;
gap: 5px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
@media screen and (max-width: 725px) {
min-height: 61px;
}
@media screen and (min-width: 1025px) and (max-width: 1188px) {
min-height: 61px;
}
input {
display: none;
}
label {
display: flex;
padding: 5px;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
line-height: 18px;
align-items: center;
text-align: center;
text-transform: uppercase;
background: $color-blue-100;
letter-spacing: 0.05em;
color: $color-white;
justify-content: center;
@media screen and (min-width: 2500px) {
padding: 6.1px;
font-size: 26px;
line-height: 35px;
}
}
label:last-child {
margin-right: 0;
}
}
.container-button-prateleira {
margin-top: 20px;
@media screen and (min-width: 726px) and (max-width: 1024px) {
margin-top: 20px;
}
a {
text-decoration: none;
}
button {
width: 100%;
height: 42px;
font-weight: 700;
font-size: 13px;
line-height: 13px;
border: none;
border-radius: 8px;
color: $color-white;
background: $color-blue-100;
letter-spacing: 0.05em;
text-transform: uppercase;
font-family: $font-family;
@media screen and (min-width: 2500px) {
height: 59px;
font-size: 26px;
line-height: 35px;
letter-spacing: 0.05em;
}
}
}
}
}
.slick-prev {
width: 13px;
height: 29.5px;
border: none;
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg)
no-repeat center center;
z-index: 4;
left: 125px;
top: 43%;
@media screen and (min-width: 2500px) {
width: 26px;
height: 58px;
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg)
no-repeat center center;
left: 255px;
top: 45%;
}
@media screen and (max-width: 1024px) {
width: 13.65px;
height: 29.47px;
left: 10px;
top: 48%;
}
}
.slick-next {
width: 13px;
height: 29.5px;
border: none;
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg)
no-repeat center center;
z-index: 4;
top: 43%;
right: 137px;
@media screen and (min-width: 2500px) {
width: 26px;
height: 58px;
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg)
no-repeat center center;
top: 45%;
right: 265px;
}
@media screen and (max-width: 1024px) {
width: 13.65px;
height: 29.47px;
top: 48%;
right: 20px;
}
}
}
.container {
display: flex;
margin: 16px 0;
width: 100% !important;
@media screen and (max-width: 1024px) {
display: grid;
}
}
&__wrapper {
width: 100% !important;
border-top: solid 1px $black-padrao;
position: fixed;
position: absolute;
bottom: 0;
left: 0;
@media screen and (min-width: 2500px) {
height: 80px;
margin: 0 0 16px !important;
}
}
&__address {
display: flex;
align-items: center;
padding-left: 16px;
@media screen and (min-width: 2500px) {
padding-left: 63px;
}
@media screen and (max-width: 1024px) {
padding-left: 16px;
margin: 16px 0;
}
p {
margin: 0;
height: 14px;
@ -29,28 +282,62 @@
text-transform: capitalize;
color: $color-black;
font-family: $font-family;
@media screen and (min-width: 2500px) {
font-size: 20px;
line-height: 27px;
}
}
}
&__stamps {
margin: 0 auto;
display: flex;
width: 32.4%;
align-items: center;
list-style: none;
width: 32.4%;
justify-content: center;
@media screen and (max-width: 1024px) {
order: -1;
margin: 0;
width: 100%;
padding-left: 8px;
justify-content: flex-start;
}
&__item {
margin-right: 13px;
@media screen and (max-width: 1024px) {
margin-right: 5px;
}
img {
width: 100%;
width: 35.65px;
height: 20px;
object-fit: cover;
}
}
.iconVtex {
height: 33px;
@media screen and (min-width: 2500px) {
width: 69.65px;
height: 39px;
}
}
.iconVtex {
width: 53px;
height: 33px;
@media screen and (min-width: 2500px) {
width: 103.5px;
height: 64.45px;
}
@media screen and (max-width: 1024px) {
width: 53px;
margin-right: 5px;
}
}
}
&__divider {
@ -58,6 +345,11 @@
height: 24px;
margin: 0 10px 0 0;
border: 1px solid $color-gray-100;
@media screen and (min-width: 2500px) {
display: flex;
height: 43px !important;
}
}
}
@ -67,6 +359,14 @@
list-style: none;
padding-right: 16px;
@media screen and (min-width: 2500px) {
padding-right: 62px;
}
@media screen and (max-width: 1024px) {
padding-left: 16px;
}
&__item-Vtex {
display: flex;
align-items: center;
@ -78,10 +378,19 @@
line-height: 12px;
color: $color-black;
font-family: $font-family;
@media screen and (min-width: 2500px) {
font-size: 18px;
line-height: 25px;
}
}
img {
height: 16px;
@media screen and (min-width: 2500px) {
width: 87.75px;
height: 31.25px;
}
}
}
@ -90,11 +399,20 @@
align-items: center;
p {
margin: 0 11px 0 0;
font-weight: 400;
font-size: 9px;
@media screen and (min-width: 2500px) {
font-size: 18px;
line-height: 25px;
}
}
img {
height: 16px;
@media screen and (min-width: 2500px) {
width: 56px;
height: 30.55px;
}
}
}
}

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

@ -10,7 +10,7 @@ $color-black: #292929;
$color-white: #fff;
$color-gray-100: #c4c4c4;
$color-gray-100: #eee;
$color-gray: #6c6c6c;
$color-gray2: #7d7d7d;
@ -19,6 +19,7 @@ $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-blue: #4267b2;
$color-blue-100: #00c8ff;
$color-green: #4caf50;