fix: Missing Image in Item Page and Variants in Cart

- Added fallback for missing image in item page
- Explore button font
- Incorrectly fetching route from Item master, use Website Item instead

erpnext/public/scss/shopping_cart.scss

@@ -66,6 +66,19 @@ body.product-page {
 	}
 }
 
+.no-image-item {
+	height: 340px;
+	width: 340px;
+	background: var(--gray-100);
+	border-radius: var(--border-radius);
+	font-size: 2rem;
+	color: var(--gray-500);
+	font-size: 52px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .item-card-group-section {
 	.card {
 		align-items: center;
@@ -715,12 +728,14 @@ body.product-page {
 .btn-explore-variants {
 	box-shadow: none;
 	margin: var(--margin-sm) 0;
+	width: 90px;
 	max-height: 50px; // to avoid resizing on window resize
 	flex: none;
 	transition: 0.3s ease;
 	color: var(--orange-500);
 	background-color: white;
 	border: 1px solid var(--orange-500);
+	font-size: 13px;
 
 	&:hover {
 		color: white;

erpnext/templates/generators/item/item_configure.html

@@ -3,7 +3,7 @@
 
 <div class="mt-5 mb-6">
 	{% if cart_settings.enable_variants | int %}
-	<button class="btn btn-primary-light btn-configure"
+	<button class="btn btn-primary-light btn-configure font-md"
 		data-item-code="{{ doc.name }}"
 		data-item-name="{{ doc.item_name }}"
 	>

erpnext/templates/generators/item/item_image.html

@@ -24,7 +24,7 @@
 		})
 	</script>
 	{% else %}
-	{{ product_image(doc.website_image or doc.image or 'no-image.jpg', alt=doc.website_image_alt or doc.item_name) }}
+	{{ product_image(doc.website_image or doc.image, alt=doc.website_image_alt or doc.item_name) }}
 	{% endif %}
 
 	<!-- Simple image preview -->

erpnext/templates/includes/cart/cart_items.html

@@ -31,7 +31,10 @@
 			{%- set variant_of = frappe.db.get_value('Item', d.item_code, 'variant_of') %}
 			{% if variant_of %}
 			<span class="item-subtitle mr-2">
-				{{ _('Variant of') }} <a href="{{frappe.db.get_value('Item', variant_of, 'route')}}">{{ variant_of }}</a>
+				{{ _('Variant of') }}
+				<a href="{{frappe.db.get_value('Website Item', {'item_code': variant_of}, 'route') or '#'}}">
+					{{ variant_of }}
+				</a>
 			</span>
 			{% endif %}
 			<div class="mt-2 notes">

erpnext/templates/includes/macros.html

@@ -9,7 +9,13 @@
 
 {% macro product_image(website_image, css_class="product-image", alt="") %}
 	<div class="border text-center rounded {{ css_class }}" style="overflow: hidden;">
-		<img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}">
+		{% if website_image %}
+			<img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image) | abs_url }}">
+		{% else %}
+			<div class="card-img-top no-image-item">
+				{{ frappe.utils.get_abbr(alt) or "NA" }}
+			</div>
+		{% endif %}
 	</div>
 {% endmacro %}