Creating a price calculator feature for a Drupal 8 website

BRIEF

One of the customers of our web development agency reached out to us with an idea to create a price calculator feature for their website built on Drupal 8. It was meant to perform the cost calculations for their money service.

CHALLENGES

According to our customer’s requirements, this had to be implemented as a block on their Drupal website with a “cost calculator” function. The customer wanted it to perform three operations: sending, receiving, and exchange

The calculator had to be equipped with a multi-field filter (operation, country, currency, pay-out, provider, pay-in, currency) for selecting the correct values for Exchange Rate and Commission. The calculator had to work in both directions: Amount > Total and Total > Amount. The exchange rates had to vary depending on the country and the pay-out method. The “Total” value had to be between “MIN” and “MAX”. 

SOLUTION

Here is how our team implemented this:

  • We created and configured the custom Drupal entities for the Provider and the Payment method.
  • Next, we created and configured the main Commission entity, where one country corresponds to one entity. When creating it, we decided to make countries configuration entities instead of content entities so their settings are not in the database but in the code. For example, an entity for the United States that includes variations for providers, payment methods, operations, etc. This approach works great for repeated operations with different settings for the “Sending” operation and different percentages depending on the payment method. 
  • The hierarchy is as follows. There is the general Currency field (for the entity settings, we extracted all possible currencies from a third-party library and selected the most frequently used ones). Next, there are field sets that include this general Operation field followed by two subsets:
  1. amount_from - amount_to - formula and
  2. provider-payin-payout. 
  • Using the Drupal block functionality, we then created the new “Calculator” block that performs the above mentioned three operations. 
  • The “Calculator” block shows a default country in case no country is configured. Thanks to this, the block can always be displayed.
  • To make sure the “Total” value is always between “MIN” and “MAX”, we created an error message to display in case the user tries to enter a different value.
  • For the Exchange Rates, we used an external library. We have also written custom functionality to extract the necessary data. We render this using JavaScript for perfect interactivity.

RESULT

After the successful completion of the work, the price calculator performs the three operations, works in two directions, shows the correct values based on the country and the pay-out method, and does everything else as expected. It is user-friendly thanks to the best practices in error notification and much more, and also fast and interactive thanks to the use of JS. 

Expand your website’s capabilities with the help of our web development team! Drupal has plenty of contributed modules for a wide array of features, but customization offers even more room for complex solutions that are tailored to the business workflows. So contact us whenever you want to add new functionality to a Drupal site.

Get more details

Check out our Privacy Policy for more information.