Articles on: Branded Tracking Page

Add Track Button to PrestaShop Store

Plans: All plans Platforms: PrestaShop


Overview


PrestaShop is an open-source eCommerce solution. You can add the AfterShip track button to your store in just a few clicks and delight customers with a streamlined order tracking experience.


Important considerations


  • If you receive “The content field (English (English)) is invalid” error while adding the track button, please install the standard TinyMCE


Insert track button to a new page


Edit Theme File (header.tpl)


  1. Go to the start menu > FTP > Select your FTP location > Theme folder > Search for header.tpl file
  2. Insert the below-mentioned code after <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}


Add a new web page


  1. Go to the PrestaShop admin panel > Preferences > CMS > Add a new page
  2. Enter meta title, description, keywords, and URL
  3. Save the changes


Insert the track button code


  1. Go to the PrestaShop admin panel > Preferences > CMS > Select a web page to add track button > HTML editor
  2. Copy the below-mentioned code 


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


  1. Paste it in the HTML editor > Save changes


You can also replace data-domain="track.aftership.com" with your AfterShip username or custom domain and apply active courier settings


Insert track button to the order history page


Edit theme file (order-detail.tpl)


  1. Go to the start menu > FTP > Select your FTP location > Theme folder > Search for order-detail.tpl file
  2. Search for the below-mentioned code


<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>


Replace it with the below-mentioned code snippet and save changes


 
<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>


Please note: some themes use span class ="shipping_number_show".

Updated on: 05/05/2024