In this recipe, we want to use the standard_price field as the purchase cost of the product. This field is not loaded by default in Point of Sale applications. In step 1, we added the standard_price field for the product.product model. After this, product data will have one more field: standard_price.

In step 2, we extended the default product card template. You will need to use the t-extend attribute to extend the existing QWeb template. Then you need to use the t-jquery attribute to select the element on which you want to perform the operation. It is exactly like XPath, but instead of XPath this uses JQuery selectors. This selector must match the element in the initial template. In our case, we used t-jquery=".price-tag". To cross-verify, you can check the element with class="price-tag" in the initial product template. This initial product template is placed in the point_of_sale/static/src/xml/pos.xml file.

With the JQuery selector, you will also need to pass the operation you want to perform with the parameter. In our case, we used t-operation="after", which means your customization will be added after the selected elements. Here is a list of possible operations:

• append: Add the customization as the last child of the selected element
• prepend: Add the customization as the first child of the selected element
• before: Add the customization before the selected element
• after: Add the customization after the selected element
• replace: Replace the selected element with the customization
• inner: Replace the inner content's selected element with the customization
• attribute: Modify the attribute of the selected element

In step 3, we added the style sheet to modify the position of the margin element. This will add the background color to the margin element and place it under the price pill.