Adding SKU to the invoice .pdf

An idea how to add the sku for products to the invoice pdf? Cant seem to find this. Thank You!

Steps to adding the SKU to the PDF Invoice.

I needed the same thing for my Nopcommerce store, here is how I did it.  I used Nopcommerce 2.4 but I think this will probably work for 2.5.

You will need the source code.

You will have to edit PdfService.cs

This can be found under

Libraries  - > Nop.Services - > Common - > PdfService.cs

Step #1

First go to the following code. This is near the top.

/// <summary>
/// Print an order to PDF
/// </summary>
/// <param name="orders">Orders</param>
/// <param name="lang">Language</param>
/// <param name="filePath">File path</param>

From here scroll down to “#region Products”

#region Products
//products
doc.Add(new Paragraph(_localizationService.GetResource("PDFInvoice.Product(s)", lang.Id), titleFont));
doc.Add(new Paragraph(" "));


var orderProductVariants = _orderService.GetAllOrderProductVariants(order.Id, null, null, null, null, null, null);

var productsTable = new PdfPTable(4);
productsTable.WidthPercentage = 100f;
productsTable.SetWidths(new[] { 40, 20, 20, 20 });

Notice the last three lines of the code that I copied.

var productsTable = new PdfPTable(4);
productsTable.WidthPercentage = 100f;
productsTable.SetWidths(new[] { 40, 20, 20, 20 });

You will want to add one more column to the table.  So, assuming you want to add the SKU before the product name you would change this as follows.

var productsTable = new PdfPTable(5);
productsTable.WidthPercentage = 100f;
productsTable.SetWidths(new[] { 10, 30, 20, 20, 20 });

Note that I think the column widths must all add up to 100.

Step #2


Right below the code that I copyed above you will see the following code:

//product name
cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductName", lang.Id), font));
cell.BackgroundColor = BaseColor.LIGHT_GRAY;
cell.HorizontalAlignment = Element.ALIGN_CENTER;
productsTable.AddCell(cell);

Right before the "//product name" add the following code

//SKU
cell = new PdfPCell(new Phrase("SKU", font));
cell.BackgroundColor = BaseColor.LIGHT_GRAY;
cell.HorizontalAlignment = Element.ALIGN_CENTER;
productsTable.AddCell(cell);

Step #3

Now from here you will see the code for the other columns below the code you just entered.

//SKU
cell = new PdfPCell(new Phrase("SKU", font));
cell.BackgroundColor = BaseColor.LIGHT_GRAY;
cell.HorizontalAlignment = Element.ALIGN_CENTER;
productsTable.AddCell(cell);

//product name
…

//price
…

//qty
…

Scroll down to the following code

for (int i = 0; i < orderProductVariants.Count; i++)
   {
     var orderProductVariant = orderProductVariants[i];
     var pv = orderProductVariant.ProductVariant;

     //product name
     …

Right before the "//product name" add the following code

//SKU
cell = new PdfPCell(new Phrase(orderProductVariant.ProductVariant.Sku, font));
cell.HorizontalAlignment = Element.ALIGN_LEFT;
productsTable.AddCell(cell);

Step #4

Run Nopcommerce and open a Pdf Invoice from the Admin.  If the width of the SKU column is too small
you will need to ajust the first code that we altered.

      var productsTable = new PdfPTable(5);
      productsTable.WidthPercentage = 100f;
      productsTable.SetWidths(new[] { 10, 30, 20, 20, 20 });

Where 10 is the width of the SKU column.  I am not sure but I think they all must add up to 100.

If you want to have the SKU column after the Product Name column all you have to do is change the order of the code and put the code for the SKU column after the code for the Product Name column instead of before.

I hope this helps you.

Already done in the upcoming version 2.60. Please see chnageset 525d66d79c77

Hey Guys thanks for the response!

Hi all,

Sorry to jump in

On printing our companies invoices we require lane and bay for our stock pickers to be able to pick stock. I have created new fields in the database that will replicate certain areas of our inhouse database to the Nop database. I have added the following code to the Pdf.cs service file.

But the customer can't see this...

//CCCLane
                cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductCCCLane", lang.Id), font));
                cell.BackgroundColor = BaseColor.LIGHT_GRAY;
                cell.HorizontalAlignment = Element.ALIGN_CENTER;
                productsTable.AddCell(cell);

                //CCCBay
                cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductCCCBay", lang.Id), font));
                cell.BackgroundColor = BaseColor.LIGHT_GRAY;
                cell.HorizontalAlignment = Element.ALIGN_CENTER;
                productsTable.AddCell(cell);

                //CCCStockCode
                cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductCCCStockCode", lang.Id), font));
                cell.BackgroundColor = BaseColor.LIGHT_GRAY;
                cell.HorizontalAlignment = Element.ALIGN_CENTER;
                productsTable.AddCell(cell);

Is this the right procedure so when the invoice prints of this fields will be visible. These fields are contained in the dbo.product table and not the product variant table - will this make a difference???

Also sorry to ask ---- How do I print the order form of?? :D

All help highly regarded

Kind regards

Richard...

I am not exactly sure what you mean so if I am off let me know. :)

Were you not able to view the Invoice?  Or was something wrong when it was printed out?  

wertyuio1 wrote:
Do you mean that you want to know how to view and print the PDF invoice?

If so, go to:

Admin > Sales > Orders >

Than click on the "View" link for one of the orders.  This can be found in the right hand column of the list of orders.

Note: If you don't have any orders yet you will need to place a mock order to test this.

When you are on the details page for a given order, you should see the "Invoice (PDF)", "Print packaging slip" and the "delete" buttons near the top right hand side.

If you click on the "Invoice(PDF)" button and open the PDF, you can print it just like you print any other PDF.

wertyuio1 wrote:

I am not sure what "lane and bay" are but are they different for each of the product variants or are they the same?  If they are the same for each of the product variants of a product than I think it should work.  However, since I am not really a developer it is best to double check.

The best way to check is to look at the PDF invoice.  This way you can see if it looks the way you want it to and if your changes were a success.

When I was making changes to the PDF invoice I found that it was good to check how the Invoice looked every so often.  This way if something went wrong it was easier to know what made the problem.

I am not sure what "lane and bay" are but are they different for each of the product variants or are they the same?

Lane and bay are area's of our warehouse where stock is kept so when our pickers are picking stock they know where the products are.

That's why I was hoping that the code I placed above would display on the printed pdf invoice so when our pickers pick the stock they know where to go in the warehouse.

I hope this gives a better understanding.

Richard

wertyuio1 wrote:

I think I understand what is happening now.  The invoice is not displaying the Lane, Bay, and Stock code. Right?

The code that you put above was only one of the steps you needed to do to code this.

In reference to my above post on how to display the SKU in the PDF invoice for Hughmungus, the code that you showed is step #2.  You need to implement Step #1 and Step #3 in order for Lane, Bay, and Stock code to show up on the invoice.  In your case Step #1 and Step #3 will be a little different because you are adding three columns instead of one.

In step #1 you must designate the table as 7 columns instead of the 5 columns as shown if you were only adding one column for the SKU.  You also must put in the width of each of the 7 columns.

Also, just as a check, were you wanting this to show up when people got on "Invoice (PDF)" or the "Print packaging Slip."  These are in different places in PdfService.cs code so make sure you put the code in the right place.

If you have any trouble, let me know and I can write out the steps for adding three columns, one for the Lane, Bay, and Stock code.

I hope this helps!

Hi

I would be very humble if you could write out the steps as I am an absolute novice on a steep learning.

Where we would like it is on the printable invoice slip that remains in house but doesn't go out to the customer. Which I guess would be the pdf invoice and the printer packaging slip would head to the customer on deliver.

Can add any amount of blocks to this so if i need 3 more i can??

Kind regards

I look forward to your reply!!

Richard

Steps to adding three more columns to the PDF invoice.

In this case the new columns are: Lane, Bay, and stock code.

Please note that I am using nopcommerce version 2.4.

File to edit:  PdfService.cs

Libraries  - > Nop.Services - > Common - > PdfService.cs

Step #1

First go to the following code. This is near the top.

/// <summary>
/// Print an order to PDF
/// </summary>
/// <param name="orders">Orders</param>
/// <param name="lang">Language</param>
/// <param name="filePath">File path</param>

From here scroll down to “#region Products”

#region Products

//products
doc.Add(new Paragraph(_localizationService.GetResource("PDFInvoice.Product(s)", lang.Id), titleFont));
doc.Add(new Paragraph(" "));
var orderProductVariants = _orderService.GetAllOrderProductVariants(order.Id, null, null, null, null, null, null);

var productsTable = new PdfPTable(4);
productsTable.WidthPercentage = 100f;
productsTable.SetWidths(new[] { 40, 20, 20, 20 });

Look closely at the last three lines of code I copied above.  

var productsTable = new PdfPTable(4);
productsTable.WidthPercentage = 100f;
productsTable.SetWidths(new[] { 40, 20, 20, 20 });

This is the code that designates the amount of columns that are on the PDF invoice and also as you see in the last line, the width of each column.   You will need to change this as follows:

var productsTable = new PdfPTable(7);
productsTable.WidthPercentage = 100f;
productsTable.SetWidths(new[] { 15, 15, 10, 35, 10, 5, 10});

Note:  If you look closely at the changes, all we did was change the first line of the last three to designate 7 columns instead of 4.  In the last line, we set the width of each of the columns.  The first number “15” designates the width of the column on the left hand side on the Invoice going through to the last one “10” which designates the width of the column on the right hand side of the invoice.  

You can change the widths as you need to but make sure that all the widths of the columns add up to 100.  For example:  15+15+10+35+10+5+10=100


Step #2

Right below the code that we just altered and before the following code

//product name
cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductName", lang.Id), font));
cell.BackgroundColor = BaseColor.LIGHT_GRAY;
cell.HorizontalAlignment = Element.ALIGN_CENTER;
productsTable.AddCell(cell);

you need to add the following:

//CCCLane              
cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductCCCLane", lang.Id), font));                
cell.BackgroundColor = BaseColor.LIGHT_GRAY;                
cell.HorizontalAlignment = Element.ALIGN_CENTER;                
productsTable.AddCell(cell);  
              
//CCCBay                
cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductCCCBay", lang.Id), font));                
cell.BackgroundColor = BaseColor.LIGHT_GRAY;                
cell.HorizontalAlignment = Element.ALIGN_CENTER;                
productsTable.AddCell(cell);    
          
//CCCStockCode                
cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductCCCStockCode", lang.Id), font));                
cell.BackgroundColor = BaseColor.LIGHT_GRAY;              
cell.HorizontalAlignment = Element.ALIGN_CENTER;                
productsTable.AddCell(cell);

Note: This is the step that you had done with your code, if the code that you wrote is not in this place make sure to move it and delete the old code.  If you look below the code we just entered, you will notice that the next few blocks of code are similar to what we just entered.

//product name
cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductName", lang.Id), font));
cell.BackgroundColor = BaseColor.LIGHT_GRAY;
cell.HorizontalAlignment = Element.ALIGN_CENTER;
productsTable.AddCell(cell);

//price
...
//qty
...
and so on.

Note: Each of these blocks of code is setting the title of the column, and the background of the title to gray.  The order in which they are placed corresponds to the order of the widths we set in Step #1.  For example: the width of the first column on the left of the invoice “Lane” will have a width of 15, Bay will have a width of 15, and stock code will have a width of 10 etc.  Just remember that for each of these steps:  Step #1, Step #2, and Step #3 the order you put the code for the new three columns is important, as well as the order of the code in relation to that of the other columns.  If you ever what to change the order of the columns on the invoice, for instance to put the stock code on the left hand side of the invoice, you would need to reorganize the code for all the columns in Step #1, Step #2, and Step #3.

Important information on Step #3

Note: I am not sure how you reference the new database entries that you have written.  However, if you look at Step #3 on the”Steps to adding the SKU to the PDF invoice” above you will see that I referenced the SKU by: orderProductVariant.ProductVariant.Sku  

In this step I will reference the data Lane, Bay, and Stock code that you have added to nopcommerce as:

XXXXX.XXX. ProductCCCLane
XXXXX.XXX. ProductCCCBay
and
XXXXX.XXX. ProductCCCStockCode

But these mock references to the data will need to be replaced with how you reference the new data you have written.

Step #3

From where we entered the code in step#2

//CCCLane              
cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductCCCLane", lang.Id), font));                
cell.BackgroundColor = BaseColor.LIGHT_GRAY;                
cell.HorizontalAlignment = Element.ALIGN_CENTER;                
productsTable.AddCell(cell);
                
//CCCBay                
cell = new PdfPCell(new Phrase(_localizationService.GetResource("PDFInvoice.ProductCCCBay", lang.Id), font));                
cell.BackgroundColor = BaseColor.LIGHT_GRAY;                
cell.HorizontalAlignment = Element.ALIGN_CENTER;                
productsTable.AddCell(cell);
  
//CCCStockCode
...                

//product name
...

and so on

Scroll down to the following


for (int i = 0; i < orderProductVariants.Count; i++)
                {
                    var orderProductVariant = orderProductVariants[i];
                    var pv = orderProductVariant.ProductVariant;

                   //product name
                   …


Right before the “//product name” in the above code add the following code:


//Lane
cell = new PdfPCell(new Phrase(XXXXX.XXX.ProductCCCLane , font));
cell.HorizontalAlignment = Element.ALIGN_LEFT;
productsTable.AddCell(cell);

//Bay
cell = new PdfPCell(new Phrase(XXXXX.XXX.ProductCCCBay, font));
cell.HorizontalAlignment = Element.ALIGN_LEFT;
productsTable.AddCell(cell);

//Stock code
cell = new PdfPCell(new Phrase(XXXXX.XXX.ProductCCCStockCode, font));
cell.HorizontalAlignment = Element.ALIGN_LEFT;
productsTable.AddCell(cell);


Remember: you will need to change XXXXX.XXX.ProductCCCLane, XXXXX.XXX.ProductCCCBay, and XXXXX.XXX.ProductCCCStockCode to the real references of the new data that you have in your database.

Now all you have to do is run nopcommerce and  go to
Admin  >  Sales  >  Orders
Click to view one of the orders: try opening the “Invoice (PDF)” and see if it works.

If one of the columns is too narrow, go back to Step #1 and adjust the widths but make sure all the widths add up to 100.  If you make one column larger you will need to make a different one smaller.

If the new columns are empty, check to make sure the way you referenced your data is correct in Step #3.

Finally, if something else goes wrong or if it does not work let me know and I will check to make sure I have typed up all the steps right. :)

wertyuio1 wrote:

You can add as many as you need or change the order they are shown on the invoice.  However, if you add too many the columns, they will have to be very narrow in order for them all to fit on the width of the paper.

I hope this helps.

Let me know if it works!

P.S.  Just out of curiosity, if you don't mind, what is the name of your company?  I am not that familiar with the financial industy but from the sounds of it are you a stock exchange?  If you wouldn't mind giving me a link, I thought it would neat to see your website and all that you were selling.