chore: Make it a little beautiful

erpnext/e_commerce/website_item_indexing.py

@@ -153,7 +153,6 @@ def reindex_all_web_items():
 	for item in items:
 		web_item = create_web_item_map(item)
 		key = get_cache_key(item.name)
-		print(key, web_item)
 		r.hset(key, mapping=web_item)
 
 def get_cache_key(name):

erpnext/templates/pages/product_search.py

@@ -72,7 +72,7 @@ def search(query):
 	query_string = query
 
 	for s in suggestions:
-		query_string += f"|({s.string})"
+		query_string += f"|('{s.string}')"
 
 	q = Query(query_string)
 

erpnext/www/all-products/search.html

@@ -11,20 +11,29 @@
 {% endblock header %}
 
 {% block page_content %}
-<input type="text" name="query" id="search-box">
-
-<!-- Search Results -->
-<h2>Products</h2>
-<ul id="results">Start typing...</ul>
-
-{% set show_categories = frappe.db.get_single_value('E Commerce Settings', 'show_categories_in_search_autocomplete') %}
-
-{% if show_categories %}
-<div id="categories">
-	<h2>Categories</h2>
-	<ul id="category-suggestions">
-	</ul>
+<div class="input-group mb-3">
+	<input type="text" name="query" id="search-box" class="form-control" placeholder="Search for products..." aria-label="Product" aria-describedby="button-addon2">
+	<div class="input-group-append">
+		<button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
+	</div>
+</div>
+
+<div class="row mt-2">
+	<!-- Search Results -->
+	<div class="col-sm">
+		<h2>Products</h2>
+		<ul id="results" class="list-group"></ul>
+	</div>
+	
+	{% set show_categories = frappe.db.get_single_value('E Commerce Settings', 'show_categories_in_search_autocomplete') %}
+	
+	{% if show_categories %}
+	<div id="categories" class="col-sm">
+		<h2>Categories</h2>
+		<ul id="category-suggestions">
+		</ul>
+	</div>
+	{% endif %}
 </div>
-{% endif %}
 
 {% endblock %}

erpnext/www/all-products/search.js

@@ -1,4 +1,4 @@
-console.log("search.js loaded");
+let loading = false;
 
 const searchBox = document.getElementById("search-box");
 const results = document.getElementById("results");
@@ -7,7 +7,7 @@ const categoryList = document.getElementById("category-suggestions");
 function populateResults(data) {
     html = ""
     for (let res of data.message) {
-        html += `<li>
+        html += `<li class="list-group-item list-group-item-action">
         <img class="item-thumb" src="${res.thumbnail || ''}" />
         <a href="/${res.route}">${res.web_item_name}</a>
         </li>`
@@ -17,7 +17,7 @@ function populateResults(data) {
 
 function populateCategoriesList(data) {
     if (data.length === 0) {
-        categoryList.innerText = "No matches";
+        categoryList.innerHTML = 'Type something...';
         return;
     }
 
@@ -29,7 +29,15 @@ function populateCategoriesList(data) {
     categoryList.innerHTML = html;
 }
 
+function updateLoadingState() {
+    if (loading) {
+        results.innerHTML = `<div class="spinner-border"><span class="sr-only">loading...<span></div>`;
+    }
+}
+
 searchBox.addEventListener("input", (e) => {
+    loading = true;
+    updateLoadingState();
     frappe.call({
         method: "erpnext.templates.pages.product_search.search", 
         args: {
@@ -37,6 +45,7 @@ searchBox.addEventListener("input", (e) => {
         },
         callback: (data) => {
             populateResults(data);
+            loading = false;
         }
     });