+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.Sh
+
+
+
+
+
+
+
+ 
+
+ + 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.
+
+
+ Community,Enterprise and Odoo.sh Support.
+
+
+
+ Search for Products based on specific Categories as well as across All Categories.
+
+
+
+
+ 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.
+
+
+
+
+ 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.
+
+
+
+
+ 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.
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + 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
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
diff --git a/website_product_search_snippet/static/src/css/website_product_search_snippet.scss b/website_product_search_snippet/static/src/css/website_product_search_snippet.scss
new file mode 100644
index 000000000..4e5ec1e35
--- /dev/null
+++ b/website_product_search_snippet/static/src/css/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}
\ 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..19d4e9269
--- /dev/null
+++ b/website_product_search_snippet/static/src/js/search_bar.js
@@ -0,0 +1,41 @@
+odoo.define('website_product_search_snippet.search', function(require) {
+ "use strict";
+
+ var publicWidget = require('web.public.widget');
+ var rpc = require('web.rpc');
+
+
+ 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..1a9840cf3
--- /dev/null
+++ b/website_product_search_snippet/static/src/js/website_product_search_snippet.js
@@ -0,0 +1,50 @@
+odoo.define('website_product_search_snippet.dynamic', function(require) {
+ 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',
+ events: {
+ 'click .search_container': '_onClick',
+ 'keyup .search_bar': '_onKeyUp',
+ },
+ // 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) {
+ category = this.$el.find(".category_options").find(":selected").text();
+ var qry = $(ev.currentTarget).val()
+ if (category === "All Categories") {
+ await rpc.query({
+ model: 'product.template',
+ method: 'search_products',
+ args: [qry],
+ }).then(function(result) {
+ console.log(result)
+ this.$('.qweb_product_id').html("");
+ this.$('.qweb_product_id').append(Qweb.render('website_product_search_snippet.product_template', {
+ result
+ }));
+ });
+ }
+ // Call rpc query to keyup function for display all category under category filter
+ if (category === "Category") {
+ await rpc.query({
+ model: 'product.template',
+ method: 'product_category',
+ args: [qry],
+ }).then(function(result) {
+ this.$('.qweb_product_id').html("");
+ this.$('.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/xml/category_templates.xml b/website_product_search_snippet/static/src/xml/category_templates.xml
new file mode 100644
index 000000000..dde25f154
--- /dev/null
+++ b/website_product_search_snippet/static/src/xml/category_templates.xml
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +