Custom CSS & Javascript: Inventory
Custom CSS & Javascript: Product Fields
February 22, 2023
Analysis Report: Customer
April 13, 2023Diving deeper into inventory on portals.
Currently, customer goods inventory levels on portals are only accessible on the "Inventory" page and are also purely informational. We've had customer requests to add inventory counts to the product pages and also make them a bit more functional so we thought we'd show how this can be done by adding a bit of code to your portals.
Please note, in order for the code supplied below to work:
• The product and customer good need to be named exactly the same.
• The contact's on the portal need to have an online security role that allows access to the "Inventory" page, however that page does not need to be added to the portal's menu.
Please note, in order for the code supplied below to work:
• The product and customer good need to be named exactly the same.
• The contact's on the portal need to have an online security role that allows access to the "Inventory" page, however that page does not need to be added to the portal's menu.
Display inventory levels on their products
Do your customers want to see the inventory levels of the item they are purchasing without having to visit the "Inventory" page on their portal? Look no further! By adding the code below, the inventory levels will display under the product thumbnail so that your users have all the information they need to confidently place their order.
To get started, add the following to your theme or portal's Custom Javascript box:
$(document).ready(function() {
//Add Inventory section/table to the page, hide for now
$('<div class="inventory"><h3>Inventory:</h3><table class="table table-striped table-condensed inventory-table"><thead><th>Name</th><th>On Order</th><th>On Hand</th><th>Available</th></thead><tbody></tbody></table></div>').appendTo('.page-productdetails #upnlPreviews').hide();
});
function dmLoad() {
// Check if this product is listed in Inventory, if so run function
var inventoryItem = $(".page-productdetails #lblItemName").text();
var portalIdentity = new URLSearchParams(window.location.search).get('PortalId');
$(".page-productdetails .inventory-table tbody").load(("/Inventory.aspx?PortalId=" + portalIdentity + " .inside-page-content tr:contains('" + inventoryItem + "')"), null, function() {
// Set variable "availableQuantity" to text of last column in inventory table
$(".page-productdetails .inventory-table td:last-child").addClass("available");
// If this product is listed in Inventory, the class "available" will be on the page, set conditions
if ($(".available")[0]) {
// Show Inventory section/table
$(".inventory").show();
}
});
}
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.
Next, add this code to the Custom CSS box:
Next, add this code to the Custom CSS box:
.disabled2 {
pointer-events: none !important;
cursor: not-allowed !important;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
That's all folks! Your inventory levels will now show on their corresponding products.
Show just the Available level
If your users don't need to see the quantity On Order or On Hand, simply add the following custom CSS to hide those fields and only show the amount Available:
.inventory-table th:nth-child(2),
.inventory-table th:nth-child(3),
.inventory-table td:nth-child(2),
.inventory-table td:nth-child(3) {
display: none;
}
Only allow available products to be ordered
Want to take this a huge step further? With the use of more Custom Javascript, we can also disallow products from being added to the cart if the quantity the user is attempting to order is larger than the amount available. This can help ensure that you will only sell the products you have available and can also reduce any issues with back-ordered goods. To implement this functionality, add the following to the Custom Javascript box on your theme or portal (if you have used the example above, remove the code and use this instead):
$(document).ready(function() {
//Add Inventory section/table to the page, hide for now
$('<div class="inventory"><h3>Inventory:</h3><table class="table table-striped table-condensed inventory-table"><thead><th>Name</th><th>On Order</th><th>On Hand</th><th>Available</th></thead><tbody></tbody></table></div>').appendTo('.page-productdetails #upnlPreviews').hide();
});
function dmLoad() {
// Disable Add to Cart by default
$("#btnAddToCart").addClass("disabled2");
// Check if this product is listed in Inventory, if so run function
var inventoryItem = $(".page-productdetails #lblItemName").text();
var portalIdentity = new URLSearchParams(window.location.search).get('PortalId');
$(".page-productdetails .inventory-table tbody").load(("/Inventory.aspx?PortalId=" + portalIdentity + " .inside-page-content tr:contains('" + inventoryItem + "')"), null, function() {
// Set variable "availableQuantity" to text of last column in inventory table
$(".page-productdetails .inventory-table td:last-child").addClass("available");
var availableQuantity = parseInt($(".inventory-table .available").text());
var quantity;
//Set variable "selectedQuantity" to either the selected quantity in table OR value of quantity field
if ($(".product-quantity-table")[0]) {
quantity = parseInt($('.product-quantity-table input:checked').closest("td").next('td').find('span').text());
} else {
quantity = parseInt($('#txtQuantity').val());
}
// If this product is listed in Inventory, the class "available" will be on the page, set conditions
if ($(".available")[0]) {
// Show Inventory section/table
$(".inventory").show();
// If the requested quantity is more than the available quantity, insert warning after disabled button
if (quantity > availableQuantity) {
$("#btnAddToCart").addClass("disabled2");
$("<div class='warning text-right'>The quantity selected is more than what we currently have available.</div>").insertAfter('#upnlPricing');
$("#btnAddToCart").val("Out of Stock");
// If not, enable the button and remove the warning
} else {
$("#btnAddToCart").removeClass("disabled2");
$(".warning").hide();
}
// If the item is not in Inventory, enable the add to cart button
} else {
$("#btnAddToCart").removeClass("disabled2");
}
});
}
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.
Next, add this code to the Custom CSS box:
Next, add this code to the Custom CSS box:
.disabled2 {
pointer-events: none !important;
cursor: not-allowed !important;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
.page-productlist .product-quantities-container,
.page-search .product-quantities-container,
.page-favorites .product-quantities-container {
display: none;
}
You're done! Visit any customer good product on your portal and enter a quantity that is more than what is available to see this functionality in action!
If you have any ideas for portal customizations you'd like to see us tackle or need help implementing any of this code, email our support team at support@docketmanager.ca
