Bugfix/thumbnail images of products in view order #3273

jpitucha · 2019-07-23T22:21:00Z

Related issues

closes #2544

Short description and why it's useful

Screenshots of visual changes before/after (if there are any)

Which environment this relates to

Check your case. In case of any doubts please read about Release Cycle

Test version (https://test.storefrontcloud.io) - this is a new feature or improvement for Vue Storefront. I've created branch from develop branch and want to merge it back to develop
RC version (https://next.storefrontcloud.io) - this is a stabilisation fix for Release Candidate of Vue Storefront. I've created branch from release branch and want to merge it back to release
Stable version (https://demo.storefrontcloud.io) - this is an important fix for current stable version. I've created branch from hotfix or master branch and want to merge it back to hotfix

Upgrade Notes and Changelog

No upgrade steps required (100% backward compatibility and no breaking changes)
I've updated the Upgrade notes and Changelog on how to port existing VS sites with this new feature

IMPORTANT NOTICE - Remember to update CHANGELOG.md with description of your change

Contribution and currently important rules acceptance

I read and followed contribution rules
I read the TypeScript Action Plan and adjusted my PR according to it
I read about Vue Storefront Modules and I am aware that every new feature should be a module

jpitucha · 2019-07-23T22:22:18Z

@patzick please review

patzick

Welcome @obsceniczny in our community :)
Thanks for this feature, nice start!

Things to jump more into:

this is feature so branch should be crated from develop and merged back to develop -> ReleaseCycle
instead of promises it is cleaner to use async/await; i've left you suggestions for method
in case of problems with loading product etc; we should show an placeholder until proper image is ready. Please get familiar with ProductImage component

Let me know if anything is unclear! :)

patzick · 2019-07-24T07:26:10Z

CHANGELOG.md

@@ -36,6 +36,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [1.10.0-rc.2] - UNRELEASED

+### Added
+- Added product image in order summary - @obsceniczny (#2544)


this needs to be moved into 1.11 changelog

patzick · 2019-07-24T07:39:40Z

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

+    ...mapActions({
+      getProduct: 'product/single'
+    }),
+    getProductThumbnail (productSku) {


Suggested change

getProductThumbnail (productSku) {

async getProductThumbnail (productSku) {

patzick · 2019-07-24T07:40:00Z

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

+      getProduct: 'product/single'
+    }),
+    getProductThumbnail (productSku) {
+      if (this.itemThumbnail[productSku] === undefined || this.itemThumbnail[productSku] === null) {


it is the same as this, but more readable

Suggested change

if (this.itemThumbnail[productSku] === undefined || this.itemThumbnail[productSku] === null) {

if (!this.itemThumbnail[productSku]) {

patzick · 2019-07-24T07:40:49Z

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

+    }),
+    getProductThumbnail (productSku) {
+      if (this.itemThumbnail[productSku] === undefined || this.itemThumbnail[productSku] === null) {
+        this.getProduct({ options: { sku: productSku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false, skipCache: true })


Suggested change

this.getProduct({ options: { sku: productSku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false, skipCache: true })

const product = await this.getProduct({ options: { sku: productSku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false })

patzick · 2019-07-24T07:41:00Z

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

+    getProductThumbnail (productSku) {
+      if (this.itemThumbnail[productSku] === undefined || this.itemThumbnail[productSku] === null) {
+        this.getProduct({ options: { sku: productSku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false, skipCache: true })
+          .then(product => {


Suggested change

.then(product => {

patzick · 2019-07-24T07:41:21Z

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

+        this.getProduct({ options: { sku: productSku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false, skipCache: true })
+          .then(product => {
+            this.itemThumbnail[productSku] = getThumbnailPath(product.image, 80, 80)
+          })


Suggested change

})

patzick · 2019-07-24T07:41:50Z

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

+      if (this.itemThumbnail[productSku] === undefined || this.itemThumbnail[productSku] === null) {
+        this.getProduct({ options: { sku: productSku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false, skipCache: true })
+          .then(product => {
+            this.itemThumbnail[productSku] = getThumbnailPath(product.image, 80, 80)


Suggested change

this.itemThumbnail[productSku] = getThumbnailPath(product.image, 80, 80)

this.itemThumbnail[productSku] = getThumbnailPath(product.image, 80, 80)

patzick · 2019-07-24T07:42:39Z

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

@@ -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">
+                <img :src="getProductThumbnail(item.sku)">


i would be nice to use ProductImage component here, to show placeholders until proper product image is loaded

jpitucha · 2019-07-25T09:16:52Z

@patzick could You look?

patzick · 2019-07-25T10:06:55Z

Thanks @obsceniczny, i need to checkout this branch and test if there is placeholder before actual image is loaded. Overall looks good now, i will get back with this soon :)

…ew-order

…ithub.com:obsceniczny/vue-storefront into bugfix/thumbnail-images-of-products-in-view-order

jpitucha · 2019-07-25T18:56:51Z

@patzick I fixed linting causing Travis failing

patzick

You're doing well, we're near the end. I've noticed this skipGrouped method and it would be cool to refactor it with this PR. Also it would be great to have a bigger images, because they are a little bit blurry

patzick · 2019-07-26T12:16:54Z

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

+      getProduct: 'product/single'
+    })
+  },
+  beforeMount () {


i'd do that on mounted, so there is no way to have problems with SSR

Suggested change

beforeMount () {

mounted () {

patzick · 2019-07-26T12:21:06Z

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

+    })
+  },
+  beforeMount () {
+    this.skipGrouped(this.order.items).forEach(async item => {


could you also with this PR change skipGrouped method to computed singleOrderItems or something like this? It should really be a computed property not a method, and then here (and in other places) it would just be this.singleOrderItems.find(...

I don't really see what do you mean by using find. We process a whole array here, we're not aiming at getting a single element, could you elaborate? As for computed property I completely agree.

patzick · 2019-07-26T12:21:30Z

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

+  },
+  beforeMount () {
+    this.skipGrouped(this.order.items).forEach(async item => {
+      if (this.itemThumbnail[item.sku] === undefined || this.itemThumbnail[item.sku] === null) {


it's the same as

Suggested change

if (this.itemThumbnail[item.sku] === undefined || this.itemThumbnail[item.sku] === null) {

if (this.itemThumbnail[item.sku]) {

pkarw · 2019-07-31T07:05:51Z

@obsceniczny I just wanted to kindly ask you about the progress with this ticket? Can we apply the changes sugessted by @patzick in order to merge this in?

…ew-order

jpitucha · 2019-07-31T07:20:21Z

@pkarw I have some uncommited changes and I will do my best to end this until weekend

patzick · 2019-08-08T12:18:57Z

@obsceniczny is it ready for re-review? :)

jpitucha · 2019-08-08T12:22:49Z

Yes, it is ;)

…ew-order

patzick

Thanks, @obsceniczny, nice work! :)

Jakub Pitucha added 2 commits July 22, 2019 21:22

Added product image.

a4840eb

Added product image in order summary

26b3cd8

pkarw changed the base branch from master to develop July 24, 2019 06:13

patzick requested changes Jul 24, 2019

View reviewed changes

Jakub Pitucha added 3 commits July 25, 2019 02:02

working draft

bf536a9

linting

3f162a4

cleaning

1619e9c

removed debugger and changed CHANGELOG

2cd28e5

patzick and others added 3 commits July 25, 2019 15:24

Merge branch 'develop' into bugfix/thumbnail-images-of-products-in-vi…

84c24b0

…ew-order

fix linting errors

6916cc1

Merge branch 'bugfix/thumbnail-images-of-products-in-view-order' of g…

bc53db3

…ithub.com:obsceniczny/vue-storefront into bugfix/thumbnail-images-of-products-in-view-order

patzick requested changes Jul 26, 2019

View reviewed changes

Merge branch 'develop' into bugfix/thumbnail-images-of-products-in-vi…

ca4c5d8

…ew-order

applied changes from review

b92c93a

pkarw requested a review from patzick August 19, 2019 07:12

Merge branch 'develop' into bugfix/thumbnail-images-of-products-in-vi…

648d192

…ew-order

patzick approved these changes Aug 26, 2019

View reviewed changes

patzick merged commit 09d9f8a into vuestorefront:develop Aug 26, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bugfix/thumbnail images of products in view order #3273

Bugfix/thumbnail images of products in view order #3273

jpitucha commented Jul 23, 2019 •

edited by patzick

Loading

jpitucha commented Jul 23, 2019

patzick left a comment

patzick Jul 24, 2019

patzick Jul 24, 2019

patzick Jul 24, 2019

patzick Jul 24, 2019

patzick Jul 24, 2019

patzick Jul 24, 2019

patzick Jul 24, 2019

patzick Jul 24, 2019

jpitucha commented Jul 25, 2019

patzick commented Jul 25, 2019

jpitucha commented Jul 25, 2019

patzick left a comment

patzick Jul 26, 2019

patzick Jul 26, 2019

jpitucha Aug 2, 2019 •

edited

Loading

patzick Jul 26, 2019

pkarw commented Jul 31, 2019

jpitucha commented Jul 31, 2019

patzick commented Aug 8, 2019

jpitucha commented Aug 8, 2019

patzick left a comment

	getProductThumbnail (productSku) {
	async getProductThumbnail (productSku) {

	if (this.itemThumbnail[productSku] === undefined \|\| this.itemThumbnail[productSku] === null) {
	if (!this.itemThumbnail[productSku]) {

	this.getProduct({ options: { sku: productSku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false, skipCache: true })
	const product = await this.getProduct({ options: { sku: productSku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false })

	this.itemThumbnail[productSku] = getThumbnailPath(product.image, 80, 80)
	this.itemThumbnail[productSku] = getThumbnailPath(product.image, 80, 80)

	if (this.itemThumbnail[item.sku] === undefined \|\| this.itemThumbnail[item.sku] === null) {
	if (this.itemThumbnail[item.sku]) {

Bugfix/thumbnail images of products in view order #3273

Bugfix/thumbnail images of products in view order #3273

Conversation

jpitucha commented Jul 23, 2019 • edited by patzick Loading

Related issues

Short description and why it's useful

Screenshots of visual changes before/after (if there are any)

Which environment this relates to

Upgrade Notes and Changelog

Contribution and currently important rules acceptance

jpitucha commented Jul 23, 2019

patzick left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jpitucha commented Jul 25, 2019

patzick commented Jul 25, 2019

jpitucha commented Jul 25, 2019

patzick left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jpitucha Aug 2, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pkarw commented Jul 31, 2019

jpitucha commented Jul 31, 2019

patzick commented Aug 8, 2019

jpitucha commented Aug 8, 2019

patzick left a comment

Choose a reason for hiding this comment

jpitucha commented Jul 23, 2019 •

edited by patzick

Loading

jpitucha Aug 2, 2019 •

edited

Loading