Oct 13 [ADD] : Initial Commit 'pos_multi_variant'

pos_multi_variant/README.rst

@@ -0,0 +1,40 @@
+POS Product Multi variant
+=========================
+* Configure products having variants
+
+Installation
+============
+- www.odoo.com/documentation/12.0/setup/install.html
+- Install our custom addon
+
+License
+-------
+GNU AFFERO GENERAL PUBLIC LICENSE, Version 3 (AGPLv3)
+(http://www.gnu.org/licenses/agpl.html)
+
+Company
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developer:
+   Athira PS
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit https://www.cybrosys.com
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

pos_multi_variant/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2019-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Sreejith sasidharan(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import models

pos_multi_variant/__manifest__.py

@@ -0,0 +1,44 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2019-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Sreejith sasidharan(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+{
+    'name': "POS Product Multi variant",
+    'version': '13.0.1.0.1',
+    'summary': """Product with multi-variants""",
+    'description': """Configure products having variants in POS""",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'category': 'Point of Sale',
+    'depends': ['base',
+                'point_of_sale',
+                ],
+    'data': ['views/pos_variants.xml',
+             'security/ir.model.access.csv',
+             'views/pos_wizard.xml'],
+    'images': ['static/description/banner.png'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'qweb': ['static/src/xml/label.xml',
+             'static/src/xml/popup.xml'],
+    'auto_install': False,
+}

pos_multi_variant/doc/RELEASE_NOTES.md

@@ -0,0 +1,16 @@
+## Module <pos_multi_variant>
+
+#### 21.08.2019
+#### Version 12.0.1.0.0
+##### ADD
+- Initial commit for pos_multi_variant
+
+#### 20.09.2019
+#### Version 12.0.1.0.1
+##### FIX
+- Bug Fixed.
+
+#### 20.09.2022
+#### Version 13.0.1.0.1
+##### ADD
+- Migrated To v13

pos_multi_variant/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2019-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Sreejith sasidharan(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from . import pos_variants

pos_multi_variant/models/pos_variants.py

@@ -0,0 +1,43 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2019-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Sreejith sasidharan(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU AFFERO
+#    GENERAL PUBLIC LICENSE (AGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU AFFERO GENERAL PUBLIC LICENSE (AGPL v3) for more details.
+#
+#    You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+#    (AGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+from odoo import api, models, fields
+
+
+class PosVarients(models.Model):
+
+    _inherit = ['product.template']
+
+    pos_variants = fields.Boolean('pos variants', default=False)
+    variant_line_ids = fields.One2many('variants.tree', 'variants_id', string="Configure Variants")
+
+
+class VariantsSelection(models.Model):
+
+    _name = 'variants.tree'
+
+    variants_id = fields.Many2one('product.template')
+    attribute = fields.Many2one('product.attribute', string='Attribute', ondelete='restrict', required=True, index=True)
+    value = fields.Many2many('product.attribute.value', string='Values')
+    extra_price = fields.Char(string="Price Extra")
+    pos_active = fields.Boolean(string="Active")
+
+

pos_multi_variant/security/ir.model.access.csv

@@ -0,0 +1,2 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_variants_tree, access.variants.tree,model_variants_tree,base.group_user,1,1,1,1

pos_multi_variant/static/description/index.html

@@ -0,0 +1,684 @@
+<div class="container" style="padding: 1rem !important; margin-bottom: 1.5rem !important;">
+    <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between"
+            style="border-bottom: 1px solid #d5d5d5;">
+            <div class="my-3">
+                <img src="./images/logo.png" style="width: auto !important; height: 40px !important;">
+            </div>
+            <div class="my-3 d-flex align-items-center">
+                <div
+                    style="background-color: #7C7BAD !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Community
+                </div>
+                <div
+                    style="background-color: #875A7B !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
+                    <i class="fa fa-check mr-1"></i>Enterprise
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="padding: 3.5rem 1.5rem !important; background-color: #ffffff !important;">
+    <div class="container">
+        <!-- HERO -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 1rem !important;">
+                <h1 class="text-center" style="color: #212121 !important; font-size: 3.5rem !important;"><span
+                        style="font-weight: 700 !important;">POS Product Multi Variant</span></h1>
+                <p class="text-center"
+                    style="color: #212529 !important; font-size: 1.5rem !important; letter-spacing: 1px !important;">
+                    Configure Multi-Variant Products For POS
+                </p>
+                <img src="./images/hero.gif" class="img-responsive">
+            </div>
+        </div>
+        <!-- END OF HERO -->
+
+        <!-- OVERVIEW -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 2.5rem 1rem !important;">
+                <h2 style="color: #212529 !important;">Overview</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                <p class="text-center" style="color: #212529 !important; font-size: 1.5rem !important;">
+                    POS Multi-variant module is an advanced way for managing product variants from the point of sale application.
+                    The module helps the user to configure product variants straight from POS. User can set extra price, also activate/inactivate the option for variants.
+                    As multi-variant products are displayed with a label, it comes easy for the user to sort which is multi-variant and which is not.
+                    User can confirm the variant type to POS orders.
+                </p>
+            </div>
+        </div>
+        <!-- END OF OVERVIEW -->
+
+
+        <!-- KEY FEATURES -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center" style="padding: 2.5rem 1rem !important;">
+                <h2 class="text-center" style="color: #212529 !important;">Key Features</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                <div class="row">
+
+
+                    <div class="col-lg-12">
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Multi-variant option in product configuration.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Option for activating/inactivating variant types in POS.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                               Easy selection of variant type from wizard.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Option for adding extra price for the variant.
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Notification for multi-variant products in POS.
+
+                            </p>
+                        </div>
+
+                        <div class="d-flex deep-2"
+                            style="height: 60px !important; padding: 1rem 1.5rem !important; border-radius: 0 !important; margin: 1.5rem 0">
+                            <img src="./images/checked.png" style="height: 24px !important; width: 24px !important;"
+                                class="mt-1 mr-2" height="24px" width="24px">
+                            <p style="color: #212529 !important; font-size: 1.3rem !important;">
+                                Displays variant details in order receipt and order.
+
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- END OF KEY FEATURES -->
+
+        <!-- SCREENSHOTS -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center" style="padding: 2.5rem 1rem !important;">
+                <h2 style="text-align: center;  color: #212529 !important;">Screenshots</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+
+                <!-- img -->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            01</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Products > Enable POS
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+
+                            After installation, go to Products > Enable POS variants option.
+
+
+                        </p>
+
+                    </div>
+                </div>
+                <img src="./images/1.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+                <!-- endo of img -->
+
+<!--                img-->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            02</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Configure variants
+
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            Here you have an option to configure different variants.
+
+                        </p>
+
+                    </div>
+                </div>
+                <img src="./images/2.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+<!--                 endo of img-->
+
+<!--                 img-->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            03</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            See multi-variant products
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            Open the POS session, you can see the product with multi-variants.
+
+                        </p>
+
+                    </div>
+                </div>
+                <img src="./images/3.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+<!--                 endo of img-->
+
+                <!--                 img-->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            03</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Variant selection window pop-up
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            Variant selection window pop-ups, upon selecting a product having multi-variants.
+                        </p>
+
+                    </div>
+                </div>
+                <img src="./images/4.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+<!--                 endo of img-->
+
+
+                <!--                 img-->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            03</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Choose desired variants
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            Choose required variants of the product.
+                        </p>
+
+                    </div>
+                </div>
+                <img src="./images/5.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+<!--                 endo of img-->
+
+
+                <!--                 img-->
+                <div class="d-flex m-0" style="border-bottom: 1px solid #e5e5e5 !important;">
+                    <div class="mr-3">
+                        <h3
+                            style="font-size: 2rem !important; font-weight: 800 !important; color: #ffffff !important; background-color: #AC1015 !important; padding: 1rem !important; width: 70px !important;    height: 75px !important;">
+                            03</h3>
+                    </div>
+                    <div>
+                        <h3 style="font-size: 1.7rem !important; font-weight: 600 !important;">
+                            Confirmed variants get listed in the POS order list.
+                        </h3>
+                        <p
+                            style="color: #212529 !important; font-size: 1.3rem !important; font-weight: 300 !important;">
+                            On confirming the variants, it gets listed in the order list of POS session.
+
+                        </p>
+
+                    </div>
+                </div>
+                <img src="./images/6.png" class="img-responsive border"
+                    style="margin-top: -15px !important; margin-top: 1rem !important;  margin-bottom: 4rem !important;">
+<!--                 endo of img-->
+
+
+
+            </div>
+        </div>
+        <!-- END OF SCREENSHOTS -->
+
+        <!-- VIDEO -->
+
+<!--        <div class="row">-->
+<!--            <div class="col-lg-12 d-flex flex-column justify-content-center" style="padding: 2.5rem 1rem !important;">-->
+<!--                <h2 style="text-align: center;  color: #212529 !important;">Video</h2>-->
+<!--                <hr-->
+<!--                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />-->
+<!--                <div class="s_panel_video mx-auto" data-video-id="7PFB7FpMFyM?rel=0">-->
+<!--                    <img class="img-fluid s_tooltip_tabs_tooltip_image s_figure_link pb0"-->
+<!--                        src="/images/task_timer_youtube.png" alt="Cybrosys Cover Video" style="max-width:100%">-->
+<!--                </div>-->
+<!--            </div>-->
+<!--        </div>-->
+
+        <!-- END OF VIDEO -->
+
+
+        <!-- SUGGESTED PRODUCTS -->
+        <div class="row">
+            <div class="col-lg-12 d-flex flex-column justify-content-center"
+                style="text-align: center; padding: 2.5rem 1rem !important;">
+                <h2 style="color: #212529 !important;">Suggested Products</h2>
+                <hr
+                    style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+
+                <div id="demo1" class="row carousel slide" data-ride="carousel">
+                    <!-- The slideshow -->
+                    <div class="carousel-inner">
+                        <div class="carousel-item active" style="min-height:0px">
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/13.0/product_return_pos/" target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/i1.png">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/13.0/pos_mrp_order/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/i2.png">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/13.0/pos_delete_orderline/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/i3.png">
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="carousel-item" style="min-height:0px">
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/13.0/product_multi_uom_pos/"
+                                    target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/i4.png">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/13.0/multi_barcodes_pos/" target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/i5.png">
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                                <a href="https://apps.odoo.com/apps/modules/13.0/pos_product_creation/" target="_blank">
+                                    <div style="border-radius:10px">
+                                        <img class="img img-responsive center-block"
+                                            style="border-top-left-radius:10px; border-top-right-radius:10px"
+                                            src="./images/modules/i6.png">
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Left and right controls -->
+                    <a class="carousel-control-prev" href="#demo1" data-slide="prev"
+                        style="left:-25px;width: 35px;color: #000;"> <span class="carousel-control-prev-icon"><i
+                                class="fa fa-chevron-left" style="font-size:24px"></i></span> </a> <a
+                        class="carousel-control-next" href="#demo1" data-slide="next"
+                        style="right:-25px;width: 35px;color: #000;">
+                        <span class="carousel-control-next-icon"><i class="fa fa-chevron-right"
+                                style="font-size:24px"></i></span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <!-- END OF SUGGESTED PRODUCTS -->
+
+        <!-- OUR SERVICES -->
+        <section class="container" style="margin-top: 6rem !important;">
+            <div class="row">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Our Services</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Customization</h6>
+                </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Implementation</h6>
+                </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Support</h6>
+                </div>
+
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Hire
+                        Odoo
+                        Developer</h6>
+                </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Integration</h6>
+                </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Migration</h6>
+                </div>
+
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Consultancy</h6>
+                </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Implementation</h6>
+                </div>
+
+                <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+                    <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                        style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                        <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+                    </div>
+                    <h6 class="text-center"
+                        style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+                        Licensing Consultancy</h6>
+                </div>
+            </div>
+        </section>
+        <!-- END OF END OF OUR SERVICES -->
+
+        <!-- OUR INDUSTRIES -->
+        <section class="container" style="margin-top: 6rem !important;">
+            <div class="row">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Our Industries</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Trading
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Easily procure
+                            and
+                            sell your products</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            POS
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Easy
+                            configuration
+                            and convivial experience</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Education
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            A platform for
+                            educational management</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Manufacturing
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Plan, track and
+                            schedule your operations</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            E-commerce &amp; Website
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Mobile
+                            friendly,
+                            awe-inspiring product pages</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Service Management
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Keep track of
+                            services and invoice</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Restaurant
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            Run your bar or
+                            restaurant methodically</p>
+                    </div>
+                </div>
+
+                <div class="col-lg-3">
+                    <div class="my-4 d-flex flex-column justify-content-center"
+                        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+                        <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px"
+                            width="48px">
+                        <h5
+                            style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                            Hotel Management
+                        </h5>
+                        <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                            An
+                            all-inclusive
+                            hotel management application</p>
+                    </div>
+                </div>
+
+            </div>
+        </section>
+
+        <!-- END OF END OF OUR INDUSTRIES -->
+
+        <!-- FOOTER -->
+        <!-- Footer Section -->
+        <section class="container" style="margin: 5rem auto 2rem;">
+            <div class="row" style="max-width:1540px;">
+                <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+                    <h2 style="color: #212529 !important;">Need Help?</h2>
+                    <hr
+                        style="border: 3px solid #AC1015 !important; background-color: #AC1015 !important; width: 80px !important; margin-bottom: 2rem !important;" />
+                </div>
+            </div>
+
+            <!-- Contact Cards -->
+            <div class="row d-flex justify-content-center align-items-center"
+                style="max-width:1540px; margin: 0 auto 2rem auto;">
+
+                <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+                    <div class="row mt-4">
+                        <div class="col-lg-6">
+                            <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+                                style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+                                    class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+                        </div>
+                        <div class="col-lg-6">
+                            <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+                                class="btn btn-block mb-2 deep_hover"
+                                style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+                                    class="fa fa-whatsapp mr-2"></i>WhatsApp</a>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <!-- End of Contact Cards -->
+        </section>
+        <!-- Footer -->
+        <section class="oe_container" style="padding: 2rem 3rem 1rem;">
+            <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+                <!-- Logo -->
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+                    <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+                </div>
+                <!-- End of Logo -->
+                <div class="col-lg-12">
+                    <hr
+                        style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
+                    <!-- End of Footer Section -->
+                </div>
+            </div>
+        </section>
+        <!-- END OF FOOTER -->
+
+
+    </div>
+</div>

pos_multi_variant/static/src/css/label.css

@@ -0,0 +1,54 @@
+
+.pos .product .variant {
+    position: absolute;
+    top: 50px;
+    left: 2px;
+    right: 2px;
+    vertical-align: top;
+    color: white;
+    line-height: 13px;
+    background: #0070F7;
+    padding: 2px 5px;
+    border-radius: 2px;
+}
+
+.variants{
+    position: absolute;
+    bottom: -11px;
+    left: 2px;
+    right: 2px;
+    vertical-align: top;
+    color: white;
+    line-height: 13px;
+    background: #1b9c99;
+    padding: 2px 5px;
+    border-radius: 2px;
+}
+.extra-price{
+position: absolute;
+    top: 2px;
+    right: 2px;
+    vertical-align: top;
+    color: white;
+    line-height: 13px;
+    background: #ff6a6a;
+    padding: 2px 5px;
+    border-radius: 2px;
+}
+.tag{
+background-color:#d7d7d7;
+font-style: italic;
+}
+.variant-selected{
+    position: absolute;
+    bottom: 23px;
+    left: 2px;
+    right: 2px;
+    vertical-align: top;
+    color: white;
+    line-height: 13px;
+    font-size: 15px;
+    background: #0831b3;
+    padding: 2px 5px;
+    border-radius: 2px;
+}

pos_multi_variant/static/src/js/ProductPopup.js

@@ -0,0 +1,453 @@
+odoo.define('pos_multi_variant.ProductPopup', function (require)
+{   "use strict";
+
+    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 screens = require('point_of_sale.screens');
+    var PopupWidget = require('point_of_sale.popups');
+    var Widget = require("web.Widget");
+    var QWeb = core.qweb;
+    var rpc = require('web.rpc');
+    var _t  = require('web.core')._t;
+
+    models.load_models([
+    {   model: 'variants.tree',
+        fields: ["pos_active", "value", "attribute", "variants_id", "extra_price"],
+        loaded: function(self, variants_tree)
+        {   self.variant_tree = variants_tree;
+            _.each(variants_tree, function(item)
+            {   self.item = item;
+            });
+        }
+    },{    model: 'product.attribute.value',
+            fields: ["id", "name"],
+            loaded: function(self,values)
+            {   self.values = values;
+            }
+      }]);
+
+    var super_models = models.PosModel.prototype.models;
+    models.load_fields('product.product','pos_variants');
+    models.load_fields('product.product','variant_line_ids');
+
+    var _super_orderline = models.Orderline.prototype;
+    models.Orderline = models.Orderline.extend
+    ({   initialize: function(attr, options)
+        {   _super_orderline.initialize.call(this,attr,options);
+            this.product_variants = this.product_variants || [];
+        },
+        init_from_JSON: function(json)
+        {   _super_orderline.init_from_JSON.apply(this,arguments);
+            this.product_variants = json.product_variants || [];
+        },
+        export_as_JSON: function ()
+        {   var json = _super_orderline.export_as_JSON.apply(this, arguments);
+            json.product_variants = this.product_variants || [];
+            return json;
+        },
+    });
+
+    var ProductPopUp = PopupWidget.extend
+    ({  template: 'ProductPopUp',
+
+        init: function(parent, options)
+        {   this._super(parent, options);
+            this.options = {};
+            this.pos_reference = "";
+        },
+
+        show: function(options)
+        {   this._super(options);
+            this.render_list(options);
+        },
+
+        events:
+        {   'click .button.cancel':  'click_cancel',
+            'click .button.confirm': 'click_confirm',
+            'click .product': 'click_variant',
+        },
+
+        click_variant:function(e)
+
+        {
+        console.log(this,e,"this and e")
+        var order = this.self.pos.get('selectedOrder')
+            var self = e.currentTarget
+            var action = $(self).find('.action').text();
+            console.log(self.outerText,"outer")
+            var categories = []
+
+            var category = $(self).find('.action').data('category');
+            $('.product-img').find('.variant-selected').each(function ()
+            {   if($(this).data('category') ==  category)
+                {   $(this).text("").removeClass('variant-selected');
+                    $(self).find('.action').text("Selected").addClass('variant-selected');
+                }
+            });
+            $(self).find('.action').text("Selected").addClass('variant-selected');
+            var add = $(self).find('.extra-price')[0].outerText;
+            console.log(add.split('+$ ')[1],"mmmmmmmm")
+            add = add.split('+$ ')[1]
+            console.log(add,"added price")
+            var type = $(self).find('.variants').text();
+            $(self).find('.variant-selected').attr('data-price', add);
+            $(self).find('.variant-selected').attr('data-type', type);
+        },
+
+        render_list:function(options)
+        {   this.list = options.list
+            this.image_url = options.image_url
+            this.pos_reference = options.data
+            this.variant_values = options.values
+            this.self = options.self
+            var AddError = "variants are not added";
+            var ActiveError = "No active variants "
+            var NotActive = 0;
+            var AttributeNumbers = []
+            var pushed = []
+
+            for (var i = 0; i < this.list.length; i++)
+            {   if(this.list[i].pos_active == false)
+                {   NotActive += 1
+                }
+                if(this.list.length == NotActive)
+                {   $("#notify").append(ActiveError);
+                }
+                if(this.list[i].pos_active == true)
+                {   if (!pushed.includes(this.list[i].attribute[0]))
+                    {   var temp = {};
+                        temp.id = this.list[i].attribute[0];
+                        temp.name = this.list[i].attribute[1]
+                        pushed.push(this.list[i].attribute[0])
+                        AttributeNumbers.push(temp)
+                    }
+                }
+            }
+            var tag = "<div class='"+i+"'>";
+            for ( var i in AttributeNumbers)
+            {   tag += "<h2 class='tag'>"+AttributeNumbers[i].name+"</h2>";
+                for (var attr = 0; attr < this.list.length; attr++)
+                {   console.log(this.list,"list")
+                if (AttributeNumbers[i].id == this.list[attr].attribute[0])
+                    {   var values = this.list[attr].value.length
+                        for(var j = 0; j < values; j++)
+                        {   if(this.list[attr].extra_price)
+                            {   var price = '+'+this.format_currency(this.list[attr].extra_price)
+                                var price_per = this.format_currency(this.list[attr].extra_price)
+                            console.log(price_per,"price")}
+                            else
+                            {   var price = '+'+this.format_currency(0.00)}
+                            for(var k=0; k < this.variant_values.length; k++)
+                            {   if((this.variant_values[k].id == this.list[attr].value[j]) && this.list[attr].pos_active == true)
+                                {console.log(price,"price_per")
+                                var rows ="<article class='product'>" +
+                                    "<div class='product-img'>"+
+                                    "<img src='"+this.image_url+"'/>" +
+                                    "<span class='extra-price'>"+price+"</span>"+
+                                    "<h2 class='action' data-price='' data-type='' data-category='"+AttributeNumbers[i].name+"'></h2>"+
+                                    "<span class='variants'>"+this.variant_values[k].name+"</span>"+
+                                    "</div>"+
+                                    "</article>"
+                                    tag += rows
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            tag += "</div>"
+            $("#notify").append(tag);
+
+            if(!(this.pos_reference.variant_line_ids.length>0))
+            {   $("#notify").append(AddError);
+            }
+            },
+
+        click_cancel: function()
+        {   var order = this.self.pos.get('selectedOrder').selected_orderline.product_variants = []
+            this.gui.close_popup();
+        },
+
+        click_confirm: function()
+        {   var price = 0.00
+            var order = this.self.pos.get('selectedOrder');
+            var selected_orderline = order.selected_orderline
+            $('.product-img').find('.variant-selected').each(function ()
+            {   price += parseFloat($(this).data('price'))
+                console.log(this,"this")
+                var variant = order.selected_orderline.product_variants
+                variant.push
+                ({  'extra_price': $(this).data('price'),
+                    'type': $(this).data('type'),
+                })
+            });
+            selected_orderline.price_manually_set = true;
+            selected_orderline.price += price
+            selected_orderline.trigger('change', selected_orderline);
+            this.gui.close_popup();
+        }
+    });
+    gui.define_popup({name:'ProductSelection', widget: ProductPopUp});
+
+    screens.ProductScreenWidget.include
+    ({  click_product: function(product)
+        {   var image_url = this.get_product_image(product.id);
+            var self = this;
+            var variant_tree = this.pos.variant_tree
+            var list = []
+            var values = this.pos.values
+            for(var i = 0; i < variant_tree.length; i++)
+            {   if(variant_tree[i].variants_id[0] == product.product_tmpl_id)
+                {   list.push(variant_tree[i]); }
+            }
+            if(product.to_weight && this.pos.config.iface_electronic_scale)
+            {   this.gui.show_screen('scale',{product: product});}
+            else if(product.pos_variants)
+            {   this.pos.get_order().add_product(product);
+                this.gui.show_popup('ProductSelection',
+                {   'title': product.display_name,
+                    data: product,
+                    image_url: image_url,
+                    list: list,
+                    values: values,
+                    self: self
+                });
+            }
+            else
+            {   this.pos.get_order().add_product(product); }
+        },
+        get_product_image: function(product)
+        {   return window.location.origin + '/web/image?model=product.product&field=image_1920&id='+product; }
+    });
+});
+
+
+
+
+
+
+//odoo.define('pos_multi_variant.ProductPopup', function (require)
+//{   "use strict";
+//
+//    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 screens = require('point_of_sale.screens');
+//    var PopupWidget = require('point_of_sale.popups');
+//    var Widget = require("web.Widget");
+//    var QWeb = core.qweb;
+//    var rpc = require('web.rpc');
+//    var _t  = require('web.core')._t;
+//
+//    models.load_models([
+//    {   model: 'variants.tree',
+//        fields: ["pos_active", "value", "attribute", "variants_id", "extra_price"],
+//        loaded: function(self, variants_tree)
+//        {   self.variant_tree = variants_tree;
+//            _.each(variants_tree, function(item)
+//            {   self.item = item;
+//            });
+//        }
+//    },{    model: 'product.attribute.value',
+//            fields: ["id", "name"],
+//            loaded: function(self,values)
+//            {   self.values = values;
+//            }
+//      }]);
+//
+//    var super_models = models.PosModel.prototype.models;
+//    models.load_fields('product.product','pos_variants');
+//    models.load_fields('product.product','variant_line_ids');
+//
+//    var _super_orderline = models.Orderline.prototype;
+//    models.Orderline = models.Orderline.extend
+//    ({   initialize: function(attr, options)
+//        {   _super_orderline.initialize.call(this,attr,options);
+//            this.product_variants = this.product_variants || [];
+//        },
+//        init_from_JSON: function(json)
+//        {   _super_orderline.init_from_JSON.apply(this,arguments);
+//            this.product_variants = json.product_variants || [];
+//        },
+//        export_as_JSON: function ()
+//        {   var json = _super_orderline.export_as_JSON.apply(this, arguments);
+//            json.product_variants = this.product_variants || [];
+//            return json;
+//        },
+//    });
+//
+//    var ProductPopUp = PopupWidget.extend
+//    ({  template: 'ProductPopUp',
+//
+//        init: function(parent, options)
+//        {   this._super(parent, options);
+//            this.options = {};
+//            this.pos_reference = "";
+//        },
+//
+//        show: function(options)
+//        {   this._super(options);
+//            this.render_list(options);
+//        },
+//
+//        events:
+//        {   'click .button.cancel':  'click_cancel',
+//            'click .button.confirm': 'click_confirm',
+//            'click .product': 'click_variant',
+//        },
+//
+//        click_variant:function(e)
+//        {   var order = this.self.pos.get('selectedOrder')
+//            var self = e.currentTarget
+//            var action = $(self).find('.action').text();
+//            var categories = []
+//
+//            var category = $(self).find('.action').data('category');
+//            $('.product-img').find('.variant-selected').each(function ()
+//            {   if($(this).data('category') ==  category)
+//                {   $(this).text("").removeClass('variant-selected');
+//                    $(self).find('.action').text("Selected").addClass('variant-selected');
+//                }
+//            });
+//            $(self).find('.action').text("Selected").addClass('variant-selected');
+//            var add = $(self).find('.extra-price').text().substr(1).slice(0, -2);
+//            var type = $(self).find('.variants').text();
+//            $(self).find('.variant-selected').attr('data-price', add);
+//            $(self).find('.variant-selected').attr('data-type', type);
+//        },
+//
+//        render_list:function(options)
+//        {   this.list = options.list
+//            this.image_url = options.image_url
+//            this.pos_reference = options.data
+//            this.variant_values = options.values
+//            this.self = options.self
+//            var AddError = "variants are not added";
+//            var ActiveError = "No active variants "
+//            var NotActive = 0;
+//            var AttributeNumbers = []
+//            var pushed = []
+//
+//            for (var i = 0; i < this.list.length; i++)
+//            {   if(this.list[i].pos_active == false)
+//                {   NotActive += 1
+//                }
+//                if(this.list.length == NotActive)
+//                {   $("#notify").append(ActiveError);
+//                }
+//                if(this.list[i].pos_active == true)
+//                {   if (!pushed.includes(this.list[i].attribute[0]))
+//                    {   var temp = {};
+//                        temp.id = this.list[i].attribute[0];
+//                        temp.name = this.list[i].attribute[1]
+//                        pushed.push(this.list[i].attribute[0])
+//                        AttributeNumbers.push(temp)
+//                    }
+//                }
+//            }
+//            var tag = "<div class='"+i+"'>";
+//            for ( var i in AttributeNumbers)
+//            {   tag += "<h2 class='tag'>"+AttributeNumbers[i].name+"</h2>";
+//                for (var attr = 0; attr < this.list.length; attr++)
+//                {   if (AttributeNumbers[i].id == this.list[attr].attribute[0])
+//                    {   var values = this.list[attr].value.length
+//                        for(var j = 0; j < values; j++)
+//                        {   if(this.list[attr].extra_price)
+//                            {   var price = '+'+this.format_currency(this.list[attr].extra_price)}
+//                            else
+//                            {   var price = '+'+this.format_currency(0.00)}
+//                            for(var k=0; k < this.variant_values.length; k++)
+//                            {   if((this.variant_values[k].id == this.list[attr].value[j]) && this.list[attr].pos_active == true)
+//                                { var rows ="<article class='product'>" +
+//                                    "<div class='product-img'>"+
+//                                    "<img src='"+this.image_url+"'/>" +
+//                                    "<span class='extra-price'>"+50+"</span>"+
+//                                    "<h2 class='action' data-price='' data-type='' data-category='"+AttributeNumbers[i].name+"'></h2>"+
+//                                    "<span class='variants'>"+this.variant_values[k].name+"</span>"+
+//                                    "</div>"+
+//                                    "</article>"
+//                                    tag += rows
+//                                }
+//                            }
+//                        }
+//                    }
+//                }
+//            }
+//            tag += "</div>"
+//            $("#notify").append(tag);
+//
+//            if(!(this.pos_reference.variant_line_ids.length>0))
+//            {   $("#notify").append(AddError);
+//            }
+//            },
+//
+//        click_cancel: function()
+//        {   var order = this.self.pos.get('selectedOrder').selected_orderline.product_variants = []
+//            this.gui.close_popup();
+//        },
+//
+//        click_confirm: function()
+//        {
+//        console.log(this)
+//        console.log(this.options.data.lst_price)
+//        console.log(this.options.list)
+//        var new_price = this.options.data.lst_price
+//        var extra_fee = parseFloat(this.options.list[0].extra_price);
+//        var price = 0.00
+//            var order = this.self.pos.get('selectedOrder');
+//            var selected_orderline = order.selected_orderline
+//
+//            $('.product-img').find('.variant-selected').each(function ()
+//            {   price += parseFloat(new_price)
+//                var variant = order.selected_orderline.product_variants
+//                console.log(variant, "pppppppp")
+//                console.log($(this).data('price'),"pppp")
+//                variant.push
+//                ({  'extra_price': $(this).data('price'),
+//                    'type': $(this).data('type'),
+//                })
+//            });
+//            console.log(extra_fee, "extraaaaaaaa")
+//            selected_orderline.price_manually_set = true;
+//            selected_orderline.price = selected_orderline.price+extra_fee
+//            console.log("selected order line",selected_orderline.price)
+//            selected_orderline.trigger('change', selected_orderline);
+//            this.gui.close_popup();
+//        }
+//    });
+//    gui.define_popup({name:'ProductSelection', widget: ProductPopUp});
+//
+//    screens.ProductScreenWidget.include
+//    ({  click_product: function(product)
+//        {   var image_url = this.get_product_image(product.id);
+//            var self = this;
+//            var variant_tree = this.pos.variant_tree
+//            var list = []
+//            var values = this.pos.values
+//            for(var i = 0; i < variant_tree.length; i++)
+//            {   if(variant_tree[i].variants_id[0] == product.product_tmpl_id)
+//                {   list.push(variant_tree[i]); }
+//            }
+//            if(product.to_weight && this.pos.config.iface_electronic_scale)
+//            {   this.gui.show_screen('scale',{product: product});}
+//            else if(product.pos_variants)
+//            {   this.pos.get_order().add_product(product);
+//                this.gui.show_popup('ProductSelection',
+//                {   'title': product.display_name,
+//                    data: product,
+//                    image_url: image_url,
+//                    list: list,
+//                    values: values,
+//                    self: self
+//                });
+//            }
+//            else
+//            {   this.pos.get_order().add_product(product); }
+//        },
+//        get_product_image: function(product)
+//        {   return window.location.origin + '/web/image?model=product.product&field=image_1920&id='+product; }
+//    });
+//});

pos_multi_variant/static/src/xml/label.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<templates id="variant.template" xml:space="preserve">
+
+    <t t-extend="Product" name="ProductStockWidget">
+    <t t-jquery="div.product-img" t-operation="replace">
+        <div class="product-img">
+                            <img t-att-src='image_url' alt="Product image"/>
+
+            <t t-if="!product.to_weight">
+
+                    <span class="price-tag">
+                        <t t-esc="widget.format_currency(product.get_price(pricelist, 1),'Product Price')"/>
+                    </span>
+                <t t-if="product.pos_variants">
+                        <span class="variant">Multi-variant</span>
+                    </t>
+                </t>
+
+            <t t-if="product.to_weight">
+
+                    <span class="price-tag">
+                        <t t-esc="widget.format_currency(product.get_price(pricelist, 1),'Product Price')"/>
+                    </span>
+                <t t-if="product.pos_variants">
+                        <span class="variant">Multi-variant</span>
+                    </t>
+                </t>
+            </div>
+    </t>
+    </t>
+    <t t-extend="Orderline">
+        <t t-jquery="ul.info-list" t-operation="append">
+            <div class="variant-orderline">
+                <t t-foreach="line.product_variants" t-as="item">
+                    <li>
+                        <em>
+                        <t t-esc="item.type" />:
+                        </em>
+                        at
+                        <t t-esc="widget.format_currency(item.extra_price)"/>
+                    </li>
+                </t>
+
+            </div>
+        </t>
+    </t>
+    <t t-extend="PosTicket">
+        <t t-jquery="tr[t-foreach*='orderlines'][t-as*='orderline']" t-operation="append">
+            <tr t-foreach="orderline.product_variants" t-as="variant">
+                <div>
+                    <td t-esc="variant.type" style="padding-left:15px;"/>
+                    <td style="text-align: left;" t-esc="widget.format_currency(variant.extra_price)"/>
+                </div>
+            </tr>
+        </t>
+    </t>
+
+</templates>
+
+

pos_multi_variant/static/src/xml/popup.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+<t t-name="ProductPopUp">
+        <div role="dialog" class="modal-dialog">
+            <div class="popup popup-selection">
+                <header class="title"><t t-esc=" widget.options.title || 'Product' " /></header>
+                <div class="selection scrollable-y touch-scrollable">
+                <div id="notify"></div>
+                </div>
+
+                <footer class="footer">
+                    <div class="button confirm">
+                        Ok
+                    </div>
+                    <div class="button cancel">
+                        Cancel
+                    </div>
+                </footer>
+            </div>
+         </div>
+</t>
+</templates>

pos_multi_variant/views/pos_variants.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <data>
+        <record id="pos_variants" model="ir.ui.view">
+            <field name="name">pos.variants</field>
+            <field name="model">product.template</field>
+            <field name="inherit_id" ref="product.product_template_only_form_view"/>
+            <field name="arch" type="xml">
+                    <xpath expr="//div[@name='options']" position="inside">
+                        <div>
+                                <field name="pos_variants"/>
+                                <label for="pos_variants"/>
+                        </div>
+                    </xpath>
+                    <xpath expr="//page[@name='general_information']" position="after">
+                        <page string="Pos Variants" name="pos variants" attrs="{'invisible': [('pos_variants','=',False)]}">
+                                <field name="variant_line_ids" >
+                                    <tree string="Pos Variants" editable="bottom">
+                                        <field name="attribute"/>
+                                        <field name="value" widget="many2many_tags" options="{'no_create_edit': True}" domain="[('attribute_id', '=', attribute)]" context="{'default_attribute_id': attribute}"/>
+                                        <field name="extra_price"/>
+                                        <field name="pos_active"/>
+                                    </tree>
+                                </field>
+                        </page>
+                    </xpath>
+            </field>
+        </record>
+    </data>
+</odoo>

pos_multi_variant/views/pos_wizard.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="pos_wizard_popup" inherit_id="point_of_sale.assets">
+        <!-- adding scripts and css-->
+         <xpath expr="." position="inside">
+             <script type="text/javascript" src="/pos_multi_variant/static/src/js/ProductPopup.js"></script>
+             <link rel="stylesheet" type="text/scss" href="/pos_multi_variant/static/src/css/label.css"/>
+         </xpath>
+    </template>
+</odoo>