NEW!! - Actinic Single Page Checkout Plugin- £150

Demo - Buy
This AJAX driven feature finally delivers one of Actinic's holy grails of plugins and addons - the single checkout page.
It allows Actinic websites to combine the checkout, data gathering pages into a single page on your website.
Example 1 - teclan theme with custom checkout
Example 2 - Actinic "standard" template checkout

Technical Difficulty:
Technical Specfication: Javascript enabled browsers
Server requirement: none

************************************************************************************
Instructions for integrating teclan's "Single Page Checkout" plug-in.
Version 1.0
************************************************************************************

1. Backup your Actinic site.
Select File > Snapshot > Export Site and follow the instructions.

2. Import the partial design snapshot named 'teclan-SinglePageCheckout.acd'.
Select File > Snapshot > Import Site and follow the instructions.

3. Modify your checkout page layout.
a) Go to Settings > Site Options > Layout. Make a note of the value next to 'Checkout Pages Layout'.

b) Go to Design > Library > Layouts. Scroll to 'Web Page Outer Layout', expand this node and double click on the value you noted from Site Options.

c) Look for the closing head tag (</head>). Immediately before this, insert the following code.

<script language="javascript" type="text/javascript" src="teclan-jquery.js"></script>

d) Now look for the INNERLAYOUT tag - this should be underlined in pink text. Highlight all of the code from the beginning of the document to the beginning of the INNERLAYOUT tag. Right-click and select 'Insert Block'. Enter the following code into the condition editor.

<actinic:variable name="PageType" /> != "Checkout Page 1" && <actinic:variable name="PageType" /> != "Checkout Page 2"

Click OK.

e) Locate the tag INNERLAYOUT again and this time replace the tag with the following code.

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Checkout%20Page%200%22">
<actinic:variable value="teclan Quick Checkout" name="teclanLayouts" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Checkout%20Page%200%22" >
<actinic:variable name="INNERLAYOUT" />
</actinic:block>

f) Now highlight all of the code starting after the closing block tag after INNERLAYOUT to the very end of the document. Right click again and select 'Insert Block' and enter the same code as point d) above. Click OK.

g) Click Apply then OK to return to the library.

4. Modify your receipt page layout
a) Look for 'Receipt Page Layout' in the library and double click on it. Look for the closing head tag (</head>). Immediately before this, insert the following code.

<script language="javascript" type="text/javascript" src="teclan-jquery.js"></script>

b) Click Apply then OK to return to the library.

5. Modify your stylesheet.
a) Look for 'Actinic Stylesheet' in the library and double click on it. Scroll to the very end of the document and insert the following code.

.block { display:block; }
.none { display:none; }

#shopping-cart-summary { display:none; }

.checkout-step {
background:<actinic:variable name="Palette1" />;
color:<actinic:variable name="PaletteBG" />;
padding:3px;
}

.checkout-block {
padding-bottom:10px;
}

#progress {
padding:10px 0px;
visibility:hidden;
text-align:center;
}

#ActCartError {
width:500px;
margin:0px auto;
border:1px solid <actinic:variable name="TextColor" />;
}

b) Click Apply then OK then Close the library.

6. Ensure the correct layouts are selected.
Go to Settings > Site Options > Page Settings. Ensure that you choose the 'teclan' layouts for First Checkout Inner Layout, Second Checkout Inner Layout and Third Checkout Inner Layout.

7. Modify some Design|Text items.
a) Go to Design > Text. Click on 'Go to' in the bottom left corner and enter Phase: -1, ID: 2067 and press OK. Replace the code in 'Current Value' with the following.

<table width="100&#37;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">%s%s%s<input type="hidden" name="%s" value="%s" /></td>
<td align="right"><input onclick="checkout.clickedButton=this" type="submit" name="ACTION" value="%s" /></td>
</tr>
</table>

b) Click on 'Go to' again and this time enter Phase: -1, ID: 2178 and press OK. Replace the code in 'Current Value' with the following.

<table id="ActCartError" cellpadding="10" width="550" bgcolor="%s"><tr><td>%s

c) Click Apply then OK.

8. To test the functionality, switch your site into test mode by selecting Web > Switch to test mode and then upload your site. Make sure you can place a full order on the site before going live.