...)This has been an amazing resource to learn AbleCommerce, but I am stumped on this one. I am working with a client who needs:
- Add custom videos on the product detail pages.
If a video has been added through a new product admin field, display a link on the product detail page.
If clicked, display the video in a new layer above the page.
Videos are to run from YouTube.
Add a product template field to hold the video link
Use a script called Pretty Photo (http://www.no-margin-for-errors.com/pro ... box-clone/)
Upload unique js file to the js folder, since it can use 1.3.2 I left the existing jquery library as is
Upload supporting css
I used view source on a test product page to see if new js files were referenced. They were not. So I added a reference to unique required files to the scriptlet.master.
On the showproduct1 page I added the actual script required at the end of the page:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:2000, autoplay_slideshow: true});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:10000});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
<script src="~/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
To call the script for the lightbox effect there's a simple rel attribute used. I added this to the test product's product template field: <a href="http://www.youtube.com/watch?v=PK7xF1RGCQY" rel="prettyPhoto" title="">View Video</a>
In testing the link works... but instead of a lightbox style effect it opens a new page: http://209.242.46.51/tire-P1.aspx (view video link)
It should work like this: http://www.no-margin-for-errors.com/pro ... box-clone/ (Youtube content demo on the page)
I am still learning and have a long way to go, but since this is a product page I'm guessing something has to be done with the code behind so this can work? Does anyone know of a site already doing something like this with a product template field? Or am I overlooking a place it should also be referenced? Or am I trying to do something that might not work?
Thanks a bunch!!
Julie
