the spanId is simply used to let the script know where to replace text.
Code:
document.getElementById('dAge').innerHTML = dife[0]+" years, "+dife[1]+" months, and "+dife[2]+" days";
As you can see, it has dAge in there. So everything in the dAge ID will be replaced by the output of the script, which happens to be the age. If it can't get a value, it'll just say as "5 months".
If you want to show something like "Junior (SKU name) is X old" then it would be this as the HTML/smarty part:
Code:
{$product.productid} is <span id="dAge">5 months</span> old
If you wish to style the name of the puppy you can add its own class/id such as this:
Code:
<span class="puppyCust">{$product.productid}</span> is <span id="dAge">5 months</span> old
Then you just need to add something like this in your css:
Code:
.puppyCust {
color: #ea55f3;
text-decoration: super flashing underline and overlines and everything else;
font-size: 400000px;
}