I've just spent the last few hours building a tag cloud panel for StoreSuite. It appears when you're shopping by brand, so it's contextually relevant - if you choose to view products grouped by brand, you'd want to see a tag cloud for the other brands, right?

The opinion around the office is split - in fact it seems that I'm the only one who likes tag clouds. All of the guys think they're just a "web 2.0 fad" but I disagree. I find them useful as a visual aid when browsing a site that uses them.

If you don't know what a tag cloud is, here's the brands tag cloud that I've just integrated into StoreSuite:



So in my demo of StoreSuite that I have installed on our development server, I have about 20 brands. Disney contains the most products, so it appears larger and bolder than the other brands. Apple, HSBC and Max's contain a medium amount of products, and Fox, Atari, HP, etc contain just a few products.

Do you use tag clouds when you're browsing around the web? How about when you shop? I bet not, because I couldn't find an online retailer that uses tag clouds. Of course StoreSuite will include the option to turn off tag clouds, in which case the brands tag cloud shown above would simply be replaced with a standard list of brands for browsing.

When I decided to build a tag cloud I had no idea where to start, but this ColdFusion article gave me all of the logic I needed. The process basically works like this:

• Get a list of brands from the database as well as how many products each brand has.
• Workout the minimum and maximum number of products per brand
• Workout the distribution of products per brand
• Give each brand a CSS class based on that distribution: smaller, small, medium, large or largest

Here's the PHP code I came up with to build our brands tag cloud:

$output = "";
$brands = array();
$min = 0;
$max = 0;
$diff = 0;
$distribution = 0;

// Get the number of brands
$query = "select count(brandid) as num from [|PREFIX|]brands";
$result = $GLOBALS["STS_CLASS_DB"]->Query($query);
$row = $GLOBALS["STS_CLASS_DB"]->Fetch($result);
$num_brands = $row["num"];

if($num_brands > 0 && $GLOBALS["TagCloudsEnabled"]) {
    // Hide the alternate side brand panel
    $GLOBALS["HideSideShopByBrandFullPanel"] = "none";

    // Get the 5 most popular brands
    $query = "select b.brandid, b.brandname, (select count(productid) from [|PREFIX|]products p where p.prodbrandid=b.brandid and p.prodvisible='1') as num from [|PREFIX|]brands b order by b.brandname asc";

    $result = $GLOBALS["STS_CLASS_DB"]->Query($query);

    while($row = $GLOBALS["STS_CLASS_DB"]->Fetch($result)) {
        $brands[] = $row;
    }

    // Find the minimum and maximum products per brand
    foreach($brands as $k=>$v) {
        // Is it the new minimum?
        if($min == 0)
            $min = $brands[$k]["num"];

        if($brands[$k]["num"] > 0 && $brands[$k]["num"] < $min)
            $min = $brands[$k]["num"];

        // Is it the new maximum?
        if($brands[$k]["num"] > $max)
            $max = $brands[$k]["num"];
    }

    // Is there only one brand?
    if($min == $max)
        $min = 0;

    // Workout the differences and distribution
    $diff = $max - $min;
    $distribution = (int)($diff / 3);

    foreach($brands as $k=>$v) {
        // Workout the tag size and output the brandname
        $num = $brands[$k]["num"];
        $class = "";

        if($num == $min)
            $class = "smallest";
        else if($num == $max)
            $class = "largest";
        else if($num > ($min + ($distribution*2)))
            $class = "large";
        else if($num > ($min + $distribution))
            $class = "medium";
        else
            $class = "small";

        // Create a snippet for the template system
        $GLOBALS["BrandLink"] = BrandLink($brands[$k]["brandname"]);
        $GLOBALS["BrandName"] = $brands[$k]["brandname"];
        $GLOBALS["TagClass"] = $class;
        $output .= $GLOBALS["STS_CLASS_TEMPLATE"]->GetSnippet("BrandCloudItem");
    }

    $GLOBALS["SNIPPETS"]["SideBrandTagCloud"] = $output;
}
else {
    // Hide the panel
    $GLOBALS["HideBrandTagCloudPanel"] = "none";
}