From 3800780ef2b789aac04827e955355ed8e2d08c53 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Fri, 2 Jul 2021 04:28:38 +0200
Subject: [PATCH] PoS: Fix images in cart view (#2649)

Fixes an issue I overlooked in #2449 and which was brought up by @dstrukt [on Mattermost](https://chat.btcpayserver.org/btcpayserver/pl/jzxqs7xw33rjfe5itorxygifbe).
---
 BTCPayServer/Views/AppsPublic/PointOfSale/Cart.cshtml | 8 ++++----
 BTCPayServer/wwwroot/cart/js/cart.js                  | 8 ++++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/BTCPayServer/Views/AppsPublic/PointOfSale/Cart.cshtml b/BTCPayServer/Views/AppsPublic/PointOfSale/Cart.cshtml
index c432fff60..b61fdb8c0 100644
--- a/BTCPayServer/Views/AppsPublic/PointOfSale/Cart.cshtml
+++ b/BTCPayServer/Views/AppsPublic/PointOfSale/Cart.cshtml
@@ -7,7 +7,7 @@
 
 <script id="template-cart-item" type="text/template">
     <tr data-id="{id}">
-        {image}
+        <td class="align-middle pe-0" width="1%">{image}</td>
         <td class="align-middle pe-0 ps-2"><b>{title}</b></td>
         <td class="align-middle px-0">
             <a class="js-cart-item-remove btn btn-link" href="#"><i class="fa fa-trash text-muted"></i></a>
@@ -26,7 +26,7 @@
 </script>
 
 <script id="template-cart-item-image" type="text/template">
-    <td class="align-middle pe-0" width="1%"><img src="{image}" width="50" alt=""></td>
+    <img src="{image}" width="50" alt="">
 </script>
 
 <script id="template-cart-custom-amount" type="text/template">
@@ -219,9 +219,9 @@
                     var description = item.Description;
 
                     <div class="js-add-cart card px-0 card-wrapper" data-index="@index">
-                        @if (!String.IsNullOrWhiteSpace(image))
+                        @if (!string.IsNullOrWhiteSpace(image))
                         {
-                            @:<img class="card-img-top" src="@image" alt="Card image cap" asp-append-version="true">
+                            <img class="card-img-top" src="@image" alt="@item.Title" asp-append-version="true">
                         }
                         <div class="card-body p-3">
                             <h6 class="card-title mb-0">@item.Title</h6>
diff --git a/BTCPayServer/wwwroot/cart/js/cart.js b/BTCPayServer/wwwroot/cart/js/cart.js
index a3edb61c6..832228fad 100644
--- a/BTCPayServer/wwwroot/cart/js/cart.js
+++ b/BTCPayServer/wwwroot/cart/js/cart.js
@@ -425,7 +425,11 @@ Cart.prototype.listItems = function() {
         // Prepare the list of items in the cart
         for (var key in this.content) {
             var item = this.content[key],
-                image = this.escape(item.image);
+                image = item.image && this.escape(item.image);
+            
+            if (image && image.startsWith("~")) {
+                image = image.replace('~', window.location.pathname.substring(0, image.indexOf('/apps')));
+            }
 
             tableTemplate = this.template($('#template-cart-item'), {
                 'id': this.escape(item.id),
@@ -475,7 +479,7 @@ Cart.prototype.listItems = function() {
                         id: id,
                         title: item.title,
                         price: item.price,
-                        image: typeof item.image != 'underfined' ? item.image : null
+                        image: item.image
                     });
                 }
             } else if (!qtyIncreased) { // Quantity decreased