Custom CSS & Javascript: Customer, Product, and Page-Specific Changes
Getting Creative with Portal Home Pages!
July 23, 2019
New Members on DocketManager Sales Team!
August 9, 2019Customer Specific Changes
When using custom CSS or Javascript to change something for a particular customer, the customer can be targeted so that only they can see the change thus removing the need to make them their own portal.
To find the class to target a specific customer, log into the portal with your admin credentials and assume the identity of one of the contacts belonging to that customer.
The class is amended to the html tag, to find it, right click on the page and select the "Inspect" button. It is located near the top of the inspect window (usually 3rd row down) and copy the class pertaining to the customer. Any customer id can also be found in the url when viewing their customer page on the MIS.
To find the class to target a specific customer, log into the portal with your admin credentials and assume the identity of one of the contacts belonging to that customer.
The class is amended to the html tag, to find it, right click on the page and select the "Inspect" button. It is located near the top of the inspect window (usually 3rd row down) and copy the class pertaining to the customer. Any customer id can also be found in the url when viewing their customer page on the MIS.
Referencing the changes made in Part 1 of this series, simply add the customer class before any other classes in order to limit the customization on the portal to only be visible by contacts belonging to that customer.
function dmLoad(){
$(".customer-b64dacc9-00be-418e-8640-8e8bc67a4bd3 .page-productdetails .form-group label:contains(Notes)").text("Notes / Details");
}
Product Specific Changes
You can also target a specific product with CSS or Javascript if the changes you would like to make do not apply to every product in the portal.
To find the class with which to target a specific product, navigate to the product page.
The class is amended to the html tag, to find it, right click on the page and select the "Inspect" button. It is located near the top of the inspect window (usually 3rd row down) and copy the class pertaining to the product template. Any product id can also be found in the url when viewing a product item on the MIS.
To find the class with which to target a specific product, navigate to the product page.
The class is amended to the html tag, to find it, right click on the page and select the "Inspect" button. It is located near the top of the inspect window (usually 3rd row down) and copy the class pertaining to the product template. Any product id can also be found in the url when viewing a product item on the MIS.
Referencing the changes made in Part 1 of this series, simply add the Product class before any other classes in order to limit the customization on the portal to only that specific product.
In the event that the changes apply to more than one product (yet not all of them) you may add multiple product classes by separating the class groups with a comma as seen below.
In the event that the changes apply to more than one product (yet not all of them) you may add multiple product classes by separating the class groups with a comma as seen below.
function dmLoad(){
$(".product-template-cbdecc61-6c23-40b2-a017-c39704e76ac3 .page-productdetails .form-group label:contains(Notes), .product-template-jhdj34-6c23-40b2-a017-c39704334f3 .page-productdetails .form-group label:contains(Notes),").text("Notes / Details");
}
Please use the custom function "function dmLoad() { }" as shown in these examples in lieu of the commonly used "function pageLoad() { }". Only one pageLoad function can be present and we have one set in the back end.
Page Specific Changes
Targeting specific portal pages is another option. An example of this would be to hide the "reorder this item" button on the Order Status page of your portal. These buttons do not have their own CSS classes so we must target the page so buttons on other pages are not affected.
To find the class with which to target a specific page, navigate to the page, right click and select the "Inspect" button. Find the tag near the top of the inspect window (usually 3rd row down) and copy the class pertaining to the page.
To find the class with which to target a specific page, navigate to the page, right click and select the "Inspect" button. Find the tag near the top of the inspect window (usually 3rd row down) and copy the class pertaining to the page.
Next, we must target the buttons within each product container with their CSS classes as seen below and enter "display: none" to hide them on the page.
These can be found by inspecting the elements on the page.
.page-orderstatus .single-product-container .btn {
display: none;
}
Now the Reorder button is hidden on your Order Status page.
