I have a mageto store with version magento 2.2.0.
I have faced an issue on product detail page. There is no thumbnail image if there is only one image on product.
I want to show thumbnail image even if the product having only one image.
Please advice me to solve this issue..
You need to set below conditions in fotorama.js file under lib/web/fotorama/fotorama.js
Override fotorama.js file into your theme at below location,
app/design/frontend/{Vendorname}/{themename}/web/fotorama/fotorama.js
Edit below conditions at funtion name with,
function setOptions() {}
Now set, if (size >= 1) instead of if (size > 1)
if (size >= 1) { o_nav = opts.nav; o_navTop = opts.navposition === 'top'; classes.remove.push(selectClass); $arrs.toggle(opts.arrows); } else { o_nav = false; $arrs.hide(); }
The thumbnail image on product page is coming from fotorama.js file.
So you need to override that file in either your custom module or your custom theme as well.
Below is the process how can you override fotorama.js file into your custom theme.
copy existing fotorama.js file to app/design/frontend/{Vendorname}/{themename}/web/fotorama/fotorama.js
then locate the function name called setOptions();
in setOptions function there is one condition which you need to modify below it is :
if (size >= 1) { o_nav = opts.nav; o_navTop = opts.navposition === 'top'; classes.remove.push(selectClass); $arrs.toggle(opts.arrows); } else { o_nav = false; $arrs.hide(); }
Currently condition is if (size > 1) so you need to change it to (size >= 1)
then you will see thumbnail for the same.
Meanwhile if you wanted to override this js file into your custom module , you can do it by same you just need to copy this js file and paste it to app/code/Vendorname/ModuleName/web/fotorama/fotorama.js
Change same condition from above mention and run command called php bin/magento setup:static-content:deploy -f
Then check it will works !!
I have followed your step and override the "fotorama.js" file onto my theme folder
"app/design/frontend/Alothemes/default/web/fotorama/fotorama.js"
and change the cfode you have provided and also run command
php bin/magento setup:static-content:deploy -f
Still the single image does not show thumbnails..
Please advice me where I am wrong..
have you checked size >=1 conditions set inside your js file?
Also run first upgrade command,
php bin/magento setup:upgrade php bin/magento setup:static-content:deploy -f
I had run both the upgrade and static content deploy command but after that also I have not seen thumbnail for single image product.
Here is the url of the product page: http://www.e2genesis.com/adobe-after-effects-creative-cloud-for-non-profit-device-license.html
app/design/frontend/___Theme___/Magento_Catalog/templates/product/view/gallery.phtml
Edit
<?php if(count(json_decode($block->getGalleryImagesJson(),true)) > 1): ?>
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
<?php else: ?>
"nav": false,
<?php endif; ?>
To
"nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
and after edit run
php bin/magento setup:static-content:deploy -f