+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/website_product_search_snippet/static/src/img/icon.png b/website_product_search_snippet/static/src/img/icon.png
new file mode 100644
index 000000000..06cca8e93
Binary files /dev/null and b/website_product_search_snippet/static/src/img/icon.png differ
diff --git a/website_product_search_snippet/static/src/js/search_bar.js b/website_product_search_snippet/static/src/js/search_bar.js
new file mode 100644
index 000000000..00621c7fc
--- /dev/null
+++ b/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";
+ }
+ }
+ }
+ },
+ });
+});
diff --git a/website_product_search_snippet/static/src/js/website_product_search_snippet.js b/website_product_search_snippet/static/src/js/website_product_search_snippet.js
new file mode 100644
index 000000000..aca6ac352
--- /dev/null
+++ b/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;
+});
diff --git a/website_product_search_snippet/static/src/scss/website_product_search_snippet.scss b/website_product_search_snippet/static/src/scss/website_product_search_snippet.scss
new file mode 100644
index 000000000..7d988f26c
--- /dev/null
+++ b/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}
diff --git a/website_product_search_snippet/static/src/xml/category_templates.xml b/website_product_search_snippet/static/src/xml/category_templates.xml
new file mode 100644
index 000000000..d367d94de
--- /dev/null
+++ b/website_product_search_snippet/static/src/xml/category_templates.xml
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+ 
+
+ + Product Search Snippet
++ This App Allows to Search Products in Category With the Help of + Snippet +
+
+
+
+
+
+
+
+
+
+
+ + Explore this module +
+
+
+
+
+
+
+
+ + Overview +
+
+
+ + 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. +
+ +
+
+
+
+
+
+ + Features +
+
+
+
+
+ 
+
+
+
+
+ + + Community,Enterprise and Odoo.sh Support. +
+
+
+
+
+
+
+
+
+
+ + + Search for Products based on specific Categories as well as across All Categories.
+ +
+
+
+
+
+
+
+
+ + + Filtering can be applied during the search process, either based on a specific Category or across All Categories.
+
+
+
+
+
+
+
+
+ + Product details can be viewed by clicking on the respective Products.
+
+
+
+
+
+ + Screenshots +
+
+ 
+
+ + Drag the Product Search Snippet and save it. +
+
+
+ 
+
+
+ + 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. +
+
+
+ 
+
+
+ + 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. +
+
+
+ 
+
+ + 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.
+
+
+ 
+
+
+ + Get all Product Categories. Additionally, utilize red and blue colors to signify the product count within each category. +
+
+
+ 
+
+
+ + 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 +
+
+
+ 
+
+ + When there are No Products Available under the selected Category, the system should display the following message. +
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ Our Services
++
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+
+
+ Our Industries
++
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+
+
+
+
+ Need Help?
++
+
+
+
+
+
+
+
+
+
+
+
+ WhatsApp
+
+
+
+
+
+ 
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +