var config = { shim: { 'fotorama/fotorama': { deps: ['jquery'] } } };
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Image on product page not showing
Hi,
The theme dev on this, @Landofcoder , has gone ghost again on support of this after they said they were in their fixing it, so I'm hoping someone here can help.
Straightforward issue. Visit http://m2.vulcansrest.com/socknado-naked-orchid.html and you'll see the arrows in the place of the product image. The image in present for this product and marked base, thumb, and swatch. There is an error in inspector of:
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 (require.js:1650)
at Object.context.execCb (resolver.js:145)
at Module.check (require.js:866)
at Module.<anonymous> (require.js:1113)
at require.js:132
They asked me first to replace jquery.zoom.min.js with a new version then run:
hp bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
I did this on both the theme and the child theme, which I am running.
They then asked me to replace gallery.phtml with a new version they provided, then clear cache. I did this on both theme and child. Still same issue.
Any clue on how to fix this?
Thanks in advance!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
Hi @frameroom,
Can you please try below change in your theme file app/design/frontend/[vendor]/ [theme_name]/requirejs-config.js
After adding the changes , run below commands
1. rm -rf var/cache/* generated/* var/page_cache/* pub/static/frontend/*
2. php bin/magento setup:upgrade
3. php bin/magento s:s:d -f
Hope this helps you!
Problem Solved! Click Kudos & Accept as Solution!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
Hi @Nishu Jindal and thanks for that advise.
I do not see the requirejs-config.js in /app/design/frontend/Venustheme/floristry or /floristry_child I did a search for it as well. Filezilla didn't find it in any directory either.
Do I need to create it?
Thanks.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
There is one JS gallery.js, in line 297(or just search in whole project) remove this code :
settings.$elementF.fotorama(config);
after removing, run below commands :
php bin/magento setup:static-content:deploy -f php bin/magento cache:flush
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
Hi @frameroom
You can try below solutions for your issue:
Reason 1: You have wrong permissions on your /media/ folder
Solution: Ensure you have writable permissions on this folder. Change permissions to 777 recursively. You can do it using SSH via this command (execute it in Magento directory):
chmod -R 777 media/
Reason 2: Media folder is owned by another user. It can happen if you transfer your Magento store from one server to another
Solution: Change ownership of the /media/ folder:
chown -R {username}:{username} media/
Important: Make sure that folder owner is the same user as your web server user. If you are not sure, contact your server support administrator.
Reason 3: Magento cannot resize images due low PHP memory limit. Magento resize images using GD library, however if there is no sufficient amount of memory for such operation Magento will return a placeholder image
Solution: Increase your memory limit. You should open your .htaccess file and find this string:
php_value memory_limit 256M Make sure that this value is at least 256M, or better 512M.
It may help you.
Problem Solved? Click on 'Kudos' & Accept as Solution!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
Hi @frameroom,
If you do not have this file, then please try to create this file and add the given code.
Run the commands as mentioned in previous post.
Hope this helps you!
Problem Solved! Click Kudos & Accept as Solution!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
Hi @Nishu Jindal and @Bhanu Periwal
Thanks for your replies. Unfortunately, they didn't work.
So far I have tried:
- Uploading the gallery.phtml that @Landofcoder provide 2 different times and asked me to upload twice. Neither one worked.
- I removed the code at line 297 referencing fotorama in lib/web/mage/gallery/gallery.js
- This is the file I am 99% sure is the functioning gallery.js.
- The other gallery.js that had the same fotorama code at line 297 was located at vendor/magento/magento2-base/lib/web/mage/gallery/gallery.js. When I made the changes in this file and ran the appropriate commands, it changed nothing, and that's why I am fairly certain the lib/web/mage/gallery/gallery.js is the file in control here.
- When made the change at 297, it then gave me this error in Console at line 490:
- gallery.js:460 Uncaught TypeError: Cannot read property 'setOptions' of null
at Object.updateOptions (gallery.js:460) at Object.exit (gallery.js:355) at mqChange (matchMedia.js:133) at window.mediaCheck (matchMedia.js:143) at gallery.js:322 at Function.m.each.m.forEach (underscore.js:153) at UiClass.setupBreakpoints (gallery.js:321) at UiClass.initialize (gallery.js:141) at UiClass.initialize (wrapper.js:109) at UiClass (class.js:49)
- gallery.js:460 Uncaught TypeError: Cannot read property 'setOptions' of null
I went down this rabbit hole, removing more and more of the code at the lines in question above, and it kept throwing critical errors associated with fotorama (I'm pretty sure it's the culprit), and I'm stuck again. I tried removing the next lines it stated were the issues, but it just led to more issues.
I restored everything back to the original error state at this point, except the updated gallery.phtml pages.
Do you have any more ideas?
Thanks again!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
Hi @frameroom,
Can you try check on your page whether one or more jquery with different versions are loaded.
It may be different jquery versions are conflicting with fotorama.
Hope this helps you!
Problem Solved! Click Kudos & Accspt as Solution!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
Thanks for reply. @Nishu Jindal
When I view page source I am seeing 6 .js files loaded, and none are the same. I'm not missing anything am I?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Image on product page not showing
Hi @frameroom,
Instead of page source, can you check loaded js using developer console f12 and then in network tab select js and reload the page.
Hope you will get the list of js loading on the page. Please share the screenshot as well.
Thanks!