Linking product image to sound file

[garywhitling]

Hi I've given myself a headache trying to work this out.

Does anyone know if it is possible to enable the product image to allow a hyperlink to work?

I have added a hyperlink to a swf (sound file) on each product page which works fine, but would like the customer to be able to click on the image link on the (sub category page) before actually going to the product page. to listen to the sound file first via a pop up.

Any suggestions or help would be much appreaciated

Gary ;)

[markscarts]

You asked for suggestions, this is an untested suggestion. I'm too busy to try it, or to debug if it soesn't work for you.

1. Give your swf files very short names, for instance a sample track of a song by B. B. King might be BBK001.swf

2. Use the name of the swf file as the product code when you add the product, so the product code would be BBK001 in this example.

3. In your skin files, find styleTemplates/content/viewProd.tpl

Look for this code:

	<p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p>

	

	<div style="text-align: center;"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" /></div>

	<!-- BEGIN: more_images -->

Add your link like this, replacing path_to_ with the first part of the path to where BBK001.swf is located :

<p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p>

<div style="text-align: center;"><a href="path_to_{TXT_PRODCODE}.swf"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" /></a></div>

<!-- BEGIN: more_images -->

[markscarts]

Well, haven't heard back, so I'll presume no one has tried this suggestion.

Also, I noticed that I had misunderstood, Gary wants to put these links in the viewCat page's product list rather than in the viewProd Product Detail page - but the same principle applies. Just assign the product code to the template back in includes/viewCat.inc.php, then in your skin's content/viewCat.tpl, use pretty much the same procedure I've outlined above. This should work for manually adding your sample files and product codes, but I still haven't had time to test it. If anybody decides to try this, please post the results :w00t:

[garywhitling]

Hi Mark,

Thanks for getting back. Sorry I haven't tried what you have suggested as I sort of worked around the problem by embedding the sound as a flash movie within to the product page so it automatically plays when the page is visited. This gave me the desired result and avoided "pop ups" which most people disable these days in any case.

Your suggestion has not been wasted as I will have a play with it when I find some time as I sure it will come in use on another project.

To see an example of what I have done please visit www.computertones.com

I have added the code below for anyone who wishes to try something similar.

====================================================================

<font face="Comic Sans MS" color="#ffffff">

<p align="center">

<table cellspacing="1" cellpadding="1" width="500" align="center" border="0">

<tbody>

<tr>

<td>

<p align="center"><font color="#ffff00" size="2">Please note: The quality of the preview&nbsp;sounds are low quality<br/>

<br align="center"/><font face="Comic Sans MS" color="#ffff00">The sound you will actually receive is a high quality sound file.</font></font><font size="2"><font face="Comic Sans MS" color="#ffff00"> </font></font></p>

<p align="center"><font size="2"><font face="Comic Sans MS">

<div><span class="499194217-26012006"><font face="Comic Sans MS" color="#ffff00" size="2">You will receive an email automatically after purchase where you will&nbsp;be given instructions on how to download your sound.</font></span><font size="2"><br/>

<font color="#000000"><object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="0" width="0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

<param value="26" name="_cx"/>

<param value="26" name="_cy"/>

<param value="" name="FlashVars"/>

<param value="DIRECTION TO YOUR FLASH MOVIE.swf" name="Movie"/>

<param value="DIRECTIONS TO YOUR FLASH MOVIE.swf" name="Src"/>

<param value="Window" name="WMode"/>

<param value="-1" name="Play"/>

<param value="-1" name="Loop"/>

<param value="High" name="Quality"/>

<param value="" name="SAlign"/>

<param value="-1" name="Menu"/>

<param value="" name="Base"/>

<param value="" name="AllowScriptAccess"/>

<param value="ShowAll" name="Scale"/>

<param value="0" name="DeviceFont"/>

<param value="0" name="EmbedMovie"/>

<param value="" name="BGColor"/>

<param value="" name="SWRemote"/>

<param value="" name="MovieData"/>

<param value="1" name="SeamlessTabbing"/>

<param value="0" name="Profile"/>

<param value="" name="ProfileAddress"/>

<param value="0" name="ProfilePort"/></object></font></font>&nbsp;</div>

<ul>

<li><font face="Comic Sans MS" color="#000000" size="2"><a href="java script:history.back(1)">Return to Previous Page</a></font> </li>

</ul>

</font></font></p>

<p>&nbsp;</p>

</td>

</tr>

</tbody>

</table>

</p>

</font>

[Guest sound]

Thanks but yea but no but...

Samples loading on same page in audio button ie. flash is my quest.

[Guest chrisjchrisj]

You asked for suggestions, this is an untested suggestion. I'm too busy to try it, or to debug if it soesn't work for you.

1. Give your swf files very short names, for instance a sample track of a song by B. B. King might be BBK001.swf

2. Use the name of the swf file as the product code when you add the product, so the product code would be BBK001 in this example.

3. In your skin files, find styleTemplates/content/viewProd.tpl

Look for this code:

	<p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p>

	

	<div style="text-align: center;"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" /></div>

	<!-- BEGIN: more_images -->

Add your link like this, replacing path_to_ with the first part of the path to where BBK001.swf is located :

<p class="txtContentTitle"><strong>{TXT_PRODTITLE}</strong></p>

<div style="text-align: center;"><a href="path_to_{TXT_PRODCODE}.swf"><img src="{IMG_SRC}" alt="{TXT_PRODTITLE}" border="0" /></a></div>

<!-- BEGIN: more_images -->

I used your suggestion. It works great except not only is the image on the Product View Page a link, but the words Product Information is a link, the word Price: is a link, and the also the product description is a link. Is there any way to tweak your suggestion so that only the image is the link, as was originally intended?

Thank you so much. I look forward to your reply.

[markscarts]

I need to have a link to your store so I can view the source. It sounds as though you left out the closing anchor tag, </a>

[Guest chrisjchrisj]

I need to have a link to your store so I can view the source. It sounds as though you left out the closing anchor tag, </a>

Thanks again. That was it, I "left out the closing anchor tag" as you suggested.

Much thanks

[markscarts]

You're welcome :dizzy: