How can I add Track Button to Magento?

(Support Magento Enterprise, Magento Community, MagentoGo)

1. Add a New Page

a. Login to your magento store
b. Click  CMS  > Pagesat the top navigation
c. Click  Add New Page 
d. Enter Page Title e.g. Track Your Order
e. Enter  URL Key e.g. track-your-order
f. Select  Store View 
g. Set   Status as  Enabled

2. Insert Track Button Code 

a. Enter Content Heading e.g. Track Your Order
b. Click  Show/Hide Editor to enable HTML editor mode
c. Insert the following code or copy from your  AfterShip account (for specific couriers and custom style)

<div id="as-root"></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>
<div class="as-track-button" data-domain="track.aftership.com" data-size="large"></div>

d. Remember to login to your AfterShip account >  apps > Track Button for custom style. Remember to replace  data-domain="track.aftership.com" with your AfterShip username or custom domain to apply your carrier settings. 
e. Click  Save

3. Insert Track Button at Order History Page

 

a.  Access FTP and open folder under app/design/frontend/base/xxxxxx/template/shipping/tracking/

b. Edit theme file popup.phtml

c. Insert the following code after  <?php $_results = $this->getTrackingInfo(); ?>

<div id="as-root"></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>

d. Replace the following code:

<td class="value">
<?php echo $this->escapeHtml($track->getTracking()); ?>
</td>

 With

<td class="value">
<div class="as-track-button" data-size="small"data-tracking-number="<?php echo $this->escapeHtml($track->getTracking()); ?>" data-domain="track.aftership.com"></div>
</td>

e. Replace the following code:

<td class="value">
<?php echo (isset($track['number']) ? $this->escapeHtml($track['number']) : ''); ?>
</td>
 with
<td class="value">
<div class="as-track-button" data-size="small" data-tracking-number="<?php echo (isset($track['number']) ? $this->escapeHtml($track['number']) : ''); ?>" data-domain="track.aftership.com"></div>
</td>

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. 

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