Large image on receipt page

[graphicz]

Client would like a large image of the first purchased product on the receipt page.
Does anyone know how this may be generated?
Placing the following produces a small image and some text descriptions but I cannot make the image large and remove the text.
I assume the 'Thumbnail' in the product dialogue must be the large image?

<Actinic:XMLTEMPLATE NAME="ProductLine">
<Actinic:THUMBNAIL>

	<img src="<actinic:variable name="Thumbnail" />" >

</Actinic:THUMBNAIL>
</Actinic:XMLTEMPLATE>

Thank you.

[NormanRouxel]

In SD 2013 the code used is:

<img class="cartthumbnail" src="<actinic:variable name="Thumbnail" />" >

And the thumbnail is sized down via CSS:

img.cartthumbnail {
	border: 0px;
	margin-left: 2px;
	margin-right: 2px;
	width: 25px;
}

So you could alter that 25px or delete the line.

Search the Library for cartthumbnail to locate the code.

[NormanRouxel]

However, if you only want the first such item on the receipt to be large and any following ones to be small, you'll need JavaScript to do this. E.g. leave the CSS alone and have some jQuery JS just above </head> in the Receipt Page Layout like (I'm assuming you already have jQuery loaded somewhere in Standard JavaScript Header Functions):

<script type="text/javascript">
$(document).ready(function(){$('.cartthumbnail').first().css('width', '250px')});
</script>

N.B. untested.

[graphicz]

Thanks Norman

I couldn't make that work, I also tried putting the javascript above the reference to the actinic.css.

The test site is http://www.graphicz.gb.com/trship/

Login: user: info@graphicz.co.uk Password: xy

The body code is

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Receipt%27">
<p>&nbsp;</p>
<Actinic:XMLTEMPLATE NAME="ProductLine">
<Actinic:THUMBNAIL>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" >
	<img class="cartthumbnail" src="<actinic:variable name="Thumbnail" />" >
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e">
	<img style="border: 0;" src="thumbnail-preview.gif" width="36" hspace="2" >
</actinic:block>
</Actinic:THUMBNAIL>
</Actinic:XMLTEMPLATE>
<a class="fancybox" href="#inline1" title="Lorem ipsum dolor sit amet"><b>Click here for Print Friendly Version >></b></a>
<div id="inline1" style="width:700px;display: none;">
		<actinic:variable name="ReceiptPageInnerLayout" value="Receipt Page Bulk" />
	</div>
<p>&nbsp;</p>

</actinic:block>
				<actinic:variable name="INNERLAYOUT" >

I also seem to have rogue text "NETQUOTEVAR:REFPAGE"

Thanks

[NormanRouxel]

Since no-one can see your receipt page without buying something, try moving the JS to above </head> in your overall layout. This will make it work in the Cart, not just the Receipt.

[graphicz]

It is a test site so test purchases can be made and the login was to save checkout time, however, the code is now on every page so adding a product and viewing cart will show the code at the top of the innerlayout.

The receipt page will use the usual outer layout hence the popup for print friendly version.
I really need to know where the layouts defined by <Actinic:XMLTEMPLATE NAME="ProductLine"> and <Actinic:THUMBNAIL> reside so I can make copies and edit (if possible).

Just for clarity, this is the sort of receipt page I am after, hence the need for the large image:

[NormanRouxel]

You are loading jQuery but in an unusual place. I.e. just before the </body> tag. Too late for earlier code to use it:

<script type="text/javascript" src="jquery-1.9.0.min.js"></script><script type="text/javascript" src="jquery.fancybox.js"></script>
<script type="text/javascript" src="custom.js"></script>

Such code is much better located at the bottom of layout Standard JavaScript Header Functions.

[graphicz]

I have changed that and your solution works, thank you Norman.

My only problem is that the receipt page does not display the name of the purchased product and NETQUOTEVAR:REFPAGE appears before the receipt page bulk proper.

I have removed the conditionals so that the effect is seen when viewing cart

It doesn't seem to like the <Actinic:XMLTEMPLATE NAME="ProductLine"> tag being in two places but without it the image does not display

[NormanRouxel]

The SD Perl scripts need well-formed cart templates to work properly. There should only be one

<Actinic:XMLTEMPLATE NAME="ProductLine">
.
and its corresponding and correctly nested:
.
</Actinic:XMLTEMPLATE>

It may be worth reverting that layout to factory and then re-introduct the tweak:

<img class="cartthumbnail" src="<actinic:variable name="Thumbnail" />" >

[graphicz]

Thanks Norman

Your fix works to make the first thumbnail in the cart summary large.

Client wishes the large thumbnail to be outside the <Actinic:XMLTEMPLATE NAME="ProductLine"> and its corresponding </Actinic:XMLTEMPLATE> hence using the code in post 1 above to try and produce this image just prior to the Receipt Page Bulk Area.

I guess that is not actually possible?

Is this something that could be achieved by custom scripting if the client chose to commission someone to write it?

Thanks

[NormanRouxel]

Could probably be done by some custom Jquery code that rearranges the DOM.

[graphicz]

Is that something Drillpine could quote for?

[NormanRouxel]

Certainly. Wouldn't be a huge job. Email for details.

[graphicz]

Solved!

Norman produced an excellent solution at very reasonable cost.

If you wish to display the receipt page in the normal web page outer layout with, above the receipt page bulk, a large image of the first purchased product, a thank you message and social networking links to that product, then Norman has the solution.