the_lyall
Active Member
I found a cool FREE tracking widget which is really easy to add for AliDropship, works for all carriers (full list available of the posttrack.com website) and works like this:
I just added it to a site I'm working on. All you need to do is this:
There are lots of options for this, either using the free Header and Footer Scripts plugin (which will load it on all pages, so not ideal) or what I do is add the below code snippet which adds the script at the same time as adding the extra line of text at the top. That way the script is only called when needed:
That's it! Doing the above will replace the hyperlink inserted by AliDropship (which would normally link the tracking number to your tracking page) with the information needed for the tracking Javascript to work.
If you want to (like I do) you can also add the below CSS to hide the ads in the top of the tracking frame and replace it with your logo, text or anything else you want, as well as making the contents of the iframe un-clickable while still being able to scroll it:
NOTE: Don't use this if you have a link to your tracking page elsewhere on your site, like in a menu, unless the link syntax is different. Otherwise it will stop that link working! I don't have links to the tracking page on my sites, I only use it linked directly from tracking numbers.
Also, I checked the terms of use and there's nothing mentioned about hiding content/ads within the tracking widget
as we're not manipulating the contents of the iframe itself or any of the services provided, we're just changing how the iframe is displayed/positioned in our site.
I just added it to a site I'm working on. All you need to do is this:
- Install the free plugin Real-Time Find and Replace
- Add a new replacement:
- Find: href="[ENTER YOUR TRACKING PAGE URL]? if you don't have your own tracking page it doesn't matter, you just need to replace the link to whichever tracking page you're using. If you're not sure, you can check your AliDropship settings or view the web page source to check what's there.
- Replace: style="color:black;" data-ptwidget-type="button" data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="
- Insert the Javascript below into the page:
There are lots of options for this, either using the free Header and Footer Scripts plugin (which will load it on all pages, so not ideal) or what I do is add the below code snippet which adds the script at the same time as adding the extra line of text at the top. That way the script is only called when needed:
PHP:
add_action('woocommerce_order_details_before_order_table', 'action_order_details_before_order_table', 10, 4 );
function action_order_details_before_order_table( $order, $sent_to_admin = '', $plain_text = '', $email = '' ) {
// Only on "My Account" > "Order View"
if ( is_wc_endpoint_url( 'view-order' ) && $order->has_status('completed') ) {
printf(
__('<script async src="https://posttrack.com/js/min/posttrackwidget.js"></script><div class="account-delivery-message">Please click the tracking IDs below for more information.</div>', "woocommerce")
);
}
}That's it! Doing the above will replace the hyperlink inserted by AliDropship (which would normally link the tracking number to your tracking page) with the information needed for the tracking Javascript to work.
If you want to (like I do) you can also add the below CSS to hide the ads in the top of the tracking frame and replace it with your logo, text or anything else you want, as well as making the contents of the iframe un-clickable while still being able to scroll it:
CSS:
.ptwidget-track-content{
margin-top:-40px;
z-index:-1;
}
.ptwidget-track-container .ptwidget-track-header .ptwidget-track-header-title{
margin-right:15px;
}
.ptwidget-track-header-title:after{
content:"";
background-image:url('ENTER YOUR LOGO IMAGE URL OR SOMETHING');
background-size:150px 39px;
background-repeat:no-repeat;
background-position:48%;
display:block;
text-align:center;
height:66px;
border:1px solid #ccc;
margin-left:4px;
margin-right:16px;
}
.ptwidget-track-content{
overflow-y:scroll !important; /* make the container scrollable */
}
.ptwidget-track-content-iframe{
pointer-events:none; /*because disabling clicking also disables the ability to scroll */
height: 3000px !important; /*set a height bigger than the content of the iframe as it won't scroll */
overflow-y:none !important; /*get rid of the scrollbar we can't use */
}NOTE: Don't use this if you have a link to your tracking page elsewhere on your site, like in a menu, unless the link syntax is different. Otherwise it will stop that link working! I don't have links to the tracking page on my sites, I only use it linked directly from tracking numbers.
Also, I checked the terms of use and there's nothing mentioned about hiding content/ads within the tracking widget
as we're not manipulating the contents of the iframe itself or any of the services provided, we're just changing how the iframe is displayed/positioned in our site.
Last edited:
