Magento2: Inconsistency in Fotorama.js lib or does magento2 use it's on version?

[marvinhuebner]

Preconditions (*)

• A Magento 2.2.x/2.3.x instance with at least one product

Steps to reproduce (*)

• Load any PDP
• View the source of the fotorama.js file
• Compare it with the same version 4.6.4 code downloaded from source (fotorama.io)

Expected result (*)

• The version 4.6.4 fotorama.js file included by Magento2 should match the third party source file or explicitly state that it is a fork with modifications (suggest version number should also indicate this).

Actual result (*)

• The Magento2 codebase contains a modified version of fotorama.js which has deviated from the source fotorama.js (resulting in missing functionality).

---

Original Issue Content

We had a project there we would like to show always a thumbnail on the product details page, even if there is only one picture. I've looked at the Fotorama Github and in the changelog i've found, that there is an option enableifsingleframe since version 4.6.2. I've implemented this and it did not worked. Then i've dived depper into the topic and have found we following code here:

https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L268

if (size > 1 || opts.enableifsingleframe) {
 ...
}

and in magento i find this: https://github.com/magento/magento2/blob/2.3-develop/lib/web/fotorama/fotorama.js#L2096

if (size > 1) {
  ...
}

But as in the top command of fotorama (https://github.com/magento/magento2/blob/2.3-develop/lib/web/fotorama/fotorama.js#L2) it states out that magento should use fotorama version 4.6.4.

Now i'm a little bit confused. In theory magento is using the latest release of fotorama, but is missing some features which are implemented before 4.6.4.

Maybe some magento frontend guy can give me some insights how this can happen?

Thanks in regards!

[magento-engcom-team]

Hi @marvinhuebner. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• [x] Summary of the issue
• [x] Information on your environment
• [x] Steps to reproduce
• [x] Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento-engcom-team give me $VERSION instance

where $VERSION is version tags (starting from 2.2.0+) or develop branches (for example: 2.3-develop).
For more details, please, review the Magento Contributor Assistant documentation.

@marvinhuebner do you confirm that you was able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• [x] yes
• [ ] no

[magento-engcom-team]

Hi @engcom-backlog-nazar. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label G1 Passed will be added to the issue automatically. Please, edit issue description if needed, until label G1 Passed appears.

• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add G2 Passed label to the issue by yourself.

• [ ] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 5. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [ ] 6. Add label acknowledged once verification is complete.

• [ ] 7. Make sure that automatic system confirms that report is acknowledged.

[ghost]

Hi @marvinhuebner Magento use fotorama, but seem like have difference with original code, comes from this commit ->https://github.com/magento/magento2/blob/17ad02d0aeec97ae6f95431994d4351e399724ed/lib/web/fotorama/fotorama.js
where is changed to fix some exist issue.
Please refer to the Community Forums or the Magento Stack Exchange site for advice or general discussion about this issue. The GitHub issue tracker is intended for Magento Core technical issues only.

[ghost]

@marvinhuebner

[chris-pook]

Hi, this doesn't seem to be a "non-issue".

The file magento2/lib/web/fotorama/fotorama.js appears to contain modified Fotorama.js third party library code under the guise of the same version number 4.6.4.

Preconditions:

• A Magento 2.2.x/2.3.x instance with at least one product

Steps to reproduce:

• Load any PDP
• View the source of the fotorama.js file
• Compare it with the same version 4.6.4 code downloaded from source (fotorama.io)

Expected Result:

• The version 4.6.4 fotorama.js file included by Magento2 should match the third party source file or explicitly state that it is a fork with modifications (suggest version number should also indicate this).

Actual Result:

• The Magento2 codebase contains a modified version of fotorama.js which has deviated from the source fotorama.js (resulting in missing functionality).

[marvinhuebner]

Hey @chris-pook,

i totally agree with you. If magento is using a third party library and there is no own documentation for it, the official docs from the third party library should work.

I found it very confusing and it took me some time to find out why it does not work in magento, but is working then i download the library from github.

[lorenaramonda]

hi guys, i'm having the same problem but need to find a solution because customer is the king.
so I:

overwritten fotorama.js into my theme <theme-folder>/web/fotorama/fotorama.js and changed as follows:

line 2035: var _noMove = (size < 2 && !opts.enableifsingleframe) || $videoPlaying;
line 2090: if (size > 1 || opts.enableifsingleframe) {

than overwritten module-catalog/view/frontend/templates/product/view/gallery.phtml into my theme and add:

<?php if (($block->getVar("gallery/enableifsingleframe"))): ?>
                        "enableifsingleframe": <?= /* @escapeNotVerified */ $block->getVar("gallery/enableifsingleframe") ?>,
                    <?php endif; ?>

as config into the js

then add the config into view.xml file:

<var name="enableifsingleframe">true</var> <!-- Enable thumbs even when there is only one img (true/false) -->

I know that overwritting core files like those is not the proper way but I needed a fast solution. This should probably be integrated into the core for safe future upgrades.

[marvinhuebner]

@lorenaramonda i've done the same, but it has took me quite some time to find the issue, why this does not work out of the box and i first had to patch fotorama.js.

I find it really annoying that there are third party libraries which are patched and there is no hint or something else in the code. Even the version number was never adjusted .

[lorenaramonda]

you're surely right about this @marvinhuebner and I totally agree

[magento-engcom-team]

@shikhamis11 Thank you for verifying the issue.

Unfortunately, not enough information was provided to created internal ticket. Please consider adding the following:

• [ ] Update issue content to follow format required by Issue Reporting Guidelines

Once all required information is added, please add label "Issue: Confirmed" again.
Thanks!

[magento-engcom-team]

@marvinhuebner Thank you for verifying the issue. Based on the provided information internal tickets MAGETWO-97365, MAGETWO-97366 were created

[marvinhuebner]

Today I've read this. Now it's even more important that this is cleared up. Even if it is only an official hint that the Magento core has made its own modifications to the library and the original docs does not match the functions in Magento.

https://twitter.com/fotoramajs/status/1088074531007127553?s=21:

Frontend news! Fotorama is back! Thanks to @Uploadcare, the project is maintained again! I'll continue where I quit. First I’ll try to fix all known issues with v4 — this is for the army of Fotorama 4 users (≈148,685 live sites worldwide).

[nileshsaste]

I am also facing problem to load gallery image in magento 2. It will working fine in filezilla but not working in chrome. I got error in my console is as below 👍
Uncaught TypeError: settings.$elementF.fotorama is not a function
at UiClass.initGallery (gallery.js:297)
at UiClass.initialize (gallery.js:139)
at UiClass.initialize (wrapper.js:109)
at UiClass (class.js:49)
at main.js:31
at Object.execCb (db2cfb207124dfa2df050f1ef1a6e743.js:1650)
at Object.context.execCb (resolver.js:131)
at Module.check (db2cfb207124dfa2df050f1ef1a6e743.js:866)
at Module. (db2cfb207124dfa2df050f1ef1a6e743.js:1113)
at db2cfb207124dfa2df050f1ef1a6e743.js:132

My Require js is as below 👍

I have installed the porto theme but I got error in chrome.its working good in firefox.

require-config.js

var config = {
deps: ['jquery'],
map:{
'*':{
'fotorama/fotorama':'fotorama/fotorama'
}
},
shim: {
jquery: {
exports: '$'
},
'Smartwave_Megamenu/js/sw_megamenu':
{
deps: ['jquery']
},
'owl.carousel/owl.carousel.min':
{
deps: ['jquery']
},
'js/jquery.stellar.min':
{
deps: ['jquery']
},
'js/jquery.parallax.min':
{
deps: ['jquery']
},
'fotorama/fotorama': {
deps: ['jquery']
},
'mage/gallery/gallery': {
deps: ['fotorama/fotorama']
}
}
};

Please make my help to resolve this problem Thanks

[developeruserextension]

@nileshsaste I have also faced same problem. Is your problem solved?

[nileshsaste]

No my problem is also not solved?

On Thu, Jan 30, 2020 at 2:21 AM developeruserextension <
[email protected]> wrote:

@nileshsaste https://github.com/nileshsaste I have also faced same
problem. Is your problem solved?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/magento/magento2/issues/18091?email_source=notifications&email_token=ACQ6JPC2RBATMANJGF3P2BTRAKS3VA5CNFSM4FVO6TOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKKO37A#issuecomment-580185596,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACQ6JPA53LXEITE4QKPSBQLRAKS3VANCNFSM4FVO6TOA
.

[developeruserextension]

@nileshsaste I have solved my problem. Please check on your page if any additional jQuery file has been added with another version. Because in my case different jQuery version were conflicting fotorama.

[0stone0]

@nileshsaste I have solved my problem. Please check on your page if any additional jQuery file has been added with another version. Because in my case different jQuery version were conflicting fotorama.

Could you please share your jQuery and Fotoama versions? Experiencing the same issue after upgrading jQuery.