I just tested on 4.3.1 but it shouldn't be terribly different (if at all) for 4.2
In the admin area, setup 3 new fields. Birthmonth, Birthday, Birthyear. The default value doesn't matter since each product (dog) will have a unique value. Order value doesnt matter either, and make sure the value isnt shown to the customer unless you want it as so.
Once you get that setup, add the birthday values for one dog (just to test).
Open product.tpl (your product page) and find this line:
Code:
{include file="customer/main/product_details.tpl"}
If you include the javascript before it, it will show before the product description and such. Included after, it will be after the buy buttons.
If you want it in between those elements, open that file (product_details.tpl).
I don't know how your website is, so I don't know what to look for. Just play around with adding in text between </div><div> or even inside to get the right positioning.
Once you get the area you want it in, add the code into the template. You could just make a seperate .tpl altogether and include that to make the code nicer to look at and modify possibly.
Looking at the code, you will need to put {literal} at the start of the code and {/literal} at the end since smarty uses the {} brackets and so does javascript.
Once you add the code, you can pull the variables from the database using this:
{$extra_fields.0.field_value}
$extra_fields is infact the name of the array. Before I misinterpretted it as the table name.
0 is the array it looks in (0 is the first array, not 1). This is the value you would change depending on what array # your values are put into.
field_value is the value of the field.
I'm not 100% sure why you want a calculator for this though, as the one you provided is for humans and I think you would want a dog age calculator since their age compared to humans is done in a different way?
Edit:
I went ahead and made a new .tpl since you may not have known what to edit.
Look for the 3 queries on the array I mentioned earlier and change them as needed. Its in the HTML part near the bottom.
in dog.tpl I have this... Keep in mind, I've removed some stuff.
Code:
{literal}
<script type="text/javascript">
var startyear = "1950";
var endyear = "2010";
var dat = new Date();
var curday = dat.getDate();
var curmon = dat.getMonth()+1;
var curyear = dat.getFullYear();
function checkleapyear(datea)
{
if(datea.getYear()%4 == 0)
{
if(datea.getYear()% 10 != 0)
{
return true;
}
else
{
if(datea.getYear()% 400 == 0)
return true;
else
return false;
}
}
return false;
}
function DaysInMonth(Y, M) {
with (new Date(Y, M, 1, 12)) {
setDate(0);
return getDate();
}
}
function datediff(date1, date2) {
var y1 = date1.getFullYear(), m1 = date1.getMonth(), d1 = date1.getDate(),
y2 = date2.getFullYear(), m2 = date2.getMonth(), d2 = date2.getDate();
if (d1 < d2) {
m1--;
d1 += DaysInMonth(y2, m2);
}
if (m1 < m2) {
y1--;
m1 += 12;
}
return [y1 - y2, m1 - m2, d1 - d2];
}
function calage()
{
var calday = document.birthday.day.options[document.birthday.day.selectedIndex].value;
var calmon = document.birthday.month.options[document.birthday.month.selectedIndex].value;
var calyear = document.birthday.year.options[document.birthday.year.selectedIndex].value;
if(curday == "" || curmon=="" || curyear=="" || calday=="" || calmon=="" || calyear=="")
{
alert("please fill all the values and click go -");
}
else
{
var curd = new Date(curyear,curmon-1,curday);
var cald = new Date(calyear,calmon-1,calday);
var diff = Date.UTC(curyear,curmon,curday,0,0,0) - Date.UTC(calyear,calmon,calday,0,0,0);
var dife = datediff(curd,cald);
document.birthday.age.value=dife[0]+" years, "+dife[1]+" months, and "+dife[2]+" days";
var monleft = (dife[0]*12)+dife[1];
var secleft = diff/1000/60;
var hrsleft = secleft/60;
var daysleft = hrsleft/24;
document.birthday.months.value=monleft+" Month since your birth";
document.birthday.daa.value=daysleft+" days since your birth";
document.birthday.hours.value=hrsleft+" hours since your birth";
document.birthday.min.value=secleft+" minutes since your birth";
var as = parseInt(calyear)+dife[0]+1;
var diff = Date.UTC(as,calmon,calday,0,0,0) - Date.UTC(curyear,curmon,curday,0,0,0);
var datee = diff/1000/60/60/24;
document.birthday.nbday.value=datee+" days left for your next birthday";
}
}
</script>
{/literal}
<form name="birthday">
Date<select name="day" size="1">
<script type="text/javascript">
document.write("<option value={$extra_fields.1.field_value}>{$extra_fields.1.field_value}</option>");
</script></select>
Month<select name="month" size="1">
<script type="text/javascript">
document.write("<option value={$extra_fields.0.field_value}>{$extra_fields.0.field_value}</option>");
</script></select>
Year<select name="year" size="1">
<script type="text/javascript">
document.write("<option value={$extra_fields.2.field_value}>{$extra_fields.2.field_value}</option>");
</script></select>
<input name="start" onclick="calage()" value="Calculate" type="button"><br>
<input name="age" size="40" value="Result"><br>
You have been living for:<br>
<table style="border:solid green 1px"> <tr><td>In months:</td><td><input name="months" size="30"></td></tr> <tr><td>In days:</td><td><input name="daa" size="30"></td></tr> <tr><td>In hours:</td><td><input name="hours" size="30"></td></tr> <tr><td>In minutes:</td><td><input name="min" size="30"></td></tr> <tr><td colspan=2>Your next birthday will be in:</td></tr> <tr><td colspan=2><input name="nbday" size="40"><a href="http://www.hscripts.com" style="color:#3D366F;text-decoration:none;cursor:pointer;font-size:10px">hscripts.com</a></td></tr> </table> </form>
Then you can include it via
{include file="location/of/dog.tpl"}