Retail:Developers Guide/How-to/Customize ProductLine Component

In order to customize the product render component, first of all you need to create a new module with a javascript file following the first part of link this guide

Then, inside this file, the "OB.UI.RenderProduct" component should be redefined. The original "OB.UI.RenderProduct" component is located at org.openbravo.retail.posterminal/web/org.openbravo.retail.posterminal/js/components/renderproduct.js

For this example, we are going to give more space to the product field in order to show big prices for product (The space for price field has been defined to support the most common cases in retail industry. If your business requires space for high prices this component should be overwroten). For this purpose, the "components" property of the class "OB.UI.RenderProduct" will be overwritten:

 
enyo.kind({
  name: 'OB.UI.RenderProduct',
 
  kind: 'OB.UI.SelectButton',
  components: [{
    style: 'float: left; width: 25%',
    components: [{
      kind: 'OB.UI.Thumbnail',
      name: 'thumbnail'
    }]
  }, {
    style: 'float: left; width: 45%;',
    components: [{
      name: 'identifier',
      style: 'padding-left: 2px;'
    }]
  }, {
    name: 'price',
    style: 'float: left; width: 30%; text-align: right; font-weight:bold;'
  }, {
    style: 'clear:both;'
  }],
  initComponents: function () {
    this.inherited(arguments);
    this.$.identifier.setContent(this.model.get('_identifier'));
this.$.price.setContent(OB.I18N.formatCurrency(this.model.get('price').get('standardPrice')));
    this.$.thumbnail.setImg(this.model.get('img'));
  }
});

Back to How-to