Add Track Button to Magento store

Magento is one of the most popular eCommerce systems, written in PHP. You can insert the AfterShip Track Button to your store by embedding just a few lines of code.

🔧 Add a new Web Page

  1. Login to Magento admin dashboard > CMS > Pages (top navigation) > Add New Page
  2. Enter title (e.g. Track Your Order) > Enter URL Key (e.g. track-your-order) 
  3. Set status Enabled
  4. Save changes

🔧 Insert Track Button

  1. Login to Magento admin dashboard > CMS > Pages (top navigation) 
  2. Select a web page to add Track Button 
  3. Go to Content menu > Show/Hide editor 
  4. Copy below-mentioned code and paste in the editor
<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>

5. Save page

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

🔧 Insert Track Button to Order History Page

  1. Access FTP and open folder:
    app/design/frontend/base/xxxxxx/template/shipping/tracking/
  2. Edit popup.html theme
  3. Search for below-mentioned code
     <?php $_results = $this->getTrackingInfo(); ?>

Insert below code snippet after it

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

4. Search for below-mentioned code

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

Replace with below code

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

5. Search for below-mentioned code

<td class="value">
<?php echo (isset($track['number']) ? $this->escapeHtml($track['number']) : ''); ?>
</td>

Replace with below code

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

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

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