Announcement

Collapse
No announcement yet.

Code available to change Product Images on selection

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Code available to change Product Images on selection

    I've been working on some HTML code that enables you to specify two Custom Properties i.e. PICOPTION1, PICNAME1 which as you may guess enables you to specify an image source and also a name for the image.

    Then on an extended product page for a product you can select the design of the product and the product image will change to reference the design selected e.g. you could have different colours for a product and an image to reference each colour.

    What I'd like is to post this code somewhere where other users of Actinic can make use of it if they require. Is there anywhere where I can post this code on the Actinic Community. Alternatively if there's not I'd be more than happy to forward this code via e-mail to anyone who's interested in this.

    Best Regards

    Elfyn
    iBabyShop.co.uk
    Tags: None
    #2
    Hi Elfyn

    By all means post the code up here, if it proves useful, then we can add it to our knowledge base for other users to view and try out.
    ________

    Comment

      #3
      Uploaded Code

      I've amended the Act_ExtendedInfoImageAbove.html to the following (please see below), this allows you to specify two Custom Properties i.e. PICOPTIONS and PICNAME. Where PICOPTIONS is the name of the source file for the image, and PICNAME is the name for that product e.g. Red Sunglasses etc.

      In the code I've entered a total of 10 Custom Properties i.e. PICOPTIONS1, ..2, ..3 and PICNAME1, ..2, ..3 etc

      It's up to you if you want to add more simply cut and paste the previous code for the other Properties.

      We are currently undertaking a major re-design of our web site which includes this code, and hopefully we'll have it uploaded this weekend where you can see the code in action.


      <HTML>
      <HEAD>
      <script language="javascript">

      function showimage()
      {
      if(!document.images)
      return
      document.images.pictures.src=document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
      }
      </script>

      <Actinic:WINDOW WIDTH="500" HEIGHT="500"/>
      <TITLE>NETQUOTEVAR:PAGETITLE NETQUOTEVAR:PAGEHEADER</TITLE>
      <Actinic:BASEHREF VALUE="NETQUOTEVAR:BASEHREF"/>
      <META NAME="ACTINICTITLE" CONTENT="NETQUOTEVAR:PAGEHEADER">
      <META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
      <LINK REL=STYLESHEET HREF="actinic.css">
      </HEAD>
      <BODY NETQUOTEVAR:BGIMAGE NETQUOTEVAR:BGCOLOR text="NETQUOTEVAR:FGCOLOR" NETQUOTEVAR:LINKCOLOR NETQUOTEVAR:VLINKCOLOR NETQUOTEVAR:ALINKCOLOR>
      <table border=0 cellpadding="5" cellspacing="1">
      <tr>
      <td align="left"><b><span class="font7">NETQUOTEVAR:PRODUCTNAME</span></b><br>
      NETQUOTEVAR:PRODUCTREF</td>
      </tr>
      <tr><td width="500" colspan="3" bgcolor="#6666FF" height="1"></td></tr>
      </table>

      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS') document.write('<td><p align="left"><img src="../Images/CUSTOMVAR:PICOPTIONS" name="pictures"></td>');
      </script>

      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS') document.write('<td width="100%"><form name="mygallery"><p><span class="font9">Select Design (see image above):</span><select name="picture" size="1" class="font9" onChange="showimage()"><option selected value="CUSTOMVAR:PICOPTIONS">CUSTOMVAR:PICNAME</option>');
      </script>
      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS1') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS1">CUSTOMVAR:PICNAME1</option>');
      </script>

      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS2') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS2">CUSTOMVAR:PICNAME2</option>');
      </script>
      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS3') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS3">CUSTOMVAR:PICNAME3</option>');
      </script>
      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS4') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS4">CUSTOMVAR:PICNAME4</option>');
      </script>
      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS5') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS5">CUSTOMVAR:PICNAME5</option>');
      </script>
      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS6') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS6">CUSTOMVAR:PICNAME6</option>');
      </script>
      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS7') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS7">CUSTOMVAR:PICNAME7</option>');
      </script>
      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS8') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS8">CUSTOMVAR:PICNAME8</option>');
      </script>
      <script language=JavaScript>
      if('CUSTOMVAR:PICOPTIONS9') document.write('<option value="../Images/CUSTOMVAR:PICOPTIONS9">CUSTOMVAR:PICNAME9</option>');
      </script>
      <script language=JavaScript>
      if ('CUSTOMVAR:PICOPTIONS') document.write('</select></p></form></td></table>');
      </script>
      <table border=0 cellpadding="10" cellspacing="1"><tr><td align="left" valign="top"><img src="NETQUOTEVAR:INFOIMAGE" width=NETQUOTEVAR:INFOIMAGEWIDTH height=NETQUOTEVAR:INFOIMAGEHEIGHT>
      </tr></table>
      <table>
      <tr>
      <td>NETQUOTEVAR:PRODUCTPRICE</td>
      </tr>
      <tr>
      <td span class="font8"><strong>Features:</strong></span></td>
      </tr>
      <tr>
      <td valign="top"><span class="font9">NETQUOTEVAR:INFOTEXT</span></td>
      </tr>
      <tr>
      <td valign="top">
      <script language="JavaScript">
      <!--
      if (window.name != "ActPopup")
      {
      document.write('NETQUOTEVAR:CLOSELINK');
      }
      else
      {
      document.write('<A class="font9" HREF="javascript:window.close();"><img border="0" src="close.gif"></A>');
      }
      window.focus();
      //-->
      </script>
      </td>
      </tr>
      </table>

      </BODY>
      </HTML>


      Best Regards

      Elfyn
      iBabyShop.co.uk

      Comment

        #4
        You might want to compact things as below (I've put all the JvaScript in one place and made it easier to alter the Image path).

        You can also post the patch within [c o d e] and [ \ c o d e] tags to preserve the formatting.
        Code:
        <script language=JavaScript>
<!-- 
function writecode(image, name){
 if ( image != '' ) document.write('<option value="../Images/' + image + '">' + name + '</option>');
}
function showimage(){
 if(!document.images) return;
 document.images.pictures.src=document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}

if('CUSTOMVAR:PICOPTIONS') document.write('<td><p align="left"><img src="../Images/CUSTOMVAR:PICOPTIONS" name="pictures"></td>');
if('CUSTOMVAR:PICOPTIONS') document.write('<td width="100%"><form name="mygallery"><p><span class="font9">Select Design (see image above):</span><select name="picture" size="1" class="font9" onChange="showimage()"><option selected value="CUSTOMVAR:PICOPTIONS">CUSTOMVAR:PICNAME</option>');
writecode('CUSTOMVAR:PICOPTIONS1','CUSTOMVAR:PICNAME1');
writecode('CUSTOMVAR:PICOPTIONS2','CUSTOMVAR:PICNAME2');
writecode('CUSTOMVAR:PICOPTIONS3','CUSTOMVAR:PICNAME3');
writecode('CUSTOMVAR:PICOPTIONS4','CUSTOMVAR:PICNAME4');
writecode('CUSTOMVAR:PICOPTIONS5','CUSTOMVAR:PICNAME5');
writecode('CUSTOMVAR:PICOPTIONS6','CUSTOMVAR:PICNAME6');
writecode('CUSTOMVAR:PICOPTIONS7','CUSTOMVAR:PICNAME7');
writecode('CUSTOMVAR:PICOPTIONS8','CUSTOMVAR:PICNAME8');
writecode('CUSTOMVAR:PICOPTIONS9','CUSTOMVAR:PICNAME9');
if ('CUSTOMVAR:PICOPTIONS') document.write('</select></p></form></td></table>');
//-->
</script>
        Also remind the users that the PICNAME's shouldn't contain the single quote character and that all images should be the same size.

        You may also have an implementation problem in that this code may work when previewing but the images will be in the acatalog folder when uploaded to the server and not in an Images one. The simple solution would be to remove all "../Images/" and keep these variables in the Site folder. Alternatively you can amend the code to include the "../Images" path if the page URL contains "PreviewHTML". E.g.
        Code:
        <script language=JavaScript>
<!-- 
var imagepath = '';
if ( location.href.indexOf('PreviewHTML') > -1 ) imagepath = '../Images/';

function writecode(image, name){
 if ( image != '' ) document.write('<option value="' + imagepath + image + '">' + name + '</option>');
}
function showimage(){
 if(!document.images) return;
 document.images.pictures.src=document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}

if('CUSTOMVAR:PICOPTIONS') document.write('<td><p align="left"><img src="' + imagepath + 'CUSTOMVAR:PICOPTIONS" name="pictures"></td>');
if('CUSTOMVAR:PICOPTIONS') document.write('<td width="100%"><form name="mygallery"><p><span class="font9">Select Design (see image above):</span><select name="picture" size="1" class="font9" onChange="showimage()"><option selected value="CUSTOMVAR:PICOPTIONS">CUSTOMVAR:PICNAME</option>');
writecode('CUSTOMVAR:PICOPTIONS1','CUSTOMVAR:PICNAME1');
writecode('CUSTOMVAR:PICOPTIONS2','CUSTOMVAR:PICNAME2');
writecode('CUSTOMVAR:PICOPTIONS3','CUSTOMVAR:PICNAME3');
writecode('CUSTOMVAR:PICOPTIONS4','CUSTOMVAR:PICNAME4');
writecode('CUSTOMVAR:PICOPTIONS5','CUSTOMVAR:PICNAME5');
writecode('CUSTOMVAR:PICOPTIONS6','CUSTOMVAR:PICNAME6');
writecode('CUSTOMVAR:PICOPTIONS7','CUSTOMVAR:PICNAME7');
writecode('CUSTOMVAR:PICOPTIONS8','CUSTOMVAR:PICNAME8');
writecode('CUSTOMVAR:PICOPTIONS9','CUSTOMVAR:PICNAME9');
if ('CUSTOMVAR:PICOPTIONS') document.write('</select></p></form></td></table>');
//-->
</script>
        Norman

        PS there may be typos in the above.
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment

        Previous template Next
        Working...
        X