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

feat: adiciona função displayTitle

Browse Source
This commit is contained in:
Vitor Soares 2022-12-17 14:50:12 -03:00
parent 160bc43766
commit 19f8885e9e
5 changed files with 371 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
checkout/src/arquivos/js/components/CheckoutUI.js
View File

@ -32,13 +32,12 @@ export default class CheckoutUI {
toggleFooterDropdown(event) { toggleFooterDropdown(event) {
event.target.classList.toggle("closed"); event.target.classList.toggle("closed");
event.target.nextElementSibling.classList.toggle( event.target.nextElementSibling.classList.toggle("dropdown__content--closed");
"dropdown__content--closed"
);
} }
init() { init() {
this.configThumb(); this.configThumb();
this.displayTitle();
waitForEl(".product-image img", this.resizeImages.bind(this)); waitForEl(".product-image img", this.resizeImages.bind(this));
$(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this)); $(window).on("orderFormUpdated.vtex", this.resizeImages.bind(this));
} }
@ -56,14 +55,27 @@ export default class CheckoutUI {
resizeImages() { resizeImages() {
$(".product-image img").each((i, el) => { $(".product-image img").each((i, el) => {
const $el = $(el); const $el = $(el);
$el.attr( $el.attr("src", alterarTamanhoImagemSrcVtex($el.attr("src"), this.width, this.height));
"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";
}
}
}

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

@ -83,7 +83,7 @@
color: $color-black-500; color: $color-black-500;
width: 126px; width: 126px;
height: 50px; height: 50px;
right: -6px; right: 0px;
top: 0; top: 0;
@media (max-width: 490px) { @media (max-width: 490px) {
@ -114,6 +114,9 @@
h3 { h3 {
font-family: $font-family; font-family: $font-family;
color: $color-black-500; color: $color-black-500;
font-size: 12px;
line-height: 16px;
font-weight: 700;
margin: 0 0 10px 0; 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, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
@ -153,8 +175,18 @@
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
max-width: 297px;
width: 100%;
.accordion-heading { .accordion-heading {
.accordion-toggle-active {
i::after {
display: none;
}
}
span { span {
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 16px; font-size: 16px;
@ -165,18 +197,31 @@
padding: 0; padding: 0;
i::before { i::before {
display: none; content: "";
fill: #303030;
}
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 { a {
display: flex;
opacity: 0;
align-items: center; align-items: center;
background-color: #303030; background-color: #303030;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white-500; color: $color-white-500;
display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
} }
@ -189,27 +234,145 @@
.client-notice { .client-notice {
display: none; 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 { .ship-country {
label { display: none;
}
.ship-postalCode {
display: flex;
flex-direction: column;
label {
font-family: $font-family; font-family: $font-family;
color: $color-gray2; color: $color-gray2;
font-size: 12px; font-size: 12px;
line-height: 16px; 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, select,
input { input {
font-family: $font-family;
color: $color-gray9;
font-size: 14px;
line-height: 19px;
font-weight: 400;
border-radius: 5px; border-radius: 5px;
border: 1px solid $color-gray10; border: 1px solid $color-gray10;
box-shadow: none; 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 { .help.error {
display: none !important;
font-family: $font-family;
color: red; color: red;
font-size: 12px;
line-height: 16px;
font-weight: 700;
margin: 0;
padding: 0;
} }
} }
@ -220,6 +383,7 @@
color: $color-gray9; color: $color-gray9;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
padding-left: 8px;
} }
} }
@ -252,7 +416,7 @@
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
background: $color-blue-100; background: $color-blue-100;
margin: 45px 0 29px 0 !important; margin: 45px 0 29px 0;
text-transform: uppercase; text-transform: uppercase;
outline: none; outline: none;
border: none; border: none;
@ -268,20 +432,34 @@
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
p { p {
color: #303030; font-family: $font-family;
color: $color-gray2;
font-size: 14px; font-size: 14px;
font-weight: 500; line-height: 19px;
font-weight: 700;
padding-bottom: 10px;
} }
.shp-lean { .shp-lean {
border: 1px solid $color-gray4; border: 1px solid $color-gray10;
border-radius: 0; border-radius: 8px;
span {
font-family: $font-family;
color: $color-gray2;
font-size: 12px;
line-height: 16px;
font-weight: 400;
}
label { label {
font-family: $font-family;
color: $color-gray2;
font-size: 12px;
line-height: 16px;
background-color: $color-white-500; background-color: $color-white-500;
box-shadow: none; box-shadow: none;
color: #303030; padding: 14px 12px;
padding: 8px 12px;
svg path { svg path {
fill: #d8c8ac; fill: #d8c8ac;
@ -291,9 +469,13 @@
} }
.delivery-address-title { .delivery-address-title {
color: #303030; font-family: $font-family;
font-size: 14px; color: $color-gray2;
font-weight: 500; font-size: 12px;
line-height: 16px;
letter-spacing: 0.05px;
font-weight: 700;
padding-bottom: 10px;
} }
.shp-summary-group-info { .shp-summary-group-info {
@ -302,19 +484,34 @@
.address-summary { .address-summary {
background: none; background: none;
border-color: $color-gray4; border: 1px solid $color-gray10;
border-radius: 0; border-radius: 8px;
color: #303030;
padding: 12px; 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) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
color: #303030; font-family: $font-family;
font-weight: 500; color: $color-blue-100;
text-decoration: underline; font-size: 12px;
line-height: 16px;
font-weight: 400;
text-transform: lowercase;
text-decoration: none;
} }
} }
@ -331,11 +528,79 @@
padding-left: 16px; 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 { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; border-color: #303030;
color: #303030; color: #303030;
} }
.vtex-omnishipping-1-x-warning {
border-color: $color-gray10;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: $color-white-500; background-color: $color-white-500;
border: 1px solid $color-gray12; border: 1px solid $color-gray12;
@ -348,18 +613,52 @@
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 14px;
line-height: 19px; 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); // text-shadow: 1.3px 1px lighten($color-black-100, 50);
} }
.vtex-omnishipping-1-x-addressFormPart1 { .vtex-omnishipping-1-x-addressFormPart1 {}
.ship-country {
display: none; .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 { .hproduct {
@ -369,6 +668,9 @@
img { img {
transform: rotateY(180deg); transform: rotateY(180deg);
max-width: 60px;
width: 60px;
height: 60px;
} }
span { span {

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

@ -800,7 +800,7 @@
color: $color-gray2; color: $color-gray2;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
padding: 10px 0; margin: 25px 0;
} }
&.info { &.info {
@ -821,7 +821,7 @@
line-height: 25px; line-height: 25px;
font-weight: 700; font-weight: 700;
color: $color-black-100; color: $color-black-100;
padding: 14px 0 17px; padding: 0;
} }
} }
} }
@ -831,7 +831,8 @@
.cart-links-bottom { .cart-links-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 343px; max-width: 354px;
width: 100%;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;

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

@ -3,23 +3,33 @@ body .container-main.container-order-form .orderform-template.active {
border: 1px solid $color-gray5; border: 1px solid $color-gray5;
border-radius: 8px; border-radius: 8px;
// padding: 25px 17px; // padding: 25px 17px;
width: 32.3242%; height: 397px;
max-width: 331px;
width: 100%;
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
} }
.span4 {
padding: 24px 17px;
}
h2 { h2 {
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black-100; color: $color-black-100;
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
padding: 25px 0 0 17px !important;
text-align: initial; text-align: initial;
padding: 0; padding: 0;
margin-bottom: 34px; margin-bottom: 34px;
} }
.ask-for-geolocation-title {
padding: 0;
margin: 0;
}
.cart { .cart {
border: 0; border: 0;
padding: 0; padding: 0;

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

@ -9,6 +9,7 @@ $color-black-100: #292929;
$color-black-500: #000000; $color-black-500: #000000;
$color-white-500: #fff; $color-white-500: #fff;
$color-white-100: #f5f5f5;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
$color-gray2: #7d7d7d; $color-gray2: #7d7d7d;