Tienda – Removing Shipping Address

I’m a big fan of Tienda, I think it’s a fantastic e-commerce plugin for anybody who has a Joomla site.  If the main focus of the site is e-commerce I’d always recommend using Magento, but for an e-commerce add-on then Tienda takes a bit of beating.

It’s not really suitable for beginners in my mind though, although that’s more to do with the nature of e-commerce rather than of the Tienda extension.  There’s no such thing as a ‘standard e-commerce implemenation’ – every one requires some kind of customisation.  One of aspects that might be required is the ability to remove the separate shipping address in the checkout.

Why would this be important?  Well if you use SagePay in the UK, one of the security aspects (in addition to CV2, 3D secure etc) is that you can stipulate in the My SagePay panel to only accept payments where the shipping address and the billing address are the same.  For some products (especially those which are likely to be bought as presents) this is no use, but for some it is crucial.  Electronics are an example of this latter category.  Electronics retail is relatively more risky in relation to fraudulent transactions and chargebacks from the internet merchant account provider.  You can reduce the risk by only shipping to the address the card is registered to.

The trouble with this is that you cannot then have separate billing and shipping address forms in your shop’s checkout.  Apart from anything else, it is redundant information but it will also confuse the clients, and cause transactions to fail at the processing stage because they may well enter a different address (not realising that they shouldn’t).

To accomplish this in Tienda requires alterations to the CSS and JavaScript as well as the view file for the checkout (note that these instructions only relate to the One Page Checkout).

File: components/com_tienda/views/checkout/tmpl/onepage.php

The idea behind this is that we wrap the whole checkout process (minus the billing information form) in a div which has it’s CSS display property set to ‘none’.  I gave it an id of ‘pageremainder’. The separate shipping address form is also wrapped in a div which has it’s CSS set to display ‘none’.

The idea is that the user has to enter their billing address and then hit a button to save it before they can proceed.  This button click performs the same Javascript function as the checkbox which automatically copies the billing address to the shipping address, but in addition also sets the ‘pageremainder’ div’s CSS display property to ‘block’, allowing the user to proceed and select their shipping and payment options.

So take the checkbox HTML below;

<input id="sameasbilling" name="sameasbilling" type="checkbox" onclick="copyBillingAdToShippingAd(this,this.form); " />&nbsp;
<?php echo JText::_( 'Same As Billing Address' ); ?>:

And change it to;

<button type="button" id="sameasbilling" name="sameasbilling"  onclick="copyBillingAdToShippingAd(this, this.form); " />&nbsp;
Save Address</button> &nbsp; Click here to save your address and load your shipping and payment options.

Now we modify the Javascript;

File: media/com_tienda/js/tienda_checkout_onepage.js

We have to modify the JavaScript function so that it’s not looking for a checkbox to be ticked any more.  We also have to set the CSS display property for the remainder of the checkout form to ‘block’ once the billing address has been copied across to the hidden shipping address field.

function copyBillingAdToShippingAd(checkbox, form)
{
disable = true;
tiendaGetShippingRates( 'onCheckoutShipping_wrapper', form ); tiendaGetPaymentOptions('onCheckoutPayment_wrapper', form);

var fields = "address_name;address_id;title;first_name;middle_name;last_name;company;address_1;address_2;city;country_id;zone_id;postal_code;phone_1;phone_2;fax";
var fieldList = fields.split(';');

for(var index=0;index<fieldList.length;index++){
billingControl = document.getElementById('billing_input_'+fieldList[index]);
shippingControl = document.getElementById('shipping_input_'+fieldList[index]);
if(shippingControl != null){
shippingControl.disabled = disable;
if(billingControl != null){ shippingControl.value = disable ? billingControl.value : '';}
}
}

$('pageremainder').setStyle('display', 'block');
}

This covers the guest checkout but if the user is logged in we need to make additional changes;

File: components/com_tienda/views/checkout/tmpl/onepage.php

We need to add the following code at the end of the conditional PHP function which sets the address fields for logged in users (after line 87 or so)

<button type="button" onclick="makeShippingVisible(); " />&nbsp;
Save Address</button> &nbsp; Click here to load your shipping and payment options.

We then finish things off by creating a new JavaScript function to handle the CSS change;

File: media/com_tienda/js/tienda_checkout_onepage.js

function makeShippingVisible()
{
$('pageremainder').setStyle('display', 'block');
}