Skip to main content

Add Track Button to Magento 1 Store

Add Track Button to Magento 1 Store in AfterShip Tracking: follow setup steps, configure key options, verify behavior, and troubleshoot workflow issues.

Overview

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

Add a new web page

  1. Log in to the 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 the code below and paste it into 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 an AfterShip username or a 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 the code mentioned below

    <?php $_results = $this->getTrackingInfo(); ?>

    Insert the code snippet below after it:

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

  4. Search for the code mentioned below

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

    Replace with the code below:

    <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 the code mentioned below

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

    Replace with the code below:

    <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 an AfterShip username or custom domain and apply your carrier settings.

Key takeaways

  • You can enhance the post-purchase experience by embedding the AfterShip Track Button on the Order History Page.

  • Changes must be made in the order-detail.tpl file via FTP.

  • Clear the cache and recompile templates in PrestaShop after code updates.

  • The button can be customized with your own AfterShip domain.

  • Track button visibility depends on valid tracking numbers being available.

Did this answer your question?