I got it working. My goal was to replace the Add to Cart with a button that would take a user to an external website to purchase the product. I also wanted to load an external image as the product image.
Here are the steps that I took:
1. Created a Property type with name of my external website.
2. Created a Property type Property called "External URL:"
3. Created a Property type Property called "Image URL:"
4. Created the product and added the external URL and Image URL.
I then added the following script to the PropertyViewerView.ascx file:
$(window).on('load', function() {
if ($('.hc-typedisplay')[0]) {
$('.hc-typedisplay').hide();
var u = $('.hc-typedisplay span').text().replace('External URL:', '');
var ar = u.split('Image URL:');
var uhtml = '<li><a href="' + ar[0] + '" target="_blank" class="dnnPrimaryAction">Purchase Options</li>';
$("meta[property='og:image']").attr('content', ar[1]);
$('#hcProductImage').attr('src',ar[1]);
$('#hcProductActions').html(uhtml);
}
});
Notes:
1. The script first checks to see if Property Type Properties are present. If they are, it proceeds. If you use additional Property Type Properties for other purposes, you will need to be more specific in your validation.
2. There is no way to collect each Property Type Property individually. I opted to use the hc-typedisplay class to collect the Property Type Properties. I could have drilled down to hc-propertyvalue class but both values are concatenated upon collection and thus I did not have a delimiter to split.
3. Upon collecting the Property Type Properties, I then use the External URL to replace the Add to Cart button with a button styled link. I then use the Image URL to replace the "missing" product image src.
4. I am using Hotcakes under DNN and thus I am using the dnnPrimaryAction class to display my link as a button.
5. Obviously the script will need to be re-inserted if Hotcakes is updated.