Bugfix/thumbnail images of products in view order

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Default storeview settings are now overridden by specific storeview settings - @lukeromanowicz (#3057)
 - Apache2 proxy header support for store based on host - @resubaka (#3143)
 - Items count badges for Compare products and wishlist icons at header - @vishal-7037 (#3047)
+- Added product image in order summary - @obsceniczny (#2544)
 - Add icons on the product tiles that allow to add to the wish list and to the list to compare products from the list of products - @Michal-Dziedzinski (#2773)
 - Get also none product image thumbnails via API - @cewald, @resubaka (#3207)
 - Added a config option `optimizeShoppingCartOmitFields` - @EmilsM (#3222)

core/i18n/resource/i18n/cs-CZ.csv

@@ -65,3 +65,4 @@
 "to account","na účet"
 "Are you sure you would like to remove this item from the shopping cart?","Opravdu chcete tuto položku odebrat z nákupního košíku?"
 "You need to be logged in to see this page","Pro zobrazení této stránky musíte být přihlášeni"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/de-DE.csv

@@ -71,3 +71,4 @@
 "You need to be logged in to see this page","Sie müssen angemeldet sein, um diese Seite anzuzeigen"
 "Quantity must be above 0","Die Menge muss größer als 0 sein"
 "Error: Error while adding products","Error: Fehler beim hinzufügen der Produkte"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/en-US.csv

@@ -76,3 +76,4 @@
 "Unexpected authorization error. Check your Network conection.","Unexpected authorization error. Check your Network conection."
 "Columns","Columns"
 "You are going to pay for this order upon delivery.","You are going to pay for this order upon delivery."
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/es-ES.csv

@@ -37,3 +37,4 @@
 "Unhandled error, wrong response format!","¡Error no controlado, formato de respuesta incorrecto!"
 "Are you sure you would like to remove this item from the shopping cart?","¿Está seguro de que desea eliminar este artículo de la cesta de la compra?"
 "You need to be logged in to see this page","Necesitas iniciar sesión para ver esta página"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/fr-FR.csv

@@ -47,3 +47,4 @@
 "Must be greater than 0","Doit être supérieur à 0"
 "Are you sure you would like to remove this item from the shopping cart?","Etes-vous sûr de vouloir supprimer cet objet de votre panier ?"
 "You need to be logged in to see this page","Vous devez être connecté pour voir cette page"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/it-IT.csv

@@ -50,3 +50,4 @@
 "password","password"
 "Are you sure you would like to remove this item from the shopping cart?","Sei sicuro di voler rimuovere questo articolo dal carrello?"
 "You need to be logged in to see this page","Devi essere loggato per vedere questa pagina"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/jp-JP.csv

@@ -168,3 +168,4 @@
 "You will receive Push notification after coming back online. You can confirm the order by clicking on it","オンラインになるとプッシュ通知が送られ、そこから注文の確認ができます。"
 "Zipcode","郵便番号"
 "Zip-code","郵便番号"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/nl-NL.csv

@@ -37,3 +37,4 @@ Error with response - bad content-type!,Error with response - bad content-type!
 "Unhandled error, wrong response format!","Unhandled error, wrong response format!"
 "Are you sure you would like to remove this item from the shopping cart?","Weet u zeker dat u dit artikel uit uw mandje wilt verwijderen?"
 "You need to be logged in to see this page","U moet ingelogd zijn om deze pagina te bekijken"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/pl-PL.csv

@@ -46,3 +46,4 @@
 "Must be greater than 0","Musi być większa niż 0"
 "Are you sure you would like to remove this item from the shopping cart?","Czy na pewno chcesz usunąć ten produkt z koszyka?"
 "You need to be logged in to see this page","Musisz być zalogowany, aby zobaczyć tę stronę"
+"Thumbnail","Miniaturka"

core/i18n/resource/i18n/pt-BR.csv

@@ -41,3 +41,4 @@
 "OK","OK"
 "Are you sure you would like to remove this item from the shopping cart?","Tem certeza de que deseja remover este item do carrinho de compras?"
 "You need to be logged in to see this page","Você precisa estar logado para ver esta página"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/pt-PT.csv

@@ -41,3 +41,4 @@
 "OK","OK"
 "Are you sure you would like to remove this item from the shopping cart?","Tem a certeza de que deseja remover este item do Cesto de Compras?"
 "You need to be logged in to see this page","Precisa de iniciar sessão para ver esta página"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/ru-RU.csv

@@ -37,3 +37,4 @@
 "Unhandled error, wrong response format!","Необработанная ошибка, неверный формат ответа!"
 "Are you sure you would like to remove this item from the shopping cart?","Вы уверены, что хотите удалить этот товар из корзины?"
 "You need to be logged in to see this page","Вы должны войти в систему, чтобы увидеть эту страницу"
+"Thumbnail","Thumbnail"

core/i18n/resource/i18n/zh-cn.csv

@@ -66,3 +66,4 @@
 "Please configure product bundle options and fix the validation errors","请配置商品属性选项并修复验证错误"
 "Processing order...","订单处理中..."
 "You need to be logged in to see this page","您需要登录才能查看此页面"
+"Thumbnail","Thumbnail"

src/themes/default/components/core/blocks/MyAccount/MyOrder.vue

@@ -44,6 +44,9 @@
               <th class="serif lh20">
                 {{ $t('Subtotal') }}
               </th>
+              <th class="serif lh20">
+                {{ $t('Thumbnail') }}
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -63,35 +66,38 @@
               <td class="fs-medium lh25" :data-th="$t('Subtotal')">
                 {{ item.row_total_incl_tax | price }}
               </td>
+              <td class="fs-medium lh25">
+                <product-image :image="{src: itemThumbnail[item.sku]}" />
+              </td>
             </tr>
           </tbody>
           <tfoot>
             <tr class="brdr-top-1 brdr-cl-bg-secondary">
-              <td colspan="4" class="align-right">
+              <td colspan="5" class="align-right">
                 {{ $t('Subtotal') }}
               </td>
               <td>{{ order.subtotal | price }}</td>
             </tr>
             <tr>
-              <td colspan="4" class="align-right">
+              <td colspan="5" class="align-right">
                 {{ $t('Shipping') }}
               </td>
               <td>{{ order.shipping_amount | price }}</td>
             </tr>
             <tr>
-              <td colspan="4" class="align-right">
+              <td colspan="5" class="align-right">
                 {{ $t('Tax') }}
               </td>
               <td>{{ order.tax_amount + order.discount_tax_compensation_amount | price }}</td>
             </tr>
             <tr v-if="order.discount_amount">
-              <td colspan="4" class="align-right">
+              <td colspan="5" class="align-right">
                 {{ $t('Discount') }}
               </td>
               <td>{{ order.discount_amount | price }}</td>
             </tr>
             <tr>
-              <td colspan="4" class="align-right">
+              <td colspan="5" class="align-right">
                 {{ $t('Grand total') }}
               </td>
               <td>{{ order.grand_total | price }}</td>
@@ -137,13 +143,36 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import MyOrder from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder'
 import ReturnIcon from 'theme/components/core/blocks/Header/ReturnIcon'
+import ProductImage from 'theme/components/core/ProductImage'
+import { getThumbnailPath } from '@vue-storefront/core/helpers'
+import { mapActions } from 'vuex'
 
 export default {
   mixins: [MyOrder],
   components: {
-    ReturnIcon
+    ReturnIcon,
+    ProductImage
+  },
+  data () {
+    return {
+      itemThumbnail: []
+    }
+  },
+  methods: {
+    ...mapActions({
+      getProduct: 'product/single'
+    })
+  },
+  beforeMount () {
+    this.skipGrouped(this.order.items).forEach(async item => {
+      if (this.itemThumbnail[item.sku] === undefined || this.itemThumbnail[item.sku] === null) {
+        const product = await this.getProduct({ options: { sku: item.sku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false })
+        Vue.set(this.itemThumbnail, item.sku, getThumbnailPath(product.image, 80, 80))
+      }
+    })
   }
 }
 </script>