No photos of related product color variants in the cart (offline mode)

[GabiDivante]

Current behavior

After adding many color variants of the product to the cart, and then switching to the offline mode - photos of related product color variants are not visible in the cart.

Expected behavior

After adding many color variants of the product to the cart, and then switching to the offline mode - photos of related product color variants are visible in the cart.

Steps to reproduce the issue

1. Go to branch develop
2. Go to homepage
3. Scroll down to Everything section
4. Click on any product
5. Add every color variant of the product to the cart (in case you will notice the problem with switching the pictures for color variants (for sizes different that XS) is already reported in Picture doesn't change when switching between the product's color variants #2709)
6. Switch to offline mode
7. Go to the cart

Can you handle fixing this bug by yourself?

• YES
• NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• This is a bug report for test version on https://test.storefrontcloud.io - In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• This is a bug report for current Release Candidate version on https://next.storefrontcloud.io - In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• This is a bug report for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version hotfix - In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Environment details

• Browser: Chrome 73
• OS: Ubntu 18.04 LTS

Additional information

This issue doesn't appear on demo.

[pkarw]

There was kind of change how the gallery works in 1.10rc-1 - previously (demo) - the 310x300 size picture was always prefetched and then upgraded with the higher quality image (the effect of progressive loading was just caused by this behavior). Now it's not. Microcart is using 310x300

Progressive loading on demo:
https://www.dropbox.com/s/upmlxgpcwpycpzz/Screenshot%202019-05-14%2014.21.48.png?dl=0

This issue causes also the lack of placeholders for gallery images - the issue I've raised Today morning to @patzick

@patzick how about this one? Has it just been fixed? As we see in here we should prefetch the 310x300 for the Microcart or somehow use the other thumbnail in microcart - maybe even just use the standard thumbnail (it will be missleading - because it will have the wrong color)

[pkarw]

By the way - when the picture hasn't been prefetched before the problem also existsin on demo env: https://www.dropbox.com/s/z4hob1biqw59zgc/Screenshot%202019-05-14%2014.24.55.png?dl=0

That means we should make sure we use prefetched thumbnail in the Microcart. The only guaranteed thumbnail we have in the offline mode is the main-one and I belive it's a tradeoff we can accept.

So - we can modify the Microcart./Product.vue to display the 310x300 thumbnail of the product.image (not of the currently selected configurable_children)

[pkarw]

Related to 397fa73#diff-c7d8372bca8ee09ad0d416ed0bbb929c

[pkarw]

We should somehow mark which image (path + size) has been seen by the user and therefore cached

[pkarw]

Related to #2863

[pkarw]

Closed by #3013