Help adding an "Opt Out" checkbox to Shipping Page for Checkout Process

[RobertH]

So recently we have made a change to always require a signature upon shipment arrival because of too many lost shipments by carriers. The modification I am trying to make to the shipping page (and follow through the rest of the checkout process) is to have a checkbox input appear if the customer's address is residential – and if that checkbox is checked by the customer, then they choose to "Opt Out" of this required signature accepting the risks. A note needs to then follow through to checkout confirmation that the customer chose to opt out and accept the risks.

For right now, the "if address is residential" check is set aside. First I'm trying to get a checkbox to control whether some extra information is included in the order or not.

####

This is my tpl_checkout_shipping_default.php file:

<?php
/**
 * Page Template
 *
 * Loaded automatically by index.php?main_page=checkout_shipping.<br />
 * Displays allowed shipping modules for selection by customer.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2009 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_checkout_shipping_default.php 14807 2009-11-13 17:22:47Z drbyte $
 */
?>
<div class="centerColumn" id="checkoutShipping">

<?php echo zen_draw_form('checkout_address', zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) . zen_draw_hidden_field('action', 'process'); ?>

<h1 id="checkoutShippingHeading"><?php echo HEADING_TITLE; ?></h1>
<?php if ($messageStack->size('checkout_shipping') > 0) echo $messageStack->output('checkout_shipping'); ?>

<h2 id="checkoutShippingHeadingAddress"><?php echo TITLE_SHIPPING_ADDRESS; ?></h2>

<div id="checkoutShipto" class="floatingBox back">
<?php if ($displayAddressEdit) { ?>
<div class="buttonRow forward"><?php echo '<a href="' . $editShippingButtonLink . '">' . zen_image_button(BUTTON_IMAGE_CHANGE_ADDRESS, BUTTON_CHANGE_ADDRESS_ALT) . '</a>'; ?></div>
<?php } ?>
<address class=""><?php echo zen_address_label($_SESSION['customer_id'], $_SESSION['sendto'], true, ' ', '<br />'); ?></address>
</div>
<div class="floatingBox important forward"><?php echo TEXT_CHOOSE_SHIPPING_DESTINATION; ?></div>
<br class="clearBoth" />

<?php
  if (zen_count_shipping_modules() > 0) {
?>

<h2 id="checkoutShippingHeadingMethod"><?php echo TABLE_HEADING_SHIPPING_METHOD; ?></h2>

<?php
    if (sizeof($quotes) > 1 && sizeof($quotes[0]) > 1) {
?>

<div id="checkoutShippingContentChoose" class="important"><?php echo TEXT_CHOOSE_SHIPPING_METHOD; ?>
<br/>
<p style="font-size:8pt; font-weight:normal"> <span style="text-decoration:underline; font-weight:bold; color:red">Note:</span> Processing time varies. Most orders are shipped within 1-2 business days pending credit card authorization. All orders including overnight and 2nd-day shipments will ship on the next business day for in-stock items. Special shipping requests should be directed to the Internet Coordinator, ph# (847) 844-8795 x 231.</p>
</div>

<?php
    } elseif ($free_shipping == false) {
?>
<div id="checkoutShippingContentChoose" class="important"><?php echo TEXT_ENTER_SHIPPING_INFORMATION; ?></div>

<?php
    }
?>
<?php
    if ($free_shipping == true) {
?>
<div id="freeShip" class="important" ><?php echo FREE_SHIPPING_TITLE; ?>&nbsp;<?php echo $quotes[$i]['icon']; ?></div>
<div id="defaultSelected"><?php echo sprintf(FREE_SHIPPING_DESCRIPTION, $currencies->format(MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER)) . zen_draw_hidden_field('shipping', 'free_free'); ?></div>

<?php
    } else {
      $radio_buttons = 0;
      for ($i=0, $n=sizeof($quotes); $i<$n; $i++) {
      // bof: field set
// allows FedEx to work comment comment out Standard and Uncomment FedEx
//      if ($quotes[$i]['id'] != '' || $quotes[$i]['module'] != '') { // FedEx
      if ($quotes[$i]['module'] != '') { // Standard
?>
<fieldset>
<legend><?php echo $quotes[$i]['module']; ?>&nbsp;<?php if (isset($quotes[$i]['icon']) && zen_not_null($quotes[$i]['icon'])) { echo $quotes[$i]['icon']; } ?></legend>

<?php
        if (isset($quotes[$i]['error'])) {
?>
      <div><?php echo $quotes[$i]['error']; ?></div>
<?php
        } else {
          for ($j=0, $n2=sizeof($quotes[$i]['methods']); $j<$n2; $j++) {
// set the radio button to be checked if it is the method chosen
            $checked = (($quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id'] == $_SESSION['shipping']['id']) ? true : false);

            if ( ($checked == true) || ($n == 1 && $n2 == 1) ) {
              //echo '      <div id="defaultSelected" class="moduleRowSelected">' . "\n";
            //} else {
              //echo '      <div class="moduleRow">' . "\n";
            }
?>
<?php
            if ( ($n > 1) || ($n2 > 1) ) {
?>
<div class="important forward"><?php echo $currencies->format(zen_add_tax($quotes[$i]['methods'][$j]['cost'], (isset($quotes[$i]['tax']) ? $quotes[$i]['tax'] : 0))); ?></div>
<?php
            } else {
?>
<div class="important forward"><?php echo $currencies->format(zen_add_tax($quotes[$i]['methods'][$j]['cost'], $quotes[$i]['tax'])) . zen_draw_hidden_field('shipping', $quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id']); ?></div>
<?php
            }
?>

<?php echo zen_draw_radio_field('shipping', $quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id'], $checked, 'id="ship-'.$quotes[$i]['id'] . '-' . str_replace(' ', '-', $quotes[$i]['methods'][$j]['id']) .'"'); ?>
<label for="ship-<?php echo $quotes[$i]['id'] . '-' . str_replace(' ', '-', $quotes[$i]['methods'][$j]['id']); ?>" class="checkboxLabel" ><?php echo $quotes[$i]['methods'][$j]['title']; ?></label>
<!--</div>-->
<br class="clearBoth" />
<?php
            $radio_buttons++;
          }
        }
?>
<?php if ($quotes[$i]['module'] == "United States Postal Service")
echo '<p style="font-size:8pt"><span style="font-size:9pt;color:red; font-weight:bold">*</span> By selecting USPS you agree that seller is not financially liable for any lost packages.</p>';
?>
</fieldset>
<?php
    }
// eof: field set
      }
    }
?>

<?php
  } else {
?>
<h2 id="checkoutShippingHeadingMethod"><?php echo TITLE_NO_SHIPPING_AVAILABLE; ?></h2>
<div id="checkoutShippingContentChoose" class="important"><?php echo TEXT_NO_SHIPPING_AVAILABLE; ?></div>
<?php
  }
?>
<fieldset class="shipping" id="comments">
<legend><?php echo TABLE_HEADING_COMMENTS; ?></legend>
<?php echo zen_draw_textarea_field('comments', '45', '3') . '<br /><em style="margin-left:17px; line-height:130%; color:#F00;"><b>*</b>Sorry, but we do not ship FedEx Ground.</em>'; ?>
</fieldset>
    
    
<br class="clearBoth" />
<fieldset class="shipping" id="optOutSig">
<!-- Opt Out Checkbox -->
<legend>Required Signature on Arrival</legend>
<input name="optOutSig" type="checkbox" value="optout" /> Opt Out of required signature?
</fieldset>


    
<br class="clearBoth" />
<div>
<?php echo "Order->Info[comments]<br/>" . $order->info['comments'] . "<br/>";
      echo "SESSION[comments]<br/>" . $_SESSION['comments']; ?>
</div>

    
<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_CONTINUE_CHECKOUT, BUTTON_CONTINUE_ALT); ?></div>
<div class="buttonRow back"><?php echo '<strong>' . TITLE_CONTINUE_CHECKOUT_PROCEDURE . '</strong><br />' . TEXT_CONTINUE_CHECKOUT_PROCEDURE; ?></div>

</form>
</div>

And the next step of the checkout, tpl_checkout_payment_default.php:

<?php
/**
 * Page Template
 *
 * Loaded automatically by index.php?main_page=checkout_payment.<br />
 * Displays the allowed payment modules, for selection by customer.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_checkout_payment_default.php 5414 2006-12-27 07:51:03Z drbyte $
 */
?>
<?php echo $payment_modules->javascript_validation(); ?>
<div class="centerColumn" id="checkoutPayment">
<?php echo zen_draw_form('checkout_payment', zen_href_link(FILENAME_CHECKOUT_CONFIRMATION, '', 'SSL'), 'post', ($flagOnSubmit ? 'onsubmit="return check_form();"' : '')); ?>

<h1 id="checkoutPaymentHeading"><?php echo HEADING_TITLE; ?></h1>

<?php if ($messageStack->size('redemptions') > 0) echo $messageStack->output('redemptions'); ?>
<?php if ($messageStack->size('checkout') > 0) echo $messageStack->output('checkout'); ?>
<?php if ($messageStack->size('checkout_payment') > 0) echo $messageStack->output('checkout_payment'); ?>

<?php
  if (DISPLAY_CONDITIONS_ON_CHECKOUT == 'true') {
?>
<fieldset>
<legend><?php echo TABLE_HEADING_CONDITIONS; ?></legend>
<div><?php echo TEXT_CONDITIONS_DESCRIPTION;?></div>
<?php echo  zen_draw_checkbox_field('conditions', '1', false, 'id="conditions"');?>
<label class="checkboxLabel" for="conditions"><?php echo TEXT_CONDITIONS_CONFIRM; ?></label>
</fieldset>
<?php
  }
?>

<?php // ** BEGIN PAYPAL EXPRESS CHECKOUT **
      if (!$payment_modules->in_special_checkout()) {
      // ** END PAYPAL EXPRESS CHECKOUT ** ?>
<h2 id="checkoutPaymentHeadingAddress"><?php echo TITLE_BILLING_ADDRESS; ?></h2>

<div id="checkoutBillto" class="floatingBox back">
<?php if (MAX_ADDRESS_BOOK_ENTRIES >= 2) { ?>
<div class="buttonRow forward"><?php echo '<a href="' . zen_href_link(FILENAME_CHECKOUT_PAYMENT_ADDRESS, '', 'SSL') . '">' . zen_image_button(BUTTON_IMAGE_CHANGE_ADDRESS, BUTTON_CHANGE_ADDRESS_ALT) . '</a>'; ?></div>
<?php } ?>
<address><?php echo zen_address_label($_SESSION['customer_id'], $_SESSION['billto'], true, ' ', '<br />'); ?></address>
</div>

<div class="floatingBox important forward"><?php echo TEXT_SELECTED_BILLING_DESTINATION; ?></div>
<br class="clearBoth" />
<?php // ** BEGIN PAYPAL EXPRESS CHECKOUT **
      }
      // ** END PAYPAL EXPRESS CHECKOUT ** ?>
      
<fieldset id="checkoutOrderTotals">
<legend id="checkoutPaymentHeadingTotal"><?php echo TEXT_YOUR_TOTAL; ?></legend>
<?php
  if (MODULE_ORDER_TOTAL_INSTALLED) {
    $order_totals = $order_total_modules->process();
?>
<?php $order_total_modules->output(); ?>
<?php
  }
?>
<a style="float:right; margin-right:60px" href="customer_loyalty_program.html" target="_blank">(What's this?)</a>
</fieldset>

<?php
  $selection =  $order_total_modules->credit_selection();
  if (sizeof($selection)>0) {
    for ($i=0, $n=sizeof($selection); $i<$n; $i++) {
      if ($_GET['credit_class_error_code'] == $selection[$i]['id']) {
?>
<div class="messageStackError"><?php echo zen_output_string_protected($_GET['credit_class_error']); ?></div>

<?php
      }
      for ($j=0, $n2=sizeof($selection[$i]['fields']); $j<$n2; $j++) {
?>
<fieldset>
<legend><?php echo $selection[$i]['module']; ?></legend>
<?php echo $selection[$i]['redeem_instructions']; ?>
<div class="gvBal larger"><?php echo $selection[$i]['checkbox']; ?></div>
<label class="inputLabel"<?php echo ($selection[$i]['fields'][$j]['tag']) ? ' for="'.$selection[$i]['fields'][$j]['tag'].'"': ''; ?>><?php echo $selection[$i]['fields'][$j]['title']; ?></label>
<?php echo $selection[$i]['fields'][$j]['field']; ?>
</fieldset>
<?php
      }
    }
?>

<?php
    }
?>

<?php // ** BEGIN PAYPAL EXPRESS CHECKOUT **
      if (!$payment_modules->in_special_checkout()) {
      // ** END PAYPAL EXPRESS CHECKOUT ** ?>
<fieldset>
<legend><?php echo TABLE_HEADING_PAYMENT_METHOD; ?></legend>

<?php
  if (SHOW_ACCEPTED_CREDIT_CARDS != '0') {
?>

<?php
    if (SHOW_ACCEPTED_CREDIT_CARDS == '1') {
      echo TEXT_ACCEPTED_CREDIT_CARDS . zen_get_cc_enabled();
    }
    if (SHOW_ACCEPTED_CREDIT_CARDS == '2') {
      echo TEXT_ACCEPTED_CREDIT_CARDS . zen_get_cc_enabled('IMAGE_');
    }
?>
<br class="clearBoth" />
<?php } ?>

<?php
  $selection = $payment_modules->selection();

  if (sizeof($selection) > 1) {
?>
<p class="important"><?php echo TEXT_SELECT_PAYMENT_METHOD; ?></p>
<?php
  } elseif (sizeof($selection) == 0) {
?>
<p class="important"><?php echo TEXT_NO_PAYMENT_OPTIONS_AVAILABLE; ?></p>

<?php
  }
?>

<?php
  $radio_buttons = 0;
  for ($i=0, $n=sizeof($selection); $i<$n; $i++) {
?>
<?php
    if (sizeof($selection) > 1) {
        if (empty($selection[$i]['noradio'])) {
 ?>
 
<?php echo zen_draw_radio_field('payment', $selection[$i]['id'], ($selection[$i]['id'] == $_SESSION['payment'] ? true : false), 'id="pmt-'.$selection[$i]['id'].'"'); ?>
<?php   } ?>

<?php
    } else {
        
?>
<br/>
<?php echo zen_draw_hidden_field('payment', $selection[$i]['id']); ?>
<?php
    }
?>
<label for="pmt-<?php echo $selection[$i]['id']; ?>" class="radioButtonLabel"><?php 
if ($selection[$i]['module']=="Contact Me"){
//echo $selection[$i]['module'];
echo 'Contact Me';}
else
{echo $selection[$i]['module'];}
  ?></label>

<?php
    if (defined('MODULE_ORDER_TOTAL_COD_STATUS') && MODULE_ORDER_TOTAL_COD_STATUS == 'true' and $selection[$i]['id'] == 'cod') {
?>
<div class="alert"><?php echo TEXT_INFO_COD_FEES; ?></div>
<?php
    } else {
      // echo 'WRONG ' . $selection[$i]['id'];
?>
<?php
    }
?>
<br class="clearBoth" />

<?php
    if (isset($selection[$i]['error'])) {
?>
    <div><?php echo $selection[$i]['error']; ?></div>

<?php
    } elseif (isset($selection[$i]['fields']) && is_array($selection[$i]['fields'])) {
?>

<div class="ccinfo">
<?php
      for ($j=0, $n2=sizeof($selection[$i]['fields']); $j<$n2; $j++) {
?>
<label <?php echo (isset($selection[$i]['fields'][$j]['tag']) ? 'for="'.$selection[$i]['fields'][$j]['tag'] . '" ' : ''); ?>class="inputLabelPayment"><?php echo $selection[$i]['fields'][$j]['title']; ?></label><?php echo $selection[$i]['fields'][$j]['field']; ?>
<br class="clearBoth" />
<?php
      }
?>
</div>
<br class="clearBoth" />
<?php
    }
    $radio_buttons++;
?>
<br class="clearBoth" />
<?php
  }
?>

</fieldset>
<?php // ** BEGIN PAYPAL EXPRESS CHECKOUT **
      } else {
        ?><input type="hidden" name="payment" value="<?php echo $_SESSION['payment']; ?>" /><?php
      }
      // ** END PAYPAL EXPRESS CHECKOUT ** ?>

<?php
if(isset($_POST['optOutSig']) && $_POST['optOutSig'] == 'optout') {
    echo "<div><p>Checkbox was checked</p></div>";
    if (strpos($_SESSION['comments'], 'Opted Out of Signature') !== false) {} else {$_SESSION['comments'] .= "\n\nOpted Out of Signature.";}
} else {}
?>

<fieldset>
<legend><?php echo TABLE_HEADING_COMMENTS; ?></legend>
<?php echo zen_draw_textarea_field('comments', '45', '3'); ?>
</fieldset>

<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_CONTINUE_CHECKOUT, BUTTON_CONTINUE_ALT, 'onclick="submitFunction('.zen_user_has_gv_account($_SESSION['customer_id']).','.$order->info['total'].')"'); ?></div>
<div class="buttonRow back"><?php echo TITLE_CONTINUE_CHECKOUT_PROCEDURE . '<br />' . TEXT_CONTINUE_CHECKOUT_PROCEDURE; ?></div>

</form>
</div>

####

So to try to pull out my additions to these files and explain how I'm approaching it:

This is the checkbox field I've tried to add to the shipping page that should let the customer choose if they want to "Opt Out" of signing.

<fieldset class="shipping" id="optOutSig">
<!-- Opt Out Checkbox -->
<legend>Required Signature on Arrival</legend>
<input name="optOutSig" type="checkbox" value="optout" /> Opt Out of required signature?
</fieldset>

On the payment page I've added the following to try to check if the box was checked or not, and then add a note about Opting out if they did:

<?php
if(isset($_POST['optOutSig']) && $_POST['optOutSig'] == 'optout') {
    echo "<div><p>Checkbox was checked</p></div>";
    if (strpos($_SESSION['comments'], 'Opted Out of Signature') !== false) {} else {$_SESSION['comments'] .= "\n\nOpted Out of Signature.";}
} else {}
?>

####

From looking at these pages though, the "Continue" button on the shipping page does not have type="submit" so I'm not sure if that page's form actually gets submitted when moving on the the payment page. If it doesn't, then I can't use $_POST['optOutSig'] can I?

I don't necessarily need the note to show up until the order is fully submitted. So it doesn't need to be visible on any of the checkout process stages, but for testing purposes I have some debug-type outputs appearing on these pages for now. Even when I submit from step 3: "Order Confirmation" (where the button then seems to actually be a submit input) it still does not seem that $_POST['optOutSig'] was recognized from the form on the shipping page.

####

To try to sum up what I'm attempting here, I would like a checkbox on the shipping page (step 1) of the checkout process to add some additional content (whether it's an extra line in the order comments, a whole additional div in the order confirmation email, any output at all really) if it is checked – and do nothing if it is not checked.

[DrByte]

The checkout_shipping page POSTs to checkout_shipping, where the checkout_shipping header_php.php determines whether the submitted data is valid, and then redirects to the checkout_payment page.
So, your validation of any POST data on checkout_shipping should be processed by the checkout_shipping code, not checkout_payment.

[RobertH]

The checkout_shipping page POSTs to checkout_shipping, where the checkout_shipping header_php.php determines whether the submitted data is valid, and then redirects to the checkout_payment page.
So, your validation of any POST data on checkout_shipping should be processed by the checkout_shipping code, not checkout_payment.

I did try this in my first iteration of the addition, and it didn't work either. I figured that I should move it to a "further along" page because the data from the shipping form isn't technically POSTed until the user submits that form(? this was my thinking, anyway).

I need to implement javascript for a pop-up disclaimer that will be attached to checking the checkbox in the first place, so I sort of went a roundabout way on this issue and worked it in with javascript.

This is the script I wrote to get pretty much my desired feature on the shipping_page:

$("form[name='checkout_address']").submit(function(){
        if ($("input[name='optOutSig']").is(":checked") && $("textarea[name='comments']").val().indexOf("Opted Out of Signature.") == -1){
        $("textarea[name='comments']").val($("textarea[name='comments']").val() + "\n\nOpted Out of Signature.");
        } else if ($("input[name='optOutSig']").not(":checked")){
        } else {}
    });

So when the form is submitted, if the user checked the checkbox (and the field doesn't already contain the Opt Out text in case they use the "back" button during checkout) it will enter the extra line of text as if the use had put it in the textarea, rather than positing to the php ['comments'] variables/objects. (even when I would force append characters to $_POST['comments'] or $order->info['comments'], they would not follow through to the payment step if the user had manually entered anything in the text field - they would move over if the text field on the shipping page was left blank when submitted). Then if the checkbox is not checked, or if it doesn't exist at all (which would matter for my next step) then it leaves the comments field alone.

I've found so far that this seems to operate in the way that I need, and though I don't like to use javascript unnecessarily when php variables already exist for what I'm manipulating - I already need to add some js so this is the route I took.

My obstacle now is one I'm not sure is a possibility. I'd like the checkbox to only exist on the shipping page if the customer address used is a residential one. I need it to apply to all customers who have already entered their account information so I can't add a new field to address information asking for "Residential: Yes/No". I need to somehow check the already given address against something that might tell me if it's residential.

The fallback to this feature is to include a gate on the shipping page that explicitly asks the user if the address they are using is a residential one, then moves on with the whole checkbox feature, but if possible I'd like to somehow run this check automatically and behind-the-scenes.

EDIT: I do have one reservation about the way that I'm including the extra opt out text. And that is that the user could manually remove the added text in step 2 of the checkout - even if they checked the box for opting out - and then would not actually be opted out because the line of text would not appear for the order's final comments. This is all based on a way to point to an order if needed and prove that a customer did opt out or not. But there would be no way to prove if they manually removed the opt out text themselves and then moved forward with checkout. This is sort of a fringe case, but still something within the realm of possibility given the solution I'm using.



P.S. Thank you, DrByte, for your response and insights. I really appreciate your assistance.

[RobertH]

So I found and got an access key for a UPS API kit that can check for residential or commercial address status based on UPS standards: https://www.ups.com/upsdeveloperkit/...urce?loc=en_US

I have no idea how to request from it on the shipping page to check if the customer's address is residential or not.

I don't know how to use JSON or implement APIs. I read the guides in the kit and looked for some tutorials but this is all I've got so far:

<div id="dump"></div>
<input type="button" value="JSON" onclick="loadUPS()" />

<script type="text/javascript">
    function loadUPS() {
        $('#dump').html('Loading');
        $.ajax({
            type:'GET',
            url:"https://wwwcie.ups.com/json/XAV",
            username:"my_username",
            password:"my_pass",
            AccessLicenseNumber:"ACCESSKEY",
            success:function(dump) {
                $('#dump').append(dump);
            },
            dataType:'jsonp'
        });
    };
</script>

When I click the dummy button I'm just trying to get any kind of results to appear in the dummy div. Right now all that happens is an error in the console:

Refused to execute script from … because its MIME type (‘application/json’) is not executable, and strict MIME type checking is enabled

[RobertH]

When I click the dummy button I'm just trying to get any kind of results to appear in the dummy div. Right now all that happens is an error in the console:

Okay well the error was from me setting the dataType incorrectly , so the 'GET' is successful with dataType:'json'. But I don't know how to use methods or whatever to actually request information or how to tell the request it should use the customer's address for the Address Validation request.