Hide Payment and Shipping if $0

Hide Payment and Shipping if $0

Postby info@.....com » Wed Sep 26, 2012 7:06 am

Hi,
We are using the threecolumn_special template and would like to be able to hide some sections depending on the order. For example, we would like to be able to hide 3. SHIPPING INFORMATION and 4. SELECT PAYMENT if the value of the order is $0. Effectively this means hiding the whole middle column. This is because we are taking promotional orders which don't need payment, and only have one shipping option. We are also taking normal orders however, and so can't disable these sections permanently...

Any suggestions for the best way to accomplish this would be appreciated.

Thanks and regards

Mike
info@.....com
 
Posts: 6
Joined: Sun Jun 24, 2012 2:27 pm

Re: Hide Payment and Shipping if $0

Postby admin » Wed Sep 26, 2012 12:47 pm

Hello Mike, this is a little bit tricky because OPC counts totals per all cobinations of shipping, payment, coupon and product subtotal which is processed by ajax and then displayed with javascript. It is not a problem to hide the whole section at the totals function within onepage.js, but the problem is to select a payment and shipping which would be accepted by the checkout javascript processor. The shipping section can only be hidden (not deleted) because it contains all data from ajax. If you configure your payment and shipping so it returns a single shipping method (or free shipping) for 0 amout orders, then this could be done.

If you have your own programmer, he can do this, this way:
- open onepage.js in: /components/com_onepage/js/onepage.js
- search for:
Code: Select all
x = document.getElementById(shipping_id+'_'+payment_id+'_order_total');
    var order_total = x.value;

- right after this line, you can call:
Code: Select all
if (parseFloat(order_total)==0) document.getDocumentById('your_div_wrapper').style.display='none';
else document.getDocumentById('your_div_wrapper').style.display='block';


You need to wrap the middle section with a div with a specif id such as <div id="your_div_wrapper"> content of the middle column</div> The columns are generated in /components/com_virtuemart/themes/default/templates/onepage/YOUR OPC THEM/onepage.unlogged (and logged).tpl.php

It might require also modification of the width of the left or right column with another js/css.

Best Regards,
Stan
admin
Site Admin
 
Posts: 2708
Joined: Wed Jan 06, 2010 11:43 pm

Re: Hide Payment and Shipping if $0

Postby info@.....com » Thu Sep 27, 2012 6:27 am

Hi Stan
Thanks, that's very helpful. FYI some details on the change we made in case anyone else needs it in the future:

components/com_virtuemart/themes/default/templates/onepage/threecolumn_special/onepage.unlogged (and logged).tpl.php

added the following inside <div class="dob2">:
<div id="x_normal">
[ Current shipping and payment sections]
</div>
<div id="x_promo" style="display: none;">
[new section to be used for promotions only]
</div>

in components/com_onepage/js/onepage.js:
after
x = document.getElementById(shipping_id+'_'+payment_id+'_order_total');
var order_total = x.value;

added

if (parseFloat(order_total)==0) {
document.getElementById('x_promo').style.display='block';
document.getElementById('x_normal').style.display='none';
} else {
document.getElementById('x_promo').style.display='none';
document.getElementById('x_normal').style.display='block';
}
info@.....com
 
Posts: 6
Joined: Sun Jun 24, 2012 2:27 pm


Return to One Page Checkout for Virtuemart 1.1.x