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

https://s3.amazonaws.com/aftership.s3/Magento/add-track-button-magento-2.png

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. 
 eClick 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>
c. 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>
d. 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. 




Feedback and Knowledge Base