Tag: invoice app

When you build a Shopify store, it's very common that you get customers to ask you for the invoices when they make a purchase. As a merchant, it's your responsibility to provide that invoice.There are few Shopify apps that provide invoice printing but what if you wish to create your own? In this tutorial, we'll learn how to make an invoice app that allows you to print invoices using PHP and JavaScript.

Video Tutorial

If you prefer to learn through a video tutorial, you can watch the following video.

Getting Started

Like in most of our Shopify app written tutorials, we'll assume that you have followed our Shopify app tutorial series and you are using the same repository/client that we are using here.Now, for this tutorial, we're just going to need the following two files:

index.phporders.php

In our index.php file, we should have the following code:

WeeklyHow Shopify App

And for our orders.php file, we should have the following code:

Orders

Order # Email Address Customer Name Total Sale 'any'), 'GET'); $orders = json_decode($orders['response'], JSON_PRETTY_PRINT);

foreach ($orders as $order) { ?> $value) { ?> ">

In the code above, what we just did is to create a very simple table to display the list of orders available from the store using Order API.Now, notice in line 23 that we have added an anchor tag that uses custom attributes such as data-toggle and data-target. These will be used to open a modal to display the invoice.For that to happen, we have to make sure that the value of the data-target attribute is unique so we concatenated the order_number.If we save the scripts and run the app, we should have the following output:

And the HTML output should look like this

So that means, we need to create a modal with an id of #printOrder1001.We can create a modal, just by inserting the following code in order.php file

Orders

Order # Email Address Customer Name Total Sale 'any'), 'GET'); $orders = json_decode($orders['response'], JSON_PRETTY_PRINT);

foreach ($orders as $order) { ?> $value) { ?> ">

" tabindex="-1" aria-labelledby="printOrderLabel" aria-hidden="true"> Print Order # &times; LOGO Invoice #00001

Client Information

Payment Details

Payment Type:

Name:

Item Description Quantity Unit Cost ( ) Total ( ) $item) { $totalPrice += $item['price']; ?> <?php }

?> Other information

Note:

TOTAL:

Close Print

So we have three parts for this modal.First is the header. Second is the content and lastly is the footer.Let's take a look at the modal body. Here we added a div tag with a class of card. This div basically forms the template of a very simple invoice. Here we have:

The logoThe invoice numberThe client's informationThe payment detailsThe list of items that were purchasedOther information...and the Total

All of these data can easily be customized and so feel free to change anything here. Just remember that variables and key names of the arrays must follow what's from the API.Next is the footer of the modal, here we have to buttons, the cancel button and the print button.For the print button, we'll have to create a javascript to make an on click event and execute a task and that is to print the invoice.Saving the script should give you the following output:

Printing the invoice

For us to be able to print the invoice, we'll have to use a plugin that is called printThis.printThis is an extensive printing plugin for jQuery that allows for printing specific areas or multiple DOM elements. This is perfect since we only want to print what is inside the modal.To use this plugin, we'll be using the following CDN:

https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js

Let's open our index.php once again and update its code to the following:

WeeklyHow Shopify App $('#printBtn').on('click', function(e) { $('#printThisInvoice').printThis(); });

To use the plugin, all we really need to do is to select a DOM element and use the printThis() function to display the print window.That's why if we save our script and run the app, we should have the following output when we click the print button.

Isn't that awesome?! Now you can easily print invoices and send these invoices to your customers through email.

Conclusion

In this lesson, we have learned how to create an invoice app using Shopify Order API, PHP, and a very powerful jQuery plugin. This is just the basic of making an invoice app. You can make this more useful by adding events such as sending the invoice to customer's email as soon as the invoice is printed or something more! Feel free to experiment with the tools provided in this lesson.If you have any questions, feel free to tell us in the comments below and we'll try to answer.

Tag: invoice app

How To Make An Invoice App with Shopify Order API

Quick Links

Resources