Jan 01 [ADD] : Initial Commit 'website_product_search_snippet'

website_product_search_snippet/README.rst

@@ -0,0 +1,48 @@
+.. image:: https://img.shields.io/badge/license-AGPL--3-blue.svg
+    :target: https://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+======================
+Product Search Snippet
+======================
+This module helps to search products in category and all category wise.
+
+Configuration
+=============
+* No additional configurations needed
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+
+License
+-------
+General Public License, Version 3 (AGPL v3).
+(https://www.gnu.org/licenses/agpl-3.0-standalone.html)
+
+Credits
+-------
+* Developer: (V17) Ajith V,
+             (V16) Farhana Jahan PT,
+             (V14) Ajith V, Contact: odoo@cybrosys.com
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://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
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__

website_product_search_snippet/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<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 controllers
+from . import models

website_product_search_snippet/__manifest__.py

@@ -0,0 +1,58 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<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': 'Product Search Snippet',
+    'version': '14.0.1.0.0',
+    'summary': """Product Search Snippet for Website allows to easily search
+    products and filter based on category.""",
+    'description': """This module enables users to search for products
+    within a specific category or across all categories using the search
+    bar on the website snippet and redirect to its details.""",
+    'category': 'Website',
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    'depends': [
+        'website', 'sale_management'
+    ],
+    'data': [
+        'views/assets.xml',
+        'views/snippets/search_snippet_templates.xml',
+        'views/snippets/product_search_templates.xml',
+        'views/snippets/product_details_templates.xml',
+        'views/snippets/selected_product_from_all_product_templates.xml',
+        'views/snippets/product_all_result_templates.xml',
+        'views/snippets/category_details_templates.xml',
+        'views/snippets/category_selected_product_templates.xml',
+        'views/snippets/selected_category_from_all_category_templates.xml',
+        'views/snippets/category_all_result_templates.xml',
+        'views/snippets/product_select_from_category_templates.xml',
+    ],
+    'qweb': ['static/src/xml/category_templates.xml',
+             'static/src/xml/product_templates.xml', ],
+    'images': ['static/description/banner.png'],
+    'license': 'AGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

website_product_search_snippet/controllers/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<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 website_product_search_snippet

website_product_search_snippet/controllers/website_product_search_snippet.py

@@ -0,0 +1,144 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<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 http
+from odoo.http import request
+
+class WebsiteSnippetPage(http.Controller):
+    """ Controller for setting routes. Pass all categories and category wise
+    products as an array to a template"""
+    @http.route('/category/form', type='http', auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def category_page(self, **kw):
+        """ Function for rendering specific category and products of that
+        category into website """
+        category = request.env['product.category'].sudo().browse(
+            int(kw.get('category_id')))
+        parent = request.env['product.category'].sudo().browse(
+            int(kw.get('parent_id')))
+        values = {
+            'category': category,
+            'products': request.env['product.template'].search(
+                [('categ_id', '=', category.id)]),
+            'products_category': request.env['product.template'].search(
+                [('category_id', '=', parent.id)])
+        }
+        return http.request.render(
+            'website_product_search_snippet.category_snippet_img', values)
+
+    @http.route('/selected/category/result', type='http', auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def category_all_page(self, **kw):
+        """ Function for rendering specific category and products of that
+        category into website """
+        category = request.env['product.category'].sudo().browse(
+            int(kw.get('category_id')))
+        values = {
+            'category': category,
+            'products': request.env['product.template'].search(
+                [('categ_id', '=', category.id)])
+        }
+        return http.request.render(
+            'website_product_search_snippet.all_category_snippet_img', values)
+
+    @http.route('/selected/category/from/all_category/result', type='http', auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def category_from_all_category_page(self, **kw):
+        """ Function for rendering specific category and products of that
+        category into website """
+        category = request.env['product.category'].sudo().browse(
+            int(kw.get('category_id')))
+        values = {
+            'category': category,
+            'products': request.env['product.template'].search(
+                [('categ_id', '=', category.id)])
+        }
+        return http.request.render(
+            'website_product_search_snippet.category_from_all_category_snippet_img', values)
+
+    @http.route('/product/form', type='http', auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def product_page(self, **kw):
+        """ Function for rendering specific product into website """
+        values = {
+            'products': request.env['product.template'].sudo().browse(
+                int(kw.get('product_id')))
+        }
+        return http.request.render(
+            'website_product_search_snippet.products_snippet_img', values)
+
+    @http.route('/selected/product/from/category', type='http', auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def selected_product_page(self, **kw):
+        """ Function for rendering specific product into website """
+        values = {
+            'products': request.env['product.template'].sudo().browse(
+                int(kw.get('product_id')))
+        }
+        return http.request.render(
+            'website_product_search_snippet.selected_products_from_category_snippet_img',
+            values)
+
+    @http.route('/all/product/selected/product/details', type='http',
+                auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def product_all_page(self, **kw):
+        """ Function for rendering specific product into website """
+        values = {
+            'products': request.env['product.template'].sudo().browse(
+                int(kw.get('product_id')))
+        }
+        return http.request.render(
+            'website_product_search_snippet.all_products_snippet_img', values)
+
+    @http.route('/select/product/from/category', type='http', auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def product_category_all_page(self, **kw):
+        """ Function for rendering specific product into website """
+        values = {
+            'products': request.env['product.template'].sudo().browse(
+                int(kw.get('product_id')))
+        }
+        return http.request.render(
+            'website_product_search_snippet.products_category_snippet_img',
+            values)
+
+    @http.route('/product/form/all/results', type='http', auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def product_page_result(self):
+        """ Function for rendering all products into website """
+        values = {
+            'products': request.env['product.template'].search([])
+        }
+        return http.request.render(
+            "website_product_search_snippet.product_all_result_template",
+            values)
+
+    @http.route('/category/form/all/results', type='http', auth='public',
+                website=True, csrf=False, sitemap=False, cache=300)
+    def category_page_result(self):
+        """ Function for rendering all categories into website """
+        values = {'category': request.env['product.category'].search(
+            [('id', '!=', request.env.ref('product.product_category_all').id),
+             ('id', '!=', request.env.ref('product.product_category_1').id)])}
+        return http.request.render(
+            "website_product_search_snippet.category_all_result_template",
+            values)

website_product_search_snippet/doc/RELEASE_NOTES.md

@@ -0,0 +1,5 @@
+## Module <website_product_search_snippet>
+
+#### 17.09.2024
+#### Version 14.0.1.0.0
+##### ADD

website_product_search_snippet/models/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+###############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<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 product_template

website_product_search_snippet/models/product_template.py

@@ -0,0 +1,85 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Cybrosys Techno Solutions(<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, fields, models
+
+
+class ProductTemplate(models.Model):
+    """ Inherit product_template model for fetch products and categories to
+    frontend. """
+    _inherit = 'product.template'
+
+    parent_category_id = fields.Many2one("product.category",
+                                         string="Parent Category",
+                                         help="Parent Category of product.")
+    category_boolean = fields.Boolean(default=True,
+                                      help="If enabled will be able to search "
+                                           "based on Category.")
+    category_id = fields.Char(string='Parent Category',
+                              compute="_compute_parent_id",
+                              help="Compute the category id of the product.")
+
+    @api.depends('category_boolean')
+    def _compute_parent_id(self):
+        """ Get the parent category of the product """
+        for record in self:
+            record.category_id = record.categ_id.parent_id.id
+
+    @api.model
+    def search_products(self, qry):
+        """ Search all products in product.template, and pass searched products
+        into templates. """
+        products = self.env['product.template'].search([('name', 'ilike', qry)])
+        return [[product.name, product.id,
+                 product.list_price,
+                 '/web/image/product.template/{}/image_512/'.format(product.id),
+                 product.currency_id.symbol, ]
+                for product in products]
+
+    @api.model
+    def search_all_categories(self):
+        """ Search products in all categories """
+        products = self.env['product.template'].search([])
+        return [[product.name, product.id,
+                 product.list_price,
+                 '/web/image/product.template/{}/image_512/'.format(product.id),
+                 product.currency_id.symbol, ]
+                for product in products]
+
+    @api.model
+    def product_all_categories(self):
+        """ Search all product categories """
+        categories = self.env['product.category'].search([
+            ('id', '!=', self.env.ref('product.product_category_all').id)])
+        return [[category.name, category.id, category.parent_id.name,
+                 category.parent_id.id, category.product_count]
+                for category in categories]
+
+    @api.model
+    def product_category(self, qry):
+        """ Search all category in product_category, and pass category into
+        another template. """
+        category = self.env['product.category'].search(
+            [('id', '!=', self.env.ref('product.product_category_all').id),
+             ('name', 'ilike', qry)])
+        return [[category.name, category.id, category.parent_id.name,
+                 category.parent_id.id, category.product_count]
+                for category in category]

website_product_search_snippet/static/description/index.html

@@ -0,0 +1,686 @@
+<div class="container"
+     style="padding: 1rem !important; margin-bottom: 1rem !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="./assets/icons/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 class="container" style="padding: 0rem 1.5rem 4rem !important">
+    <div class="row" style="height: 900px !important;">
+        <div class="col-sm-12 col-md-12 col-lg-12"
+             style="padding: 4rem 1rem !important; background-color: #714B67 !important; height: 600px !important; border-radius: 20px !important;">
+            <h1
+                    style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #FFFFFF !important;  font-size: 3.5rem !important; text-align: center !important;">
+                Product Search Snippet</h1>
+            <p
+                    style="font-family: 'Montserrat', sans-serif !important; font-weight: 300 !important; color: #FFFFFF !important;  font-size: 1.4rem !important; text-align: center !important;">
+                This App Allows to Search Products in Category With the Help of
+                Snippet
+            </p>
+            <img src="./assets/screenshots/hero.gif" class="img-responsive"
+                 width="100%" height="auto"/>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-12"
+             style="border-bottom: 1px solid #d5d5d5 !important; margin-bottom: 2rem !important">
+            <h2
+                    style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-compass mr-2"></i>Explore this module
+            </h2>
+        </div>
+        <div class="col-md-6">
+            <a href="#overview" style="text-decoration: none !important;">
+                <div class="row"
+                     style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
+                    <div class="col-8">
+                        <h3
+                                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
+                            Overview</h3>
+                        <p
+                                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
+                            Learn more about this module</p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right"
+                           style="color: #714B67 !important;"></i>
+                    </div>
+                </div>
+            </a>
+        </div>
+        <div class="col-md-6">
+            <a href="#features" style="text-decoration: none !important;">
+                <div class="row"
+                     style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
+                    <div class="col-8">
+                        <h3
+                                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
+                            Features</h3>
+                        <p
+                                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
+                            View features of this module</p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right"
+                           style="color: #714B67 !important;"></i>
+                    </div>
+                </div>
+            </a>
+        </div>
+        <div class="col-md-6">
+            <a href="#screenshots" style="text-decoration: none !important;">
+                <div class="row"
+                     style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;">
+                    <div class="col-8">
+                        <h3
+                                style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;">
+                            Screenshots</h3>
+                        <p
+                                style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;">
+                            See key screenshots of this module</p>
+                    </div>
+                    <div class="col-4 text-right d-flex justify-content-end align-items-center">
+                        <i class="fa fa-chevron-right"
+                           style="color: #714B67 !important;"></i>
+                    </div>
+                </div>
+            </a>
+        </div>
+    </div>
+
+
+    <div class="row" id="overview">
+        <div class="col-md-12"
+             style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+            <h2
+                    style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-pie-chart mr-2"></i>Overview
+            </h2>
+        </div>
+
+        <div class="col-mg-12 pl-3">
+            <p
+                    style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important; line-height: 30px !important;">
+                This module allows users to search for products either within a
+                particular category or across all categories by utilizing the
+                search bar on the website snippet. Subsequently, users can be
+                redirected to view the details of the chosen product.
+            </p>
+
+        </div>
+    </div>
+
+
+    <div class="row" id="features">
+        <div class="col-md-12"
+             style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+            <h2
+                    style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-star mr-2"></i>Features
+            </h2>
+        </div>
+
+        <div class="col-md-6 mb-4 pl-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4
+                        style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+
+                    Community,Enterprise and Odoo.sh Support.
+                </h4>
+            </div>
+        </div>
+
+        <div class="col-md-6 mb-4 pl-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4
+                        style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+
+                    Search for Products based on specific Categories as well as across All Categories.</h4>
+
+            </div>
+        </div>
+
+        <div class="col-md-6 mb-4 pl-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4
+                        style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+
+                   Filtering can be applied during the search process, either based on a specific Category or across All Categories.</h4>
+            </div>
+        </div>
+        <div class="col-md-6 mb-4 pl-3 d-flex">
+            <div>
+                <img src="assets/icons/check.png">
+            </div>
+            <div>
+                <h4  style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                   Product details can be viewed by clicking on the respective Products.</h4>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" id="screenshots">
+        <div class="col-md-12"
+             style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important">
+            <h2
+                    style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;">
+                <i class="fa fa-image mr-2"></i>Screenshots
+            </h2>
+        </div>
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                Drag the Product Search Snippet and save it.
+            </h4>
+            <img src="assets/screenshots/1.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+        </div>
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                When selecting "All Categories," the system should be able to display All Products as users type in the Search Bar, and users should have the option to choose a specific Product.
+            </h4>
+            <img src="assets/screenshots/2.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+        </div>
+
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                Upon selecting a Product, the system should direct users to the details of that Product. Within the product details page, there should be an option available for users to navigate Back to the previous page.
+            </h4>
+            <img src="assets/screenshots/3.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+        </div>
+
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                Upon selecting "Category", the Search Bar should be filtered according to the chosen Category. This allows users to narrow down their search, and they should be able to select a Category from there. If no products are available in the selected Category, the color red will be displayed. Additionally, a button labeled "See All Category" will be provided to users.</h4>
+            <img src="assets/screenshots/4.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+        </div>
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                Get all Product Categories. Additionally, utilize red and blue colors to signify the product count within each category.
+            </h4>
+            <img src="assets/screenshots/5.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+        </div>
+
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+                Clicking on a Category should lead users to a dedicated page that displays Products falling under that specific Category.There also contains a Search Bar for search products
+            </h4>
+            <img src="assets/screenshots/6.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+        </div>
+
+        <div class="col-lg-12 my-2">
+            <h4 class="mt-2"
+                style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;">
+               When there are No Products Available under the selected Category, the system should display the following message.
+            </h4>
+            <img src="assets/screenshots/7.png"
+                 class="img-responsive img-thumbnail border" width="100%"
+                 height="auto"/>
+        </div>
+    </div>
+    <!-- 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 #714B67 !important; background-color: #714B67 !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/14.0/website_sale_extend/"
+                               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="./assets/modules/1.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/14.0/shopify_odoo_connector/"
+                               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="./assets/modules/2.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/14.0/export_stockinfo_xls/"
+                               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="./assets/modules/3.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/14.0/dynamic_product_fields/"
+                               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="./assets/modules/4.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/14.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="./assets/modules/5.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/14.0/website_product_attachments/"
+                               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="./assets/modules/6.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 #714B67 !important; background-color: #714B67 !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 #714B67 !important; background-color: #714B67 !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 #714B67 !important; background-color: #714B67 !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>

website_product_search_snippet/static/src/js/search_bar.js

@@ -0,0 +1,37 @@
+odoo.define('website_product_search_snippet.search', function (require) {
+    "use strict";
+    var publicWidget = require('web.public.widget');
+    publicWidget.registry.portalDetails = publicWidget.Widget.extend({
+        /**
+         *  Retrieve all the data from the table.
+         */
+        selector: '.product_search_bar',
+        events: {
+            'keyup .search_product_bar': '_onKeyUp',
+        },
+        // Function to start a website.
+        start: function () {
+            this._super.apply(this, arguments);
+        },
+        // Function to search table datas.
+        _onKeyUp: function () {
+            var input, filter, table, tr, td, i, txtValue;
+            input = this.$el.find("#searchBarInput")[0];
+            filter = input.value.toUpperCase();
+            table = this.$el.find("#category_table")
+            tr = table[0].children.category_table_body.children;
+            for (i = 0; i < tr.length; i++) {
+                td = tr[i].children;
+                for (var j = 0; j < td.length; j++) {
+                    txtValue = td[j].textContent || td[j].innerText;
+                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                        tr[i].style.display = "";
+                        break;
+                    } else {
+                        tr[i].style.display = "none";
+                    }
+                }
+            }
+        },
+    });
+});

website_product_search_snippet/static/src/js/website_product_search_snippet.js

@@ -0,0 +1,85 @@
+odoo.define('website_product_search_snippet.dynamic', function (require) {
+    'use strict';
+
+    var publicWidget = require('web.public.widget');
+    var rpc = require('web.rpc');
+    var core = require('web.core');
+    var Qweb = core.qweb;
+    var Dynamic = publicWidget.Widget.extend({
+        selector: '.dynamic_search_snippet',
+        xmlDependencies: [
+            "/website_product_search_snippet/static/src/xml/category_templates.xml",
+            "/website_product_search_snippet/static/src/xml/product_templates.xml",
+        ],
+        events: {
+            'click .search_container': '_onClick',
+            'keyup .search_bar': '_onKeyUp',
+            'change .category_options': '_filterProducts',
+        },
+        // When click on search bar, products/categories will displays.otherwise products/categories will not be displayed
+        _onClick: function () {
+            this.$el.find('#searchInput').val("");
+        },
+        // Call rpc query to keyup function for display all products under all category filter
+        _onKeyUp: async function (ev) {
+            var self = this;
+            var category = this.$el.find(".category_options").find(":selected").val();
+            var qry = $(ev.currentTarget).val()
+            if (category === "volvo") {
+                await rpc.query({
+                    model: 'product.template',
+                    method: 'search_products',
+                    args: [qry],
+                }).then(function (result) {
+                    self.$('.qweb_product_id').html("");
+                    self.$('.qweb_product_id').append(Qweb.render('website_product_search_snippet.product_template', {
+                        'result': result
+                    }));
+                });
+            }
+            // Call rpc query to keyup function for display all category under category filter
+            if (category === "saab") {
+                await rpc.query({
+                    model: 'product.template',
+                    method: 'product_category',
+                    args: [qry],
+                }).then(function (result) {
+                    self.$('.qweb_product_id').html("");
+                    self.$('.qweb_product_id').append(Qweb.render('website_product_search_snippet.product_category', {
+                        result
+                    }));
+                });
+            }
+        },
+        _filterProducts: async function (ev) {
+            var self = this;
+            var category = this.$el.find(".category_options").find(":selected").val();
+            if (category === "volvo") {
+                await rpc.query({
+                    model: 'product.template',
+                    method: 'search_all_categories',
+                    args: [],
+                }).then(function (result) {
+                    self.$('.qweb_product_id').html("");
+                    self.$('.qweb_product_id').append(Qweb.render('website_product_search_snippet.product_template', {
+                        'result': result
+                    }));
+                });
+            }
+            if (category === "saab") {
+                await rpc.query({
+                    model: 'product.template',
+                    method: 'product_all_categories',
+                    args: [],
+                }).then(function (result) {
+                    self.$('.qweb_product_id').html("");
+                    self.$('.qweb_product_id').append(Qweb.render('website_product_search_snippet.product_category', {
+                        result
+                    }));
+                });
+            }
+        },
+    });
+    publicWidget.registry.dynamic_search_snippet = Dynamic;
+    return Dynamic;
+});

website_product_search_snippet/static/src/scss/website_product_search_snippet.scss

@@ -0,0 +1,25 @@
+.heading{
+    color: #fff6f8;
+    background: #575758;
+    font-size: 47px;
+    font-weight: bold;
+}
+.search_bar{
+    margin-left: 47px;
+    border-radius: 15px;
+}
+.search_container{
+    background: #9c9a9a
+}
+#sub_temp{
+    background: #e9e9f1;
+}
+#category_template{
+    background: #e9e9f1;
+}
+#table_header {
+  background-color: #bababa;
+  color: white;
+}
+#table_row:nth-child(even){background-color: #ededed}
+#category_table:nth-child(even){background-color: #c3c3c3}

website_product_search_snippet/static/src/xml/category_templates.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--When the key is pressed in the search bar the searched
+category will be shown with its parent category-->
+<templates id="template" xml:space="preserve">
+    <t t-name="website_product_search_snippet.product_category">
+        <div class="container" id="category_template">
+            <section>
+                <form id="category_form">
+                    <div style="height:50px"/>
+                    <center>
+                        <h3>Categories</h3>
+                    </center>
+                    <t t-if="result.length === 0">
+                        <p class="text-center">No results found. Please try another search.</p>
+                    </t>
+                    <div style="height:20px"/>
+                    <table class="table">
+                        <thead id="table_header">
+                            <td><b>Parent Category</b></td>
+                            <td><b>Category</b></td>
+                        </thead>
+                        <tbody id="table_category_body" class="body">
+                            <t t-set="result_limit" t-value="5"/>
+                            <t t-set="counter" t-value="0"/>
+                            <t t-foreach="result" t-as="category"
+                               t-key="result">
+                                <t t-if="counter &lt; result_limit">
+                                    <tr id="table_row">
+                                        <td><t t-esc="category[2]"/></td>
+                                        <t t-if="category[4] === 0">
+                                            <td><a t-attf-href="/category/form?category_id=#{category[1]}&amp;parent_id=#{category[3]}"
+                                                   loading="fast" style="color: #de3434;"><t t-esc="category[0]"
+                                            /></a></td>
+                                        </t>
+                                        <t t-else="">
+                                            <td><a t-attf-href="/category/form?category_id=#{category[1]}&amp;parent_id=#{category[3]}"
+                                                   loading="fast"><t t-esc="category[0]"
+                                            /></a></td>
+                                        </t>
+                                    </tr>
+                                </t>
+                                <t t-else="">
+                                    <tr id="table_row_hidden" class="d-none">
+                                        <td><t t-esc="category[2]"/></td>
+                                        <td><a t-attf-href="/category/form?category_id=#{category[1]}"
+                                               loading="fast"><t t-esc="category[0]"
+                                        /></a></td>
+                                    </tr>
+                                </t>
+                                <t t-set="counter" t-value="counter+1"/>
+                            </t>
+                        </tbody>
+                    </table>
+                    <a t-attf-href="/category/form/all/results"
+                       style="margin-left: 38%;">See All Categories</a>
+                </form>
+            </section>
+            <div style="height:20px"/>
+        </div>
+    </t>
+</templates>

website_product_search_snippet/static/src/xml/product_templates.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--When the key is pressed in the search bar the searched products
+will be shown with their price and image-->
+<templates id="template" xml:space="preserve">
+    <t t-name="website_product_search_snippet.product_template">
+        <div class="container" id="sub_temp">
+            <section cdata-vxml="001">
+                <form id="product_form" style="background-color: #f3f3f3;">
+                    <div style="height:50px"/>
+                    <center>
+                        <h3 style="margin-left: 0%;">Products</h3>
+                    </center>
+                    <t t-if="result.length === 0">
+                        <p class="text-center">No results found. Please try another search.</p>
+                    </t>
+                    <div style="height:20px"/>
+                    <table class="table">
+                        <thead id="table_header">
+                            <td><b>Image</b></td>
+                            <td><b>Product</b></td>
+                            <td style="padding-left:2%;"><b> </b></td>
+                            <td><b>Price</b></td>
+                        </thead>
+                        <tbody id="table_body" class="body">
+                            <t t-set="result_limit" t-value="5"/>
+                            <t t-set="counter" t-value="0"/>
+                            <t t-foreach="result" t-as="product" t-key="result">
+                                <t t-if="counter &lt; result_limit">
+                                    <tr id="table_row">
+                                        <td><img t-att-src="product[3]"
+                                                 style="width:25%;"/></td>
+                                        <td><a t-attf-href="/product/form?product_id=#{product[1]}"
+                                               loading="fast"><t t-esc="product[0]"
+                                        /></a></td>
+                                        <td style="padding-left:2%;"><t t-esc="product[4]"/></td>
+                                        <td><t t-esc="product[2]"/></td>
+                                    </tr>
+                                </t>
+                                <t t-else="">
+                                    <tr id="table_row_hidden" class="d-none">
+                                        <td><img t-att-src="product[3]"
+                                                 style="width:25%;"/></td>
+                                        <td><a t-attf-href="/product/form?product_id=#{product[1]}"
+                                               loading="fast"><t t-esc="product[0]"
+                                        /></a></td>
+                                        <td style="padding-left:2%;"><t t-esc="product[4]"/></td>
+                                        <td><t t-esc="product[2]"/></td>
+                                    </tr>
+                                </t>
+                                <t t-set="counter" t-value="counter+1"/>
+                            </t>
+                        </tbody>
+                    </table>
+                    <a t-attf-href="/product/form/all/results"
+                       style="margin-left: 38%;">See All Products</a>
+                </form>
+            </section>
+            <div style="height:20px"/>
+        </div>
+    </t>
+</templates>

website_product_search_snippet/views/assets.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="assets_frontend" inherit_id="web.assets_frontend"
+              name="Website Product Search Assets">
+        <xpath expr="." position="inside">
+            <link rel="stylesheet" type="text/scss"
+                  href="/website_product_search_snippet/static/src/scss/website_product_search_snippet.scss"/>
+            <script type="text/javascript"
+                    src="/website_product_search_snippet/static/src/js/search_bar.js"/>
+            <script type="text/javascript"
+                    src="/website_product_search_snippet/static/src/js/website_product_search_snippet.js"/>
+        </xpath>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/category_all_result_templates.xml

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--  When clicking on 'See All Category' rendering a page the route as
+        /category/form/all/results,where the categories are displayed  -->
+    <template id="category_all_result_template" name="Category results Snippet">
+        <t t-call="website.layout">
+            <section class="row category_result_search_bar" loading="eager">
+                <div class="container">
+                    <div style="height:20px"/>
+                    <div class="back_button" align="left">
+                        <a t-attf-href="/" name="create"
+                           style="margin-left: 13%;font-weight: bold;">Back
+                        </a>
+                    </div>
+                    <div style="height:20px"/>
+                    <center>
+                        <form align="center" id="search_result"
+                              action="/category/form/all/results">
+                            <div style="height:20px"/>
+                            <div style="height:20px"/>
+                            <center>
+                                <h3 style="font-size: 26px;">All Categories</h3>
+                            </center>
+                            <table class="table"
+                                   style="width: 66%;margin-left: 17%;">
+                                <thead id="table_header">
+                                    <td>
+                                        <b>Parent Category</b>
+                                    </td>
+                                    <td>
+                                        <b>Category</b>
+                                    </td>
+                                </thead>
+                                <tbody id="table_category_body" class="body">
+                                    <t t-foreach="category" t-as="product">
+                                        <tr style="nth-child(even){background-color: #f2f2f2}"
+                                            id="category_table">
+                                            <td>
+                                                <t t-esc="product.parent_id.name"/>
+                                            </td>
+                                            <t t-if="product.product_count">
+                                                <td>
+                                                    <a t-attf-href="/selected/category/from/all_category/result?category_id=#{product.id}"
+                                                       loading="fast">
+                                                        <t t-esc="product.name"/>
+                                                    </a>
+                                                </td>
+                                            </t>
+                                            <t t-else="">
+                                                <td>
+                                                    <a t-attf-href="/selected/category/from/all_category/result?category_id=#{product.id}"
+                                                       loading="fast"
+                                                       style="color: #de3434;">
+                                                        <t t-esc="product.name"/>
+                                                    </a>
+                                                </td>
+                                            </t>
+                                        </tr>
+                                    </t>
+                                </tbody>
+                            </table>
+                        </form>
+                    </center>
+                </div>
+            </section>
+            <div style="height:20px"/>
+        </t>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/category_details_templates.xml

@@ -0,0 +1,216 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--  When clicking on a category directed to products under that
+        category where the route set as '/category/form'  -->
+    <template id="category_snippet_img" name="Products Snippet">
+        <t t-call="website.layout">
+            <section class="row product_search_bar" loading="eager">
+                <div class="container">
+                    <div style="height:20px"/>
+                    <div class="back_button" align="left">
+                        <a t-attf-href="/" name="create"
+                           style="margin-left: 13%;font-weight: bold;">Back
+                        </a>
+                    </div>
+                    <h2>
+                        <center>
+                            <b style="font-size: 50px;">
+                                <t t-esc="category.name"/>
+                            </b>
+                            <br/>
+                        </center>
+                    </h2>
+                    <div style="height:20px"/>
+                    <t t-if="category.product_count == 0">
+                        <center>
+                            <form align="center" id="categories"
+                                  action="/category/form">
+                                <div style="height:20px"/>
+                                <t t-if="products">
+                                    <!-- When the products are available for the
+                                    category then shows all products -->
+                                    <div style="height:20px"/>
+                                    <center>
+                                        <h3 style="font-size: 26px;">Products
+                                        </h3>
+                                    </center>
+                                    <div>
+                                        <input type="text"
+                                               class="search_product_bar"
+                                               placeholder="Search..."
+                                               id="searchBarInput"
+                                               style="margin-left:64%%; width:16%;"/>
+                                    </div>
+                                    <table class="category_table"
+                                           id="category_table"
+                                           style="margin-left: 13%;width: 77%;border-bottom: 1px solid #ddd;background: #bababa;">
+                                        <thead style="background: #7b7b7b;">
+                                            <td>
+                                                <b>Image</b>
+                                            </td>
+                                            <td>
+                                                <b>Product</b>
+                                            </td>
+                                            <td>
+                                                <b>Price</b>
+                                            </td>
+                                        </thead>
+                                        <div style="height:20px"/>
+                                        <tbody id="category_table_body"
+                                               class="body">
+                                            <t t-foreach="products"
+                                               t-as="product">
+                                                <tr style="nth-child(even){background-color: #f2f2f2}"
+                                                    id="category_table">
+                                                    <td style="width: 19%;">
+                                                        <img t-attf-src="/web/image/product.template/{{product.id}}/image_512/"
+                                                             style="width: 71%;"/>
+                                                    </td>
+                                                    <td>
+                                                        <a t-attf-href="/selected/product/from/category?product_id=#{product.id}">
+                                                            <t style="margin-left: -190%;"
+                                                               t-esc="product.name"/>
+                                                        </a>
+                                                    </td>
+                                                    <td>
+                                                        <t t-esc="product.currency_id.symbol"/>
+                                                        <t t-esc="product.list_price"/>
+                                                    </td>
+                                                </tr>
+                                            </t>
+                                        </tbody>
+                                    </table>
+                                </t>
+                                <t t-else="">
+                                    <!-- When products are not available get the following message -->
+                                    <h4 style="font-size: 307%;">No products
+                                        available....!!!!
+                                    </h4>
+                                </t>
+                            </form>
+                        </center>
+                    </t>
+                    <t t-else="">
+                        <center>
+                            <form align="center" id="categories"
+                                  action="/category/form">
+                                <div style="height:20px"/>
+                                <t t-if="products">
+                                    <!-- When the products are available for the
+                                                                        category then shows all products -->
+                                    <div style="height:20px"/>
+                                    <center>
+                                        <h3 style="font-size: 26px;">Products
+                                        </h3>
+                                    </center>
+                                    <div>
+                                        <input type="text"
+                                               class="search_product_bar"
+                                               placeholder="Search..."
+                                               id="searchBarInput"
+                                               style="margin-left:64%%; width:16%;"/>
+                                    </div>
+                                    <table class="category_table"
+                                           id="category_table"
+                                           style="margin-left: 13%;width: 77%;border-bottom: 1px solid #ddd;background: #bababa;">
+                                        <thead style="background: #7b7b7b;">
+                                            <td>
+                                                <b>Image</b>
+                                            </td>
+                                            <td>
+                                                <b>Product</b>
+                                            </td>
+                                            <td>
+                                                <b>Price</b>
+                                            </td>
+                                        </thead>
+                                        <div style="height:20px"/>
+                                        <tbody id="category_table_body"
+                                               class="body">
+                                            <t t-foreach="products"
+                                               t-as="product">
+                                                <tr style="nth-child(even){background-color: #f2f2f2}"
+                                                    id="category_table">
+                                                    <td style="width: 19%;">
+                                                        <img t-attf-src="/web/image/product.template/{{product.id}}/image_512/"
+                                                             style="width: 71%;"/>
+                                                    </td>
+                                                    <td>
+                                                        <a t-attf-href="/selected/product/from/category?product_id=#{product.id}">
+                                                            <t style="margin-left: -190%;"
+                                                               t-esc="product.name"/>
+                                                        </a>
+                                                    </td>
+                                                    <td>
+                                                        <t t-esc="product.currency_id.symbol"/>
+                                                        <t t-esc="product.list_price"/>
+                                                    </td>
+                                                </tr>
+                                            </t>
+                                        </tbody>
+                                    </table>
+                                </t>
+                                <t t-else="">
+                                    <!-- When the products are available for the
+                                                                        category then shows all products -->
+                                    <div style="height:20px"/>
+                                    <center>
+                                        <h3 style="font-size: 26px;">Products
+                                        </h3>
+                                    </center>
+                                    <div>
+                                        <input type="text"
+                                               class="search_product_bar"
+                                               placeholder="Search..."
+                                               id="searchBarInput"
+                                               style="margin-left:64%%; width:16%;"/>
+                                    </div>
+                                    <table class="category_table"
+                                           id="category_table"
+                                           style="margin-left: 13%;width: 77%;border-bottom: 1px solid #ddd;background: #bababa;">
+                                        <thead style="background: #7b7b7b;">
+                                            <td>
+                                                <b>Image</b>
+                                            </td>
+                                            <td>
+                                                <b>Product</b>
+                                            </td>
+                                            <td>
+                                                <b>Price</b>
+                                            </td>
+                                        </thead>
+                                        <div style="height:20px"/>
+                                        <tbody id="category_table_body"
+                                               class="body">
+                                            <t t-foreach="products_category"
+                                               t-as="prod">
+                                                <tr style="nth-child(even){background-color: #f2f2f2}"
+                                                    id="category_table">
+                                                    <td style="width: 19%;">
+                                                        <img t-attf-src="/web/image/product.template/{{prod.id}}/image_512/"
+                                                             style="width: 71%;"/>
+                                                    </td>
+                                                    <td>
+                                                        <a t-attf-href="/selected/product/from/category?product_id=#{prod.id}">
+                                                            <t style="margin-left: -190%;"
+                                                               t-esc="prod.name"/>
+                                                        </a>
+                                                    </td>
+                                                    <td>
+                                                        <t t-esc="prod.currency_id.symbol"/>
+                                                        <t t-esc="prod.list_price"/>
+                                                    </td>
+                                                </tr>
+                                            </t>
+                                        </tbody>
+                                    </table>
+                                </t>
+                            </form>
+                        </center>
+                    </t>
+                </div>
+            </section>
+            <div style="height:20px"/>
+        </t>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/category_selected_product_templates.xml

@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--  When clicking on a product directed to product details
+        where the page route is set as '/selected/product/from/category'  -->
+    <template id="selected_products_from_category_snippet_img"
+              name="Products Snippet">
+        <t t-call="website.layout">
+            <section class="row align-items-center">
+                <div class="container" style="background: e0e0e0;;">
+                    <div style="height:20px"/>
+                    <div class="back_button" align="left">
+                        <a style="margin-left: 31%;"
+                           t-attf-href="/category/form?category_id=#{products.categ_id.id}&amp;parent_id=#{products.category_id}"
+                           name="create" loading="fast">Back
+                        </a>
+                    </div>
+                    <center>
+                        <div class="row">
+                            <img class="card-img-top"
+                                 t-attf-src="/web/image/product.template/{{products.id}}/image_512/"
+                                 alt="Card Image Cap"
+                                 style="width: 22%;margin-left: 39%;"
+                                 loading="fast"/>
+                        </div>
+                    </center>
+                    <h2>
+                        <center>
+                            <b>
+                                <t t-esc="products.name"/>
+                            </b>
+                            <br/>
+                        </center>
+                    </h2>
+                    <div style="height:20px"/>
+                    <center>
+                        <form align="center" id="top_customer"
+                              action="/selected/product/from/category"
+                              method="post" enctype="multipart/form-data"
+                              class="o_mark_required" data-mark="*"
+                              data-model_name="" data-success-page=""
+                              style="border: 3px solid gray;width: 24%;"
+                              loading="fast">
+                            <div style="height:20px"></div>
+                            <input type="hidden" name="csrf_token"
+                                   t-att-value="request.csrf_token()"/>
+                            <div style="margin-left: 20%;">
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.list_price">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Price :
+                                                            <t t-esc="products.currency_id.symbol"/>
+                                                            <t t-esc="products.list_price"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.categ_id">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Category :
+                                                            <t t-esc="products.categ_id.name"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.type">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <t t-if="products.type == 'consu'">
+                                                            <b>Product Type :
+                                                                Consumable
+                                                            </b>
+                                                        </t>
+                                                        <t t-if="products.type == 'service'">
+                                                            <b>Product Type :
+                                                                Service
+                                                            </b>
+                                                        </t>
+                                                        <t t-if="products.type == 'product'">
+                                                            <b>Product Type :
+                                                                Storable Product
+                                                            </b>
+                                                        </t>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.taxes_id">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Tax :
+                                                            <t t-esc="products.taxes_id.name"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div style="height:20px"/>
+                        </form>
+                    </center>
+                </div>
+            </section>
+            <div style="height:20px"/>
+        </t>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/product_all_result_templates.xml

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- When clicking on a 'See All Products' rendering a page route as
+        /product/form/all/results,where all products are displayed -->
+    <template id="product_all_result_template" name="Products results Snippet">
+        <t t-call="website.layout">
+            <section class="row category_result_search_bar" loading="eager">
+                <div class="container">
+                    <div style="height:20px"/>
+                    <div class="back_button" align="left">
+                        <a t-attf-href="/" name="create"
+                           style="margin-left: 13%;font-weight: bold;">Back
+                        </a>
+                    </div>
+                    <div style="height:20px"/>
+                    <center>
+                        <form align="center" id="search_result"
+                              action="/product/form/all/results">
+                            <div style="height:20px"/>
+                            <div style="height:20px"/>
+                            <center>
+                                <h3 style="font-size: 26px;">All Products</h3>
+                            </center>
+                            <table class="table"
+                                   style="width: 66%;margin-left: 17%;">
+                                <thead id="table_header">
+                                    <td>
+                                        <b>Image</b>
+                                    </td>
+                                    <td>
+                                        <b>Product</b>
+                                    </td>
+                                    <td style="padding-left:2%;">
+                                        <b/>
+                                    </td>
+                                    <td>
+                                        <b>Price</b>
+                                    </td>
+                                </thead>
+                                <tbody id="table_category_body" class="body">
+                                    <t t-foreach="products" t-as="product">
+                                        <tr style="nth-child(even){background-color: #f2f2f2}"
+                                            id="category_table">
+                                            <td>
+                                                <img t-attf-src="/web/image/product.template/{{product.id}}/image_512/"
+                                                     style="width:25%;"/>
+                                            </td>
+                                            <td>
+                                                <a t-attf-href="/all/product/selected/product/details?product_id=#{product.id}"
+                                                   loading="fast">
+                                                    <t t-esc="product.name"/>
+                                                </a>
+                                            </td>
+                                            <td style="padding-left:2%;">
+                                                <t t-esc="product.currency_id.symbol"/>
+                                            </td>
+                                            <td>
+                                                <t t-esc="product.list_price"/>
+                                            </td>
+                                        </tr>
+                                    </t>
+                                </tbody>
+                            </table>
+                        </form>
+                    </center>
+                </div>
+            </section>
+            <div style="height:20px"/>
+        </t>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/product_details_templates.xml

@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--  When clicking on a product directed to product details
+        where the page route is set as '/product/form' -->
+    <template id="products_snippet_img" name="Products Snippet">
+        <t t-call="website.layout">
+            <section class="row align-items-center">
+                <div class="container" style="background: e0e0e0;;">
+                    <div style="height:20px"/>
+                    <div class="back_button" align="left">
+                        <a style="margin-left: 31%;" t-attf-href="/"
+                           name="create" loading="fast">Back
+                        </a>
+                    </div>
+                    <center>
+                        <div class="row">
+                            <img class="card-img-top"
+                                 t-attf-src="/web/image/product.template/{{products.id}}/image_512/"
+                                 alt="Card Image Cap"
+                                 style="width: 22%;margin-left: 39%;"
+                                 loading="fast"/>
+                        </div>
+                    </center>
+                    <h2>
+                        <center>
+                            <b>
+                                <t t-esc="products.name"/>
+                            </b>
+                            <br/>
+                        </center>
+                    </h2>
+                    <div style="height:20px"/>
+                    <center>
+                        <form align="center" id="top_customer"
+                              action="/product/form" method="post"
+                              enctype="multipart/form-data"
+                              class="o_mark_required" data-mark="*"
+                              data-model_name="" data-success-page=""
+                              style="border: 3px solid gray;width: 24%;"
+                              loading="fast">
+                            <div style="height:20px"></div>
+                            <input type="hidden" name="csrf_token"
+                                   t-att-value="request.csrf_token()"/>
+                            <div style="margin-left: 20%;">
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.list_price">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Price :
+                                                            <t t-esc="products.currency_id.symbol"/>
+                                                            <t t-esc="products.list_price"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.categ_id">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Category :
+                                                            <t t-esc="products.categ_id.name"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.type">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <t t-if="products.type == 'consu'">
+                                                            <b>Product Type :
+                                                                Consumable
+                                                            </b>
+                                                        </t>
+                                                        <t t-if="products.type == 'service'">
+                                                            <b>Product Type :
+                                                                Service
+                                                            </b>
+                                                        </t>
+                                                        <t t-if="products.type == 'product'">
+                                                            <b>Product Type :
+                                                                Storable Product
+                                                            </b>
+                                                        </t>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.taxes_id">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Tax :
+                                                            <t t-esc="products.taxes_id.name"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div style="height:20px"/>
+                        </form>
+                    </center>
+                </div>
+            </section>
+            <div style="height:20px"/>
+        </t>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/product_search_templates.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--   Add a template for a search bar view where the user can filter by
+        category or all categories using search bar  -->
+    <template id="search_snippet" name="Search Product">
+        <section class="container dynamic_search_snippet"
+                 style="border: 0px solid white; width:49%;">
+            <div class="qweb_product">
+                <div class="row">
+                    <div style="height:10px"/>
+                    <div class="search_bar_container" style="width:100%;">
+                        <h1 class="heading" align="center">Product Search</h1>
+                        <div class="search_container">
+                            <div style="height:35px"/>
+                            <div style="margin-left:18%;">
+                                <select name="category_options"
+                                        class="category_options"
+                                        id="category_options"
+                                        style="height: 30px; width: 25%; border-radius: 25px;">
+                                    <option id="all_category" value="volvo">All Categories
+                                    </option>
+                                    <option id="category" value="saab">
+                                        Category
+                                    </option>
+                                </select>
+                                <input type="text" class="search_bar"
+                                       placeholder="Search..." id="searchInput"
+                                       style="margin-bottom:10px;height:30px;width: 45%;"/>
+                            </div>
+                            <div style="height:22px"/>
+                            <div class="qweb_product_id" loading="fast"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <div style="height:20px"/>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/product_select_from_category_templates.xml

@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--  When clicking on a product directed to product details
+        where the page route is set as '/select/product/from/category' -->
+    <template id="products_category_snippet_img" name="Products Snippet">
+        <t t-call="website.layout">
+            <section class="row align-items-center">
+                <div class="container" style="background: e0e0e0;;">
+                    <div style="height:20px"/>
+                    <div class="back_button" align="left">
+                        <a style="margin-left: 31%;"
+                           t-attf-href="/selected/category/from/all_category/result?category_id=#{products.categ_id.id}&amp;parent_id=#{products.category_id}"
+                           name="create" loading="fast">Back
+                        </a>
+                    </div>
+                    <center>
+                        <div class="row">
+                            <img class="card-img-top"
+                                 t-attf-src="/web/image/product.template/{{products.id}}/image_512/"
+                                 alt="Card Image Cap"
+                                 style="width: 22%;margin-left: 39%;"
+                                 loading="fast"/>
+                        </div>
+                    </center>
+                    <h2>
+                        <center>
+                            <b>
+                                <t t-esc="products.name"/>
+                            </b>
+                            <br/>
+                        </center>
+                    </h2>
+                    <div style="height:20px"/>
+                    <center>
+                        <form align="center" id="top_customer"
+                              action="/select/product/from/category"
+                              method="post" enctype="multipart/form-data"
+                              class="o_mark_required" data-mark="*"
+                              data-model_name="" data-success-page=""
+                              style="border: 3px solid gray;width: 24%;"
+                              loading="fast">
+                            <div style="height:20px"></div>
+                            <input type="hidden" name="csrf_token"
+                                   t-att-value="request.csrf_token()"/>
+                            <div style="margin-left: 20%;">
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.list_price">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Price :
+                                                            <t t-esc="products.currency_id.symbol"/>
+                                                            <t t-esc="products.list_price"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.categ_id">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Category :
+                                                            <t t-esc="products.categ_id.name"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.type">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <t t-if="products.type == 'consu'">
+                                                            <b>Product Type :
+                                                                Consumable
+                                                            </b>
+                                                        </t>
+                                                        <t t-if="products.type == 'service'">
+                                                            <b>Product Type :
+                                                                Service
+                                                            </b>
+                                                        </t>
+                                                        <t t-if="products.type == 'product'">
+                                                            <b>Product Type :
+                                                                Storable Product
+                                                            </b>
+                                                        </t>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.taxes_id">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Tax :
+                                                            <t t-esc="products.taxes_id.name"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div style="height:20px"/>
+                        </form>
+                    </center>
+                </div>
+            </section>
+            <div style="height:20px"/>
+        </t>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/search_snippet_templates.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- Add a website snippet -->
+    <template id="external_snippets" inherit_id="website.snippets" priority="8">
+        <xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]"
+               position="after">
+            <t t-snippet="website_product_search_snippet.search_snippet"
+               t-thumbnail="/website_product_search_snippet/static/src/img/icon.png"/>
+        </xpath>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/selected_category_from_all_category_templates.xml

@@ -0,0 +1,222 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!-- When clicking on a category directed to products under that
+        category where the route set as '/selected/category/from/all_category/result' -->
+    <template id="category_from_all_category_snippet_img"
+              name="Products Snippet">
+        <t t-call="website.layout">
+            <section class="row product_search_bar" loading="eager">
+                <div class="container">
+                    <div style="height:20px"/>
+                    <div class="back_button" align="left">
+                        <a t-attf-href="/category/form/all/results"
+                           name="create"
+                           style="margin-left: 13%;font-weight: bold;">Back
+                        </a>
+                    </div>
+                    <h2>
+                        <center>
+                            <b style="font-size: 50px;">
+                                <t t-esc="category.name"/>
+                            </b>
+                            <br/>
+                        </center>
+                    </h2>
+                    <div style="height:20px"/>
+                    <t t-if="category.product_count == 0">
+                        <center>
+                            <form align="center" id="categories"
+                                  action="/selected/category/from/all_category/result">
+                                <div style="height:20px"/>
+                                <t t-if="products">
+                                    <!-- When the products are available for the
+                                                                        category then shows all products -->
+                                    <div style="height:20px"/>
+                                    <center>
+                                        <h3 style="font-size: 26px;">Products
+                                        </h3>
+                                    </center>
+                                    <div>
+                                        <input type="text"
+                                               class="search_product_bar"
+                                               placeholder="Search..."
+                                               id="searchBarInput"
+                                               style="margin-left:64%%; width:16%;"/>
+                                    </div>
+                                    <table class="category_table"
+                                           id="category_table"
+                                           style="margin-left: 13%;width: 77%;border-bottom: 1px solid #ddd;background: #bababa;">
+                                        <thead style="background: #7b7b7b;">
+                                            <td>
+                                                <b>Image</b>
+                                            </td>
+                                            <td>
+                                                <b>Product</b>
+                                            </td>
+                                            <td>
+                                                <b>Price</b>
+                                            </td>
+                                        </thead>
+                                        <div style="height:20px"/>
+                                        <tbody id="category_table_body"
+                                               class="body">
+                                            <t t-foreach="products"
+                                               t-as="product">
+                                                <tr style="nth-child(even){background-color: #f2f2f2}"
+                                                    id="category_table">
+                                                    <td style="width: 19%;">
+                                                        <img t-attf-src="/web/image/product.template/{{product.id}}/image_512/"
+                                                             style="width: 71%;"/>
+                                                    </td>
+                                                    <td>
+                                                        <a t-attf-href="/select/product/from/category?product_id=#{product.id}">
+                                                            <t style="margin-left: -190%;"
+                                                               t-esc="product.name"/>
+                                                            t
+                                                            style="margin-left:
+                                                            -190%;"
+                                                            t-esc="product.name"/>
+                                                        </a>
+                                                    </td>
+                                                    <td>
+                                                        <t t-esc="product.currency_id.symbol"/>
+                                                        <t t-esc="product.list_price"/>
+                                                    </td>
+                                                </tr>
+                                            </t>
+                                        </tbody>
+                                    </table>
+                                </t>
+                                <t t-else="">
+                                    <!-- When products are not available get the following message -->
+                                    <h4 style="font-size: 307%;">No products
+                                        available....!!!!
+                                    </h4>
+                                </t>
+                            </form>
+                        </center>
+                    </t>
+                    <t t-else="">
+                        <center>
+                            <form align="center" id="categories"
+                                  action="/selected/category/from/all_category/result">
+                                <div style="height:20px"/>
+                                <t t-if="products">
+                                    <!-- When the products are available for the
+                                                                        category then shows all products -->
+                                    <div style="height:20px"/>
+                                    <center>
+                                        <h3 style="font-size: 26px;">Products
+                                        </h3>
+                                    </center>
+                                    <div>
+                                        <input type="text"
+                                               class="search_product_bar"
+                                               placeholder="Search..."
+                                               id="searchBarInput"
+                                               style="margin-left:64%%; width:16%;"/>
+                                    </div>
+                                    <table class="category_table"
+                                           id="category_table"
+                                           style="margin-left: 13%;width: 77%;border-bottom: 1px solid #ddd;background: #bababa;">
+                                        <thead style="background: #7b7b7b;">
+                                            <td>
+                                                <b>Image</b>
+                                            </td>
+                                            <td>
+                                                <b>Product</b>
+                                            </td>
+                                            <td>
+                                                <b>Price</b>
+                                            </td>
+                                        </thead>
+                                        <div style="height:20px"/>
+                                        <tbody id="category_table_body"
+                                               class="body">
+                                            <t t-foreach="products"
+                                               t-as="product">
+                                                <tr style="nth-child(even){background-color: #f2f2f2}"
+                                                    id="category_table">
+                                                    <td style="width: 19%;">
+                                                        <img t-attf-src="/web/image/product.template/{{product.id}}/image_512/"
+                                                             style="width: 71%;"/>
+                                                    </td>
+                                                    <td>
+                                                        <a t-attf-href="/select/product/from/category?product_id=#{product.id}">
+                                                            <t style="margin-left: -190%;"
+                                                               t-esc="product.name"/>
+                                                        </a>
+                                                    </td>
+                                                    <td>
+                                                        <t t-esc="product.currency_id.symbol"/>
+                                                        <t t-esc="product.list_price"/>
+                                                    </td>
+                                                </tr>
+                                            </t>
+                                        </tbody>
+                                    </table>
+                                </t>
+                                <t t-else="">
+                                    <!-- When the products are available for the
+                                     category then shows all products -->
+                                    <div style="height:20px"/>
+                                    <center>
+                                        <h3 style="font-size: 26px;">Products
+                                        </h3>
+                                    </center>
+                                    <div>
+                                        <input type="text"
+                                               class="search_product_bar"
+                                               placeholder="Search..."
+                                               id="searchBarInput"
+                                               style="margin-left:64%%; width:16%;"/>
+                                    </div>
+                                    <table class="category_table"
+                                           id="category_table"
+                                           style="margin-left: 13%;width: 77%;border-bottom: 1px solid #ddd;background: #bababa;">
+                                        <thead style="background: #7b7b7b;">
+                                            <td>
+                                                <b>Image</b>
+                                            </td>
+                                            <td>
+                                                <b>Product</b>
+                                            </td>
+                                            <td>
+                                                <b>Price</b>
+                                            </td>
+                                        </thead>
+                                        <div style="height:20px"/>
+                                        <tbody id="category_table_body"
+                                               class="body">
+                                            <t t-foreach="products_category"
+                                               t-as="prod">
+                                                <tr style="nth-child(even){background-color: #f2f2f2}"
+                                                    id="category_table">
+                                                    <td style="width: 19%;">
+                                                        <img t-attf-src="/web/image/product.template/{{prod.id}}/image_512/"
+                                                             style="width: 71%;"/>
+                                                    </td>
+                                                    <td>
+                                                        <a t-attf-href="/select/product/from/category?product_id=#{prod.id}">
+                                                            <t style="margin-left: -190%;"
+                                                               t-esc="prod.name"/>
+                                                        </a>
+                                                    </td>
+                                                    <td>
+                                                        <t t-esc="prod.currency_id.symbol"/>
+                                                        <t t-esc="prod.list_price"/>
+                                                    </td>
+                                                </tr>
+                                            </t>
+                                        </tbody>
+                                    </table>
+                                </t>
+                            </form>
+                        </center>
+                    </t>
+                </div>
+            </section>
+            <div style="height:20px"/>
+        </t>
+    </template>
+</odoo>

website_product_search_snippet/views/snippets/selected_product_from_all_product_templates.xml

@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <!--  When clicking on a product directed to product details
+        where the page route is set as '/all/product/selected/product/details' -->
+    <template id="all_products_snippet_img" name="Products Snippet">
+        <t t-call="website.layout">
+            <section class="row align-items-center">
+                <div class="container" style="background: e0e0e0;;">
+                    <div style="height:20px"/>
+                    <div class="back_button" align="left">
+                        <a style="margin-left: 31%;"
+                           t-attf-href="/product/form/all/results" name="create"
+                           loading="fast">Back
+                        </a>
+                    </div>
+                    <center>
+                        <div class="row">
+                            <img class="card-img-top"
+                                 t-attf-src="/web/image/product.template/{{products.id}}/image_512/"
+                                 alt="Card Image Cap"
+                                 style="width: 22%;margin-left: 39%;"
+                                 loading="fast"/>
+                        </div>
+                    </center>
+                    <h2>
+                        <center>
+                            <b>
+                                <t t-esc="products.name"/>
+                            </b>
+                            <br/>
+                        </center>
+                    </h2>
+                    <div style="height:20px"/>
+                    <center>
+                        <form align="center" id="top_customer"
+                              action="/all/product/selected/product/details"
+                              method="post" enctype="multipart/form-data"
+                              class="o_mark_required" data-mark="*"
+                              data-model_name="" data-success-page=""
+                              style="border: 3px solid gray;width: 24%;"
+                              loading="fast">
+                            <div style="height:20px"></div>
+                            <input type="hidden" name="csrf_token"
+                                   t-att-value="request.csrf_token()"/>
+                            <div style="margin-left: 20%;">
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.list_price">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Price :
+                                                            <t t-esc="products.currency_id.symbol"/>
+                                                            <t t-esc="products.list_price"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.categ_id">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Category :
+                                                            <t t-esc="products.categ_id.name"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.type">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <t t-if="products.type == 'consu'">
+                                                            <b>Product Type :
+                                                                Consumable
+                                                            </b>
+                                                        </t>
+                                                        <t t-if="products.type == 'service'">
+                                                            <b>Product Type :
+                                                                Service
+                                                            </b>
+                                                        </t>
+                                                        <t t-if="products.type == 'product'">
+                                                            <b>Product Type :
+                                                                Storable Product
+                                                            </b>
+                                                        </t>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style="height:20px"/>
+                                <input type="hidden" name="csrf_token"
+                                       t-att-value="request.csrf_token()"/>
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required"
+                                         data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <t t-if="products.taxes_id">
+                                                <div align="left">
+                                                    <span class="s_website_form_label_content">
+                                                        <b>
+                                                            Tax :
+                                                            <t t-esc="products.taxes_id.name"/>
+                                                        </b>
+                                                    </span>
+                                                </div>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div style="height:20px"/>
+                        </form>
+                    </center>
+                </div>
+            </section>
+            <div style="height:20px"/>
+        </t>
+    </template>
+</odoo>