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

Adiciona modificações

Browse Source
This commit is contained in:
Emerson Fully 2022-12-19 00:35:00 -03:00
parent 2dab582c69
commit 9c51f2c8b9
16 changed files with 10086 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { waitElement } from "m3-utils";
import Shelf from "./Shelf";
export default class Footer {
constructor() {
@ -7,13 +8,17 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
this.developedByImgs();
this.creditCardsIcons();
new Shelf();
}
async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content");
this.developedBy = await waitElement(".footerCheckout__developedBy")
this.creditCards = await waitElement(".footerCheckout__stamps")
}
onUpdate() {
@ -30,11 +35,55 @@ export default class Footer {
observer.observe(target, config);
}
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
});
developedByImgs() {
this.developedBy.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<img class="logo-vtex" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="logo VTEX"/>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<img class="logo-m3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="logo M3"/>
</a>
</li>
`
}
creditCardsIcons() {
this.creditCards.innerHTML = `
<li>
<img class="mastercard-logo" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"/>
</li>
<li>
<img class="visa-logo" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"/>
</li>
<li>
<img class="amex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"/>
</li>
<li>
<img class="elo-logo" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"/>
</li>
<li>
<img class="hypercard-logo" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"/>
</li>
<li>
<img class="paypal-logo" src="https://agenciamagma.vteximg.com.br/arquivos/paypalM3Academy.png"/>
</li>
<li>
<img class="boleto-logo" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"/>
</li>
<li>
<span class="footerCheckout__stamps__divider"</span>
</li>
<li>
<img class="vtex-pci-logo" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"/>
</li>
`
}
}

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

@ -3,19 +3,91 @@ import { waitElement } from "m3-utils";
export default class Header {
constructor() {
if (window.innerWidth > 1024) {
this.init();
} else {
document.querySelector("#progressBar").remove();
}
}
async init() {
await this.selectors();
console.log(this.item);
this.events();
this.progressBarHTML();
this.setInitialProgressBar();
}
async selectors() {
this.item = await waitElement("#my-element", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.header = await waitElement('.headerCheckout');
this.progressBar = await waitElement('#progressBar');
}
events() {
window.addEventListener("hashchange", this.handleProgressBar);
}
handleProgressBar() {
const circleOne = document.querySelector(".progress-bar-circle-1");
const circleTwo = document.querySelector(".progress-bar-circle-2");
const circleThree = document.querySelector(".progress-bar-circle-3");
if (window.location.hash == "#/cart") {
circleOne?.classList?.add("active");
circleTwo?.classList?.remove("active");
circleThree?.classList?.remove("active");
} else if (
window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping"
) {
circleOne?.classList?.remove("active");
circleTwo?.classList?.add("active");
circleThree?.classList?.remove("active");
} else if (window.location.hash == "#/payment") {
circleOne?.classList?.remove("active");
circleTwo?.classList?.remove("active");
circleThree?.classList?.add("active");
}
}
progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul>
<li>
<div class="containerLi">
<p class="progress-bar-text">Meu Carrinho</p>
<p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
<p class="progress-bar-line-1"></p>
</div>
</li>
<li class="central">
<div class="containerLi">
<p class="progress-bar-text">Dados Pessoais</p>
<p id="progress-bar-circle-2" class="progress-bar-circle-2"></p>
</div>
</li>
<li>
<div class="containerLi">
<p class="progress-bar-text">Pagamento</p>
<p id="progress-bar-circle-3" class="progress-bar-circle-3"></p>
<p class="progress-bar-line-2"></p>
</div>
</li>
</ul>
`;
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = '';
}
}
setInitialProgressBar() {
this.handleProgressBar();
}
}

130
checkout/src/arquivos/js/components/Shelf.js Normal file
View File

@ -0,0 +1,130 @@
import { waitElement } from "m3-utils";
export default class Shelf {
constructor() {
this.init();
}
async init() {
await this.selectors();
const requestProducts = await this.getProducts();
this.products = this.productsFactory(requestProducts);
this.renderShelf();
this.addCarrossel();
}
async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content");
this.developedBy = await waitElement(".footerCheckout__developedBy")
this.creditCards = await waitElement(".footerCheckout__stamps")
this.shelfContainer = document.querySelector(".footerCheckout__prateleira");
}
async getProducts() {
const products = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319");
return await products.json();
}
productsFactory(products) {
return products.map(product => {
const imageUrl = product.items[0].images[0].imageUrl;
const skus = product.items.map(sku => sku.name);
return {
name: product.productName,
link: product.link,
image: imageUrl,
skus,
}
})
}
mountRenderProduct(product) {
const skusHtml = product.skus?.reduce((acum, sku) => {
const skuHtml = `
<button class="product-selector-option">
${sku}
</button>
`;
return acum + skuHtml;
}, "");
return `
<li class="product-item">
<a class="product-img" href="${product.link}" />
<img src="${product.image}" alt="${product.name}" />
</a>
<a class="product-name" href="${product.link}">
<p>${product.name}</p>
</a>
<div class="product-selector-list">
${skusHtml}
</div>
<a class="product-see-page" href="${product.link}">
Ver produto
</a>
</li>
`;
}
renderShelf() {
const productListHtml = this.products.reduce((acum, product) => {
const productHtml = this.mountRenderProduct(product);
return acum + productHtml;
}, "");
this.shelfContainer.innerHTML = `
<h3>Você também pode gostar:</h3>
<ul class="product-list">
${productListHtml}
</ul>
`;
}
onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio;
let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
});
observer.observe(target, config);
}
addCarrossel() {
const elemento = document.querySelector(".product-list");
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 780,
settings: {
slidesToShow: 2
}
}
]
});
}
}

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

@ -2,4 +2,7 @@
@import "./lib/slick";
@import "./partials/header";
@import "./partials/footer";
@import "./checkout/checkout.scss";
@import "./partials/prateleira";
@import "./checkout/checkout";
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Tenor+Sans&display=swap");

53
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -30,7 +30,7 @@
}
small {
color: $color-gray4;
color: $color-black;
}
}
}
@ -53,11 +53,13 @@
}
button {
background-color: $color-black;
background-color: $color-blue;
border-radius: 5px;
border: none;
font-family: $font-family;
color: $color-black;
height: 54px;
width: 127px;
right: 0;
top: 0;
@ -112,8 +114,8 @@
.payment-data,
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray4;
border-radius: 8px;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 16px;
@ -130,7 +132,7 @@
a {
align-items: center;
background-color: #303030;
background-color: $color-blue;
border-radius: 8px;
border: none;
color: $color-white;
@ -151,15 +153,17 @@
p {
label {
color: $color-black;
color: $color-gray2;
font-weight: 500;
}
select,
input {
border-radius: 0;
border: 1px solid $color-gray4;
border-radius: 5px;
border: 1px solid $color-gray5;
box-shadow: none;
height: 42px;
padding: 0 10px;
}
.help.error {
@ -183,23 +187,29 @@
button.submit {
border: none;
border-radius: 5px;
background: $color-black;
background: $color-blue;
width: 100%;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
&:hover {
background: lighten($color-black, 5);
background: lighten($color-blue, 5);
}
&:active {
background: darken($color-black, 5);
background: darken($color-blue, 5);
}
}
/* Shipping configurations */
.ship-country {
display: none;
}
.ship-postalCode small a {
display: flex;
flex-direction: column;
color: #303030;
font-weight: 500;
text-decoration: underline;
@ -213,8 +223,8 @@
}
.shp-lean {
border: 1px solid $color-gray4;
border-radius: 0;
border: 1px solid $color-gray5;
border-radius: 8px;
label {
background-color: $color-white;
@ -223,7 +233,7 @@
padding: 8px 12px;
svg path {
fill: #d8c8ac;
fill: $color-blue;
}
}
}
@ -241,8 +251,8 @@
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
border-color: $color-gray5;
border-radius: 8px;
color: #303030;
padding: 12px;
@ -251,7 +261,7 @@
}
a {
color: #303030;
color: $color-blue;
font-weight: 500;
text-decoration: underline;
}
@ -271,17 +281,16 @@
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
display: none;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
background-color: $color-white;
border: 1px solid $color-black;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
color: $color-black;
}
}
}

34
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -405,7 +405,7 @@
}
.srp-pickup-my-location__button {
background-color: $color-black;
background-color: $color-blue;
border: none;
border-radius: 5px;
color: $color-white;
@ -419,11 +419,11 @@
letter-spacing: 0.05em;
&:hover {
background-color: lighten($color-black, 5);
background-color: lighten($color-blue, 5);
}
&:active {
background-color: darken($color-black, 5);
background-color: darken($color-blue, 5);
}
}
}
@ -444,12 +444,12 @@
}
&__current {
border: 1px solid $color-blue;
border: 1px solid $color-black;
border-radius: 100px;
}
.blue {
color: $color-blue;
color: $color-black;
}
label {
@ -515,7 +515,7 @@
font-weight: normal;
font-size: 10px;
line-height: 12px;
color: $color-blue;
color: $color-black;
margin-top: 7px;
}
@ -528,6 +528,10 @@
top: 17px;
}
}
.ship-country {
display: none;
}
}
.srp-result {
@ -608,7 +612,7 @@
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-blue;
color: $color-black;
text-decoration: none;
}
}
@ -673,10 +677,10 @@
}
button {
background: $color-black;
background: $color-blue;
border: none;
border-radius: 5px;
color: $color-white;
color: $color-black;
font-size: 12px;
height: 36px;
letter-spacing: 1px;
@ -691,11 +695,11 @@
}
&:hover {
background-color: lighten($color-black, 5);
background-color: lighten($color-blue, 5);
}
&:active {
background-color: darken($color-black, 5);
background-color: darken($color-blue, 5);
}
}
}
@ -776,13 +780,13 @@
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-blue;
color: $color-black;
}
}
.btn-place-order-wrapper {
a {
background: $color-green;
background: $color-blue;
border: none;
border-radius: 5px;
display: block;
@ -791,7 +795,7 @@
padding: 12px 19px;
&:hover {
background-color: darken($color-green, 5);
background-color: darken($color-blue, 5);
}
&:after {
@ -800,7 +804,7 @@
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
color: $color-white;
color: $color-black;
text-transform: uppercase;
vertical-align: middle;
line-height: 19px;

45
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -8,4 +8,49 @@ body .container-main.container-order-form .orderform-template.active {
.orderform-template-holder {
width: 66.1132%;
}
@media screen and (max-width: 1024px) {
.mini-cart,
.orderform-template-holder {
width: 100%;
}
}
}
.payment-data {
.icon-credit-card {
display: none;
}
.link-payment-discounts-cod {
display: none;
}
.payment-group-item {
border: 1px solid $color-gray2;
border-radius: 6px;
margin: 10px 0;
border-right: solid;
}
.pg-deposito,
.pg-transferencia-bancaria,
.pg-money,
.pg-promisory---monica,
.pg-desconto-em-folha,
.PaymentCardHolderDocument {
display: none;
}
#payment-group-creditControlPaymentGroup,
#payment-group-creditDirectSalePaymentGroup,
#payment-group-promissoryPaymentGroup,
#payment-group-instantPaymentPaymentGroup,
#payment-group-PSEPaymentGroup,
#payment-group-Bancolombia,
#payment-group-MercadoPagoPaymentGroup,
#payment-group-SPEIPaymentGroup,
#payment-group-Bancolombia {
display: none;
}
}

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

@ -13,11 +13,15 @@
font-size: 20px;
}
&-message {
display: none;
}
&-links {
.link-choose-products {
background: $color-black;
border: none;
border-radius: 5px;
background: $color-white;
border: 1px solid $color-black;
border-radius: 0;
transition: ease-in 0.22s all;
outline: none;
font-family: $font-family;
@ -27,11 +31,11 @@
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
color: $color-white;
color: $color-black;
text-transform: uppercase;
&:hover {
background: lighten($color-black, 5);
background: lighten($color-gray5, 5);
}
}
}

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

@ -9,12 +9,12 @@ html {
}
footer .footerCheckout__wrapper {
width: 94.9734%;
width: 100%;
margin: auto auto 0 auto;
border-top: 1px solid #000;
}
footer .footerCheckout__prateleira,
header {
width: 79.53125%;
margin: 0 auto;
}
@ -68,7 +68,7 @@ body {
#cart-title,
#orderform-title {
color: $color-gray2;
color: $color-black;
font-family: $font-family;
font-weight: 500;
font-size: 36px;

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

@ -97,16 +97,18 @@
}
}
.slick-arrow {
font-size: 0;
position: absolute;
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
font-size: 0;
position: absolute;
border: none;
}
.slick-prev {
z-index: 4;
left: 10px;
}
.slick-next {
transform: rotateY(180deg);
z-index: 4;
right: 10px;
}

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

@ -2,11 +2,28 @@
.footerCheckout {
border-top: none;
color: $color-gray2;
margin-top: auto;
.container {
display: flex;
align-items: center;
justify-content: space-between;
@media screen and (max-width: 1024px) {
flex-direction: column;
justify-content: center;
}
}
&__prateleira {
max-width: 1016px;
}
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
position: relative;
}
&__address {
@ -18,19 +35,26 @@
line-height: 12px;
text-transform: capitalize;
max-width: 40%;
left: 0px;
@include mq(md, max) {
margin-bottom: 24px;
margin: 12px 0;
max-width: 100%;
}
}
&__stamps {
padding-top: 15px;
align-items: center;
display: flex;
justify-self: center;
list-style: none;
@media screen and (max-width: 1024px) {
padding: 0;
margin-left: 0;
}
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
@ -50,6 +74,11 @@
display: flex;
list-style-type: none;
margin: 0;
right: 0px;
@media screen and (max-width: 1024px) {
margin-bottom: 35px;
}
li:last-child {
margin-left: 16px;
@ -71,4 +100,20 @@
}
}
}
.logo-vtex,
.logo-m3 {
height: 16px;
}
.mastercard-logo,
.visa-logo,
.amex-logo,
.elo-logo,
.hypercard-logo,
.paypal-logo,
.boleto-logo,
.vtex-pci-logo {
height: 20px;
}
}

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

@ -1,22 +1,129 @@
/* _header.scss */
.headerCheckout {
width: 100%;
.container {
width: auto !important;
#progressBar {
width: 446px;
ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 !important;
}
li .containerLi {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
}
li.central .containerLi {
align-items: center;
}
li:last-child .containerLi {
align-items: flex-end;
}
li .container div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Tenor Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 28px;
color: #000;
width: 39.91%;
}
li.central {
width: auto;
}
#progress-bar-circle-1 {
left: 18%;
}
#progress-bar-circle-3 {
right: 18%;
}
li #progress-bar-circle-1,
li #progress-bar-circle-2,
li #progress-bar-circle-3 {
position: relative;
width: 12px;
background-color: #fff;
height: 12px;
border: 1px solid;
border-radius: 50%;
z-index: 2;
}
li #progress-bar-circle-1.active,
li #progress-bar-circle-2.active,
li #progress-bar-circle-3.active {
border: none;
background-color: #000;
}
li .progress-bar-line-1 {
position: absolute;
left: 25%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid #000;
}
li .progress-bar-line-2 {
position: absolute;
right: 21%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid #000;
}
}
}
&__wrapper {
height: 96px;
align-items: center;
display: flex;
justify-content: space-between;
border-bottom: 1px solid $color-black;
}
&__logo {
img {
height: 52px;
width: auto;
padding-left: 30%;
}
}
&__safeBuy {
display: flex;
padding-right: 5%;
span {
align-items: center;
display: flex;
@ -27,6 +134,7 @@
font-size: 12px;
line-height: 14px;
color: $color-gray;
margin-left: 8px;
}
i {

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

@ -1 +1,98 @@
/* _prateleira.scss */
.footerCheckout__prateleira {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
text-align: center;
h3 {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: $color-black;
}
}
.product {
&-list {
margin-bottom: 54px;
.slick-arrow {
width: 20px;
top: 50%;
}
}
&-item {
* {
font-family: "Open Sans", sans-serif;
}
max-width: 242px;
a:hover {
text-decoration: none;
}
}
&-img,
&-name,
&-selector-list {
display: block;
margin-bottom: 12px;
}
&-img {
display: block;
}
&-name {
font-weight: 400;
font-size: 13px;
line-height: 18px;
text-align: center;
color: #000000;
}
&-selector-option {
width: max-content;
height: 28px;
background-color: $color-blue;
margin-right: 5px;
border: none;
cursor: pointer;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
}
&-see-page {
padding: 12px 0;
background: $color-blue;
border-radius: 8px;
color: $color-white;
font-weight: 700;
font-size: 13px;
line-height: 18px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
display: flex;
justify-content: center;
&:focus,
&:hover {
color: $color-white;
}
}
}

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

@ -15,7 +15,7 @@ $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-blue: #4267b2;
$color-blue: #00c8ff;
$color-green: #4caf50;
@ -26,7 +26,7 @@ $grid-breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xl: 1200px,
) !default;
$z-index: (
@ -34,5 +34,5 @@ $z-index: (
level2: 10,
level3: 15,
level4: 20,
level5: 25
level5: 25,
) !default;

2
package-lock.json generated
View File

@ -45,6 +45,7 @@
"jquery": "^3.6.0",
"m3-utils": "^0.1.0",
"sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4"
},
"devDependencies": {
@ -19345,6 +19346,7 @@
"m3-utils": "^0.1.0",
"prettier": "^2.3.2",
"sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4",
"webpack": "^5.51.1",
"webpack-merge": "^5.8.0"

9196
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff