Custom CSS & Javascript: Passwords & Pricing
Online Styling Ideas: Recap 2
July 10, 2024Super easy customizations that'll make life even easier!
Show Password
Isn't it so much simpler when you can view the password you are entering before you click submit?
So often digits are incorrectly typed and being able to double-check what you've entered can save time and clicks!
Adding this simple Show Password button is so easy it'll have you saying "that's it?!"
First, navigate to your portal settings page and click Customize this Portal, then locate the Custom Javascript box.
Lastly, paste the following code into the box:
function showPassword() {
var x = document.getElementById("txtPassword");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function dmLoad() {
$('<input type="checkbox" onclick="showPassword()"><span> Show Password</span>').insertAfter('.page-login .password-group');
}
And that's it!
Please note; there can only be one "function dmLoad" per portal so if one already exists on your theme, copy the code inside this function, then paste it before the closing bracket of your existing function.
Automatic Unit Pricing
Figuring out the price per piece can sometimes take brain power (or a calculator) that you don't currently have.
With this code, you can have a unit price displayed under the total price of the item that automatically updates as the quantity and other attributes are changed!
To get started, navigate to your portal settings page and click Customize this Portal, then locate the Custom Javascript box.
Copy & paste the following code into the box:
function dmLoad() {
if ($('body[class*="page-productdetails"]').length > 0) {
var total = $("#lblPrice").text();
var totalnumber = Number(total.replace(/[^0-9.-]+/g, ""));
if ($(".product-quantity-table")[0]) {
var quantity = $('.product-quantity-table input:checked').closest('td').next('td').find('span').text();
} else {
var quantity = $("#txtQuantity").val();
}
var unitprice = (totalnumber / quantity).toFixed(2);
$('<p class="unit-price"></p>').insertAfter('.product-button-container');
$('.unit-price').text('Unit Price (C$' + unitprice + ')');
$('.unit-price').slice(1).hide();
}
}
If a different currency (or none) is needed, the "C" before the dollar sign in the fourth-to-last line of code can be changed or deleted.
Lastly, copy & paste the following code into the Custom CSS box:
.unit-price {
clear: both;
padding: 0px 15px;
}
Done! Didn't we say these would be easy?
Please note; there can only be one "function dmLoad" per portal so if one already exists on your theme, copy the code inside this function, then paste it before the closing bracket of your existing function.
If you have any ideas you'd like to see us tackle email our support team at support@docketmanager.ca
