feat: Cria carrinho desktop telas menores que 2500 pixels
This commit is contained in:
parent
10ca937a13
commit
dae23fd6af
@ -3,10 +3,11 @@ import { Container } from "m3-utils";
|
||||
import "slick-carousel";
|
||||
import Header from "./components/Header";
|
||||
import Footer from "./components/Footer";
|
||||
import Cart from "./components/Cart";
|
||||
|
||||
const m3Checkout = new Container({
|
||||
appName: "m3-checkout",
|
||||
components: [CheckoutUI, Header, Footer],
|
||||
components: [CheckoutUI, Header, Footer, Cart],
|
||||
});
|
||||
|
||||
m3Checkout.start();
|
||||
|
||||
43
checkout/src/arquivos/js/components/Cart.js
Normal file
43
checkout/src/arquivos/js/components/Cart.js
Normal file
@ -0,0 +1,43 @@
|
||||
// import waitForEl from "../helpers/waitForEl";
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Cart {
|
||||
constructor() {
|
||||
this.init();
|
||||
this.events();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.removeCartTitle();
|
||||
this.mutationObserver();
|
||||
}
|
||||
|
||||
events() {}
|
||||
|
||||
async selectors() {
|
||||
this.cartTitle = await waitElement("#cart-title");
|
||||
this.cart = await waitElement(".summary-template-holder .row-fluid");
|
||||
}
|
||||
|
||||
mutationObserver() {
|
||||
this.observer = new MutationObserver(this.handleMutationObserver.bind(this));
|
||||
this.config = { childList: true, attributes: true };
|
||||
this.observer.observe(this.cart, this.config);
|
||||
}
|
||||
|
||||
handleMutationObserver(mutations) {
|
||||
mutations.forEach((mutation) => {
|
||||
console.log(mutation);
|
||||
if (mutation.type === "attributes" && mutation.attributeName === "style")
|
||||
if (this.cart.style.display === "flex")
|
||||
this.cartTitle.classList.remove("hide-cart-title");
|
||||
else if (this.cart.style.display === "none") this.removeCartTitle();
|
||||
});
|
||||
}
|
||||
|
||||
removeCartTitle() {
|
||||
if (this.cartTitle.style.display === "block")
|
||||
this.cartTitle.classList.add("hide-cart-title");
|
||||
}
|
||||
}
|
||||
@ -4,12 +4,27 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
h2 {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.hide {
|
||||
#cart-title {
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 17px 0 16px;
|
||||
position: absolute;
|
||||
padding-left: 128px;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: $black-400;
|
||||
}
|
||||
|
||||
.hide-cart-title {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -84,4 +99,294 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-cart {
|
||||
margin: 66px 128px 43px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.cart-template-holder,
|
||||
.cart-links-bottom {
|
||||
margin: 0 128px;
|
||||
}
|
||||
|
||||
.cart-template-holder {
|
||||
.cart {
|
||||
margin: 0;
|
||||
border: 1px solid $gray-100;
|
||||
border-radius: 5px;
|
||||
padding: 16px 29px 16px 16px;
|
||||
|
||||
.cart-items {
|
||||
thead {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
|
||||
th {
|
||||
padding-bottom: 17px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.shipping-date,
|
||||
.product-price {
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-date::after {
|
||||
content: "Frete";
|
||||
}
|
||||
|
||||
.product-price::after {
|
||||
content: "Unidade";
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
font-family: $font-family-secundary;
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.product-name a,
|
||||
.shipping-estimate-date,
|
||||
.list-price {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.shipping-estimate-date,
|
||||
.list-price {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.product-name a,
|
||||
input {
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
input,
|
||||
.best-price {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.best-price,
|
||||
.total-selling-price {
|
||||
color: $black-400;
|
||||
}
|
||||
|
||||
.best-price {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
padding: 0 11px;
|
||||
margin: 0;
|
||||
transform: translateY(30%);
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
|
||||
.item-quantity-change {
|
||||
background-color: $blue-500;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.item-quantity-change-decrement,
|
||||
.item-quantity-change-increment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
transform: rotate(90deg);
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background-color: $white-500;
|
||||
}
|
||||
}
|
||||
|
||||
.item-quantity-change-increment::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background-color: $white-500;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.total-selling-price {
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.icon-remove::before {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-template-holder {
|
||||
margin-top: 48px;
|
||||
|
||||
.row-fluid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart-more-options {
|
||||
margin: 0 0 0 128px;
|
||||
|
||||
.srp-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.srp-main-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 11px;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
.srp-description {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $gray-600;
|
||||
max-width: 276px;
|
||||
}
|
||||
|
||||
.srp-data,
|
||||
.shp-open-options {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shp-open-options {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $black-500;
|
||||
background-color: $gray-200;
|
||||
padding: 12px 41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-totalizers {
|
||||
margin: 0 128px 0 0;
|
||||
|
||||
.coupon-data {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.link-coupon-add span {
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
.totalizers-list {
|
||||
td {
|
||||
padding: 0 0 10px 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
}
|
||||
|
||||
.Discounts {
|
||||
td {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
.info,
|
||||
.monetary {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 0;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-family: $font-family;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-links-bottom {
|
||||
padding: 0;
|
||||
align-self: flex-end;
|
||||
|
||||
.link-choose-more-products-wrapper {
|
||||
margin: 17px 0 15px;
|
||||
|
||||
.link-choose-more-products {
|
||||
margin: auto;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-place-order {
|
||||
border-radius: 8px;
|
||||
background-color: $blue-500;
|
||||
|
||||
&::after {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family;
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,13 @@ $font-family-secundary: "Tenor Sans", sans-serif;
|
||||
$black-400: #292929;
|
||||
$black-500: #000;
|
||||
|
||||
$gray-100: #f0f0f0;
|
||||
$gray-200: #ededed;
|
||||
$gray-400: #c4c4c4;
|
||||
$gray-500: #989898;
|
||||
$gray-600: #7d7d7d;
|
||||
|
||||
$blue-500: #00c8ff;
|
||||
|
||||
$white-500: #fff;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user