Modifying the Point of Sale screen UI

The UI of the Point of Sale application is written with the OWL QWeb template. In this recipe, we will learn how you can modify UI elements in the Point of Sale application.

Getting ready

In this recipe, we will be using the pos_demo module created in the Making RPC calls recipe. We will modify the UI of the product card and display the profit margin per product.

How to do it...

Follow these steps to display the profit margin on the product card:

1. Add the following code to the /static/src/js/pos_demo.js file to fetch the extra field for the product's actual price:

   const pos_model = require('point_of_sale.models');
   pos_model.load_fields("product.product", ["standard_price"]);

2. Add the following code to /static/src/xml/pos_demo.xml in order to display a profit margin product card:

   <t t-name="ProductItem" t-inherit="point_of_sale.ProductItem"    t-inherit...