Saturday, October 2, 2010

PrestaShop Tips - How to change address displaying format (front store)

--------------------------------------------------------------
Note: (edited on August 27, 2011)
If you are using PrestaShop 1.4x and above, you are able to change the format at your back office. Back Office - Shipping - Countries - edit country and change Address Layout
--------------------------------------------------------------

At PrestaShop, the addresses are default displayed in Europe address format. They look weird for some other country's addresses for example in USA or Canada. Here I explain on how to change the address display format for USA/Canada. I separate them into front store and back office, so it will be in two posts.

For changing address displaying format in back office, please click here

Here is my first post on how to change PrstaShop address displaying format at front store. For your reference, I attached comparison screen of files before/after change.


1. ./themes/yourTheme/addresses.tpl
Replace line 25,26 with following two lines


<li class="address_city">{$address.city} {if isset($address.state)} {$address.state}{/if} {$address.postcode} </li>
<li class="address_country">{$address.country}</li>



2. ./themes/yourTheme/order-address.tpl
Replace line 6 with following line

addresses[{$address.id_address|intval}] = new Array('{$address.company|addslashes}', '{$address.firstname|addslashes}', '{$address.lastname|addslashes}', '{$address.address1|addslashes}', '{$address.address2|addslashes}', '{$address.postcode|addslashes}', '{$address.city|addslashes}', '{$address.country|addslashes}','{$address.state|addslashes}');



3. ./themes/yourTheme/order-detail.tpl
Replace line 53,54 and with following lines

<li class="address_city">{$address_invoice->city|escape:'htmlall':'UTF-8'} {if $invoiceState} {$invoiceState->name|escape:'htmlall':'UTF-8'}{/if} {$address_invoice->postcode|escape:'htmlall':'UTF-8'}</li>
<li class="address_country">{$address_invoice->country|escape:'htmlall':'UTF-8'}</li>

Replace lin 64,65 with following lines

<li class="address_city">{$address_delivery->city|escape:'htmlall':'UTF-8'} {if $deliveryState} {$deliveryState->name|escape:'htmlall':'UTF-8'}{/if} {$address_delivery->postcode|escape:'htmlall':'UTF-8'} </li>
<li class="address_country">{$address_delivery->country|escape:'htmlall':'UTF-8'}</li>



4. ./themes/yourTheme/shopping-cart.tpl
Replace line 214,215 with following lines

<li class="address_city">{$delivery->city|escape:'htmlall':'UTF-8'} {if $delivery_state}{$delivery_state|escape:'htmlall':'UTF-8'}{/if} {$delivery->postcode|escape:'htmlall':'UTF-8'}</li>
<li class="address_country">{$delivery->country|escape:'htmlall':'UTF-8'} </li>

Replace line 225,226 with following lines

<li class="address_city">{$invoice->city|escape:'htmlall':'UTF-8'} {if $invoice_state}{$invoice_state|escape:'htmlall':'UTF-8'}{/if} {$invoice->postcode|escape:'htmlall':'UTF-8'}</li>
<li class="address_country">{$invoice->country|escape:'htmlall':'UTF-8'} </li>



5. ./themes/yourTheme/js/order-address.js
Replace line 47,48,49 with following lines

$('ul#address_' + addressType + ' li.address_name').html(addresses[idAddress][1] + ' ' + addresses[idAddress][2]);
$('ul#address_' + addressType + ' li.address_address1').html(addresses[idAddress][3] +',');
$('ul#address_' + addressType + ' li.address_address2').html(addresses[idAddress][4] +',');

Replace line 54,55 with following lines

$('ul#address_' + addressType + ' li.address_city').html(addresses[idAddress][6] + ' , ' + addresses[idAddress][8] +', '+addresses[idAddress][5]);
$('ul#address_' + addressType + ' li.address_country').html(addresses[idAddress][7] +'.');

8 comments:

Anonymous said...

Confused about the lines in in step

3. ./themes/yourTheme/order-detail.tpl

Alvin said...

There was an error at both description and screen shot image.

I have corrected them now.

Thanks for the feedback.

Anonymous said...

I believe step two is incorrect? When this code is used as is on the checkout "Address". There is no space between first and last name, there is a comma showing between each address part and the state is showing as (unverified), state is also missing from code?

Thanks for your help

Anonymous said...

I believe step two is incorrect? When this code is used as is on the checkout "Address". There is no space between first and last name, there is a comma showing between each address part and the state is showing as (unverified), state is also missing from code?

Thanks for your help

Alvin said...

Thanks for your feedback again.
When I pasted code to this post, some code was missed somehow.

Both issue has been fixed. If you have not fixed the issue, please redo STEP 2 (for state issue) and STEP 5 for (space issue)

Anonymous said...

THANK YOU SO MUCH for your quick responses to these issues! I have found all your Prestashop posts really useful! Thank you for all the hard work!!!

$am3e said...

Hello
I need it in this format and i am using shadow2 theme.

First Name Last Name
Company Name
Address1
Address2
City - Postcode
State
Mobile No
Phone No

Please let me know how can i make exactly like this in shadow2 theme. It is working fine when i use my default prestashop theme but not working with shadow2 theme. Please help me and thanks in advance.

Alvin said...

If you are using PrestaShop 1.4x and above, you are able to change the format at your back office. Back Office - Shipping - Countries - edit country and change Address Layout