+
+
+
+
diff --git a/website_product_search_snippet/static/src/xml/product_templates.xml b/website_product_search_snippet/static/src/xml/product_templates.xml
new file mode 100644
index 000000000..c5932e3f8
--- /dev/null
+++ b/website_product_search_snippet/static/src/xml/product_templates.xml
@@ -0,0 +1,61 @@
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/category_all_result_templates.xml b/website_product_search_snippet/views/snippets/category_all_result_templates.xml
new file mode 100644
index 000000000..733ca35d8
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/category_all_result_templates.xml
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/category_details_templates.xml b/website_product_search_snippet/views/snippets/category_details_templates.xml
new file mode 100644
index 000000000..6dea613fa
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/category_details_templates.xml
@@ -0,0 +1,213 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/category_selected_product_templates.xml b/website_product_search_snippet/views/snippets/category_selected_product_templates.xml
new file mode 100644
index 000000000..3bfe3ae11
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/category_selected_product_templates.xml
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/product_all_result_templates.xml b/website_product_search_snippet/views/snippets/product_all_result_templates.xml
new file mode 100644
index 000000000..595736f2e
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/product_all_result_templates.xml
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/product_details_templates.xml b/website_product_search_snippet/views/snippets/product_details_templates.xml
new file mode 100644
index 000000000..b4bd50b92
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/product_details_templates.xml
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/product_search_templates.xml b/website_product_search_snippet/views/snippets/product_search_templates.xml
new file mode 100644
index 000000000..dc3955b2e
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/product_search_templates.xml
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/product_select_from_category_templates.xml b/website_product_search_snippet/views/snippets/product_select_from_category_templates.xml
new file mode 100644
index 000000000..e775aef53
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/product_select_from_category_templates.xml
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/search_snippet_templates.xml b/website_product_search_snippet/views/snippets/search_snippet_templates.xml
new file mode 100644
index 000000000..e16b562df
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/search_snippet_templates.xml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/selected_category_from_all_category_templates.xml b/website_product_search_snippet/views/snippets/selected_category_from_all_category_templates.xml
new file mode 100644
index 000000000..c789f8d43
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/selected_category_from_all_category_templates.xml
@@ -0,0 +1,214 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/website_product_search_snippet/views/snippets/selected_product_from_all_product_templates.xml b/website_product_search_snippet/views/snippets/selected_product_from_all_product_templates.xml
new file mode 100644
index 000000000..6b2900a72
--- /dev/null
+++ b/website_product_search_snippet/views/snippets/selected_product_from_all_product_templates.xml
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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..cae8a0141
--- /dev/null
+++ b/website_product_search_snippet/static/src/js/search_bar.js
@@ -0,0 +1,52 @@
+/** @odoo-module **/
+
+import publicWidget from "@web/legacy/js/public/public_widget";
+
+
+publicWidget.registry.portalDetails = publicWidget.Widget.extend({
+ /**
+ * This widget handles search functionality within a product table on the website.
+ * It listens for keyup events on the search input field and filters table rows
+ * based on the user's input.
+ */
+ selector: '.product_search_bar',
+ events: {
+ 'keyup .search_product_bar': '_onKeyUp',
+ },
+ /**
+ * Initializes the widget and starts the functionality.
+ *
+ * @returns {Promise} - Resolves when the widget has fully started.
+ */
+ start: function () {
+ this._super.apply(this, arguments);
+ },
+ /**
+ * Handles the keyup event to filter table data.
+ *
+ * This function retrieves the value from the search input field, converts it to
+ * uppercase, and then compares it with the text content of each table cell.
+ * Rows that contain a match are displayed, while others are hidden.
+ *
+ * @private
+ */
+ _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..b47530a58
--- /dev/null
+++ b/website_product_search_snippet/static/src/js/website_product_search_snippet.js
@@ -0,0 +1,135 @@
+/** @odoo-module **/
+import publicWidget from "@web/legacy/js/public/public_widget";
+import { rpc } from "@web/core/network/rpc";
+import {renderToElement} from "@web/core/utils/render";
+
+var Dynamic = publicWidget.Widget.extend({
+ selector: '.dynamic_search_snippet',
+ events: {
+ 'click .search_container': '_onClick',
+ 'keyup .search_bar': '_onKeyUp',
+ 'change .category_options': '_filterProducts',
+ },
+ /**
+ * _onClick: Clears the search input field.
+ *
+ * This function is triggered when a specific element is clicked. It clears the value of
+ * the input field with the ID `#searchInput`.
+ *
+ * Functionality:
+ * 1. Locates the input field with the ID `#searchInput` within the current element (`this.$el`).
+ * 2. Sets the value of the `#searchInput` field to an empty string, effectively clearing any text that was entered.
+ */
+ _onClick: function () {
+ this.$el.find('#searchInput').val("");
+ },
+ /**
+ * _onKeyUp: Asynchronously searches and filters products based on the user's input and selected category.
+ *
+ * This function is triggered when a key is released while typing in a search input field.
+ * It captures the current search query and the selected category, then calls the appropriate
+ * Odoo model method to fetch the relevant products. The fetched products are rendered in the
+ * specified HTML element using the corresponding QWeb template.
+ *
+ * @param {Object} ev - The event object associated with the keyup action.
+ *
+ * Functionality:
+ * 1. Captures the selected category from a dropdown menu with the class `.category_options`.
+ * 2. Retrieves the user's search query from the input field.
+ * 3. If "All Categories" is selected:
+ * - Calls the `search_products` method on the `product.template` model with the search query as an argument.
+ * - Renders the result using the 'website_product_search_snippet.product_template' template.
+ * 4. If "Category" is selected:
+ * - Calls the `product_category` method on the `product.template` model with the search query as an argument.
+ * - Renders the result using the 'website_product_search_snippet.product_category' template.
+ * 5. Updates the HTML element with the class `.qweb_product_id` to display the filtered products based on the search query and selected category.
+ *
+ * Note: The function uses `jsonrpc` to make RPC calls to the Odoo backend.
+ */
+ _onKeyUp: async function (ev) {
+ var self = this;
+ var category = this.$el.find(".category_options").find(":selected").text();
+ var qry = $(ev.currentTarget).val()
+ if (category === "All Categories") {
+ await rpc('/web/dataset/call_kw', {
+ model: 'product.template',
+ method: 'search_products',
+ args: [qry],
+ kwargs: {},
+ }).then(function (result) {
+ self.$('.qweb_product_id').html("");
+ self.$('.qweb_product_id').append(renderToElement('website_product_search_snippet.product_template', {
+ result: result
+ }));
+ });
+ }
+ if (category === "Category") {
+ var self = this;
+ await rpc('/web/dataset/call_kw', {
+ model: 'product.template',
+ method: 'product_category',
+ args: [qry],
+ kwargs: {},
+ }).then(function (result) {
+ self.$('.qweb_product_id').html("");
+ self.$('.qweb_product_id').append(renderToElement('website_product_search_snippet.product_category', {
+ result: result
+ }));
+ });
+ }
+ },
+ /**
+ * _filterProducts: Asynchronously filters products based on the selected category.
+ *
+ * This function is triggered by an event (e.g., a change in category selection).
+ * It checks the selected category from a dropdown menu and calls the appropriate
+ * Odoo model method to fetch the relevant products. The fetched products are then
+ * rendered in the specified HTML element using the corresponding QWeb template.
+ *
+ * @param {Object} ev - The event object associated with the action triggering this function.
+ *
+ * Functionality:
+ * 1. Retrieves the selected category from a dropdown menu with class `.category_options`.
+ * 2. If "All Categories" is selected, it calls the `search_all_categories` method
+ * on the `product.template` model to fetch all products, and renders the result
+ * using the 'website_product_search_snippet.product_template' template.
+ * 3. If "Category" is selected, it calls the `product_all_categories` method on
+ * the `product.template` model to fetch products by category, and renders the
+ * result using the 'website_product_search_snippet.product_category' template.
+ * 4. Updates the HTML element with class `.qweb_product_id` to display the filtered products.
+ *
+ * Note: The function uses `jsonrpc` to make RPC calls to the Odoo backend.
+ */
+ _filterProducts: async function (ev) {
+ var self = this
+ var category = this.$el.find(".category_options").find(":selected").text();
+ if (category === "All Categories") {
+ await rpc('/web/dataset/call_kw', {
+ model: 'product.template',
+ method: 'search_all_categories',
+ args: [],
+ kwargs: {}
+ }).then(function (result) {
+ self.$('.qweb_product_id').html("");
+ self.$('.qweb_product_id').append(renderToElement('website_product_search_snippet.product_template', {
+ result: result
+ }));
+ });
+ }
+ if (category === "Category") {
+ await rpc('/web/dataset/call_kw', {
+ model: 'product.template',
+ method: 'product_all_categories',
+ args: [],
+ kwargs: {}
+ }).then(function (result) {
+ self.$('.qweb_product_id').html("");
+ self.$('.qweb_product_id').append(renderToElement('website_product_search_snippet.product_category', {
+ result: 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..7c7d75cba
--- /dev/null
+++ b/website_product_search_snippet/static/src/xml/category_templates.xml
@@ -0,0 +1,60 @@
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + This App Allows to Search Products in Category With the Help + of Snippet. +
+Product Search Snippet +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Key + Heighlights
+
+
+
+
+
+ 
+
+
+ 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 Search Snippet
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Drag the Product Search Snippet + + and save it. +
+
+
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Selecting All Categories and + + Search product. +
+
+
+ + 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. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + selecting a Product and details of + + that 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. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + selecting + + Category. +
+
+
+ + 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. +
+
+
+ + Get all Product Categories. Additionally, + utilize red and blue colors to signify the + product count within each category. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Clicking on + + 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 +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + No Products Available under the + + + selected Category. +
+
+
+ + When there are No Products Available under + the selected Category, the system should + display the following message. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Search for + Products based on specific Categories as well as + across All Categories.
+
+
+
+
+
+
+
+
+
+ + Product details + can be viewed by clicking on the respective + Products.
+
+
+
+
+
+
+
+
+
+ + Community & + Enterprise and Odoo.sh Support. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + You can customize the + appearance of the search + results by modifying the + CSS styles in the style + section of the snippet. + Adjust the properties + such as padding, border, + background, and text + styles to match your + website's design +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 19th December, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ ![Card Image Cap]()
+
+
+
+
+
+
+
+
+ +