Demo Version Upsell Products (V6) CHANGE LOG 10-01-06 Amended Act_ProductImage.html patch to allow for single quotes in file names (ugh!). 27-01-05 Amended horizontal layout templates to allow for easier control over alignment. Changed files: Upsell_Horizontal_Main_ProductLine.html, Upsell_Horizontal_Secondary_ProductLine.html 25-07-04 Tidied 24-07-04 code. Affected files - upsellsupport.js, Upsell_AddToCart_ExtendedInfo.html 24-07-04 Added code to Upsell_AddToCart_ExtendedInfo.html to disable unwanted popup call on product image click. 13-07-04 Added Custom Property UPSELLIMAGEMAXHEIGHT to limit height of upsell images. Added horizontal layout of Upsell products below main. 04-04-04 Moved Popup JavaScript to popupsupport.js, changed Upsell_AddToCart_ExtendedInfo.html to suit. Removed rendundant CUSTOMVAR:SINGLEADD code. INTRODUCTION This extension will add a vertical sidebar to a Main Product into which you can display very brief details of a number of "Upsell" products. If you click these products images then a popup page is displayed containing full product details, prompts, attributes, etc and an Add to Cart button. The upsell products can be unique or duplicates of existing products (via copy and paste). The normal product image is used on the upsell list and is automatically scaled down to a pre-set maximum width to allow for compact display. It will be shown full size on the popup page. INSTALLATION ************************************************************** In Actinic go to Advanced / Custom Properties and click the "+" sign to create Custom Properties ************************************************************** UPSELLMESSAGE UPSELLIMAGEWIDTH UPSELLIMAGEMAXHEIGHT ************************************************************** In Design / Options / Site Defaults / Properties Click the "+" sign and set UPSELLMESSAGE to "Related products" (if using business uncheck "Searchable" and check "Use as CUSTOMVAR) Click the "+" sign and set UPSELLIMAGEWIDTH to "75" (if using business uncheck "Searchable" and check "Use as CUSTOMVAR) Click the "+" sign and set UPSELLIMAGEMAXHEIGHT to "75" (or whatever you need) (if using business uncheck "Searchable" and check "Use as CUSTOMVAR) ************************************************************** ************************************************************** Replace (in Site1) the file ProductTemplates.ini (or amend existing file by adding the Upsell... lines) with:- ************************************************************** [Templates] Act_ProductLine.html=One product per row, image on left Act_ProductLineRight.html=One product per row, image on right Act_ProductLineLarge.html=Large image on the left Act_ProductLineTable.html=No image, laid out in rows Act_ProductLineTextOnly.html=Description only, useful for inserting messages Act_ProductLineTextAndTitle.html=Product name and description only. Upsell_Main_ProductLine.html=Upsell main product - Secondary products to right Upsell_Horizontal_Main_ProductLine.html=Upsell main product - Secondary products below Upsell_Secondary_ProductLine.html=Upsell secondary product - to right of Main Upsell_Horizontal_Secondary_ProductLine.html=Upsell secondary product - below Main [Act_ProductLine.html] Preview=preview_imageleft.bmp [Act_ProductLineRight.html] Preview=preview_imageright.bmp [Act_ProductLineLarge.html] Preview=preview_imagelarge.bmp [Act_ProductLineTable.html] Preview=preview_table.bmp [Act_ProductLineTextOnly.html] Preview=preview_textonly.bmp [Act_ProductLineTextAndTitle.html] Preview=preview_textandtitle.bmp ************************************************************** Replace (in Site1) the file ExtendedTemplates.ini (or amend existing file by adding the Upsell... line) with:- ************************************************************** [Templates] Act_ExtendedInfo.html=Name and info text displayed right of image Act_ExtendedInfoImageAbove.html=Name and info text displayed below image Act_ExtendedInfoLeftText.html=Name and info text displayed left of image Act_ExtendedInfoNoName.html=No name shown, info text below image Act_ExtendedInfoNoName2.html=No name shown, info text right of image Act_ExtendedInfoNoName3.html=No name shown, info text left of image Upsell_AddToCart_ExtendedInfo.html=Upsell popup product [Act_ExtendedInfo.html] Preview=preview_extinfo.bmp [Act_ExtendedInfoImageAbove.html] Preview=preview_extinfo_imagetop.bmp [Act_ExtendedInfoLeftText.html] Preview=preview_extinfo_lefttext.bmp [Act_ExtendedInfoNoName.html] Preview=preview_extinfo_noname.bmp [Act_ExtendedInfoNoName2.html] Preview=preview_extinfo_noname2.bmp [Act_ExtendedInfoNoName3.html] Preview=preview_extinfo_noname3.bmp ************************************************************** Make file (in Site1) upsellsupport.js from the following:- ************************************************************** // START UPSELL SUPPORT (amended 25-07-04) var inupsell = false; var inmain = false; var inpopup = false; function startupsellmain(){ // start of main product that contains upsell items if ( inmain ) { document.write(''); } inmain = true; inupsell = false; } function startnormal(){ // start of normal product if ( inmain ) { document.write(''); } inmain = false; inupsell = false; } function showimage(thisimage){ // display product image (scale down big upsell images // parse e.g. Alt text if ( inupsell ) { var imgbits = thisimage.match(/(.*)HEIGHT=(\d*) WIDTH=(\d*)(.*)/); if ( imgbits != null ) { if ( imgbits[3] > upsellimagewidth ) { var sdown = upsellimagewidth / imgbits[3]; imgbits[2] = Math.floor(imgbits[2] * sdown); imgbits[3] = upsellimagewidth; } if ( imgbits[2] > upsellimagemaxheight ) { sdown = upsellimagemaxheight / imgbits[2]; imgbits[2] = upsellimagemaxheight; imgbits[3] = Math.floor(upsellimagewidth * sdown); } document.write(imgbits[1] + 'HEIGHT=' + imgbits[2] + ' WIDTH=' + imgbits[3] + imgbits[4]); } } else { if ( inpopup ) thisimage = '' + thisimage + ''; // fix unnwanted link on popup pages document.write(thisimage); } } // END UPSELL SUPPORT ************************************************************** Make file (in Site1) popupsupport.js from the following:- ************************************************************** // START POPUP WITH ADD TO CART SUPPORT var noreferrer = false; var oktosubmit = false; var singleadd = false; function setitup(prodref) { var undef; // use unique name from source window as target if ( opener ) { if ( opener.WindowName ) document.forms.popform.target = opener.WindowName; // Netscape needs the long-winded name // look through all parent forms 'till one containing field SID var of = opener.document.forms; var i = of.length - 1; for ( var j = 0; j <= i; j++) { var k = of[j].length - 1; for ( var l = 0; l <= k; l++) { if ( of[j].elements[l].name == 'PU_' + prodref ) { // patch in values from calling page if ( of[j].SINGLEADD ) singleadd = true; return false; } } } } // should never get here but... alert("Cannot find product." + "\nMake sure that the main page is still displaying the product and try again." + "\n( not found in Product Template)"); setTimeout("window.close()",2000); // defer the window close for Netscape & Opera return false; } function doit() { alert('Add to cart not available in Demo Version'); setTimeout("window.close()",500); // defer the window close for Netscape & Opera return oktosubmit; } // END POPUP WITH ADD TO CART SUPPORT ************************************************************** Edit Act_Primary.html (in Site1) and add the following immediately under the line (NOTE if you have created any Custom Primary Templates then change these as well) ************************************************************** ************************************************************** Replace (or edit) Act_ProductBody.html to include the upsell support lines:- **************************************************************
NETQUOTEVAR:PARENTSECTIONSTOP NETQUOTEVAR:SECTIONLISTTOP NETQUOTEVAR:TOPSECTIONSEPARATOR NETQUOTEVAR:CARTERRORLISTXML NETQUOTEVAR:HIDDENINPUT
NETQUOTEVAR:PRODUCTBULK
NETQUOTEVAR:SINGLEADD
NETQUOTEVAR:BOTTOMSECTIONSEPARATOR NETQUOTEVAR:SECTIONLISTBOTTOM ************************************************************** Make file (in Site1) Upsell_Main_ProductLine.html from the following:- ************************************************************** NETQUOTEVAR:INCLUDE Act_ProductSeparator.html NETQUOTEVAR:ENDSEPARATOR NETQUOTEVAR:PRODUCTFORMBEGIN
NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE NETQUOTEVAR:PRODUCTNAME NETQUOTEVAR:PRODUCTREF
NETQUOTEVAR:PRODUCTDESCRIPTION NETQUOTEVAR:EXTINFOLINK
NETQUOTEVAR:EXTINFOBUTTON
NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK NETQUOTEVAR:PRICEEXPLANATION
NETQUOTEVAR:PRODUCTPRICE NETQUOTEVAR:OTHERINFOPROMPT NETQUOTEVAR:DATEPROMPT

NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY

NETQUOTEVAR:ADDTOCARTBUTTON
NETQUOTEVAR:TEMPLATEENDXML
 
CUSTOMVAR:UPSELLMESSAGE
NETQUOTEVAR:PRODUCTFORMEND NETQUOTEVAR:NEXT ************************************************************** Make file (in Site1) Upsell_Secondary_ProductLine.html from the following:- ************************************************************** NETQUOTEVAR:ENDSEPARATOR NETQUOTEVAR:PRODUCTFORMBEGIN
NETQUOTEVAR:TEMPLATEBEGINXML
NETQUOTEVAR:PRODUCTIMAGE
NETQUOTEVAR:PRODUCTNAME
NETQUOTEVAR:EXTINFOLINKNETQUOTEVAR:EXTINFOBUTTON
NETQUOTEVAR:CARTERRORXML NETQUOTEVAR:TEMPLATEENDXML
NETQUOTEVAR:PRODUCTFORMEND NETQUOTEVAR:NEXT ************************************************************** Make file (in Site1) Upsell_Horizontal_Main_ProductLine.html from the following:- ************************************************************** NETQUOTEVAR:INCLUDE Act_ProductSeparator.html NETQUOTEVAR:ENDSEPARATOR NETQUOTEVAR:PRODUCTFORMBEGIN
NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE NETQUOTEVAR:PRODUCTNAME NETQUOTEVAR:PRODUCTREF
NETQUOTEVAR:PRODUCTDESCRIPTION NETQUOTEVAR:EXTINFOLINK
NETQUOTEVAR:EXTINFOBUTTON
NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK NETQUOTEVAR:PRICEEXPLANATION
NETQUOTEVAR:PRODUCTPRICE
NETQUOTEVAR:OTHERINFOPROMPT NETQUOTEVAR:DATEPROMPT

NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY

NETQUOTEVAR:ADDTOCARTBUTTON
NETQUOTEVAR:TEMPLATEENDXML

CUSTOMVAR:UPSELLMESSAGE
NETQUOTEVAR:PRODUCTFORMEND NETQUOTEVAR:NEXT ************************************************************** Make file (in Site1) Upsell_Horizontal_Secondary_ProductLine.html from the following:- ************************************************************** NETQUOTEVAR:ENDSEPARATOR NETQUOTEVAR:PRODUCTFORMBEGIN NETQUOTEVAR:TEMPLATEBEGINXML
NETQUOTEVAR:PRODUCTIMAGE
NETQUOTEVAR:PRODUCTNAME
NETQUOTEVAR:EXTINFOLINKNETQUOTEVAR:EXTINFOBUTTON NETQUOTEVAR:CARTERRORXML NETQUOTEVAR:TEMPLATEENDXML
NETQUOTEVAR:PRODUCTFORMEND NETQUOTEVAR:NEXT ************************************************************** Make file (in Site1) Upsell_AddToCart_ExtendedInfo.html from the following:- ************************************************************** NETQUOTEVAR:PAGETITLE NETQUOTEVAR:PAGEHEADER
NETQUOTEVAR:PRODUCTIMAGE NETQUOTEVAR:PRODUCTNAME NETQUOTEVAR:PRODUCTREF
NETQUOTEVAR:PRODUCTDESCRIPTION
NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK NETQUOTEVAR:PRICEEXPLANATION
NETQUOTEVAR:PRODUCTPRICE NETQUOTEVAR:OTHERINFOPROMPT NETQUOTEVAR:DATEPROMPT NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY
NETQUOTEVAR:ADDTOCARTBUTTON
NETQUOTEVAR:TEMPLATEENDXML
************************************************************** Replace (or edit) Act_ProductImage.html to include the upsell support lines:- ************************************************************** ************************************************************** In all your usual Product Templates (Act_ProductLine.html, etc), immediately after the line "<-- Insert HTML for the top of the individual product -->" add the following:- ************************************************************** ************************************************************** That's installation done. ************************************************************** OPERATION (1) To make an existing product a Main product that will include Upsell items go to Product Details / General / Product Layout and select "Upsell main product". (2) Now create (or copy and paste) a product immediately below this Main product that you want to display as an Upsell product. (3) In this Upsell product go to Product Details / General / Product Layout and select "Upsell secondary product". (4) Go to the Extended Information tab and check "Generate Popup Page" and "Clicking Product Image". At Popup Page / Layout select "Upsell popup product". Repeat from (2) for as many additional Upsell products as you like. NOTES There is no need to create any Extended Information Text or Image for the Upsell product as all this information is taken from the normal product details. If your Upsell product has no main image then you can use the Extended Info Button or Text Link instead.