PDF INVOICE PLUS - Kollegen · PDF Invoice Plus v2.1 User Guide 3 1. INTRODUCTION The best Magento PDF Invoice extension that is simplest to use and has the widest range of variables

[email protected]

[email protected]

Phone: 084.4.8585.4587

PDF INVOICE PLUS

USER GUIDE

Version 2.1

mailto:[email protected]

mailto:[email protected]

Copyright (c) 2009-2015 www.magestore.com

PDF Invoice Plus v2.1 User Guide 2

Table of Content

1. INTRODUCTION .......................................................................... 3

2. HOW TO USE ................................................................................ 6

2.1. For Customers ............................................................................................. 6

2.2. For Admin ................................................................................................... 9

3. HOW TO CONFIGURE ............................................................. 15

3.1. Manage Templates .................................................................................... 15

3.1.1. Add Information and General Configurations ............................................. 16

3.1.2. Edit Design Template ................................................................................... 24

3.2.Settings ....................................................................................................... 30



1. INTRODUCTION

The best Magento PDF Invoice extension that is simplest to use and has the

widest range of variables

PDF Invoice+ requires no technical knowledge. Just fill in your company information,

select a template design from the collection we provide, drag-n-drop fields and insert

any variables to customize it - this is an exclusive feature that you can't find anywhere

else. All you have to do is pay one time for this extension, no monthly cost, to have a

professional invoice matching your brand identity. Start pick-n-click!

BENEFITS

Sales documents with well-design and layout can project a professional image of your

company to customers. However, Magento default Invoice not only limits information

shown but also is difficult to customize. Luckily, our PDF Invoice Plus offers the step-

by-step Template configuration to help you accomplish this task with ease.



Outstanding features

FOR ADMIN

Simple Pick-and-Click Option

Quickly create a Template by choosing from default Designs

Allow using a consistent Template for 3 types of billing documents: Invoice,

Order, Credit Memo

Support 5 types of paper size, including Letter, A4, A5, A6 and A7

Provide a ready-made collection of different Template Designs matching paper

size

Choose page orientation and language for Template (English, French, Dutch,

German, Italian and Spanish supported)

Preview Template Design with real order information added in 1 click

Print PDF files in mass with a few clicks

Configure to auto-attach PDF files to emails sent to Customers

Support multiple stores, multiple languages, multiple currencies – Enable setting

different PDF templates for different store views

Advanced Design Editor in the Most Visual Way (Exclusive Feature)

View any changes in real time when editing Template Design

Change background image, block background color and text color (Featured)

Click to edit fields and insert variables

Click to add, delete or drag and drop to change position of any columns in

Product Item grid (Featured)

Provide advanced HTML Template Design Editor

Enable reloading default Template if needed

Configure which variables can be inserted on Design Editor page



Comprehensive Information Options

Display full seller and buyer information on PDF documents

Show Company detailed information, including Name, Address, Email, Phone,

Business ID, VAT Number and VAT Office

Show Company Logo on Sales Documents

Add free text to Sales Documents, including Footer, Notes, Terms and

Conditions (Featured)

Allow showing Barcode and support various types of Barcode (Featured)

Allow displaying Product Image on printed Invoice, Order, Credit Memo

Allow admin to disable printing action of Magento core (New)

Allow showing tax variable in Invoice & Credit Memo (New)

Allow adding page number in PDF file (New)

FOR CUSTOMERS

Receive Invoices, Orders, Credit Memos attached right to emails

Easily save and print Invoice, Order, Credit Memo in PDF format after login

OTHERS

100% Open source

License Certificate valid for 1 live Magento installation and unlimited test

Magento installations (No license key required).

Easy to install and configure

User-friendly interface



2. HOW TO USE

PDF Invoice Plus module allows both Customers and Admin to print Orders, Invoices,

Credit Memos quickly and easily. Customers can also receive PDF files of these sales

documents attached in emails.

2.1. For Customers

If Customers want to print any of their orders, they could achieve it within few clicks

in frontend.

When logging in, Customers can access their Orders in My Account/ My Orders tab.

After choosing the Order that they want to print, they will see the Print Custom PDF

Order link in the top-right corner on the Order Information page:

The Order’s design and layout depend on how admin configured in backend. For

example, the PDF file printed is as below:



Page 1 Page 2

When Customers want to print PDF Invoices or Credit Memos, simply follow similar

steps as above after choosing tab Invoices or Refunds.

Then click on the Print Custom PDF Invoice link:



or the Print Custom PDF Credit Memo link:

Moreover, Customers can receive PDF Orders, Invoices and Credit Memos attached in

emails if Admin enables this feature in backend.

Here is a sample email with attached PDF files sent to Customers:



2.2. For Admin

In backend, you can print Customers’ Order, Invoice and Credit Memo by clicking on

the Print Custom PDF File button at the top-right corner of the Order page, Invoice

page or Credit Memo page.



The Order page:

The PDF Order printed:

Page 1 Page 2



The Invoice page:

The PDF Invoice printed:

Page 1 Page 2



The Credit Memo page:

The PDF Credit Memo printed:



You can also conveniently print PDF files in mass. For example, to print multiple PDF

Orders at once, go to Sales > Orders.



In the Orders grid, tick the orders that you want to print and choose “Print Orders via

PDF Invoice+” from the Actions box in the top-right corner. Click on the Submit

button to print.



3. HOW TO CONFIGURE

3.1. Manage Templates

Go to Backend > PDF Invoice Plus > Manage Templates

The Template Management page will be displayed as below:

This grid provides general information about Templates, including ID, Name, Store

View and Status. You can filter and search for a specific template easily as well as

export this table to CSV/XML/Excel files.

To access and edit detailed information of each Template, click on the Edit link in the

Action column.

To add a new Template, click on the Add Template button at the top-right corner. You

will be navigated to the Add Template page, which includes 5 sections: General

Information, Default Information, Variable in PDF Order file, Variable in PDF

Invoice file and Variable in PDF Credit Memo.



3.1.1. Add Information and General Configurations

General Information section:

This section allows you to select Template Design based on paper size and configure

language, barcode shown, page orientation, etc.

Name: Name your Template so you can easily manage later.

Paper Size: Select 1 in 5 types of paper size (Letter, A4, A5, A6, and A7) for

your printed PDF documents.

Please note that the paper size chosen will decide which Template Design you

can select later.

For Letter, A4, or A5 size, our ready-made collection provides you with 4

default designs, which will be shown in a popup when you click on Select

Design button

For A6 or A7 paper size, the extension provides one specialized design thus it

will be selected by default and shown on the right.



Language: Select a default language applied to labels in all designs of this

Template. Besides default English language, there are 5 others supported,

including French, German, Italian, Dutch and Spanish.

Select Design: Edit the design chosen above via a pop-up if paper size is Letter,

A4 or A5.

For A6 and A7 size, the button is disabled since only one design is supported.



Store View: Choose which store view(s) will use this Template. Please note that

this required field is only shown when you enable the “Use for multiple stores”

option in Settings (Refer to section 3.2 for more details).

Show Barcode: Show/ Hide barcode on printed PDF documents.

Barcode Type: Select 1 in 17 most common barcode types to use on your

printed PDF documents.

Page Orientation: Choose between Portrait and Landscape orientation to fit

your design.

Status: Set the Template’s status as Active or Inactive.

Default Information section:

This section includes three subsections: Business Information, Business Contact, and

Additional Information. The information added here is applied to all types of PDF

documents by default. You can change which information shown on Order, Invoice or

Credit Memo when editing their designs later.

Please note that our module only allows you edit the information in this section after

you select a design. After you click on Save Template or Save and Continue Edit

button, you will not be able to edit this information

Business Information and Business Contact:

In these parts, fill in your company information as below. Please note that

Company Name is a required field.



You are also able to change your company logo instead of using Magento default

logo on PDF documents. Pay attention to the recommended size (160x40 pixels)

and the file formats supported (jpeg, tiff, png) for the best display.

Here is a sample of how information will be shown on PDF documents.



Additional Information:

This subsection allows you to add extra information to your PDF sales

documents as Notes, Footer, Terms and Conditions. You also can set a preferred

height of footer as below:

Variable in PDF Order file section:

The next 3 sections, including: Variable for PDF Order File, Variable for PDF

Invoice File and Variable for PDF Credit Memo File, allow you to separately

configure variables, edit and preview design of Order, Invoice and Credit Memo.

However, Edit design and Preview design button will be disable and you will not be

able to edit or preview the design you selected till you click on Save Template or Save

and Continue Edit button to save your template.

Let’s go in details of Variable for PDF Order File section for example:



Name to save PDF order field:

If you have a huge amount of data, when saving orders to PDF files, you will want to

group them by customer, created date, Order status, etc. to manage more easily. In this

field, you can choose many different variables to save an Order with custom file name

for this purpose.

Just click on the Insert Variable button, a popup window will be displayed as below:



Choose a variable from this list to insert to PDF Order’s file name. If you want to add

more than 1 variable, click on the Insert Variable button again and repeat the step.

For example, let’s assume that you choose 2 variables for the PDF Order’s filename,

including Increment ID and Invoice date. When Admin or Customer downloads a

PDF Order, the filename will be “Order_100000003_02-02-15.pdf”.

Information encoded in Barcode on printed Order field:

In the General Informaton section above, you have an option to whether show

Barcode on PDF documents or not. If you choose Yes, you will need to configure the

order’s information encoded in barcodes in this field.

When clicking on the Insert Barcode Variable button, a popup window will be

displayed.

Choose a variable from this list to use as information encoded in Barcode. If you want

to add more than 1 variable, click on the Insert Barcode Variable button again and

repeat the step.



At this point, you can see how the PDF Order Design looks with the default Template

Design and Order’s information added. Click on the Preview Design button to preview

in a popup window as below:

To continue editing with more customized options, please refer to section 3.1.2 for

more details.

Similarly, to configure Variable in PDF Invoice File and Variable in PDF Credit

Memo File sections, you can follow the instructions above for the Variable for PDF

Order File section.



3.1.2. Edit Design Template

The most advanced function of PDF Invoice, which you could find in nowhere else, is

the WYSIWYG Design Editor. It allows you to edit elements with instant updates right

on the design layout, thus you can customize your templates in the most visual way.

Simply drag-n-drop columns, edit colors and texts, insert variables to create unlimited

designs that match your brand and usage purpose.

The following parts will demonstrate how to use this function to customize Design for

PDF Orders.

3.1.2.1. Drop-and-drag Editor

By clicking on the Edit Design button, you will be navigated to the Edit Design page:



The Edit Design page has 2 main parts including the Top Menu Bar and Editable

Design Layout.

Top Menu Bar:

On the Top Menu Bar, you can find options to edit Order’s background image,

background color and text color.

Background Image: Click to change the background image that you want to

use for PDF Orders. After choosing and uploading file, you can see the new

background applied instantly to the Editable Design Layoutbelow the Menu

Bar.

Body Background: Click on the Body Background button to select filling

colors of Heading Block and Body Block as preferred. Changes will be

applied instantly to the Design Layout below so you can easily visualize and

find the best style fitting your desire.



Heading Text: Click on the Heading Text button to select text color in

heading blocks

Body Text: Click on the Body Text button to select text color in body

blocks

Editable Design Layout:

The Design Layout allows Admin to edit mostly every text, image and variable just by

clicking or using “drop-and-drag” action.



*Tip: When you hover over each section, title or text, a tooltip will be shown, giving

you a hint of what to do next.

Logo: Click on the logo icon to upload another logo from your computer.

Barcode: is non-editable since Barcode is generated based on Order

variables configured in the General Information page. This page only

shows a sample so that admin can visualize Barcode better.

Company information: Click to edit the information of your company with

HTML code

Footer, Terms and Conditions, Notes: Click to edit those fields in any

languages as preferred.

Product table: Drag and drop to move or rearrange columns. Click to edit

text in any languages, right click to insert order’s variables.



Subtotal, Tax, Shipping, Grand Total block: Click to edit with HTML

code

For example, when hovering around the Shipping Address section, you will see the

tooltip “Click to edit, right-click to insert variable”. Simply click and rewrite the

section name as Shipping Information.

To edit or insert information shown in the Product table, click on the (+) symbol on the

right of the table, a new column will be added. Click to edit the column title, such as

SKU, and right-click to choose the corresponding variable.

If you don’t want to use the Template Design that you have edited, you can reload the

default template by clicking on the Reset button on the Top Menu.

When you finish editing your PDF Order file, click on the Save button to save your

work. If you want to return to the General Information page, click on the Back button

in the top-left corner.



3.1.2.2. Advanced Editor

In case the simple Pick-n-Click, Drop-n-Drag Editor does not satisfy your

customization needs, the extension enables you to work with HTML code to freely edit

Template Design as you want.

On Edit Design page, when you click on the Edit Manually button, your work will be

auto-saved and you will be navigated to the Manual Editor page as bellow:

*Caution: Please note that this page allows advanced editing with HTML code thus

you can change any texts, images and variables in your Template. However,

inappropriate changes on the Manual Editor page may cause losing the drop-and-drag

ability on the Edit Design page. Therefore, make sure that you are skilled with HTML

to avoid damaging the Template Design when editing HTML code on this page.



When finished, click on the Save button, then hit the Back button to go back the

previous page. On the Add Template page, if you are satisfied with all configurations

and designs, remember to click on the Save Template or Save And Continue Edit to

save your work. Before saving your Template, you can preview how it looks by

clicking on the Preview Design button.

If you choose Save Template, you will be navigated back to the Template

Management page and your template will be shown in the list as below:

Please note that only Templates in Active status can be applied on PDF sales

documents. In the case that there are multiple Active Templates, the latest Template

created will be used.

3.2. Settings

Go to Backend >PDF Invoice Plus> Settings

The Settings page of PDF Invoice Plus will be displayed with 2 sections: General

Configuration and Variable Configuration.

General Configuration:



There are 5 fields you need to configure.

Enable: Enable/disable the module

Use for multiple stores: If you want to use different PDF Invoice

Templates for different store views, choose Yes

Disable printing actions of Magento Core: Choose Yes to disable printing

function of Magento core. Your system will be only show printing function

of PDF invoice plus module

Attach the pdf file in email sent to Customer: If you want to send

Customers emails with attached PDF files, choose Yes.

Page numbering for PDF file: If you want to show page number on the

PDF file, please choose Yes

Variable Configuration:

In this section, you can select which variables can be inserted when editing Design of

Order, Invoice and Credit Memo. These variables are divided into 3 groups related to

Customer Information, Order/Invoice/Credit Memo Information and Item Information.



As you can see in the screenshot below, any selected variables will be shown to insert

on the Editor Design page.

When you finish your settings, click on the Save Config button at the top-right corner

to save your work.

----------------------------------------------The End--------------------------------------------