Jump to content

[Help] AfterShip Track Button at Order History Page


Recommended Posts

Hello,


 


I am trying to insert Track Button at Order History Page. The CMS page (Track You Order) is displaying the tracking box nicely. https://hobbyverse.com/content/9-track


 


post-880171-0-19765600-1422475049_thumb.


 


But the Order Page is not showing anything. The box below "Tracking number" is blank.


 


post-880171-0-24835100-1422475057_thumb.


 


I was following the tutorial given on https://aftership.uservoice.com/knowledgebase/articles/268687 . I modified the order-detail.tpl file as:


 


<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))return;r=e.createElement(t);r.id=n;r.src="//apps.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")</script>

{/literal}

<div class="as-track-button" data-width="400" data-size="small"data-tracking-number="{$line.tracking_number}" data-support="true"></div>{else}-{/if}</span>

 

 

Can someone please help me and point out where am I doing wrong?


 


Thanks and Regards


Share this post


Link to post
Share on other sites
  • 1 month later...

Hello - if track button does not work, you can make use of the direct tracking link instead.

 

All shipments imported to your AfterShip will generate an one-click tracking link.
 
By choosing a username at https://www.aftership.com/users/profile
Tracking link will become `username.aftership.com/trackingnumber`
 
You can embed that to your order history page  - Can you try it out?
 
Best
 
Andrew
Co-Founder
AfterShip

Share this post


Link to post
Share on other sites

Hello, I have contacted AfterShip support regarding this. Until there is a solution I have a quick work around. You can add a link to your tracking CMS page you created right under tracking number by editing your order-detail.tpl file and adding the link as shown: <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> <a href="cms tracking page url here"target="_blank"><p>Track Order</p></a> Replace cms tracking page url here with your cms tracking page url.

 

This at least adds a quick link to track orders. I tried to somehow install the tracking button (as in cms page) to the order history page, but so far have been unsuccessful.

Share this post


Link to post
Share on other sites

Hi everyone. Thanks for the suggestions. I have edited the order-detail.tpl to use iframe to show tracking details via aftership. Below is the code:

<iframe id="as-142254396005454" frameborder="0" src="//track-button.aftership.com/142254396005454/?tracking_number={$line.tracking_number}&size=small&id=142254396005454&slug=&counter=false&support=false&width=200&protocol=https%3A&host=hobbyverse.com&url=https%3A%2F%2Fhobbyverse.com%2Fcontent%2F9-track&user_id=&hide_tracking_number=false" style="width: 572px; height: 100%; overflow: visible; border: 0px; max-width: none;"></iframe>

It shows exactly what is shown in after ship tracking button but the tracking info doesn't pop out. Have attached 4 images of the iframe in work.

 

The tracking button:

 

post-880171-0-96356700-1425909715_thumb.jpg

 

When TRACK is clicked:

 

post-880171-0-55445300-1425909724_thumb.jpg

 

Tracking results:

 

post-880171-0-58875900-1425909730_thumb.jpg

 

Have to scroll down to see more details:

 

post-880171-0-64917600-1425909738_thumb.jpg

 

I did this because I wanted to let my customers check tracking details right from their order details page without having to go to an external link.

 

Of course I would be thankful if anyone can find a way to make the tracking details pop out like in the actual tracking details by aftership.

 

Regards,

Nairit

Share this post


Link to post
Share on other sites

Hello I wanted to add I found another way to have direct link to AfterShip tracking. This method creates link from actual tracking number added to orders.

 

1. Add username.aftership.com/@ tracking url to Prestashop carrier. This will add the AfterShip tracking url with tracking number to customers via In Transit email.

 

This also creates a hyperlink to the tracking number in Back Office>Orders>View as well as Order History Page. You can simply click on the tracking number in order history; there would be no need to add a link to AfterShip tracking button under tracking number unless you wanted to use different tracking url (USPS, UPS for example) for that carrier. Or you wanted to link to the cms tracking page you created (keeping customers on your website). I also like nairitb's suggestion, although I still would like the tracking number to be kept within the table where it says 'Tracking number'. Keep in mind, when you change tracking url for a carrier this new tracking url will only apply to new orders. Here's more on the subject: https://www.prestashop.com/forums/topic/223138-solved-tracking-number-url-not-appearing-in-email-sent-to-customer/

  • Like 1

Share this post


Link to post
Share on other sites

Hi everyone. Thanks for the suggestions. I have edited the order-detail.tpl to use iframe to show tracking details via aftership. Below is the code:

<iframe id="as-142254396005454" frameborder="0" src="//track-button.aftership.com/142254396005454/?tracking_number={$line.tracking_number}&size=small&id=142254396005454&slug=&counter=false&support=false&width=200&protocol=https%3A&host=hobbyverse.com&url=https%3A%2F%2Fhobbyverse.com%2Fcontent%2F9-track&user_id=&hide_tracking_number=false" style="width: 572px; height: 100%; overflow: visible; border: 0px; max-width: none;"></iframe>

It shows exactly what is shown in after ship tracking button but the tracking info doesn't pop out. Have attached 4 images of the iframe in work.

 

The tracking button:

 

attachicon.gifaftership1.jpg

 

When TRACK is clicked:

 

attachicon.gifaftership2.jpg

 

Tracking results:

 

attachicon.gifaftership3.jpg

 

Have to scroll down to see more details:

 

attachicon.gifaftership4.jpg

 

I did this because I wanted to let my customers check tracking details right from their order details page without having to go to an external link.

 

Of course I would be thankful if anyone can find a way to make the tracking details pop out like in the actual tracking details by aftership.

 

Regards,

Nairit

Hello I really like your suggestion and tried it, as I realized I could add this to Order History page as well without altering or omitting any other information on page. But, for some reason, when I click on tracking number link in table labeled 'Tracking number' I am directed to my username.aftership.com tracking url and it correctly identifies courier and shows tracking detail. When I click on tracking number within iframe it says it cannot identify courier? Just tried this again with new order and still no luck. Not sure why this happening. Will do a little troubleshooting later.

Share this post


Link to post
Share on other sites

I think in the "as-142254396005454" and other such instances, the number "142254396005454" will be different for each registered user at aftership. Please remember that in our aftership account, we can select which carriers we want to track. I selected IndiaPost. If you are using the iframe EXACTLY as given by me, then may be this is the reason it says it cannot identify courier.

 

I found this number by right clicking on the aftership tracking details for my track button and selecting "Inspect Element". You will find an iframe there with "as-....". Hope this helps.

  • Like 1

Share this post


Link to post
Share on other sites

I think in the "as-142254396005454" and other such instances, the number "142254396005454" will be different for each registered user at aftership. Please remember that in our aftership account, we can select which carriers we want to track. I selected IndiaPost. If you are using the iframe EXACTLY as given by me, then may be this is the reason it says it cannot identify courier.

 

I found this number by right clicking on the aftership tracking details for my track button and selecting "Inspect Element". You will find an iframe there with "as-....". Hope this helps.

Hello Nairit,

 

Yes, thank you. It is working now. The main thing is to inspect element from your track button, copy & paste iframe to order-detail.tpl and simply paste: {$line.tracking_number}. Also you can change a couple other parameters, like size=large to size=small. Still trying to figure how to avoid scrolling. <iframe id="as-142254396005454" frameborder="0" src="//track-button.aftership.com/142254396005454/?tracking_number={$line.tracking_number}&size=small&id=142254396005454&slug=&counter=false&support=false&width=200&protocol=https%3A&host=hobbyverse.com&url=https%3A%2F%2Fhobbyverse.com%2Fcontent%2F9-track&user_id=&hide_tracking_number=false" style="width: 572px; height: 100%; overflow: visible; border: 0px; max-width: none;"></iframe>

 

Thanks again for this great tip! It is nice for customers to be able check tracking details right from their order history page.

Share this post


Link to post
Share on other sites

I have found a way to avoid scrolling. I have added position: relative; to iframe & changed iframe height to 1500px. This is a number that should allow most tracking details to pop up without scrolling. Then inspect element for the Add Message section and add margin-top: -xxxxpx; (relative to how high you set your iframe height) to css style. This will pull the Add Message section back up the page. So far I have checked on desktop and mobile device and content stays in relative position.

Share this post


Link to post
Share on other sites

I have found a way to avoid scrolling. I have added position: relative; to iframe & changed iframe height to 1500px. This is a number that should allow most tracking details to pop up without scrolling. Then inspect element for the Add Message section and add margin-top: -xxxxpx; (relative to how high you set your iframe height) to css style. This will pull the Add Message section back up the page. So far I have checked on desktop and mobile device and content stays in relative position.

-- update: Still working on this, but this current configuration doesn't work; Add Message section is now essentially behind iframe thus you cannot access fields.

Share this post


Link to post
Share on other sites

May be keeping the iframe INSIDE a DIV and adding "position: relative" to this DIV will help. Read somewhere that iframe do not respond well to "position: relative". But I am not willing to make the change as inserting a DIV tag will need the css file to be modified. I am afraid to do this as I am not an expert in html / php.

Share this post


Link to post
Share on other sites
  • 5 months later...

This maybe a bit late, but I'm sure it'll help out a few frustrated users. Here is the CORRECTED code:

<span id="shipping_number_show">{if $line.tracking_number}
<div id="as-root"></div><script>{literal}(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"){/literal}</script>
<div class="as-track-button" data-domain="track.aftership.com" data-size="small"data-tracking-number="{$line.tracking_number}" ></div>
{else}-{/if}</span>

The {literal} tags had to be moved INSIDE the script tags. 

 

IMPORTANT: Make sure you have turned OFF the "Move JavaScript to the end" in the performance section in the back-end(This won't affect the performance by much anyway)

Share this post


Link to post
Share on other sites
  • 2 months later...

Same problem here.

Moving the literal tags inside the script didn't help either.

Aftership have asked for store admin access, which I'm rather reluctant to give.

it seems rather pointless to me anyway, since you need to edit the tpl files on the server, so having a look in the BO would make no difference, right?

Unless I'm missing something of course (not unlikely frankly).

So yes, still looking for a solution.

 

And the information is actually present on the page, just not displayed

<td class="footable-last-column"> 
<span class="shipping_number_show">
<div id="as-root"></div><script>/* <![CDATA[ */;(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 data-tracking-number="1Z31Y1Y90496427607" data-size="large" data-domain="track.aftership.com" class="as-track-button"></div> </span></td>

Edit:

After pointing out that BO access would be of no use, they have now asked for FTP access as well.

Edited by thijsvk (see edit history)

Share this post


Link to post
Share on other sites

Somehow adding the iframe made the tracking button appear.

Not sure how or what, but of course that means that I don't need the iframe anymore.

Unfortunately, removing it, makes the button dissapear again so I've set the width of the iframe to 100% and the height to 1px, giving me a nice line.

Confused.

 

Edit: For !"£$%^&*()_ sake, the button is displayed now but in FireFox only! AAAARRRRGGGHHH!!!!!

 

Edit (again); it seems it's not browser related, the button has once again dissapeared.

 

Edit (yes, again): I'm starting to think that it has something to do with Aftership's site/back end. After more mesing around, I managed to get the button back, both in Chrome and FF, only for it to disappear again. I decided not to make any changes to the code, and just refresh the page, a lot, a lot lot. And all of a sudden the button appears again.

post-711849-0-16392500-1447855275_thumb.jpg

Edited by thijsvk (see edit history)

Share this post


Link to post
Share on other sites

Have you turned OFF the "Move JavaScript to the end" option in the performance settings?

 

If still you're facing this issue, this might be only on your device, Maybe it's something you've installed, like a browser add-on maybe, that's causing the button to disappear on your end and it might be working fine on other devices. 

 

 

You can still use the built-in tracking link feature of prestashop. You can add the tracking URL(provided by aftership) to your shipping carrier in prestashop. It will automatically generate a link on the order history page. 

Share this post


Link to post
Share on other sites

I wish it was that easy .

No "Move JavaScript" is not active, and the situation is the same on both Chrome and FF on multiple devices on multiple networks.

I might just have to look into the tracking url.

Share this post


Link to post
Share on other sites

Yay Aftership support!!

They sorted out my issue. Before I gave them (limited) access to the BO and FTP, I reverted all my changes, so they could start with a clean slate.

We had some issues with sending the credentials, but once they had those, they fixed it within a few days. :)

Share this post


Link to post
Share on other sites
  • 2 weeks later...
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More