Development Book V17:Point Of Sales

Custom POS UI

Let's discuss how to modify the point of sale's user interface. Point-of-sale application created using the OWL Qweb Template.

odoo-development

This is a point of sale's standard user interface. We will now customize the POS's user interface. We indicate the available quantity within the product box. To include that, we first need to create a Python file called pos_session.py to load fields that are not present in the list in this manner.


   class PosSession(models.Model):
   _inherit = 'pos.session'

   def _loader_params_product_product(self):
       result = super()._loader_params_product_product()
       result['search_params']['fields'].append('qty_available')
       return result

The qty_available field is now loaded into the product.product pos model. By default, the qty_available field is not loaded. We can use the fields from the product.product model in the Qweb template after they have been loaded. We can now personalize the POS's product card. As of version 16, loading the fields for pre-existing models in POS does not need a JS file.

We must first inherit the "ProductItem" template in order to customize the product card. This is the standard template for a product card.

To inherit the template, add the XML file "pos_screen.xml" to the module. We must use XPath to expand the current product card layout and display the extra data.


       <?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
   <t t-name="custom_pos_receipt.ProductCard" t-inherit="point_of_sale.ProductCard" t-inherit-mode="extension">
       <xpath expr="//div[hasclass('product-name')]" position="after">
           <span>Available Qty: <t t-esc="pos.db.product_by_id[props.productId].qty_available"/></span>
       </xpath>
   </t>
</templates>

After the product display name in the product card, we can view the available quantity of the products using XPath.

Atlast we need to update the assets with the js file and qweb template.


'assets': {
   'point_of_sale._assets_pos': [
       'custom_pos_receipt/static/src/js/custom_pos_receipt.js',
       'custom_pos_receipt/static/src/xml/pos_screen.xml',
   ]
},

The quantity information is currently shown on the product card.

odoo-development
whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message