Coast Creative provides Adobe Business Catalyst e-commerce web development services and SEO for website
designers and online business owners.

Expanding Business Catalyst Product Information Using jQuery and a Comma Delimited List

Friday, January 18, 2013

For those of you that have struggled with the limited number of custom fields available per product in a Business Catalyst online shop, here's a quick and easy way to multiply your options.

By using a comma delimited list in place of a normal string you can create lists of values representing anything you can dream up including specification data or other information only attributes.

The markup is just a standard issue HTML unordered list, with a class of spec-list in this case, and the jQuery doesn't hurt at all!

// render the BC custom1 tag and store in a variable as a string
var specList = "{tag_custom1}";

// split the rendered string using the commas as delimiters and store in an array
var specListArray = specList.split(",");

// cycle through the list with jQuery - if a value exists in an array element append it to the related list item, otherwise do nothing
$("ul.spec-list > li").each(function(index, value){
    if(specListArray[index] != "") $(this).append(" " + specListArray[index]);

All in all a simple and effective way to get more bang for your buck out of a BC product item.