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

Merge pull request 'feature/header' (#2) from feature/header into main

Browse Source 
Reviewed-on: #2
This commit is contained in:
ViniciusDeniz 2022-12-18 14:19:19 +00:00
commit d40b90a69c
9 changed files with 1748 additions and 11794 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10970
checkout/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -1,19 +1,98 @@
// import { waitElement } from "m3-utils";
// export default class Footer {
// constructor() {
// this.init();
// }
// async init() {
// await this.selectors();
// // this.onUpdate();
// }
// 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");
// }
// 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);
// }
// async addCarrossel() {
// const elemento = await waitElement("#my-element");
// $(elemento).slick({
// slidesToShow: 4,
// slidesToScroll: 1,
// });
// }
// }
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
constructor() { constructor() {
this.init(); this.init();
this.requestShelf();
this.addCarrossel();
} }
async init() { async init() {
await this.selectors(); await this.selectors();
// this.onUpdate(); // this.onUpdate();
this.requestShelf();
this.addCarrossel();
} }
async selectors() { async selectors() {
this.itensShelf = await waitElement(".footerCheckout__prateleira");
// this.itensShelf = await waitElement(".empty-cart-content")
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); // this.checkoutVazio = await waitElement(".container-cart", {
// });
}
requestShelf() {
let prateleira = this.itensShelf;
prateleira.innerHTML = `
<p class="footerChekout__prateleira-title">Você também pode gostar</p>
<ul class="carrosel-ul"></ul>
`;
const api =
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
const prodUl = document.querySelector("carrosel-ul");
fetch(api)
.then((response) => response.json())
.then(function (data) {
return data.map(function (item) {
let li = document.createElement("li");
li.setAttribute("id", item.productId);
li.innerHTML = `
<img src="${item.items[0].images[0].imageUrl}" alt="${item.productName}" />
<p class="product-name">${item.productName}</p>
<div class="product-variation">${item.items
.map((name) => {
return `<a name="product-variationvariation" class="product-variationvariation">${name.name}</a>`;
})
.join("")}</div>
<button class="show-product">Ver produto</button>
`;
prateleira.children[1].appendChild(li);
});
});
} }
onUpdate() { onUpdate() {
@ -31,10 +110,13 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async addCarrossel() { async addCarrossel() {
const elemento = await waitElement("#my-element"); const elemento = await waitElement(".carrosel-ul");
$(elemento).slick({ $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
arrows: true,
variableWidth: true,
infinite: false,
}); });
} }
} }

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

@ -1,3 +1,215 @@
// // // import waitForEl from "../helpers/waitForEl";
// import { waitElement } from "m3-utils";
// Export default class Header {
// constructor() {
// this.init();
// }
// async init() {
// await this.selectors();
// this.progressBarHTML();
// await this.progressBarProgress();
// }
// async selectors() {
// this.header = await waitElement(".headerCheckout");
// this.progressBar = await waitElement("#progressBar");
// }
// progressBarHTML() {
// if (this.progressBar && window.innerWidth > 1024) {
// // <img src="imgs/amex.png"/ this.progressBar.innerHTML
// this.progressBar.innerHTML = '<ul>
// <li><div class="containerLi"><div><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></div></li>
// <li class="central"><div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
// <li><div class="containerLi"><div><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></div></li>
// </ul>';
// }
// if (this.progressBar && window.innerWidth <= 1024) {
// this.progressBar.innerHTML = '';
// }
// }
// async progressBarProgress() {
// if (this.progressBar && window.innerWidth > 1024) {
// const progressBarLista = document.querySelectorAll("#progressBar ul li");
// progressBarLista.forEach((li) => {
// if (window.location.href==="https://m3academy.myvtex.com/checkout/#/cart") {
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
// "active");
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if (
// li.children(0).children[0].children[
// "progress-bar-circle-2"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-2"
// ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.remove("active");
// }
// }
// } else if (
// window.location.href==="https://m3academy.myvtex.com/checkout/#/email" ||
// window.location.href== "https://m3academy.myvtex.com/checkout/#/profile" ||
// window.location.href=="https://m3academy.myvtex.com/checkout/#/shipping"
// ){
// if(li.children[0].children[0].children["progress-bar-circle-1"]){
// if(li.children[0].children[0].children[
// "progress-bar-circle-1"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-1"
// ].classList.remove("active");
// }
// }
// }
// if(li.children[0].children[0].children["progress-bar-circle-2"]){
// li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
// "active"
// );
// }
// if(li.children[0].children[0].children["progress-bar-circle-3"]){
// if(
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.contains["active"]
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.remove["active"];
// }
// } else if(
// window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
// ){
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-1"].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if(
// li.children[0].children[0].children[
// "progress-bar-circle-2"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-2" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
// "active");
// }
// }
// window.addEventListener("hashchange", © ) => {
// if (window.location.hash="#/cart") {
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// li.children[0].children[0].children[ "progress-bar-circle-1"
// ].classList.add("active");
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if (
// li.children(0).children[0].children[
// "progress-bar-circle-2" ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-2" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.remove("active");
// }
// } else if (
// window.location.hash=="#/email" ||
// window.location.hash =="#/profile" ||
// window.location.hash=="#/shipping"){
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// li.children[0].children[0].children[
// "progress-bar-circle-2"
// ].classList.add("active");
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// if (
// li.children[0].children[0].children[ "progress-bar-circle-3"
// ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-3" ].classList.remove("active");
// }
// }
// } else if (window.location.hash=="#/payment") {
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.contains("active")
// ){
// li.children[0].children[0].children[
// "progress-bar-circle-1" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-2"]) {
// if (
// li.children[0].children[0].children[
// "progress-bar-circle-2" ].classList.contains("active") ){
// li.children[0].children[0].children[
// "progress-bar-circle-2" ].classList.remove("active");
// }
// }
// if (li.children[0].children[0].children["progress-bar-circle-3"]) {
// li.children[0].children[0].children[
// "progress-bar-circle-3"
// ].classList.add("active");
// }
// }
// });
// });
// }
// }
// }
// import waitForEl from "../helpers/waitForEl"; // import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
@ -8,14 +220,193 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); this.progressBarHTML();
await this.progressBarProgress();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { this.header = await waitElement(".headerCheckout", {
//#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.progressBar = await waitElement("#progressBar", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar //#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 timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
}); });
} }
progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul>
<li>
<div class="containerLi">
<p class="progress-bar-text">Meu Carrinho</p>
<div class="bolinha" style="margin-left: 29px;">
<p id="progress-bar-circle-1" class="progress-bar-circle"></p>
<p class="progress-bar-line-1"></p>
</div>
</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"></p>
</div>
</li>
<li>
<div class="containerLi">
<p class="progress-bar-text">Pagamento</p>
<div class="bolinha" style="margin-right: 22px;">
<p id="progress-bar-circle-3" class="progress-bar-circle"></p>
<p class="progress-bar-line-2"></p>
</div>
</div>
</li>
</ul>
`;
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
async progressBarProgress() {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarLista = document.querySelectorAll("#progressBar ul li");
progressBarLista.forEach((li) => {
// console.log(li)
const liOne = li.children[0].children[1].children["progress-bar-circle-1"];
const liTwo = li.children[0].children["progress-bar-circle-2"];
const liThree = li.children[0].children[1].children["progress-bar-circle-3"];
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (liOne) {
liOne.classList.add("active");
}
if (liTwo) {
if (liTwo.classList.contains("active")) {
liTwo.classList.remove("active");
}
}
if (liThree) {
if (liThree.classList.contains("active")) {
liThree.classList.remove("active");
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
) {
if (liOne) {
if (liOne.classList.contains("active")) {
liOne.classList.remove("active");
}
}
if (liTwo) {
liTwo.classList.add("active");
}
if (liThree) {
if (liThree.classList.contains("active")) {
liThree.classList.remove("active");
}
}
} else if (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
) {
if (liOne) {
if (liOne.classList.contains("active")) {
liOne.classList.remove("active");
}
}
if (liTwo) {
if (liTwo.classList.contains("active")) {
liTwo.classList.remove("active");
}
}
if (liThree) {
liThree.classList.add("active");
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (liOne) {
liOne.classList.add("active");
}
if (liTwo) {
if (liTwo.classList.contains("active")) {
liTwo.classList.remove("active");
}
}
if (liThree) {
if (liThree.classList.contains("active")) {
liThree.classList.remove("active");
}
}
} else if (
window.location.hash === "#/email" ||
window.location.hash === "#/profile" ||
window.location.hash === "#/shipping"
) {
if (liOne) {
if (liOne.classList.contains("active")) {
liOne.classList.remove("active");
}
}
if (liTwo) {
liTwo.classList.add("active");
}
if (liThree) {
if (liThree.classList.contains("active")) {
liThree.classList.remove("active");
}
}
} else if (window.location.hash == "#/payment") {
if (liOne) {
if (liOne.classList.contains("active")) {
liOne.classList.remove("active");
}
}
if (liTwo) {
if (liTwo.classList.contains("active")) {
liTwo.classList.remove("active");
}
}
if (liThree) {
liThree.classList.add("active");
}
}
});
});
}
}
} }

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

@ -2,12 +2,15 @@
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 14px;
.link-cart { .link-cart {
a { a {
color: $color-black; color: $color-black;
font-size: 14px; font-size: 14px;
text-transform: uppercase;
font-weight: 400;
line-height: 16px;
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
@ -20,17 +23,29 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-transform: uppercase;
color: $color-black;
h3 { h3 {
margin-bottom: 16px; margin-bottom: 16px;
span { span {
color: #303030; color: $color-black;
font-size: 24px; font-size: 24px;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-transform: uppercase;
} }
small { small {
color: $color-gray4; color: $color-black;
font-size: 24px;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-transform: uppercase;
padding: 0 !important;
} }
} }
} }
@ -43,23 +58,40 @@
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 16px;
border: 2px solid $color-gray3; border: 1px solid $color-black;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
width: 66%;
height: 50px;
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
} }
::placeholder {
color: $color-black;
}
button { button {
background-color: $color-black; background-color: $color-blue;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
height: 54px; position: relative;
right: 0; right: 0;
top: 0; top: 0;
color: $color-black;
height: 52px;
cursor: pointer;
width: 19%;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
@ -76,9 +108,18 @@
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid $color-black;
border-radius: 0; border-radius: 0;
.unstyled {
span {
font-weight: 700;
font-size: 12px;
line-height: 16px;
color: $color-black;
}
}
h3 { h3 {
color: #303030; color: #303030;
margin: 0 0 8px 0; margin: 0 0 8px 0;
@ -93,9 +134,11 @@
} }
i::before { i::before {
color: $color-black; color: $color-blue;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
height: 10px;
width: 17px;
} }
} }
} }
@ -112,17 +155,26 @@
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border: 1px solid #f0f0f0;
border: 1px solid $color-gray4; border-radius: 8px;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030; color: #292929;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 0px;
margin-top: 7px;
margin-bottom: 25px;
padding: 0; padding: 0;
&::after {
content: "Identificação";
font-size: 16px;
font-weight: 400;
line-height: 19px;
}
i::before { i::before {
fill: #303030; fill: #303030;
} }
@ -200,7 +252,7 @@
/* Shipping configurations */ /* Shipping configurations */
.ship-postalCode small a { .ship-postalCode small a {
color: #303030; color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }

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

@ -6,6 +6,7 @@
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
} }
@ -15,8 +16,9 @@
.cart { .cart {
border: 3px solid $color-gray3; border: 3px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; margin-bottom: 48px !important;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
@ -61,16 +63,27 @@
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
.shipping-date,
.price { .price {
color: #7d7d7d; color: #7d7d7d;
} }
.shipping-date {
font-size: 0 !important;
}
&::after {
content: "Frete";
color: #7d7d7d;
font-size: 14px;
line-height: 16.38px;
}
} }
} }
.summary-template-holder { .summary-template-holder {
border-top: none; border-top: none;
background: $color-white; background: $color-white;
margin-bottom: 48px;
} }
#go-to-cart-button a { #go-to-cart-button a {
@ -108,15 +121,22 @@
.cart-items { .cart-items {
.product-item { .product-item {
padding: 16px 0; padding: 16px 0;
.shipping-date.empty {
vertical-align: top;
.shipping-estimate-date {
color: #989898;
}
}
}
} }
th { th {
color: $color-black; color: $color-black;
padding: 0 0 16px; padding: 0 1 25px;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16.38px;
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
@ -124,10 +144,20 @@
display: none; display: none;
} }
} }
&.shipping-date {
font-size: 0;
&::after {
content: "Frete";
font-size: 14px;
line-height: 16.38px;
vertical-align: top;
}
}
} }
.product-image { .product-image {
height: auto; height: 60px;
padding: 0; padding: 0;
width: 60px; width: 60px;
@ -139,6 +169,7 @@
height: 60px; height: 60px;
max-width: 100%; max-width: 100%;
width: auto; width: auto;
margin-left: 11px;
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; height: 72px;
@ -155,15 +186,15 @@
} }
a { a {
color: $color-blue; color: $color-black;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14.04px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
&:hover { &:hover {
color: darken($color-blue, 10); color: darken($color-black, 10);
text-decoration: none; text-decoration: none;
} }
@ -179,9 +210,11 @@
} }
td.shipping-date { td.shipping-date {
color: $color-gray2; color: $color-29;
font-size: 12px; font-size: 14px;
line-height: 14px; line-height: 16px;
padding-top: 15px;
vertical-align: top;
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
@ -190,6 +223,7 @@
.product-price { .product-price {
min-width: 100px; min-width: 100px;
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -222,7 +256,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 6px auto 0; margin: 4px auto 0;
max-height: 38px; max-height: 38px;
max-width: 118px; max-width: 118px;
padding: 0; padding: 0;
@ -242,7 +276,7 @@
margin: 0 !important; margin: 0 !important;
padding: 8px 0; padding: 8px 0;
width: 38px; width: 38px;
color: $color-gray2; color: $color-black;
box-shadow: none; box-shadow: none;
@include mq(lg, max) { @include mq(lg, max) {
@ -253,27 +287,17 @@
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
color: $color-black; color: $color-blue;
height: 16px;
width: 16px;
display: block; display: block;
font-weight: 500; font-weight: 500;
padding: 1px 12px; padding: 1px 12px;
} }
} }
.icon-minus-sign {
&:before {
content: "-";
font-size: 16px;
}
}
.icon-plus-sign {
&:before {
content: "+";
font-size: 14px;
}
}
.item-quantity-change { .item-quantity-change {
@media (max-width: 979px) and (min-width: 768px) { @media (max-width: 979px) and (min-width: 768px) {
position: inherit; position: inherit;
@ -289,7 +313,10 @@
} }
} }
} }
.quantity-price {
padding-top: 13px;
vertical-align: top;
}
.quantity-price, .quantity-price,
.best-price { .best-price {
.icon-question-sign { .icon-question-sign {
@ -297,7 +324,7 @@
} }
span { span {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: bold !important;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
@ -311,6 +338,8 @@
} }
.item-remove { .item-remove {
vertical-align: top;
padding-top: 10px;
@media (max-width: 490px) { @media (max-width: 490px) {
top: 0; top: 0;
} }
@ -351,12 +380,13 @@
} }
.srp-main-title { .srp-main-title {
margin: 32px 0 12px; margin: 0 0 12px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 28px; font-weight: 400;
color: $color-gray2; line-height: 33px;
color: $color-black;
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
@ -374,7 +404,7 @@
background-color: $color-gray5; background-color: $color-gray5;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-gray2; color: $color-black;
font-size: 16px; font-size: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
line-height: 19px; line-height: 19px;
@ -385,6 +415,7 @@
&:hover { &:hover {
background-color: lighten($color-gray5, 5); background-color: lighten($color-gray5, 5);
cursor: pointer;
} }
&:active { &:active {
@ -404,32 +435,42 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
.srp-postal-code {
.srp-postal-code__form {
.ship-country {
display: none;
}
}
}
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black; background-color: $color-blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-black;
outline: none; outline: none;
width: 100%; width: 100%;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
cursor: pointer;
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-blue, 5);
cursor: pointer;
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: darken($color-blue, 5);
cursor: pointer;
} }
} }
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 16px;
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
@ -444,12 +485,12 @@
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid $color-black;
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: $color-blue; color: $color-black;
} }
label { label {
@ -470,7 +511,6 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
margin-bottom: 12px;
} }
input { input {
@ -485,7 +525,7 @@
} }
& ~ button { & ~ button {
background-color: $color-black; background-color: $color-blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-white;
@ -495,7 +535,6 @@
outline: none; outline: none;
position: absolute; position: absolute;
right: -150px; right: -150px;
top: 36px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 96px;
text-transform: uppercase; text-transform: uppercase;
@ -515,7 +554,7 @@
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: $color-blue; color: $color-black;
margin-top: 7px; margin-top: 7px;
} }
@ -605,11 +644,12 @@
span { span {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black;
text-decoration: none; text-decoration: none;
cursor: pointer;
font-weight: 400;
} }
} }
@ -630,13 +670,15 @@
} }
.coupon-label label { .coupon-label label {
margin-bottom: 12px; padding-left: 50px;
margin-bottom: 4px;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray2; color: $color-gray2;
cursor: none; cursor: none;
} }
@ -665,6 +707,7 @@
height: 34px; height: 34px;
padding: 0 12px; padding: 0 12px;
max-width: 160px; max-width: 160px;
display: block;
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -673,10 +716,10 @@
} }
button { button {
background: $color-black; background: $color-blue;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-black;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
@ -685,17 +728,18 @@
transition: all 0.2s linear; transition: all 0.2s linear;
width: 94px; width: 94px;
text-transform: uppercase; text-transform: uppercase;
text-shadow: none;
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
} }
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-blue, 5);
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: darken($color-blue, 5);
} }
} }
} }
@ -734,7 +778,7 @@
td.info, td.info,
td.monetary { td.monetary {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: bold;
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 21px;
color: $color-black; color: $color-black;
@ -776,36 +820,38 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black;
} }
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-green; background: $color-blue;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
display: block; display: block;
font-size: 0; font-size: 0;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
padding: 12px 19px; padding: 12px 19px;
cursor: pointer;
&:hover { &:hover {
background-color: darken($color-green, 5); background-color: darken($color-blue, 5);
color: $color-black;
} }
&:after { &:after {
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 700;
font-size: 13px; font-size: 13px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: $color-black;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;
text-shadow: none; text-shadow: none;
} cursor: pointer;
} }
} }
} }

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

@ -7,28 +7,53 @@
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
p {
display: none;
}
} }
&-title { &-title {
font-size: 20px; font-size: 24px;
height: 30px;
color: #000;
font-weight: 700;
line-height: 32.68px;
text-transform: uppercase;
margin-top: 0px !important;
} }
&-links { &-links {
display: flex;
justify-content: center;
.link-choose-products { .link-choose-products {
background: $color-black; background: $color-white;
border: none; border: 1px solid $color-black;
border-radius: 5px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
font-size: 0;
margin-top: 22px;
height: 40px;
letter-spacing: 0.05em;
padding: 0;
width: 32%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
&::after {
content: "Continuar comprando";
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
text-align: center; color: $color-black;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase; text-transform: uppercase;
width: 100%;
}
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);

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

@ -74,14 +74,32 @@ body {
font-size: 36px; font-size: 36px;
line-height: 42px; line-height: 42px;
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
} }
#orderform-title {
color: $color-black;
font-family: $font-family;
font-weight: 700;
font-size: 24px;
line-height: 32.68px;
margin: 17px 0 17px;
text-transform: uppercase;
}
#cart-title {
color: $color-black;
height: 33px;
font-weight: 700;
font-size: 24px;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.dropdown { .dropdown {
&__content { &__content {
&--closed { &--closed {

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

@ -1,8 +1,145 @@
// /* _header.scss */
// .headerCheckout {
// .container {
// width: auto !important;
// }
// &__wrapper {
// align-items: center;
// display: flex;
// justify-content: space-between;
// }
// &__logo {
// img {
// height: 52px;
// width: auto;
// }
// }
// &__safeBuy {
// span {
// align-items: center;
// display: flex;
// text-transform: uppercase;
// font-family: $font-family;
// font-style: normal;
// font-weight: normal;
// font-size: 12px;
// line-height: 14px;
// color: $color-gray;
// }
// i {
// margin-right: 8px;
// }
// }
// }
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
.container { .container {
width: auto !important; width: auto !important;
#progressBar {
width: 439px;
ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
} }
li .containerLi {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
}
li.central .containerLi {
align-items: center;
margin-left: 7px;
}
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";
font-size: 12px;
font-weight: 400;
line-height: 28px;
color: #000000;
width: 39.9103%;
@media (min-width: 2500px) {
font-size: 24px;
}
}
li.central {
width: auto;
}
li #progress-bar-circle-1,
li #progress-bar-circle-2,
li #progress-bar-circle-3 {
width: 12px;
height: 12px;
border: 1px solid #000000;
border-radius: 50%;
@media (min-width: 2500px) {
width: 24px;
height: 24px;
}
}
li #progress-bar-circle-1.active,
li #progress-bar-circle-2.active,
li #progress-bar-circle-3.active {
border: none;
background-color: #000000;
}
li .progress-bar-line-1 {
position: absolute;
left: 25%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid #000000;
}
li .progress-bar-line-2 {
position: absolute;
right: 21%;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid #000000;
}
}
.active {
background: #000000;
}
}
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
@ -11,25 +148,27 @@
&__logo { &__logo {
img { img {
height: 52px; width: 100%;
width: auto; height: 37.14px;
} }
} }
&__safeBuy { &__safeBuy {
span { span {
align-items: center; align-items: center;
display: flex; height: 17px;
color: $color-black;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 16px;
color: $color-gray; color: $color-gray;
} }
i { img {
width: 12px;
margin-right: 8px; margin-right: 8px;
} }
} }

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

@ -5,17 +5,16 @@ $font-family: "Open Sans", sans-serif;
$font-family-secundary: "Tenor Sans", sans-serif; $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */ /* Colors */
$color-black: #292929; $color-black: #000;
$color-white: #fff; $color-white: #fff;
$color-29: #292929;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-blue: #00c8ff;
$color-blue: #4267b2;
$color-green: #4caf50; $color-green: #4caf50;
@ -26,7 +25,7 @@ $grid-breakpoints: (
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
xl: 1200px xl: 1200px,
) !default; ) !default;
$z-index: ( $z-index: (
@ -34,5 +33,5 @@ $z-index: (
level2: 10, level2: 10,
level3: 15, level3: 15,
level4: 20, level4: 20,
level5: 25 level5: 25,
) !default; ) !default;