From 1b69b3722912aa2403a779a613e714695b6ff615 Mon Sep 17 00:00:00 2001
From: Trusted Computer <75872475+trustedcomputer@users.noreply.github.com>
Date: Mon, 12 Jun 2023 02:09:41 -0700
Subject: [PATCH] fix: CSS not applied to product title (backport #35582)
 (#35635)

In an erpnext website, the /all-products route shows website items that have been published to the web site.

In the list view (erpnext/e_commerce/product_ui/list.js), the css class is null for the product title. Instead, inline style statements have been added in that can not be modified by overriding CSS.

This fix uses a similar approach to that which is taken in the grid view (erpnext/e_commerce/product_ui/grid.js). It removes the null CSS parameter in the product title link as well as the inline style statement. Then, as in the grid view, the product title is wrapped in a div tag with the product_title CSS class.

This makes it possible to style the product title as desired with a CSS override.
---
 erpnext/e_commerce/product_ui/list.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/erpnext/e_commerce/product_ui/list.js b/erpnext/e_commerce/product_ui/list.js
index 894a7cb3d87..c8fd7672c8e 100644
--- a/erpnext/e_commerce/product_ui/list.js
+++ b/erpnext/e_commerce/product_ui/list.js
@@ -78,9 +78,10 @@ erpnext.ProductList = class {
 		let title_html = `<div style="display: flex; margin-left: -15px;">`;
 		title_html += `
 			<div class="col-8" style="margin-right: -15px;">
-				<a class="" href="/${ item.route || '#' }"
-					style="color: var(--gray-800); font-weight: 500;">
+				<a href="/${ item.route || '#' }">
+					<div class="product-title">
 					${ title }
+					</div>
 				</a>
 			</div>
 		`;
@@ -201,4 +202,4 @@ erpnext.ProductList = class {
 		}
 	}
 
-};
\ No newline at end of file
+};