Magento – Print Shipping Label

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?