How can I add Track Button to PrestaShop store?

IN THIS ARTICLE

Insert track button to a new page

1. Edit Theme File (header.tpl)

Go to your FTP location and look for header.tpl file in your Theme folder. Edit the theme file  header.tpland insert the following after the <body> tag. 

{literal} <div id="as-root">&nbsp;</div><script>(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;r=e.createElement(t);r.id=n;r.src="//button.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")</script> {/literal}
2. Add a new web page

a. Login to your PrestaShop admin panel
b. Click  Preferences >  CMSat the top navigation
c. Select  Add new page shipping_number_show
d. Edit Meta Title, description, keywords, URL
e. Select  html to add content in HTML mode

3. Insert Track Button Code

a. Insert the following code or copy from your  AfterShip account :

<div class="as-track-button" data-domain="track.aftership.com" data-size="large"></div>

b. Remember to login to your AfterShip account >  apps > Track Button for custom style. You can also replace data-domain="track.aftership.com" with your AfterShip username or custom domain to display tracking results, and apply your carrier settings. 
c. Once done, click  Save and preview- try to refresh the page if you cannot see the track box.

Insert Track Button at Order History Page

Go to your FTP location and look for order-detail.tpl file in your Theme folder.Edit the theme file  order-detail.tpland replace the following code where you find $line.tracking_number.

Replace:

<span id="shipping_number_show">{if $line.tracking_number}{if $line.url && $line.tracking_number}<a href="{$line.url|replace:'@':$line.tracking_number}">{$line.tracking_number}</a>{else}{$line.tracking_number}{/if}{else}-{/if}</span>

With:

<span id="shipping_number_show">{if $line.tracking_number}
{literal}<div id="as-root"></div><script>(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n)){aftership.buttonCreator.create();return;}r=e.createElement(t);r.id=n;r.src="//button.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")</script>
{/literal}
<div class="as-track-button" data-domain="track.aftership.com" data-size="small"data-tracking-number="{$line.tracking_number}" ></div>
{else}-{/if}</span>

*Note: some theme use  span class ="shipping_number_show"  instead.

Bug Fix 

If you get error Message:   The content field (English (English)) is invalid.

You need to install the standard TinyMCE , please follow this link for installation: http://mypresta.eu/en/art/developer/prestashop-product-page-full-rich-editor.html#validate_class_change

(Thanks to user Adam providing the solution)

Was this article helpful?
0 out of 1 found this helpful