Custom CSS & Javascript: Product Names with Attributes
Custom CSS & Javascript: Product Toggles
September 16, 2025Give your online ordered items more descriptive names!
Product attribute lists are a great way to give your users an array of customization options but when multiple similar items are ordered it can be difficult to tell them apart without clicking in to see the department items.
This blog post will show you how to add the product attribute selections to the item name field, which can then append to the end of the product's name. This can allow you to search the items by attributes selected, and also just makes it more descriptive to your users working from the items in Production. Let’s get descriptive!
The JavaScript
In Online Ordering > Portals & Themes > Select your Theme then click Customize this Theme.
Copy the code below and paste it into the Custom JavaScript:
function dmLoad() {
// hide itemNameField
$(".product-itemname-container").hide()
const itemNameField = $(".product-itemname-container #txtValue");
const attributeFields = $("[id^=ddlProductAttributeList]")
// set event listener for each attribute field
attributeFields.on("change", function() {
// clear attributeName list and rebuild on each change
const attributeNames = [];
attributeFields.unbind().each((idx, attributeField) => {
const attributeFieldText = $(attributeField).children("option:selected").text()
// check if option is selected, if not, skip
if (attributeFieldText !== 'Select an Option')
attributeNames.push($(attributeField).children("option:selected").text())
})
// build the itemNameField string and subsitute it as the value
let itemName = ''
attributeNames.map((attributeName, idx) => {
const comma = idx === (attributeNames.length - 1) ? '' : ',';
const space = idx !== 0 ? ' ' : ''
itemName += `${space}${attributeName}${comma}`
})
itemNameField.val(itemName)
})
}
Please note: there can only be one "function dmLoad" per portal & theme combined so if one already exists on your portal or theme, copy the code inside this function, then paste it before the closing bracket of your existing function.
See it in action!
This video shows how the code behaves without the Item Name field hidden. You can see the attributes being added to the field when you make a selection:
And this one shows how it will look to your end user with the Item Name field hidden (so that the field is not confusing to them):
Making it Product-Specific
If you would like to use this only on certain products, you can do so by copying the code below and replacing the text "PRODUCT-ID-HERE" with the actual product's ID
if ($(body).hasClass("product-template-PRODUCT-ID-HERE")) {
$(".product-itemname-container").hide()
const itemNameField = $(".product-itemname-container #txtValue");
const attributeFields = $("[id^=ddlProductAttributeList]")
// set event listener for each attribute field
attributeFields.on("change", function() {
// clear attributeName list and rebuild on each change
const attributeNames = [];
attributeFields.unbind().each((idx, attributeField) => {
const attributeFieldText = $(attributeField).children("option:selected").text()
// check if option is selected, if not, skip
if (attributeFieldText !== 'Select an Option')
attributeNames.push($(attributeField).children("option:selected").text())
})
// build the itemNameField string and subsitute it as the value
let itemName = ''
attributeNames.map((attributeName, idx) => {
const comma = idx === (attributeNames.length - 1) ? '' : ',';
const space = idx !== 0 ? ' ' : ''
itemName += `${space}${attributeName}${comma}`
})
itemNameField.val(itemName)
})
}
To find your product's ID you can look at the URL for it in the MIS or on the portal, see examples below:
Annnnnd done! Your product(s) should now be adding their attribute selections to the end of the item's name!
If you have any ideas you'd like to see us tackle email our support team at support@docketmanager.ca
