Display Order Summary Totals in Odoo

POS Total Quantity Counter lets you show the total number of items in a Point of Sale order summary. In this tutorial, you will learn how to install, configure, and extend this addon in Odoo. Moreover, you will explore each code snippet step by step. Additionally, you will discover best practices for customizing your POS interface. Finally, you will link out to Odoo’s official documentation for deeper reading: https://www.odoo.com/documentation.

---

---

Why Use POS Total Quantity Counter in Odoo POS?

Odoo’s default POS interface shows each order line, but it does not summarize the total item count. Therefore, merchants must manually tally item counts, which can slow down checkout. Instead, you can install the POS Total Quantity Counter, which displays a clear summary of total items. Consequently, your staff can confirm order contents at a glance, improving both speed and accuracy.

Key Benefits of a POS Total Quantity Counter

1. Enhanced UX

• Staff see total items instantly.
• Customers receive immediate confirmation of item counts.

1. Reduced Errors

• Avoid manual counting mistakes.
• Ensure promotional bundles deliver correct quantities.

1. Faster Transactions

• Staff skip manual checks.
• POS workflow moves more fluidly.

1. Seamless Integration

• Works with standard POS themes.
• Applies only front-end changes—no backend impact.

When to Apply This Counter

You should consider adding a Total Quantity Counter when:

• You sell high-volume items (e.g., in wholesale or groceries).
• You run promotional events requiring bundle validation.
• You want to simplify the POS interface for new staff.
• You aim to optimize checkout speed in busy retail environments.

---

Addon Overview: pos_total_quantity

The pos_total_quantity addon patches Odoo’s POS front end. It adds a new computed property (TotalQuantity) to the POS OrderWidget. Then, it extends the OrderWidget template via QWeb to insert a “Total Quantity” line inside the order summary.

Module Structure

pos_total_quantity/
├── __init__.py
├── __manifest__.py
└── static/
    └── src/
        ├── js/
        │   └── total_quantity.js
        └── xml/
            └── total_quantity_templates.xml

Core Files and Their Roles

• __init__.py
• Registers the module. It can remain empty because this addon only provides assets.
• __manifest__.py
• Declares the addon’s metadata, dependencies, and the front-end assets to load.
• static/src/js/total_quantity.js
• Patches OrderWidget.prototype to add a TotalQuantity getter.
• static/src/xml/total_quantity_templates.xml
• Extends the POS QWeb template to render the new counter in the UI.

---

Step-by-Step Installation Guide

Follow these precise steps to install and enable POS Total Quantity Counter in your Odoo instance.

1. Place the Addon in Your Addons Path

Copy the pos_total_quantity folder into one of your Odoo addons directories. For example:

cp -r pos_total_quantity /mnt/odoo/custom_addons/

2. Restart Odoo Server

Then, restart your Odoo service to load the new module:

sudo systemctl restart odoo

Alternatively, if you run Odoo manually:

./odoo-bin -c /etc/odoo/odoo.conf

3. Enable Developer Mode and Update Apps

Next, open Odoo in your browser:

1. Click the Settings menu.
2. Toggle Developer Mode on.
3. Click Apps → Update Apps List → Load.

4. Install “POS Total Quantity Counter”

Finally, search for POS Total Quantity Counter in the Apps screen. Then click Install. After installation, the addon will automatically inject its assets.

---

Deep Dive into the Code

Now, let’s examine each file in detail. You will see how the patch and template work together to display the total quantity.

JavaScript Patch: total_quantity.js

/** @odoo-module **/
import { OrderWidget } from "@point_of_sale/app/generic_components/order_widget/order_widget";
import { patch } from "@web/core/utils/patch";

patch(OrderWidget.prototype, {
    get TotalQuantity() {
        let totalQuantity = 0;
        this.props.lines.forEach(line => totalQuantity += line.quantity);
        return totalQuantity;
    }
});

Importing and Patching OrderWidget

• @odoo-module: Marks this file as an Odoo JS module.
• import { OrderWidget } ...: Fetches the standard POS widget controlling the order summary.
• import { patch } ...: Pulls in Odoo’s patch utility to safely extend prototypes.

Defining the TotalQuantity Getter

1. Initialize a counter (totalQuantity = 0).
2. Iterate over each line in this.props.lines.
3. Accumulate line.quantity into totalQuantity.
4. Return the final sum.

Because TotalQuantity uses a getter, you can reference it directly in templates as a property.

---

QWeb Extension: total_quantity_templates.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
  <t t-name="pos_item_counter.OrderWidget"
     t-inherit="point_of_sale.OrderWidget"
     t-inherit-mode="extension"
     owl="1">
    <xpath expr="//div[contains(@class,'order-summary')]" position="inside">
      <div class="line">
        <div class="subentry fs-6 text-muted">
          Total Quantity:
          <span class="value">
            <t t-esc="TotalQuantity"/>
          </span>
        </div>
      </div>
    </xpath>
  </t>
</templates>

Extending the OrderWidget Template

• t-name="pos_item_counter.OrderWidget": Defines a new template extension name.
• t-inherit="point_of_sale.OrderWidget": Tells Odoo which existing QWeb template to modify.
• t-inherit-mode="extension": Ensures Odoo merges this snippet instead of replacing the entire template.
• owl="1": Marks it as compatible with OWL (Odoo’s front-end framework).

Inserting the Total Quantity Line

1. Locate the <div> with class containing order-summary.
2. Insert a new <div class="line">…</div> inside it.
3. Bind the computed TotalQuantity using <t t-esc="TotalQuantity"/>.

This way, the “Total Quantity” row appears immediately below existing summary entries (Subtotal, Tax, etc.).

---

Customizing and Theming Your Counter

You can easily adapt the counter’s look and text to match your brand.

Styling the Counter with CSS

Add a custom SCSS file under static/src/css/ (update manifest accordingly):

/* static/src/css/total_quantity.scss */
.pos .pos-total-quantity .value {
  font-weight: bold;
  color: #007bff;
}

Then wrap your div:

<div class="line pos-total-quantity">
  …
</div>

Changing the Label Text

If you prefer “Items Total” instead of “Total Quantity”, simply edit the QWeb template:

<div class="subentry fs-6 text-muted">
  Items Total:
  <span class="value"><t t-esc="TotalQuantity"/></span>
</div>

---

Testing and Verification

Ensure the addon works as expected by running a test POS session.

Running a Sample POS Session

1. Open the POS app in Odoo.
2. Select a POS configuration with test products.
3. Add multiple products with varying quantities.
4. Observe the “Total Quantity” line in the right-hand order summary.

Verifying the Counter’s Accuracy

After adding lines:

• If you add 2 of Product A and 3 of Product B, the counter should read 5.
• If you remove a line, the counter should update immediately.

You can also inspect the browser console for errors and ensure the JS patch loaded correctly.

---

Troubleshooting Common Issues

Asset Not Loading

• Symptom: No “Total Quantity” label appears.
• Fix: Verify your __manifest__.py lists the assets under point_of_sale.assets and clear the browser cache (Ctrl+F5).

Value Always Zero

• Symptom: The counter shows 0 even after adding items.
• Fix: Confirm your code references this.props.lines (not this.state.lines) and that line.quantity holds a numeric value.

Conflicts with Other Addons

• Symptom: Another addon overrides OrderWidget.
• Fix: Adjust your t-inherit priority by naming your template extension with a higher alphabetical order, or patch a different widget.

---

Advanced Topics

Combining with Other POS Widgets

You may want to show both total items and total price side by side. To do so:

1. Patch the TotalPrice getter similarly.
2. Extend the template to inject both lines:

   <div class="line">
     <span>Total Items: <t t-esc="TotalQuantity"/></span>
     <span>Total Price: <t t-esc="TotalPrice"/></span>
   </div>

Dynamic Behavior Based on User Role

You can hide the counter for certain POS users:

patch(OrderWidget.prototype, {
    get TotalQuantity() {
        if (!this.env.pos.get_cashier().role.includes('manager')) {
            return null;  // or skip rendering
        }
        return this.props.lines.reduce((sum, l) => sum + l.quantity, 0);
    }
});

Then adjust your QWeb snippet:

<t t-if="TotalQuantity">
  …render counter…
</t>

---

Conclusion

In this tutorial, you learned how to install and configure the POS Total Quantity Counter in Odoo. You saw each code file in detail and learned how to:

• Patch the POS OrderWidget with JavaScript.
• Extend the QWeb template to display the counter.
• Customize the styling and label text.
• Test the addon in a live POS session.
• Troubleshoot and apply advanced tweaks.

By implementing this addon, you enhance POS usability, reduce errors, and speed up checkout. Now, you can further customize your POS interface with confidence. Happy coding!