forked from M3-Academy/m3-academy-template-checkout
feature/page-checkout #2
@ -32,13 +32,12 @@ export default class CheckoutUI {
|
||||
toggleFooterDropdown(event) {
|
||||
event.target.classList.toggle("closed");
|
||||
|
||||
event.target.nextElementSibling.classList.toggle(
|
||||
"dropdown__content--closed"
|
||||
);
|
||||
event.target.nextElementSibling.classList.toggle("dropdown__content--closed");
|
||||
}
|
||||
|
||||
init() {
|
||||
this.configThumb();
|
||||
this.displayTitle();
|
||||
waitForEl(".product-image img", this.resizeImages.bind(this));
|
||||
$(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this));
|
||||
}
|
||||
@ -56,14 +55,27 @@ export default class CheckoutUI {
|
||||
resizeImages() {
|
||||
$(".product-image img").each((i, el) => {
|
||||
const $el = $(el);
|
||||
$el.attr(
|
||||
"src",
|
||||
alterarTamanhoImagemSrcVtex(
|
||||
$el.attr("src"),
|
||||
this.width,
|
||||
this.height
|
||||
)
|
||||
);
|
||||
$el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async displayTitle() {
|
||||
const orderForm = await window.vtexjs.checkout.getOrderForm();
|
||||
const items = orderForm.items.length;
|
||||
const cartId = document.querySelector("#cart-title");
|
||||
|
||||
$(window).on("orderFormUpdated.vtex", (evt, oF) => {
|
||||
if (oF.items.length <= 0) {
|
||||
cartId.style.display = "none";
|
||||
} else {
|
||||
cartId.style.display = "block";
|
||||
}
|
||||
if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") {
|
||||
cartId.style.display = "none";
|
||||
}
|
||||
});
|
||||
if (items === 0) {
|
||||
cartId.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -83,7 +83,7 @@
|
||||
color: $color-black-500;
|
||||
width: 126px;
|
||||
height: 50px;
|
||||
right: -6px;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
@ -114,6 +114,9 @@
|
||||
h3 {
|
||||
font-family: $font-family;
|
||||
color: $color-black-500;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
@ -145,6 +148,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.client-profile-data {
|
||||
.accordion-heading {
|
||||
.accordion-toggle {
|
||||
span {
|
||||
font-size: 0 !important;
|
||||
|
||||
&::after {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black-100;
|
||||
content: "Identificação";
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-data,
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
@ -153,8 +175,18 @@
|
||||
border: 1px solid $color-gray3;
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
max-width: 297px;
|
||||
width: 100%;
|
||||
|
||||
.accordion-heading {
|
||||
|
||||
.accordion-toggle-active {
|
||||
|
||||
i::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 16px;
|
||||
@ -165,18 +197,31 @@
|
||||
padding: 0;
|
||||
|
||||
i::before {
|
||||
display: none;
|
||||
fill: #303030;
|
||||
content: "";
|
||||
|
||||
}
|
||||
|
||||
i::after {
|
||||
content: "";
|
||||
display: block;
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
align-items: center;
|
||||
background-color: #303030;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white-500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
}
|
||||
@ -189,27 +234,145 @@
|
||||
|
||||
.client-notice {
|
||||
display: none;
|
||||
color: $color-black-100;
|
||||
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// content: "Identificação";
|
||||
// font-family: $font-family-secundary;
|
||||
// font-size: 16px;
|
||||
// line-height: 19px;
|
||||
// color: $color-black-500;
|
||||
// top: 0;
|
||||
// }
|
||||
}
|
||||
|
||||
p {
|
||||
label {
|
||||
.ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ship-postalCode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label {
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 700;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $color-gray8;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 270px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-family: $font-family;
|
||||
color: $color-black-100;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
label {
|
||||
|
||||
// input {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// &.checkbox {
|
||||
// position: relative;
|
||||
// padding-left: 26px;
|
||||
|
||||
// .newsletter-text {
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// content: "";
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// border: 1px solid $color-gray11;
|
||||
// border-radius: 3px;
|
||||
|
||||
// }
|
||||
|
||||
// .newsletter-text:checked + .newsletter-text::before {
|
||||
// // content: '';
|
||||
// background: $color-blue-100;
|
||||
// }
|
||||
// }
|
||||
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-go-to-payment {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
font-family: $font-family;
|
||||
color: $color-gray9;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 400;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $color-gray10;
|
||||
box-shadow: none;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.input-xlarge {
|
||||
max-width: 271px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.input-small {
|
||||
max-width: 115px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#client-first-name,
|
||||
#client-document {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid $color-gray11;
|
||||
padding-right: 8px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.help.error {
|
||||
display: none !important;
|
||||
font-family: $font-family;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -220,6 +383,7 @@
|
||||
color: $color-gray9;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -252,7 +416,7 @@
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
background: $color-blue-100;
|
||||
margin: 45px 0 29px 0 !important;
|
||||
margin: 45px 0 29px 0;
|
||||
text-transform: uppercase;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -268,20 +432,34 @@
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryGroup {
|
||||
p {
|
||||
color: #303030;
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 19px;
|
||||
font-weight: 700;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.shp-lean {
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray10;
|
||||
border-radius: 8px;
|
||||
|
||||
span {
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
background-color: $color-white-500;
|
||||
box-shadow: none;
|
||||
color: #303030;
|
||||
padding: 8px 12px;
|
||||
padding: 14px 12px;
|
||||
|
||||
svg path {
|
||||
fill: #d8c8ac;
|
||||
@ -291,9 +469,13 @@
|
||||
}
|
||||
|
||||
.delivery-address-title {
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05px;
|
||||
font-weight: 700;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.shp-summary-group-info {
|
||||
@ -302,19 +484,34 @@
|
||||
|
||||
.address-summary {
|
||||
background: none;
|
||||
border-color: $color-gray4;
|
||||
border-radius: 0;
|
||||
color: #303030;
|
||||
border: 1px solid $color-gray10;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
float: left;
|
||||
margin: 8px 9.4px 0 0;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
background-position: 8px 9px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #303030;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
font-family: $font-family;
|
||||
color: $color-blue-100;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
text-transform: lowercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -331,11 +528,79 @@
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingText {
|
||||
border-right: 1px solid $color-gray10;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingTextLabel {
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.05px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-svg {
|
||||
opacity: 0;
|
||||
|
||||
&::before {
|
||||
border: 1px solid $color-gray8;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressSummary {
|
||||
span {
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-address {
|
||||
label {
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.input-large {
|
||||
border: 1px solid $color-gray10;
|
||||
border-radius: 8px;
|
||||
max-width: 294px;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.input-xlarge {
|
||||
max-width: 294px;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-ask-for-geolocation-cta {
|
||||
color: $color-white-500;
|
||||
background: $color-blue-100;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
border-color: #303030;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-warning {
|
||||
border-color: $color-gray10;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: $color-white-500;
|
||||
border: 1px solid $color-gray12;
|
||||
@ -348,18 +613,52 @@
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionInactive {
|
||||
font-family: $font-family;
|
||||
color: $color-gray8;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
border-radius: 100px;
|
||||
// text-shadow: 1.3px 1px lighten($color-black-100, 50);
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressFormPart1 {
|
||||
.ship-country {
|
||||
display: none;
|
||||
.vtex-omnishipping-1-x-addressFormPart1 {}
|
||||
|
||||
.ship-number {
|
||||
.input-mini {
|
||||
max-width: 270px;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ship-complement {
|
||||
.input-large {
|
||||
max-width: 270px;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ship-receiverName {
|
||||
.input-xlarge {
|
||||
max-width: 270px;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.hproduct {
|
||||
|
||||
@ -369,6 +668,9 @@
|
||||
|
||||
img {
|
||||
transform: rotateY(180deg);
|
||||
max-width: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
@ -800,7 +800,7 @@
|
||||
color: $color-gray2;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
padding: 10px 0;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -821,7 +821,7 @@
|
||||
line-height: 25px;
|
||||
font-weight: 700;
|
||||
color: $color-black-100;
|
||||
padding: 14px 0 17px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -831,7 +831,8 @@
|
||||
.cart-links-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 343px;
|
||||
max-width: 354px;
|
||||
width: 100%;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
|
||||
@ -3,23 +3,33 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
border: 1px solid $color-gray5;
|
||||
border-radius: 8px;
|
||||
// padding: 25px 17px;
|
||||
width: 32.3242%;
|
||||
height: 397px;
|
||||
max-width: 331px;
|
||||
width: 100%;
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.span4 {
|
||||
padding: 24px 17px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black-100;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
padding: 25px 0 0 17px !important;
|
||||
text-align: initial;
|
||||
padding: 0;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.ask-for-geolocation-title {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -9,6 +9,7 @@ $color-black-100: #292929;
|
||||
$color-black-500: #000000;
|
||||
|
||||
$color-white-500: #fff;
|
||||
$color-white-100: #f5f5f5;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
$color-gray2: #7d7d7d;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user