Odoo Help

4

Group product variants in POS / Point of Sale screen

By
Henk
on 1/26/15, 5:11 AM 1,862 views

Is it possible to group product variants in POS system ?

Now in Odoo V8 all the products are on one screen..

Thx

Henk

0
jithesh
On 5/17/18, 12:57 AM

Hi

friend i build a  js to impliement to group and also select product attribute specified by the product and pass the  selected product to order line

js part///////////////////////////////

odoo.define('pos_product_template.pos',function(require){
"use strict";

var gui = require('point_of_sale.gui');
var chrome = require('point_of_sale.chrome');
var popups = require('point_of_sale.popups');
var core = require('web.core');
var PosDB = require('point_of_sale.DB');
var PosBaseWidget = require('point_of_sale.BaseWidget');
var models = require('point_of_sale.models');
var PosModelSuper = models.PosModel;
var pos_screens = require('point_of_sale.screens');
var Model = require('web.DataModel');
var QWeb = core.qweb;
var _t = core._t;
var PosBaseWidget = require('point_of_sale.BaseWidget');
var gui = require('point_of_sale.gui');
var models = require('point_of_sale.models');
var core = require('web.core');
var Model = require('web.DataModel');
var utils = require('web.utils');
var formats = require('web.formats');

var QWeb = core.qweb;
var _t = core._t;
var _render_product_ = pos_screens.ProductListWidget.prototype.render_product;
pos_screens.ProductListWidget.include({



        init: function(parent, options) {
            this._super(parent,options);
            var self = this;

            this.click_product_handler = function(event){
                var product = self.pos.db.get_product_by_id(this.dataset['productId']);
                var template = self.pos.db.template_by_id[product.product_tmpl_id];

                console.log("jithesh its working");
                if (product.product_variant_count == 1) {
                    // Normal behaviour, The template has only one variant
                    options.click_product_action(product);
                    console.log("no varients")

                }
                else{
                    // Display for selection all the variants of a template
                    options.click_product_action(product);

                     var variant_ids = template.product_variant_ids;
                     var variant_list = [];
                    for (var i = 0, len = variant_ids.length; i < len; i++) {

                        variant_list.push(self.pos.db.get_product_by_id(variant_ids[i]));
                     }

                    var attribute_ids  = self.pos.db.attribute_by_template_id(template.id);
                    var attribute_list = [];
                    for (var i = 0, len = attribute_ids.length; i < len; i++) {
                        attribute_list.push(self.pos.db.get_product_attribute_by_id(attribute_ids[i]));
                    }

                      var order = self.pos.get_order();
                      var lines = jQuery.extend(true, {}, order['orderlines']['models']);

     //looping through each line
                      var count = 0;
                      $.each(lines, function(k, line){
                      count = count + 1;
                      });

                      $.each(lines, function(k, line){

                      if (k == count-1){

                            line.set_quantity('remove');
                        }
                      });

                      /////////////////
                    self.gui.show_screen('varientss',product,template,variant_list,attribute_list);
                }
            };
        },
        renderElements: function() {
             this._super(parent,options);
            var self = this;
            this.gui.show_screen('SelectVariantPopupWidget');

        },
        set_product_list: function(product_list){
            for (var i = product_list.length - 1; i >= 0; i--){
                if (!product_list[i].is_primary_variant){
                    product_list.splice(i, 1);
                }
            }
            this._super(product_list);
        },

        render_product: function(product){
        self = this;

        if (product.product_variant_count == 1){
            // Normal Display
            return _render_product_.call(this, product);
        }
        else{
            var cached = this.product_cache.get_node(product.id);
            if(!cached){
                var image_url = this.get_product_image_url(product);
                var product_html = QWeb.render('Template',{
                        widget:  this,
                        product: product,
                        image_url: this.get_product_image_url(product),
                    });
                var product_node = document.createElement('div');
                product_node.innerHTML = product_html;
                product_node = product_node.childNodes[1];
                this.product_cache.cache_node(product.id,product_node);
                return product_node;
            }
            return cached;
        }

        },


});


chrome.Chrome.extend({
        widgets: [
        {
            'name':   'varients_selector',
            'widget': VariantListWidget,
            'replace':  '.placeholder-VariantListWidget',
        },
        ],
})
//PosBaseWidget.include({
chrome.Chrome.include({

build_widgets: function(){
            this._super();
            this.select_variant_popup = new SelectVariantPopupWidget(this, {});
            this.select_variant_popup.appendTo($(this.$el));

            this.select_variant_popup.hide();
        },

});

var SelectVariantPopupWidget = pos_screens.ScreenWidget.extend({
//var SelectVariantPopupWidget = PosBaseWidget.extend({
        template:'SelectVariantPopupWidget',
    init: function(parent, options) {
            var self = this;
      
            this._super(parent,options);
            this.variant_list = [];
            this.filter_variant_list = [];
            this.filters = {};


        },
        start: function(){
            var self = this;
            // Define Variant Widget

            this.variant_list_widget = new VariantListWidget(this,{});

            this.variant_list_widget.replace(this.$('.placeholder-VariantListWidget'));

//            // Define Attribute Widget
            this.attribute_list_widget = new AttributeListWidget(this,{});

            this.attribute_list_widget.replace(this.$('.placeholder-AttributeListWidget'));

//            // Add behaviour on Cancel Button
            this.$('#variant-popup-cancel').off('click').click(function(){
                self.gui.show_screen('products');
                self.hide();

            });
//         this._super(parent, options);
        },

        show: function(parent, options){
            this._super(parent);
//,template,product,variant_list,attribute_list
            var self = this;
            console.log("show");
            console.log(parent);
            console.log(parent.id);
//            console.log(this);
//            console.log(this.dataset['productId']);
//            var product = self.pos.db.get_product_by_id(parent.id);
//            console.log(product);
//            var template = self.pos.db.template_by_id[product.product_tmpl_id];
             var template = self.pos.db.template_by_id[parent.id];

            // Display Name of Template

            this.$('#variant-title-name').html(template.name);

            // Render Variants

             var variant_ids = template.product_variant_ids;
             var variant_list = [];
             console.log(variant_ids);
             for (var i = 0, len = variant_ids.length; i < len; i++) {

                 variant_list.push(self.pos.db.get_product_by_id(variant_ids[i]));
             }
             var attribute_ids  = self.pos.db.attribute_by_template_id(template.id);
             var attribute_list = [];
             for (var i = 0, len = attribute_ids.length; i < len; i++) {
                 attribute_list.push(self.pos.db.get_product_attribute_by_id(attribute_ids[i]));
             }


            this.variant_list_widget.filters = {}
            this.variant_list_widget.set_variant_list(variant_list);

            this.attribute_list_widget.set_attribute_list(attribute_list, template);
            this._super();
        },
    });
gui.define_screen({name:'varientss', widget: SelectVariantPopupWidget});

        var VariantListWidget = pos_screens.ScreenWidget.extend({
        template:'VariantListWidget',

        init: function(parent, options) {
            var self = this;


            this._super(parent, options);
            this.variant_list = [];
            this.filter_variant_list = [];
            this.filters = {};
            this.click_variant_handler = function(event){
//                var selectedOrder = self.get_order();

                var variant = self.pos.db.get_product_by_id(this.dataset['variantId']);

                if(variant.to_weight && self.pos.config.iface_electronic_scale){
                    self.__parentedParent.hide();
                    self.pos_widget.screen_selector.set_current_screen('scale',{product: variant});
                }else{
//                    self.__parentedParent.hide();
                    self.gui.show_screen('products');
//                    self.gui.show_screen('product');

                    self.pos.get('selectedOrder').add_product(variant);

                }
            };
        },
//
        replace: function($target){
            this.renderElement();
            var target = $target[0];
            target.parentNode.replaceChild(this.el,target);

        },
        ///////////////////////////////////////////////

        set_filter: function(attribute_id, value_id){

            this.filters[attribute_id] = value_id;

            this.filter_variant();
        },

        reset_filter: function(attribute_id){
            if (attribute_id in this.filters){
                delete this.filters[attribute_id];
            }
            this.filter_variant();
        },

        filter_variant: function(){
            var value_list = [];
            for (var item in this.filters){
                value_list.push(parseInt(this.filters[item]));
            }
            this.filter_variant_list = [];
            console.log(this.variant_list);
            for (var index in this.variant_list){
                var variant = this.variant_list[index];
                var found = true;

                for (var i = 0; i < value_list.length; i++){
                    found = found && (variant.attribute_value_ids.indexOf(value_list[i]) != -1);
                }
                if (found){
                    this.filter_variant_list.push(variant);
                }
            }
            this.renderElement();
        },

        set_variant_list: function(variant_list){
            this.variant_list = variant_list;
            this.filter_variant_list = variant_list;
            this.renderElement();
        },

        render_variant: function(variant){

            var variant_html = QWeb.render('VariantWidget',{
                        widget:  this,
                        variant: variant,
                    });

            var variant_node = document.createElement('div');
            variant_node.innerHTML = variant_html;
            variant_node = variant_node.childNodes[1];
            return variant_node;
        },
/////////////////////
        renderElement: function() {
            var self = this;
            var qweb = new QWeb2.Engine();


            var el_html = QWeb.render("VariantListWidget", {widget: this});

            var el_node = document.createElement('div');
            el_node.innerHTML = el_html;
            el_node = el_node.childNodes[1];

            if(this.el && this.el.parentNode){
                this.el.parentNode.replaceChild(el_node,this.el);

            }
            this.el = el_node;

            var list_container = el_node.querySelector('.variant-list');

            for(var i = 0, len = this.filter_variant_list.length; i < len; i++){
                console.log(i);
                var variant_node = this.render_variant(this.filter_variant_list[i]);
                console.log("what1");
                variant_node.addEventListener('click',this.click_variant_handler);
                list_container.appendChild(variant_node);
            }
        },

    });




        var AttributeListWidget = pos_screens.ScreenWidget.extend({
//        var AttributeListWidget = PosBaseWidget.extend({
        template:'AttributeListWidget',

        init: function(parent, options) {
            var self = this;
            this.attribute_list = [];
            this.product_template = null;


            this.click_set_attribute_handler = function(event){
                /*TODO: Refactor this function with elegant DOM manipulation */
                // remove selected item

                parent = this.parentElement.parentElement.parentElement;

                parent.children[0].classList.remove('selected');

                for (var i = 0 ; i < parent.children[1].children[0].children.length; i ++){

                    var elem = parent.children[1].children[0].children[i];
                    elem.children[0].classList.remove('selected');
                }

                // add selected item
                this.children[0].classList.add('selected');
                          console.log("jijijij111111111111");
                self.__parentedParent.variant_list_widget.set_filter(this.dataset['attributeId'], this.dataset['attributeValueId']);
            };
            this.click_reset_attribute_handler = function(event){
                /*TODO: Refactor this function with elegant DOM manipulation */
                // remove selected item

                parent = this.parentElement;

                parent.children[0].classList.remove('selected');
                for (var i = 0 ; i < parent.children[1].children[0].children.length; i ++){
                   var elem = parent.children[1].children[0].children[i];
                    elem.children[0].classList.remove('selected');
                }
                // add selected item
                this.classList.add('selected');

                self.__parentedParent.variant_list_widget.reset_filter(this.dataset['attributeId']);

            };
            this._super(parent, options);

        },

        replace: function($target){
            this.renderElement();
            var target = $target[0];
            target.parentNode.replaceChild(this.el,target);
        },

        set_attribute_list: function(attribute_list, product_template){
            this.attribute_list = attribute_list;
            this.product_template = product_template;
            this.renderElement();
        },


        render_attribute: function(attribute){
            var attribute_html = QWeb.render('AttributeWidget',{
                    widget:  this,
                    attribute: attribute,
                });

            var attribute_node = document.createElement('div');
            attribute_node.innerHTML = attribute_html;
            attribute_node = attribute_node.childNodes[1];

            var list_container = attribute_node.querySelector('.value-list');

            for(var i = 0, len = attribute.value_ids.length; i < len; i++){

                var value = self.pos.db.get_product_attribute_value_by_id(attribute.value_ids[i]);
//                var value = self.get_product_attribute_value_by_id(attribute.value_ids[i]);

                var product_list = self.pos.db.get_product_by_ids(this.product_template.product_variant_ids);
                var subproduct_list = self.pos.db.get_product_by_value_and_products(value.id, product_list);
                var variant_qty = subproduct_list.length;

                // Hide product attribute value if there is no product associated to it
                if (variant_qty != 0) {
                    var value_node = this.render_value(value, variant_qty);
//                     attribute_node.querySelector('.attribute-name').addEventListener('click', this.click_reset_attribute_handler);
////                attribute_node.addEventListener('click', this.click_reset_attribute_handler);
                    value_node.addEventListener('click', this.click_set_attribute_handler);
                    list_container.appendChild(value_node);

                    console.log(list_container);
                }
            };
            return attribute_node;
        },

        render_value: function(value, variant_qty){
            var value_html = QWeb.render('AttributeValueWidget',{
                    widget:  this,
                    value: value,
                    variant_qty: variant_qty,
                });
            var value_node = document.createElement('div');
            value_node.innerHTML = value_html;
            value_node = value_node.childNodes[1];
            return value_node;
        },


        renderElement: function() {
            var self = this;
            var qweb = new QWeb2.Engine();
             var el_html = QWeb.render("AttributeListWidget", {widget: this});

            var el_node = document.createElement('div');
            el_node.innerHTML = el_html;
            el_node = el_node.childNodes[1];


            if(this.el && this.el.parentNode){
                this.el.parentNode.replaceChild(el_node,this.el);
            }
            this.el = el_node;

            var list_container = el_node.querySelector('.attribute-list');
            for(var i = 0, len = this.attribute_list.length; i < len; i++){
                var attribute_node = this.render_attribute(this.attribute_list[i]);

                attribute_node.querySelector('.attribute-name').addEventListener('click', this.click_reset_attribute_handler);
//                attribute_node.addEventListener('click', this.click_reset_attribute_handler);
                list_container.appendChild(attribute_node);

            };
        },

    });

    PosDB.include({
        init: function(options){
            this.template_by_id = {};
            this.product_attribute_by_id = {};
            this.product_attribute_value_by_id = {};
            this._super(options);
        },

        get_product_by_value_and_products: function(value_id, products){
            var list = [];
            for (var i = 0, len = products.length; i < len; i++) {
                if (products[i].attribute_value_ids.indexOf(value_id) != -1){
                    list.push(products[i]);
                }
            }
            return list;
        },

        get_product_attribute_by_id: function(attribute_id){
            return this.product_attribute_by_id[attribute_id];
        },

        get_product_attribute_value_by_id: function(attribute_value_id){
            return this.product_attribute_value_by_id[attribute_value_id];
        },

        get_product_by_ids: function(product_ids){
            var list = [];
            console.log("hiaiiiiiiiiiiiiiii");
            for (var i = 0, len = product_ids.length; i < len; i++) {
                list.push(this.product_by_id[product_ids[i]]);
            }
            return list;
        },


        attribute_by_template_id: function(template_id){
            var template = this.template_by_id[template_id];
            return this.attribute_by_attribute_value_ids(template.attribute_value_ids);
        },

        attribute_by_attribute_value_ids: function(value_ids){
            var attribute_ids = [];
            for (var i = 0; i < value_ids.length; i++){
                var value = this.product_attribute_value_by_id[value_ids[i]];
                if (attribute_ids.indexOf(value.attribute_id[0])==-1){
                    attribute_ids.push(value.attribute_id[0]);
                }
            }
            return attribute_ids;
        },

        add_templates: function(templates){
            console.log("ijhnbhbff");
            console.log(templates.length);
            this.template_by_id = {};
            for(var i=0 ; i < templates.length; i++){
                var attribute_value_ids = [];
                // store Templates
                this.template_by_id[templates[i].id] = templates[i];
                console.log(templates[i]);
                console.log(this.template_by_id[templates[i].id]);

                // Update Product information
                for (var j = 0; j <templates[i].product_variant_ids.length; j++){
                    var product = this.product_by_id[templates[i].product_variant_ids[j]]
                    for (var k = 0; k < product.attribute_value_ids.length; k++){
                        if (attribute_value_ids.indexOf(product.attribute_value_ids[k])==-1){
                            attribute_value_ids.push(product.attribute_value_ids[k]);
                        }
                    }
                    product.product_variant_count = templates[i].product_variant_count;
                    product.is_primary_variant = (j==0);
                }
                this.template_by_id[templates[i].id].attribute_value_ids = attribute_value_ids;
            }
        },

        add_product_attributes: function(product_attributes){
            for(var i=0 ; i < product_attributes.length; i++){
                // store Product Attributes
                this.product_attribute_by_id[product_attributes[i].id] = product_attributes[i];
            }
        },

        add_product_attribute_values: function(product_attribute_values){
            for(var i=0 ; i < product_attribute_values.length; i++){
                // store Product Attribute Values
                this.product_attribute_value_by_id[product_attribute_values[i].id] = product_attribute_values[i];
            }
        },
    });

    var _initialize_ = models.PosModel.prototype.initialize;
    models.PosModel = models.PosModel.extend({
    initialize: function(session, attributes) {
            self = this;
        // Add the load of the field product_product.name
        // that is the name of the template
        // Add the load of attribute values
        for (var i = 0 ; i < this.models.length; i++){
            if (this.models[i].model == 'product.product'){
                if (this.models[i].fields.indexOf('name') == -1) {
                    this.models[i].fields.push('name');
                }
                if (this.models[i].fields.indexOf('attribute_value_ids') == -1) {
                    this.models[i].fields.push('attribute_value_ids');
                }
            }
        }

        // Load Product Template
       var model = {
            model: 'product.template',
            fields: [
                'name',
                'display_name',
                'product_variant_ids',
                'product_variant_count',
                ],
            domain:  function(self){
                return [
                    ['sale_ok','=',true],
                    ['available_in_pos','=',true],
                ];},
            context: function(self){
                return {
                    pricelist: self.pricelist.id,
                    display_default_code: false,
                };},
            loaded: function(self, templates){
                console.log("jithesh its on aadd_template");
                 self.db.add_templates(templates);
            },
        }
        this.models.push(model);

        // Load Product Attribute
       var model = {
            model: 'product.attribute',
            fields: [
                'name',
                'value_ids',
            ],
            loaded: function(self, attributes){
                 self.db.add_product_attributes(attributes);
            },
        }
        this.models.push(model);

        // Load Product Attribute Value
       var model = {
            model: 'product.attribute.value',
            fields: [
                'name',
                'attribute_id',
            ],
            loaded: function(self, values){
                 self.db.add_product_attribute_values(values);
            },
        }
        this.models.push(model);

        return _initialize_.call(this, session, attributes);

    },

    });

});

xml part//////////////////////////////////

<template>

<!-- Pop Up Widget -->
    <t t-name="SelectVariantPopupWidget">
        <div class="modal-dialog">
            <div class="popup popup-select-variant">
                <div class="variant-title">
                    Variant Selection of <span id="variant-title-name" />
                    <span id="variant-popup-cancel" class="button">
                        Cancel
                    </span>
                   
                </div>
                <div class="content-container container-attribute-list">
                    <span class="placeholder-AttributeListWidget" />
                </div>
                <div class="content-container container-variant-list">
                    <span class="placeholder-VariantListWidget" />
                </div>
            </div>
        </div>
    </t>

<!-- Product Template Widget -->
<!-- This code come from Odoo Project -->
<!-- Changes:
    * Display 'name' field instead of display_name field;
    * Display variant quantity instead of price;
-->
    <t t-name="Template">
        <span class='product' t-att-data-product-id="product.id">
            <div class="product-img">
                <img t-att-src='image_url' />
                <span class="price-tag">
                    <t t-esc="product.product_variant_count"/> Variants
                </span>
            </div>
            <div class="product-name">
                <t t-esc="product.name"/>
            </div>
        </span>
    </t>

 Attribute and Attributes list Widgets
    <t t-name="AttributeListWidget">
        <div class='attribute-list-container'>
            <div class="attribute-list-scroller touch-scrollable">
                <div class="attribute-list">
                </div>
            </div>
            <span class="placeholder-ScrollbarWidget" />
        </div>
    </t>
     <!--<t t-name="AttributeListWidget">-->
        <!--&lt;!&ndash;<span class='attribute-list-container'>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="attribute-list-scroller touch-scrollable">&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="attribute-list">&ndash;&gt;-->
                <!--<div class="attribute-list"/>-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="placeholder-ScrollbarWidget" />&ndash;&gt;-->
        <!--&lt;!&ndash;</span>&ndash;&gt;-->
    <!--</t>-->

    <t t-name="AttributeWidget">
        <span class='attribute' t-att-data-attribute-id="attribute.id">
            <div class="attribute-name button selected" t-att-data-attribute-id="attribute.id">
                <t t-esc="attribute.name"/>
            </div>
            <div class='value-list-container'>
                <div class="value-list">
                </div>

            </div>
        </span>
    </t>

    <t t-name="AttributeValueWidget">
        <span class='attribute-value' t-att-data-attribute-id="value.attribute_id[0]" t-att-data-attribute-value-id="value.id">
            <div class="button">
                <div class="attribute-value-header">
                    <span class="variant-quantity">
                        <t t-esc="variant_qty"/> Variants
                    </span>
                </div>
                <div class="attribute-value-name">
                    <t t-esc="value.name"/>
                </div>
            </div>
        </span>
    </t>


<!-- Variant and Variants List Widgets -->
    <t t-name="VariantListWidget">
        <div class='variant-list-container'>
            <div class="variant-list-scroller touch-scrollable">
                <div class="variant-list">
                </div>
            </div>
            <span class="placeholder-ScrollbarWidget" />
        </div>
    </t>

    <t t-name="VariantWidget">
        <span class='variant' t-att-data-variant-id="variant.id">
            <div class="variant-header">
                <t t-if="!variant.to_weight">
                    <span class="price-tag">
                        <t t-esc="widget.format_currency(variant.price)"/>
                    </span>
                </t>
                <t t-if="variant.to_weight">
                    <span class="price-tag">
                        <t t-esc="widget.format_currency(variant.price)+'/Kg'"/>
                    </span>
                </t>
            </div>
            <div class="variant-name">
                <t t-esc="variant.display_name"/>
            </div>
        </span>
    </t>

</template>

0

Emipro Technologies Pvt. Ltd.

--Emipro Technologies Pvt. Ltd.--
6869
| 6 7 8
Rajkot, India
--Emipro Technologies Pvt. Ltd.--

Being an emerging leader in IT market since 2011, Emipro Technologies Pvt. Ltd. has been providing a wide range of business solutions in Odoo & Magento. We are pleased to have a large pool of contented customers with our meticulous work in the domain of ERP & e-Commerce. A ray of relief & satisfaction to  our customers heart by our successful deployment in their organization, purely represents our success in Odoo platform. Hence, we take pride for being an Odoo partner with a vision of expanding our strategic alliances with our customers to offer them high value-added, trustworthy & cost effective solutions.

 

Since establishment, our business has span across 11 countries of the world. Our customers are companies of all sizes ranging from start-ups to large enterprises, who realize that they need a professional business solutions to generate revenue streams, establish proper communication channels or streamline business operations. Standing with strong determination of customer satisfaction, observing each minute detail of their business processes, providing proper guidance and moving forth to develop product accordingly adds our value and reliability among our customers. 

 

We are blessed with efficient, passionate & eclectic young developers who have come across almost all kinds of business profiles, working with full dedication, applying creativity & new features in existing modules and completing customer's projects successfully on predefined target. Our in-depth knowledge while giving business solutions in Odoo allows us to offer following services to our customers :

 

  • Consulting
  • Installation, Configuration & Customization
  • Training & Support
  • Maintenance
  • Upgradation
  • Documentation
  • Crafting community modules
  • Drafting videos on demand
  • Smart Apps development

We will be :) to welcome you @ www.emiprotechnologies.com to solve any kind of your business needs around Odoo. However we are just an inch away from you by email info@emiprotechnologies.com or a tweet to @EmiproTech

Emipro Technologies Pvt. Ltd.
On 4/19/18, 1:46 AM

You can group it using category.

If you assign category to product you will get the breadcrumb of categories on product screen.

About This Community

This platform is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

Register

Odoo Training Center

Access to our E-learning platform and experience all Odoo Apps through learning videos, exercises and Quizz.

Test it now

Question tools

2 follower(s)

Stats

Asked: 1/26/15, 5:11 AM
Seen: 1862 times
Last updated: 5/17/18, 12:57 AM