Since many years I had the passion for online shop. When I approached to Ruby on Rails, I found Solidus, an open source eCommerce application. I already have written another article more generic about it, to describe most of the features and potentialities of the ruby gem of Solidus, which gives you, once installed, a framework ready to be used and customized.
In a short time, I was able to create a fully functional platform, mainly by doing changes on the frontend-side. In fact, the other components provided by the gem, such as the backend, are perfectly arranged and comprehensive of all the main features needed for the management of an online store.
However, after I started to customize the platform by writing a lot of code, I discovered that there is a myriad of extensions that you can add in a few steps in your project. For example, I needed to print the invoice, and so I started coding this new feature, when in halfway, by searching on Google, I found out this gem: solidus_print_invoice.
The gem, like other extensions, can be installed as usual by adding it to the Gemfile of your project and by launching the bundler. After that you need to run the migrations.
gem 'solidus_print_invoice' , github: 'solidusio-contrib/solidus_print_invoice'
$ bundle install
$ rails g solidus_print_invoice:install
$ rake db:migrateOnce installed, we need to add some configuration within our project in the following location config/initializer/spree.rb. Otherwise, we can insert it into a new one like print_invoice.rb, in order to customize the appearance of the invoice.
Set the company logo and the document’s layout:
Spree::PrintInvoice::Config.set(print_invoice_logo_path: "path/to/logo.png"
Spree::PrintInvoice::Config.set(prawn_options: { page_layout: :landscape, page_size: "A4", margin: [50, 100, 150, 200] })
Generate invoices sequential number:
Spree::PrintInvoice::Config.set(print_invoice_next_number: [1|{your current next invoice number}])
If you prefer, you can easily set the next_invoice_number field in the general setting of the admin section that has been created once the print_invoice gem is installed.
We can also personalize this section with additional features in order to provide a more detailed PDF invoice customized on your requirements. Clone on your computer the source code of the installed gem and find the partial which generates this view: now you can customize the form.
In our case, the partial is _invoice.html.erb (this file is generated by the gem) and it is located here:
solidus_print_invoice/app/views/spree/admin/general_settings/_invoice.html.erbNow we just have to copy the partial within our project in the same position in which it was in the gem. Therefore, we need to create the same folder structure in our project:
OUR_SHOP/app/views/spree/admin/general_settings/_invoice.html.erbFrom now, every changes on the copied partial in our project will override the original one.
<fieldset class="currency no-border-bottom">
<legend align="center"><%= Spree.t(:invoices_settings)%></legend> <div class="field">
<%= label_tag :invoice_font_face, Spree.t(:invoice_font_face) %><br>
<%= select_tag :print_invoice_font_face, font_faces, :class => 'fullwidth select2' %>
</div> <div class="field">
<%= label_tag :print_invoice_next_number, Spree.t(:next_invoice_number) %><br>
<%= number_field_tag :print_invoice_next_number, Spree::PrintInvoice::Config[:print_invoice_next_number], :size => 8 %>
</div> <div class="field">
<%= label_tag :print_invoice_logo_scale, Spree.t(:invoice_logo_scale) %><br>
<%= number_field_tag :print_invoice_logo_scale, Spree::PrintInvoice::Config[:print_invoice_logo_scale], :in => 1...100 %>
</div> <div class="field">
<!-- Add your custom field here -->
</div>
</fieldset>Solidus, because it is a fork of Spree, supports the duplication of views within an application or extention and this will replace the file of the same name in Solidus. In the same way you can override any partial template that generates the invoice.
The last step is to add your own text to the locale. You can customize even the footer and other elements of the PDF by adding text into en.yml file with the following labels:
:footer_left :footer_left2 :footer_right :footer_right2 :thanks ...
In this way we built in a short time a very useful feature for our online store thanks to the print_invoice gem. Solidus has proved, once again, to be a powerful and versatile tool for developing eCommerce. It gives you a wide portfolio of features in the backend section that help you to build a really customizable online store, thanks to the third parts gems you can use. In fact, there is also a collection of Solidus extensions, where you can know their compatibility with our current verision of the project as well.
More on: http://extensions.solidus.io/
Leave a Reply