Group product variants in POS / Point of Sale screen

For who using Odoo enterprise to achieve that the attribute creation mode must be Never, so it make the products grouped by the product name .

Emipro Technologies Pvt. Ltd.

You can group it using category.

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

jithesh

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>


    <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>




    <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="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>


    <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>

This question has been flagged