One-Page Checkout [Support Thread]

[Jeff_Mash]

Sure, you can create a little addition to the checkout_one page's processing.

Thanks! That works great! I think we are almost there, but we are inadvertently causing another side effect by doing this.

Where we now stand:

1. Customer comes to the One Page Checkout screen. Payment is now auto-selected thanks to your recommendation above. This is GOOD.
2. Customer checks the Optional Insurance box. This automatically refreshes the page now, and updates the total at the bottom of the page. Also GOOD!

However, after the auto-refresh which applies the insurance to the total, the page reloads WITHOUT the Optional Insurance box checked. (The order total does reflect the Optional Insurance added, it's just that the checkbox is not showing it being selected).

So now what happens is that when I click the Confirm Order button, it doesn't confirm the order. Instead, it refreshes the page REMOVING the Optional Insurance (because it wasn't checked) and updates the order total without the insurance.

So Problem #1: What do I need to set to keep the checkbox checked? I assume it's setting that Session variable in someway.

And Problem #2: Will solving #1 above cause the order to be Confirmed on the first click of the button?

[lat9]

To keep that checkbox checked, you'll need to modify that optional insurance order-total so that it records the check when clicked (or unclicked) into the session, as you indicated, and also to initialize the checkbox based on that session value (if present).

[Jeff_Mash]

To keep that checkbox checked, you'll need to modify that optional insurance order-total so that it records the check when clicked (or unclicked) into the session, as you indicated, and also to initialize the checkbox based on that session value (if present).

Ok cool.....I just did that in the ot_insurance module and got it working!

Final question (I promise)! It looks like your One Page module is the one putting the "Apply" button next to these other modules, which makes total sense because it's designed to have the user "click to apply" their settings.

But since I modified the Insurance module to "auto-submit" upon checking the box, I no longer need the "Apply" button next to it (since it's auto-applied based on our changes).

How can I remove that Apply button from being displayed on the ot_insurance section of the checkout page? (Would it just be an if/else statement added to your function submitonce() in your checkout_one.js file)?

[lat9]

Ok cool.....I just did that in the ot_insurance module and got it working!

Final question (I promise)! It looks like your One Page module is the one putting the "Apply" button next to these other modules, which makes total sense because it's designed to have the user "click to apply" their settings.

But since I modified the Insurance module to "auto-submit" upon checking the box, I no longer need the "Apply" button next to it (since it's auto-applied based on our changes).

How can I remove that Apply button from being displayed on the ot_insurance section of the checkout page? (Would it just be an if/else statement added to your function submitonce() in your checkout_one.js file)?

You can "hide" that button via CSS. Just update your template's version of /css/checkout_one.css and add something akin to

#disc-ot_insurance+div.buttonRow { display: none; }

Just use your browser's 'element inspector' and make sure that the id= attribute on the ot_insurance input matches the value above.

[Jeff_Mash]

You can "hide" that button via CSS. Just update your template's version of /css/checkout_one.css and add something akin to

#disc-ot_insurance+div.buttonRow { display: none; }

Just use your browser's 'element inspector' and make sure that the id= attribute on the ot_insurance input matches the value above.

Thank you so much for all your help! That works PERFECTLY!!

Just to document what I did (for anyone else wanting to accomplish the same), I made two changes to the code.

1. Since your template is the one that adds the Apply button on the checkout page, I modified the tpl_opc_credit_selections.php to assign a unique class name to ONLY the insurance block.

I changed this (line 54):

<div class="buttonRow forward"><?php echo zen_image_button(BUTTON_IMAGE_SUBMIT, ALT_TEXT_APPLY_DEDUCTION, $additional_parms, $secondary_class); ?></div>

And replaced it with this:

            <?php 
				if(strpos($current_selection['module'],"Shipping Insurance") !== false){
			?>
				<div class="buttonRow forward ot-insurance"><?php echo zen_image_button(BUTTON_IMAGE_SUBMIT, ALT_TEXT_APPLY_DEDUCTION, $additional_parms, $secondary_class); ?></div>
			<?php 
				}
				else {
			?>
					<div class="buttonRow forward"><?php echo zen_image_button(BUTTON_IMAGE_SUBMIT, ALT_TEXT_APPLY_DEDUCTION, $additional_parms, $secondary_class); ?></div>
			<?php 
				}
			?>

There is probably a better (and prettier) way to accomplish that, but I'm not a native PHP programmer. :)

2. Finally, I simply edited your checkout_one.css file to add the following line:

.ot-insurance { display: none; }

Those changes (along with the previous posts of ours) made the module work exactly as we wanted! The customer can now click to apply insurance, it will update the form totals automatically, and the now-redundant "Apply" button has been removed from that Insurance block (without removing it from others like Coupons and Gift Certificates, etc).

Thanks again for all your help, Lat9!