Shipping layout/prompt

[agilbo]

Is it possible to only display ShipPrompt001 depending on Country ie. only if not United Kingdom, on the Checkout Page 1?

This is being used to enter the cusotmers own courier account number and is only relevant when shipping overseas.

I have tried DeliverCountry != "United Kingdom" in a block around the part in Shipping User Definable Prompt layout but it no work....


Any ideas?

Gilbo

[TraceyG]

Hi,

Block ifs do not work online. This is probably a script change so I'll ask the development team if it's possible for you.

[TraceyG]

Hi,

I'm told that a script change won't help with this because the 'Special Delivery' box is on the 'Invoice Address' page and the delivery country is not passed to that page. All I can think of is to add a check box for 'delivery overseas' to then show the input field using javascript. To do this:

- take a backup of your site first
- go to 'Design | Library'
- on the 'Layouts' tab, expand the 'Web Page Inner Layout' group (click the '+')
- double-click on the 'Order 01 Bulk Area' layout to edit it
- locate the form tag (<form method="post"....) which is usually around line 10
- replace the whole line with the following (it just adds in a name attribute to the tag):

<form method="post" name="checkout1" action="<actinic:variable name="OnlineScriptURL" value="Checkout Script URL" />"

- click 'OK'
- still in the Library, expand the 'Checkout Prompt' group
- double-click on the 'Shipping User Definable Prompt' layout
- replace the contents of this layout with:

<script type="text/javascript">
 <!--
function check() {
if(document["checkout1"]["overseas"].checked){
document.getElementById("ShipInstructions").style.visibility="visible"
}
else{
document.getElementById("ShipInstructions").style.visibility="hidden"
}
}
//-->
</script>
<tr>
<td>
<input type="checkbox" value="" name="overseas" onClick="check(this)"> Tick if shipping overseas</td>
<td>
 <div id="ShipInstructions" style="visibility: hidden;">
 <table border="0" cellspacing="2" cellpadding="2">
<tr>
   <td width="60%">
   
      <actinic:block if="%3cactinic%3avariable%20name%3d%22ShipPrompt001Required%22%20%2f%3e" /><span class="actrequired"></actinic:block>
         <Actinic:Variable Name="ShipPrompt001"/>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22ShipPrompt001Required%22%20%2f%3e" /><span class="actrequired"></actinic:block>
   </td>
   <td width="40%">
      <input type="text" name="SHIPUSERDEFINED" size="20" maxlength="255" value="<Actinic:Variable Name="ShipUserDefined"/>" />
   </td>
</tr>
</table>
</div>
</tr>
</td>

- click 'OK'
- close the Library

The 'Special Delivery Instructions' field will be hidden when the page loads but will become visible if the checkbox is ticked and will hide again if it is unchecked.

If this doesn't do what you want it to do you can either revert the two layouts back to factory settings or re-import your backup.

[agilbo]

Hi Tracey,

That works but could it be tweaked by instead of using a tick box use the option from the delivery option that requires the input of extra info into the ShipPrompt001

What happens is if delivery overseas then the customer is offered two choices on radio buttons - International Signed for delivery or Customers Own Carrier

If Own Carrier is selected then the additional prompt box should appear.

I've looked at the Javascript but it's a little beyond me...any direction would be wonderful

Gilbo

[TraceyG]

OK, if you want to have it dependent on which shipping class is selected, then I've adapted it from this article:

- browse to your site folder and locate 'ShipControl/ShippingTemplate.pl'
- open this file in a text editor such as notepad
- search for: <select
- you should see:

$sSelectHTML = "<SELECT ID='lstClass' NAME='ShippingClass' >\n";

- change this to read:

$sSelectHTML = "<SELECT ID='lstClass' NAME='ShippingClass' onChange='javascript:HideShipInstructions(this)'>\n";

- close and save the file
- within Actinic, go to the Library and on the 'Layouts' tab expand the 'Checkout Prompt' group
- double-click on the 'Shipping User Definable Prompt' layout
- replace the contents of this layout with:

<script language=javascript type='text/javascript'>
 function hideDiv()
 {
 if (document.getElementById)
 { // DOM3 = IE5, NS6
 document.getElementById('ShipInstructions').style.visibility = 'hidden';
 }
 else
 {
 if (document.layers)
 { // Netscape 4
 document.ShipInstructions.visibility = 'hidden';
 }
 else
 { // IE 4
 document.all.ShipInstructions.style.visibility = 'hidden';
 }
 }
 }
 
 function showDiv() {
 if (document.getElementById) { // DOM3 = IE5, NS6
 document.getElementById('ShipInstructions').style.visibility = 'visible';
 }
 else {
 if (document.layers) { // Netscape 4
 document.ShipInstructions.visibility = 'visible';
 }
 else { // IE 4
 document.all.ShipInstructions.style.visibility = 'visible';
 }
 }
 }
 
 function HideShipInstructions(selectObj)
 {
 if (selectObj.options[selectObj.selectedIndex].value == "12")
 {
 showDiv();
 }
 else
 {
 hideDiv();
 }
 }
 </script>
<tr>
<td>
 <div id="ShipInstructions" style="visibility: hidden;">
 <table border="0" cellspacing="2" cellpadding="2">
<tr>
   <td width="60%">
   
      <actinic:block if="%3cactinic%3avariable%20name%3d%22ShipPrompt001Required%22%20%2f%3e" /><span class="actrequired"></actinic:block>
         <Actinic:Variable Name="ShipPrompt001"/>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22ShipPrompt001Required%22%20%2f%3e" /><span class="actrequired"></actinic:block>
   </td>
   <td width="40%">
      <input type="text" name="SHIPUSERDEFINED" size="20" maxlength="255" value="<Actinic:Variable Name="ShipUserDefined"/>" />
   </td>
</tr>
</table>
</div>
</tr>
</td>

- In the above code '.value == "12")' is the ID for the shipping class that you want the field to be visible for. Find this by either:

> opening the 'site/ShipControl/SimpleShipping.mdb file in MS Access and look for the 'ClassID' for relevant class in the 'Classes' table

or

> on your website, view the source of your checkout page that contains your drop-down for the shipping classes and search for 'ShippingClass'. You should see the options for your shipping classes and you need the 'value' of the relevant shipping class.

- click 'OK'

The prompt is hidden when the page loads but if the customer selects a particular shipping class it is then visible.

This isn't foolproof I'm afraid. I've come across a problem though whereby if an error occurs on the page (ie they forget to tick the 'terms & conditions' box) then because the page has refreshed the field will hide again and won't become visible unless the customer selects a different class and then back onto the relevant class again. I'm afraid that my javascript isn't that good either so I don't know if it's possible to correct this. Maybe an 'expert' could give some guidance here.

Also, the 'Delivery Instructions' are retained by the 'remember me' option so if a customer comes back and places an order but doesn't use the same shipping class again, whatever they entered in that field the last time is retained and sent with the order again.