Home > Magento > Magento – Print Shipping Label

Magento – Print Shipping Label

Posted on: 29th Apr 2010 By: Adam Moss 23 Comments

Here’s a nice simple hack which is also made known on the official Magento website, something which really should be there as standard. Despite being known about before the 1.4.0.1 release, Varien still hasn’t seen fit to include it, which seems criminal given how easy a hack it is. I’m not gonna go down the road of sitting here and openly criticising Varien again, because you know, that’s not me… *ahem*

See the official tutorial here: http://www.magentocommerce.com/wiki/print_labels

In case this link ever goes down or maybe you just don’t like the Magento website, I’ll echo the fundamental actions that need to be undertaken right here on the Magento Blog.

Firstly, don your mining hat with the flashlight on and get ready go deep underground. Download and open this file: /app/design/adminhtml/default/default/template/sales/order/view/info.phtml

Around line 171 there’s some code that looks like this: <h4 class=”icon-head head-shipping-address”><?php echo Mage::helper(’sales’)→__(’Shipping Address’) ?></h4>

Right underneath this, enter the following code. This is the link to the shipping label that will now be visible when you look at order details in the backend.

<span style="float:right"><a href='#' style="color:#FFCC22" onclick="labelPrint()" >Print Shipping Label</a></span>

Now, right at the bottom of info.phtml add the following code. This tells the link to open a popup with the shipping details displayed. You’ll notice that the URL contains the page ‘/print_label’ – this is the page which we’ll use to display the information.

<script type="text/javascript">
/* <![CDATA[ */
<?php
$shipaddr= $_order->getShippingAddress()->getFormated(true);

$splitx=explode("\n",$shipaddr);

$inx=array('<br />','<br/>',' ');
$outx=array('','','%20');

$shipx='';

foreach($splitx as $sx):
if(!empty($sx) && substr($sx,0,3)!='T: '):
$shipx.=str_replace($inx,$outx,$sx).'@@';
endif;
endforeach;

echo "\n".'var shipx="'.$shipx.'"; '."n" ;
?>

var popUpWin=0;

function labelPrint() {
var url="/print_label?addr="+shipx;
//
popUpWin = open(url,'popUpWin','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,copyhistory=yes, width=500,height=250,left=100,top=100,screenX=100,screenY=100');
}

/* ]]> */
</script>

Finally we need to create the ‘print_label’ page to host this information. Using the CMS create a page with the identifier ‘print_label’ and add the following code/CSS. You can obviously adjust the CSS to how you want:

<style type="text/css" media="all">
* { margin:0; padding:0; }
#address {
/**********ADJUST THE CSS VALUES BELOW FOR THE PRINT LABEL PAGE ***********/ 

font-size:17pt;
top:30px;
left:20px;
width:400px;
height:210px;
line-height:120%;
padding:15px;
border:1px dashed #ccc; 

/**************************************************************/
font-weight:bold;
position:absolute;
}
#printBTN { float:right;margin:2px 5px 0 0 !important;}</style>

<style type="text/css" media="print"> #printBTN {visibility:hidden;}</style>

<div id="printBTN"><input type="button" onClick="window.print()" value="Print" /></div>

<div id="address">
<script type="text/javascript">
var str=location.href; var output='';
str=str.substr(str.indexOf("addr=")+5);
str=str.replace(/%20/g,' ');
output=str.replace(/@@/g, "<br />");
document.write(output);
</script>
</div>

Now when you go to view an order in the admin, the link should be there in a nice yellow font, standing out allowing you to print a postage label – very handy indeed! Let’s get it on there as standard, eh Varien?

By Adam Moss

Adam is Ecommerce Manager and a PHP developer at Creare Group. Adam is responsible for training Magento development within the company. Follow Adam on Twitter: http://twitter.com/adampmoss. - Read my other posts.

23 Responses to “ Magento – Print Shipping Label ”

Jeff

#1 | 25th June 2010
Where exactly do you put this code in the cms page?
I tried content but all that happens when you display the label is code pops up.
Adam Moss

#2 | 25th June 2010
Hi Jeff, if you’re using the latest version – make sure that you’re not pasting it into the WYSIWYG view otherwise it will come through as just code.
Bart

#3 | 30th June 2010
Hi,

How do i get rid of my other website stuff when clicking the button print shipping label, it pops the page open but still has my website theme/frame around it.

When i click the print button it just prints the current page, even prints the print button.

Thanks
Jeremiah Lewis

#4 | 15th July 2010
Not getting anything at all. No popup window. I have javascript enabled, and I have tested js popup windows elsewhere and don’t have any issues with others. Any ideas?
Puerh Tea

#5 | 13th October 2010
I’m having the same problem as Bart. Everything works fine except the popup opens with my theme surrounding the address label.

I tried playing with the window layout settings, but can’t seem to make this into a blank popup window with the address.
Charles Mah

#6 | 16th November 2010
Hey Everyone,

I have successfully integrated this in magento 1.4.1.1.

Just follow the instructions and everything should work out.
Apichai

#7 | 14th December 2010
I have problem with ä/ö letter which is Finnish. Those text with this special characters showed as “%C3%A4r” instead.

Any way to work around this to show proper text?

Cheers!
Mark

#8 | 10th February 2011
This is great but i really need to be able to show the order details on this slip.

Does anyone know how this can be added?

Thanks
Kathy Ink

#9 | 23rd March 2011
Why would you want to do this, when there is software available and it is not hacking. Phew! I am personally not impressed. Don’t get me wrong I am not a prude, but this is just blatantly not a positive promotion as it goes against the grain of basic honesty and integrity.
Adam Moss

#10 | 23rd March 2011
Kathy what are you talking about? – It’s just printing a shipping label….
Albert Sparks

#11 | 25th March 2011
Clever idea particularly for those who do not use high volumes. Oh what a wonder our technology is!
Jose Lorenzo

#12 | 30th March 2011
I have the same problem as Apichai , the ñ and accents, my default language is Spanish. Then I get a strange code.

****** Chac%C3%B3n ——————> Chacón
********** C/*****, 2
**********, Cadiz, 11407
Espa%C3%B1a ————————> España
Daniel

#13 | 14th April 2011
Hi I Follow all the instructions but when i clic the “Print label” botón I get this message “The requested URL /print_label was not found on this server.” Any idea?
Jellyfish

#14 | 22nd April 2011
Daniel, had the same issue… it’s a path problem in the js

var url=”/print_label?addr=”+shipx;
——-^

Your Mage loction is not in the root folder, probably something like:
http://www.danielstore.com/foldername/

try this with the correct path for that line:
var url=”/foldername/print_label?addr=”+shipx;

You could add a function to get the url with js, but will do the trick
Hope this helps.
Daniel

#15 | 24th April 2011
Hi Jellyfish

I changed the path to the right one ( to my Mage loction) and i get this new message “Forbidden

You don’t have permission to access /store/app/print_label on this server.” Any advice? Thanks.

Matin

#16 | 28th July 2011

You can improve this by capitalizing and adding conversions for weird characters, that otherwise comes out as %-signs and numbers, using some regular expression. Here’s the code

<script type="text/javascript">
String.prototype.capitalize = function(){
   return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );
  };
var str=location.href; var output='';
str=str.substr(str.indexOf("addr=")+5);
str=str.replace(/%20/g,' ');
output=str.replace(/@@/g, "<br />");
document.write(decodeURIComponent((output + '').replace(/\+/g, '%20')).capitalize());
</script>

Matin

#17 | 28th July 2011

Forgot a space..

<script type="text/javascript">
String.prototype.capitalize = function(){
   return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );
  };
var str=location.href; var output='';
str=str.substr(str.indexOf("addr=")+5);
str=str.replace(/%20/g,' ');
output=str.replace(/@@/g, "<br /> ");
document.write(decodeURIComponent((output + '').replace(/\+/g, '%20')).capitalize());
</script>

David

#18 | 2nd November 2011
Or you could but this extension http://shop.aquivemedia.nl/magento-extensions/dymo-labelwriter-extension.html which ofcourse is way more expensive then free. But it works very good.
lara@printer cartridges

#19 | 16th November 2011
Good thought! The post has really good stuff on printing worth to read. Thanks for the share! Keep posting!!
aman

#20 | 20th November 2011
If you want online shipping label generation solution then
go to quickonlineship.com

It creates shipping label out of your orders csv file.
Sean

#21 | 10th January 2012
Hi,
I’ve set this up in my admin and it works great. My only question is how can I include the customer’s telephone number underneath the address block?

Is anyone able to offer any advice?

Thanks
Sean
Presupuesto Tienda Online

#22 | 2nd April 2012
Worked here on Magento 1.6.2.0.

Thanks!
HP Ink Cartridges

#23 | 24th April 2013
I’ve set Magento 1.6.2.0. up in my admin and it works well.And I still have some other questions,could I contact you?