V6 Product Thumbnail Images in checkout.  Detailed instructions - tested with 6.1.5

Updated 29-08-04 Amended and tested with 6.1.5

Updated 04-02-03 Previous versions failed if Extended Info Popup used image as link.
		 Now using Javascript to pass product reference into the Product Image template.
		 Compact HTML/CGI is no longer required.
		 Now using ":" instead of ";" as fragment separator in image values.

Updated 04-02-03 Misnamed NETQUOTEVAR in notes re editing additional ProductLine templates.
                 Reminder that Compact HTML/CGI is required in Catalog Design / Options / Misc.

Warning.   This patch involves changes to the following files.  

Act_ProductLine.html (and any additional custom product templates in use)
also any additional Act_...ProductLine... html templates that contains NETQUOTEVAR:PRODUCTIMAGE
Act_ProductImage.html
Act_OrderDetail.html
Act_ShoppingCartXML.html
Shoppingcart.pl 
ActinicOrder.pm
Cart.pm

Make sure you back them up first and that you use a text editor (e.g. www.editpad.com).
Remember that changes to the Theme may overwrite the .html files and you'll have to redo the patch.

The instructions below are for themes based on BusinessCSS (tested with theme "Curves").
And should be easy to alter for other themes.  Only the 'html files change between themes.  
The Perl (.pm and .pl files) are the same throughout.

The patch works by adding a hidden field to each product containing it's image name,
scale down factor and size.   
This is generated by the combined efforts of the ProductLine and ProductImage templates

This image name is now accessible to the ShoppingCart.pl script where it is detected, displayed 
and passed on to the cart session file (using Cart.pm) where it is stored along with other product details.
Subsequent viewings of the cart use ActinicOrder.pm which is able to recover the image filename from the cart.

The display of the image is controlled by NETQUOTEVAR:NORCATIMAGE variables in Act_OrderDetail.html
and Act_ShoppingCartXML.html.   The layout of these may be modified if required.

Also user modifiable is the document.write line in Act_ProductImage.html:-

here the fragment " align=left " may be altered (in conjunction with NETQUOTEVAR:NORCATIMAGE above)
to vary the cart image display. Leave at least one space in here, or a space either side of your code.

Also you can adjust the CUSTOMVAR CARTIMAGESCALE within Actinic / Options / Site Defaults / Properties
to alter the scale down factor the images will be displayed at.


PATCHING INSTRUCTIONS


In Actinic go to Advanced / Custom Properties and click on the + sign to add the property

CARTIMAGESCALE

OK out and go to Design / Options / Site Defaults / Properties, click + and choose CARTIMAGESCALE
from the drop down list.   
Set it's value to 2 or 3, or whatever you'd like the checkout images to be scaled down by
(if using Business uncheck Searchable and check Use as CUSTOMVAR).

That's the only change needed to Actinic itself.


Now having backed up your Actinic files:


##### In product template(s) (e.g. Act_ProductLine.html, Act_ProductLine2.html, Act_ProductLine3.html) 
##### and also any additional Act_...ProductLine... html templates that Contains NETQUOTEVAR:PRODUCTIMAGE
##### and likewise for any additional custom product templates in use.
#####
##### Hint. Use Windows / Find / Files or Folders to search Site1 (don't include subfolders) 
##### for Files Containing text NETQUOTEVAR:PRODUCTIMAGE
#####
##### In each such template look for the line(s) - there may be more than 1 in your templates:-


NETQUOTEVAR:PRODUCTFORMBEGIN

##### Add the following immediately below it

<script language=JavaScript>
<!-- (V11)
var ThisProd = "NETQUOTEVAR:PRODUCTREFERENCE";
// -->
</script>



##### Replace the entire Act_ProductImage.html template with the following
##### Note that the document.write line should be one long line.

<!-- ProductImage HTML begin -->
<!-- This file is used to build the product image markup. -->

<IMG SRC="NETQUOTEVAR:IMAGEFILE"
	  ALT="NETQUOTEVAR:ALTERNATETEXT"
	  BORDER=0
	  NETQUOTEVAR:IMAGEHEIGHT
	  NETQUOTEVAR:IMAGEWIDTH
	  NETQUOTEVAR:OTHERIMAGEMARKUP>
<script language=JavaScript>
<!-- (V11)
  document.write('<input type=hidden name="Image-' + ThisProd + '" value="NETQUOTEVAR:IMAGEFILE: align=left :CUSTOMVAR:CARTIMAGESCALE:NETQUOTEVAR:IMAGEWIDTH:NETQUOTEVAR:IMAGEHEIGHT">');
//-->
</script>

<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end -->


##### That's Act_ProductImage.html done.



##### Edit Act_OrderDetail.html

##### locate the two lines

			<TD valign="bottom"><B>NETQUOTEVAR:PRODUCTNAME</B></TD>
			<TD valign="bottom">NETQUOTEVAR:DISPLAYPRODUCTREF</TD>

##### Replace with the follwing two lines

			<TD valign="top">NETQUOTEVAR:NORCATIMAGE<B>NETQUOTEVAR:PRODUCTNAME</B></TD>
			<TD valign="top">NETQUOTEVAR:DISPLAYPRODUCTREF</TD>

##### That's Act_OrderDetail.html done.



##### Edit Act_ShoppingCartXML.html

##### Find the line

<TD WIDTH=280><SPAN CLASS="actxsmall">NETQUOTEVAR:PRODUCTNAME</SPAN></TD>

##### Replace with the line

<TD WIDTH=280><SPAN CLASS="actxsmall">NETQUOTEVAR:NORCATIMAGENETQUOTEVAR:PRODUCTNAME</SPAN></TD>

##### That's Act_ShoppingCartXML.html done.

  


##### Edit Shoppingcart.pl 

##### Find the line

$Values{"SID"} 		= $::g_InputHash{"SID"}; 

##### Insert this fragment above it.

# NorcatImageTestV6
	if (defined $::g_InputHash{"Image-" . $ProductRef})	#  (V11) see if an image defined
		{
		$Values{"NORCATIMAGE"} 	= $::g_InputHash{"Image-" . $ProductRef};		# retrieve the image name
		}
	else	
		{
		$Values{"NORCATIMAGE"} 	= "";					# clear
		}
# end NorcatImageTestV6 patch


##### Find the line

$hVariables{$::VARPREFIX."PRODUCTNAME"} = $sLine; # add the product name to the var table

##### Append this fragment below it

		#
		#  add in the image
		#
		my $NorcatImg = $::g_InputHash{"Image-" . $ProductRef};
		if ($NorcatImg)
			{       
			# example format imagefile.jpg: align=left :3:WIDTH=175:HEIGHT=111
			$NorcatImg =~ m/(.*?):(.*?):(.*?):WIDTH=(.*?):HEIGHT=(.*)/;
			if ($1) 
				{ 
				$sProductLineHTML .= '<input type=hidden name="Image-' . $ProductRef . '" value="' . $NorcatImg . '">';	
 				$NorcatImg = '<img src=' . $1 . $2 . ' width=' . int($4 / $3) . ' height=' . int($5 / $3) . '>';
				}
			}
		$hVariables{$::VARPREFIX."NORCATIMAGE"} = $NorcatImg;


##### find the line

$hVariables{$::VARPREFIX."PRODUCTNAME"} = "";

##### Insert the following line above it

$hVariables{$::VARPREFIX."NORCATIMAGE"} = "";

##### That's ShoppingCart.pl patched.



##### Edit ActinicOrder.pm

##### Find the line

$hLineData{'INFO'} = $CurrentItem{'INFOINPUT'};

##### Append the following line immediately below it

$hLineData{'NORCATIMAGE'} = $CurrentItem{'NORCATIMAGE'};


##### Find the line

my ($sProdref, $sName, $sQuantity, $sTemplate) = @_;

##### And replace with the following line

my ($sProdref, $sName, $sQuantity, $sTemplate, $NorcatImage) = @_;


##### Find the line

$hVariables{$::VARPREFIX . 'QUANTITY'} 	= $sQuantity;

##### Append the following line immediately below it

$hVariables{$::VARPREFIX . 'NORCATIMAGE'} = $NorcatImage; # (V11)


##### Find the line

@Response = ACTINIC::ProcessEscapableText($$pProduct{'NAME'});

##### Insert the following above it

		my $NorcatImg = $CurrentItem{'NORCATIMAGE'};
		if ($NorcatImg)
			{       
			# example format imagefile.jpg: align=left :3:WIDTH=175:HEIGHT=111
			$NorcatImg =~ m/(.*?):(.*?):(.*?):WIDTH=(.*?):HEIGHT=(.*)/;
			if ($1) 
				{
 				$NorcatImg = '<img src=' . $1 . $2 . ' width=' . int($4 / $3) . ' height=' . int($5 / $3) . '>';
				}
			}


##### Find the line (first occurence of 2)

$ProdTable = ProductLineHTML($$pProduct{'REFERENCE'}, $sProdLink, $sQuantityText, $sProductLineHTML);

##### Replace with the following single line.

$ProdTable = ProductLineHTML($$pProduct{'REFERENCE'}, $sProdLink, $sQuantityText, $sProductLineHTML, $NorcatImg);


##### Find the line (second occurrence)

$ProdTable = ProductLineHTML($$pProduct{'REFERENCE'}, $sProdLink, $sQuantityText, $sProductLineHTML);

##### Replace with the following single line.

$ProdTable = ProductLineHTML($$pProduct{'REFERENCE'}, $sProdLink, $sQuantityText, $sProductLineHTML, $NorcatImg);


##### Find the line

$ProdTable .= ProductLineHTML($pComponent->{'REFERENCE'},

##### 3 lines below you'll see the fragment

$sProductLineHTML);

##### Replace with the following line.

$sProductLineHTML, '');   # NorcatImage of Component could go here


##### Find the line

foreach $pComponent (@aComponentsSeparated)

##### 15 lines below you'll see the fragment

$sProductLineHTML);

##### Replace with the following line.

$sProductLineHTML, '');    # NorcatImage of Component could go here


##### Find the line

my $sProductHTML = ProductLineHTML('', $Response[1], 1, $sProductLineHTML);

##### Replace with the following line.

my $sProductHTML = ProductLineHTML('', $Response[1], 1, $sProductLineHTML, '');	# Null NorcatImage

##### That's ActinicOrder.pm done.


##### Edit Cart.pm

##### Find the two lines

$pXmlCartItem->SetTextNode('QDQualify', $pCartItem->{'QDQUALIFY'}); # add the qdqualify child node to the item node
			}

##### Append the following fragment immediately below them


		#
		# Compose the NorcatImage child node
		#
		if (exists $pCartItem->{'NORCATIMAGE'})
			{
			$pXmlCartItem->SetTextNode('NorcatImage', $pCartItem->{'NORCATIMAGE'}); # add the image child node to the item node
			}


##### Find the two lines

			$pCartItem->{'QDQUALIFY'} = $pXmlQDQualify->GetNodeValue();
			}

##### Append the following fragment immediately below them


		# Process the NorcatImage child node
		#
		my $pXmlNorcatImage = $pXmlCartItem->GetChildNode('NorcatImage');
		#
		# Retrieve the Image value
		#
		if ($pXmlNorcatImage)			# the NorcatImage node found
			{
			$pCartItem->{'NORCATIMAGE'} = $pXmlNorcatImage->GetNodeValue();
			}

##### That's Cart.pm done.

Now do a site update and watch.

Whew!!!     Norman www.drillpine.biz (V11)