Custom CSS & Javascript: Tips and Tricks – Part 2
Feature Request Content: Version 3.14
August 20, 2019
Our New Look!
September 10, 2019Additional Tips
We are thankful to our DocketManager Customers that work hard to customize their portals and share what they learn with us.
Marian Varga who works for Mountain View Printers shared the first tip below with us which helps users see which checkout terms are required.
Jon Best who works at Sharper Printing wanted to hide pricing on their browsable portal until the user was logged in and came up with a way to do so using Custom Javascript.
Jon also came up with the third solution which removes the "Select an option" line from each dropdown on your portal.
If you missed Part 1, Part 2 or Part 3 check them out as well
Marian Varga who works for Mountain View Printers shared the first tip below with us which helps users see which checkout terms are required.
Jon Best who works at Sharper Printing wanted to hide pricing on their browsable portal until the user was logged in and came up with a way to do so using Custom Javascript.
Jon also came up with the third solution which removes the "Select an option" line from each dropdown on your portal.
If you missed Part 1, Part 2 or Part 3 check them out as well
Mark fields as optional or required on checkout page
Make required and optional fields clearer for users to understand with this simple trick.
Enter this code in your portal's Custom CSS:
.checkout-billing-address .form-group:nth-child(n+2):nth-child(-n+3) label:after {
content: " (Optional)";
color: red;
}
.checkout-billing-address .form-group:nth-child(n+4):nth-child(-n+8) label:after {
content: " *";
color: red;
}
.checkout-billing-address .form-group:nth-child(10) label:after {
content: " (Optional)";
color: red;
}
div#ContentPlaceHolder1_ContentPlaceHolder1_pnlShippingLocation .form-group:nth-child(n+2):nth-child(-n+3) label:after {
content: " (Optional)";
color: red;
}
div#ContentPlaceHolder1_ContentPlaceHolder1_pnlShippingLocation .form-group:nth-child(n+4):nth-child(-n+8) label:after {
content: " *";
color: red;
}
.checkout-orderdetails-container .form-group:nth-child(2) label:after {
content: " *";
color: red;
}
.checkout-orderdetails-container .form-group:nth-child(n+4):nth-child(-n+7) label:after {
content: " *";
color: red;
}
div#ContentPlaceHolder1_ContentPlaceHolder1_pnlAuthNetSaveCard .form-group:nth-child(1) label:after {
content: " (Optional)";
color: red;
}
#ContentPlaceHolder1_ContentPlaceHolder1_pnlPurchaseOrder label:after {
content: " (Optional)";
color: red;
}
Your Checkout Page will now have these red information additions to each field.
The Purchase Order # field can be changed to required if the users are set to "Requires PO" by adding this css:
#ContentPlaceHolder1_ContentPlaceHolder1_pnlPurchaseOrder label:after {
content: " *";
color: red;
}
Hide pricing until user is logged in
Ensure users can not see pricing without an account with this custom Javascript.
Enter this code in your portal's Custom Javascript:
function dmLoad() {
if(!$("#body").is('[class*="customer"]')){
$("#ContentPlaceHolder1_ContentPlaceHolder1_upnlQuantity").append('<div id = "guest-login-message">PLEASE LOGIN TO VIEW PRICING.</div>');
$(".price").empty();
$(".page-productdetails .product-price-container").empty();
$(".page-productlist .product-price-container, .page-productlist .product-quantities-container").empty();
$(".page-productlist .product-action").css("display","none");
$(".product-button-container").empty();
$(".product-quantity-container").empty();
}
};
Your product pages will now only show pricing if the user is logged in. You can see this in action on Sharper Printing's portal shown in the image below:
Remove "Select an Option" from dropdown lists
Sharper Printing used this to control what the first selection would be and the initial price of product items however this could be done on a page by page basis for other reasons such as force selecting a default payment option on checkout.
Enter this code in your portal's Custom Javascript:
function dmLoad() {
$("option[value='']").remove();
};
Any dropdown on your portal will now no longer have the "Select an Option" default line.
To change this on a page-by-page basis you can target the class of the page. Furthermore, individual dropdowns could be targeted if not all dropdowns on the page need the change applied.
In the example below, we have targeted the checkout page (with it's body class) and the Payment dropdown (by finding the ID applied to it by right clicking > inspect element on the area).
In the example below, we have targeted the checkout page (with it's body class) and the Payment dropdown (by finding the ID applied to it by right clicking > inspect element on the area).
function dmLoad() {
$(".page-checkout #ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_ddlPaymentMethod option[value='']").remove();
};
