Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncaught SyntaxError: Unexpected token , in JSON #14977

Closed
heyepic opened this issue May 3, 2018 · 50 comments
Closed

Uncaught SyntaxError: Unexpected token , in JSON #14977

heyepic opened this issue May 3, 2018 · 50 comments
Labels
Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed

Comments

@heyepic
Copy link

heyepic commented May 3, 2018 •
edited
Loading

Preconditions

  1. Upgrade from 2.2.3 > 2.2.4
  2. PHP 7

Steps to reproduce

  1. Go to any product page that has an image.
  2. You will see a spinning gif but the image never loads.
  3. Console error: Uncaught SyntaxError: Unexpected token , in JSON

Expected result

  1. Image gallery loads.

Actual result

  1. Just see the spinning gif. This worked fine prior to upgrade.

This is the error: Uncaught SyntaxError: Unexpected token , in JSON at position 1025, from a JSON array. Attached an image. Here is the full data array "data": [{"thumb":"https:\/\/v3.asdf.com\/pub\/media\/catalog\/product\/cache\/460a3bcbdb4cc235aac43a6f81f8f135\/s\/j\/sjm2016.jpg","img":"https:\/\/v3.asdf.com\/pub\/media\/catalog\/product\/cache\/c687aa7517cf01e65c009f6943c2b1e9\/s\/j\/sjm2016.jpg","full":"https:\/\/v3.asdf.com\/pub\/media\/catalog\/product\/cache\/926507dc7f93631a094422215b778fe0\/s\/j\/sjm2016.jpg","caption":"SJM 2016 Camaro Line Lock","position":"1","isMain":true,"type":"image","videoUrl":null}],
capture
@magento-engcom-team magento-engcom-team added the Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed label May 3, 2018
@xtremeperf
Copy link
Contributor

xtremeperf commented May 4, 2018 •
edited
Loading

You need to flush all the caches and delete all generated data. Recompile the code too, with your caches disabled and file access to the entire magento root directory offline (this includes the web server, caching systems such as Varnish, and running cron schedules). If you have any systems running automated health checks/pings through /magento/pub/health_check.php, that will cause problems because a fresh instance of the php app is created every time it's called... so while you are clearing out the cached data, it's being re-created on the fly at the same time (yes, even in production mode classes are being created in /magento/generated)

Any time you get these "Uncaught SyntaxError: Unexpected token" type of errors in your JS right after an upgrade (there will usually be many, many JS errors) you need to clear out the caches.

Also, if you are using the default backend caching to the filesystem, make sure the file and directory permissions are correct. There is a bug that causes incorrect permissions in var/cache and var/page_cache. It is already fixed in dev branches and should be included in the next release.

I hope that helps... good luck!

@lingwooc lingwooc mentioned this issue May 4, 2018
Closed
@heyepic
Copy link
Author

heyepic commented May 4, 2018

I will try that - I kept wiping cache, set perms and the like but maybe I missed something. The thumbnails show up for all products but when you get into the product page, then it just spins the gif. Thanks!

@sidchs
Copy link

sidchs commented May 4, 2018

Same for me, had to revert back to previous version 2.2.3 ! Still no idea how to resolve !

@heyepic
Copy link
Author

heyepic commented May 4, 2018

Unfortunately those suggestions did not work. Thumbnails still work everywhere but actual product images refuse to load. I know they exist on the server and 2.2.3 had zero issues with this. I'm glad @sidchs chimed in so I know it's not just my installation.

@heyepic
Copy link
Author

heyepic commented May 4, 2018 •
edited
Loading

OK - I found out that it's my theme. I added an underscore to the filename of app/design/frontend/mytheme/Magento_Catalog/templates/product/viewgallery.phtml in hopes that it would skip using my theme's version. I refreshed and the images now show. I guess I have to compare the native gallery.phtml to my theme's gallery.phtml and find out what changed.

@sidchs
Copy link

sidchs commented May 4, 2018

You are having exact same issues as me ! Thumbnails etc fine, product images just spinning disk ! Happening to me on 2 installs !

@heyepic
Copy link
Author

heyepic commented May 4, 2018

@sidchs Did you try doing what I posted right above?

@sidchs
Copy link

sidchs commented May 4, 2018 via email

@damien-lechopier
Copy link

Hi,

I have the same issue with theme "Moza".
The solution to remove the file app/design/frontend/mytheme/Magento_Catalog/templates/product/gallery.phtml
works for me too.

Thanks for the help.

@lee586
Copy link

lee586 commented May 8, 2018

Same issue here except that mine were random. Most product images would still load but others would show the spinning ball of death and throw, "Uncaught SyntaxError: Unexpected token N in JSON at position 84." I have done everything starting with flushing to removing all the generated files, re-compiling, and re-deploying. I've even restarted the server. Nothing works.

@heyepic
Copy link
Author

heyepic commented May 8, 2018

If you're running a custom theme, I'd suggest trying the above or even removing a few a time (just add _ to filenames, of course keep cache off so you don't need to flush).

@sidchs
Copy link

sidchs commented May 10, 2018 via email

@leekung
Copy link

leekung commented May 10, 2018

problem is the JSON object is broken and cannot be parse. take a look at the line

                    "showCaption": ,

to fix this, in your custom theme file app/design/frontend/{Vendor}/{theme}/Magento_Catalog/templates/product/view/gallery.phtml
find the line

                    "allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
                    "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
                    "width": <?php /* @escapeNotVerified */ echo $image_width; ?>,

change to

                    <?php if (($block->getVar("gallery/allowfullscreen"))): ?>
                        "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/caption"))): ?>
                        "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>,
                    <?php endif; ?>
                    "width": <?php /* @escapeNotVerified */ echo $image_width; ?>,

you may need to check other property and surround it with "if" condition
take a look at magento template file
vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml for reference

@miikEe13
Copy link

this work for me validating the json options, thanks

@lee586
Copy link

lee586 commented May 11, 2018 •
edited
Loading

Found it. Any of my products that have the quote symbol (") in the title are not loading the image. Apparently they are not being formatted into special characters and are causing the image not to load regardless of the theme.

@sidchs
Copy link

sidchs commented May 11, 2018 via email

@vivekaris
Copy link

i have tried solution of @sidchs but its not working.
delete app/design/frontend/{Vendor}/{theme}/Magento_Catalog/templates/product/view/gallery.phtml is best option.

@vivekaris
Copy link

vivekaris commented May 12, 2018 •
edited
Loading

i removed following code from my theme porto 3.0.4 .
app/design/frontend/{Vendor}/{theme}/Magento_Catalog/templates/product/view/gallery.phtml
its working

`/*
                "fullscreen": {
                    "nav": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/nav"); ?>",
                    "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                    "arrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/arrows"); ?>,
                    "showCaption": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/caption"); ?>,
                    "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
                },*/`

@pyyick
Copy link

pyyick commented May 18, 2018 •
edited
Loading

@leekung method works although the attribute is different. My empty attributes are "arrows" and "showCaption" inside "fullscreen"

I think every case can refer to different attributes, Magento side should have a better attribute checking on this file.

@dschmidthawk
Copy link

I'm having the same issue, but none of the above works. I'm not using a theme gallery.phtml, just the luma default. I've also checked to make sure no special characters in the filenames. No attributes for the product and only one image file.

I'm also having issues with the content of the details tab showing on the product page. The tab is visible, but clicking on it doesn't show any of the long description, it just bounces down the page. The content is visible in google dev tools when viewing the elements, so probably a javascript issue opening/switching to the tab (which should show by default).

I've reset file permissions, manually cleared the cache, recompiled, flushed cache, redeployed the static content, and reindexed. Nada, zip, zilch. As stated above, not all images are blocked, but I can't see any differences as to why this one and not that.

exemplar page link: ((http://theplasticmart.com/acrylic-tv-stand-36-waterfall-riserstyle.html#product.info.description))

text of js error:

VM1971:5 Uncaught SyntaxError: Unexpected token w in JSON at position 137
at JSON.parse ()
at getData (main.js:58)
at Array.map ()
at HTMLDocument.apply (main.js:74)
at fire (jquery.js:3232)
at Object.add [as done] (jquery.js:3291)
at jQuery.fn.init.jQuery.fn.ready (jquery.js:3542)
at jQuery.fn.init (jquery.js:2967)
at new jQuery.fn.init (jquery-migrate.js:225)
at jQuery (jquery.js:75)
getData @ main.js:58
apply @ main.js:74
fire @ jquery.js:3232
add @ jquery.js:3291
jQuery.fn.ready @ jquery.js:3542
jQuery.fn.init @ jquery.js:2967
jQuery.fn.init @ jquery-migrate.js:225
jQuery @ jquery.js:75
(anonymous) @ bootstrap.js:20
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
runCallbacks @ domReady.js:24
callReady @ domReady.js:35
pageLoaded @ domReady.js:50
load (async)
(anonymous) @ domReady.js:59
execCb @ require.js:1650
check @ require.js:866
enable @ require.js:1143
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
(anonymous) @ require.js:806
(anonymous) @ require.js:132
execCb @ require.js:1650
check @ require.js:866
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
fetch @ require.js:805
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
callGetModule @ require.js:1170
completeLoad @ require.js:1544
onScriptLoad @ require.js:1671
load (async)
req.load @ require.js:1882
load @ require.js:1639
load @ require.js:820
fetch @ require.js:810
check @ require.js:840
enable @ require.js:1143
enable @ require.js:1511
(anonymous) @ require.js:1128
(anonymous) @ require.js:132
each @ require.js:57
enable @ require.js:1090
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
req.nextTick @ require.js:1755
localRequire @ require.js:1405
window.require @ mixins.js:245
(anonymous) @ acrylic-tv-stand-36-waterfall-riserstyle.html:1458

2018-05-22_21-44-16

@sidchs
Copy link

sidchs commented May 23, 2018 via email

@indefinitedevil
Copy link

Short version: this is a theme issue. Make sure your theme has been updated with the relevant changes for 2.2.4.

We use Porto and it broke the same way.
Luma was updated with 2.2.4 and experienced no issues.

@PaperDS
Copy link

PaperDS commented May 30, 2018

Had same issue upgrading from 2.2.3 to 2.2.4

so looking at solutions above I replaced the file app/design/frontend/mytheme/Magento_Catalog/templates/product/gallery.phtml
with
vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml

Cleared cache and all working now.

I see some suggestions above to just remove app/design/frontend/mytheme/Magento_Catalog/templates/product/gallery.phtml
This has me wondering if I need gallery.phtml in the custom theme.

@dschmidthawk
Copy link

Any word on this? Using the Luma theme so not a theme issue. The Luma gallery.phtml has the updated json language, no files to replace since using Luma files. So none of the fixes above have worked. Issue can be seen at link at my issue above.

@dschmidthawk
Copy link

This was resolved for me from https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml. The quotes needed to be escaped.

See issues #15631, #15037 #15347, #15268

@DigitalStartupUK
Copy link

I'm a Porto 3.1.2 (child) user running Magento 2.2.5.

@PaperDS solution worked a treat for me. I'm yet to work out why Porto requires a custom file. Low on my list of things to think about right now though... Thanks for the solution!

@erichagz
Copy link

I was experiencing same issue.

Having "s in the product name is what was the problem. It put " next to "in the JS. So TV 36" wide had to be TV 36inches wide or TV 36 Wide, no inches.

@ghost ghost self-assigned this Jul 24, 2018
@ghost ghost added the Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed label Jul 24, 2018
@ghost
Copy link

ghost commented Jul 24, 2018

Hi @heyepic I cannot reproduce by your scenario steps. In clean magento install

@KSaho
Copy link

KSaho commented Aug 2, 2018

I am not sure if this adds anything to the conversation but I will chime in anyway.

I changed all product title characters with multi-quotes to two single quotes.
i.e. 7" Cat becomes 7'' Cat.

This didn't alter URLs or anything other than the title and fixed the JSON issue.

A screenshot demonstrating the issue on a fresh Magento 2 install 2.2.5:
https://imgur.com/a/6tNrkUr

@hostep
Copy link
Contributor

hostep commented Aug 2, 2018 •
edited
Loading

Hi folks

There are two issues being discussed in here.

The first one from @heyepic, that one has a fix over here: https://github.com/magento/magento2/pull/16594/files

Fix is scheduled for Magento 2.2.7 (or 2.2.6, it's a bit unclear for me)

The other one from @erichagz & @KSaho, has a fix over here: https://github.com/magento/magento2/pull/15521/files

This fix is scheduled for Magento 2.2.6 (was targeted for 2.2.5 but then they missed it somehow)

Hope this is enough info so people can try to resolve their current issues. :)

@ghost ghost removed the Progress: needs update label Aug 17, 2018
@ghost
Copy link

ghost commented Aug 20, 2018

Hi @heyepic Closing this issue on @hostep comment, If you'd like to update it, please reopen the issue.

@ghost ghost closed this as completed Aug 20, 2018
@Nix-id
Copy link

Nix-id commented Sep 14, 2018

i see global problem with use
$block->getVar("");
this method change his return values to different, and it can broke many templates.

previusly this method work as:

"loop": true,
"keyboard": true,
"arrows": true,
"allowfullscreen": true,
"showCaption": false,

return true and false values.

and now:

"loop": 1,
"keyboard": 1,
"arrows": 1,
"allowfullscreen": 1,
"showCaption": ,

on "true' = 1
on "false" = '' - empty value

@hostep
Copy link
Contributor

hostep commented Sep 14, 2018

@Nix-id: see discussion over here: #17920 (comment)

@Nix-id
Copy link

Nix-id commented Sep 14, 2018 •
edited
Loading

@hostep
Why you dont leave reverse compatible?
mb better was make change for xml config
somthing like
<var name="caption" **type="bool"**>false</var>
for return boolean value, and for
<var name="caption">false</var>
leave return as string

then i will don't get errors with my theme after update magento...

how many places use this method getVar in Magento.
all this places must be rechecked.

@gwharton
Copy link
Contributor

gwharton commented Oct 8, 2018

PR #18443 fixes this issue.

Well, it makes the gallery.phtml work properly with the current implementation of the getVar routine atleast.

Once PR #18443 has been merged and everything is working ok again, I will look to reinstate my PR that reverts the changes made to the getVar routine, but this may be slow time.

@shansari25
Copy link

for me the same issue, but I dont find gallery.phtml in Magento 2.2.4 version. Im using Porto theme and have no idea what went wrong. I just added NGINX with Apache and suddenly this stopped working. And its not just picture not loading even size and color dropdown values not loading pls check the picture attached

JQMIGRATE: Logging is active
blue-and-gold-lehenga-for-little-girls-party-wear.html:14 Uncaught SyntaxError: Unexpected token , in JSON at position 3804
at JSON.parse ()
at getNodeData (scripts.min.js:5)
at Array.map ()
at scripts.min.js:6
at HTMLDocument.apply (main.min.js:5)
at fire (jquery.min.js:212)
at Object.add [as done] (jquery.min.js:215)
at jQuery.fn.init.jQuery.fn.ready (jquery.min.js:223)
at jQuery.fn.init (jquery.min.js:200)
at new jQuery.fn.init (jquery-migrate.min.js:27)

Pls provide your guidance to fix this issue

image

@gwharton
Copy link
Contributor

please post the gallery sections of your themes view.xml file.

@gwharton
Copy link
Contributor

Also, view source on your page and look for the fotorama section of code. There will be some json code that is missing a field and is incorrectly formatted.

Look for an entry like

"options":{"nav":"thumbs","loop":true,"keyboard":true,"arrows":true,"allowfullscreen":false,"showCaption":false,"width":700,"thumbwidth":88,"thumbheight":88,"height":700,"transitionduration":500,"transition":"slide","navarrows":true,"navtype":"slides","navdir":"horizontal","thumbmargin":5},"fullscreen":{"nav":"thumbs","loop":true,"navdir":"vertical","navarrows":true,"navtype":"slides","arrows":true,"showCaption":false,"transitionduration":500,"transition":"slide"},"breakpoints":{"mobile":{"conditions":{"max-width":"767px"},"options":{"options":{"nav":"dots"}}}}}}}</script> <script type="text/x-magento-init">{"[data-gallery-role=gallery-placeholder]":{"Magento_ProductVideo/js/fotorama-add-video-events":{"videoData":[{"mediaType":"image","videoUrl":null,"isBase":true}],"videoSettings":[{"playIfBase":"0","showRelated":"0","videoAutoRestart":"0"}],"optionsVideoData":[]}

You probably have an entry like "loop": , instead of "loop": true,

That will give you a pointer as to what is wrong.

@gwharton
Copy link
Contributor

These issue are all resolved in the latest release by the way, but if you want a workaround without updating, follow the above.

@shansari25
Copy link

Hi @gwharton sorry im not able to get you what is the gallery section of the theme. if you look at my website i can give you the link

https://www.colorcherry.com/girls/girls-clothing/designer-frocks-gowns-girls/blue-and-gold-lehenga-for-little-girls-party-wear.html

you can see the error here.

Im not sure what's wrong it was working earlier and suddenly it stopped working may be some issue, not able to understand this.

I can provide the full details - we were running apache web server and sometimes the size and the color dropdown was not loading on the same page above and when we refresh it loads, so somebody recommended to install NGINX alongwith Apache and this issue will resolve. And when we completed that it didnt resolve rather it behaving this way and even if we uninstall nginx even then it doesnt work and behave this way only.

@gwharton
Copy link
Contributor

gwharton commented Jan 28, 2019 •
edited
Loading

No problem, A quick look at the source of your webpage shows this section

"options": {   | "nav": "thumbs",   | "loop": 1,   | "keyboard": 1,   | "arrows": 1,   | "allowfullscreen": 1,   | "showCaption": ,   | "width": 1000,   | "thumbwidth": 100,   | "thumbheight": 100,   | "height": 1320,   | "transitionduration": 500,   | "transition": "slide",   | "navarrows": 1,   | "navtype": "slides",   | "navdir": "horizontal"   | },   | "fullscreen": {   | "nav": "thumbs",   | "loop": 1,   | "navdir": "horizontal",   | "arrows": ,   | "showCaption": ,   | "transitionduration": 500,   | "transition": "dissolve"   | },

You can see that in the options section "showCaption" does not have a value set
and in the fullscreen section, the "arrows" and "showCaption" sections are not set.

These values are read from your view.xml file in your theme.

Version 2.2.4 of magento had some serious bugs in the processing of these variables, which means that for some view.xml settings, the errors happen, like you have above.

Can you locate your view.xml file. It should be in your theme folder /app/design/frontend/<theme>/frontend/etc/view.xml

Where is the name of your theme.

Can you open that file and post the <var name="gallery"> section. Here is what you are looking for. This is mine.


       <var name="gallery">
            <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
            <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="allowfullscreen">false</var> <!-- Turn on/off fullscreen (true/false) -->
            <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
            <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
            <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
            <var name="thumbmargin">5</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
            <var name="transition">
                <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
            </var>

            <var name="fullscreen">
                <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
                <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
                <var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
                <var name="navdir">vertical</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical)  -->
                <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
                <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
                <var name="transition">
                    <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                    <var name="duration">500</var> <!-- Sets transition duration in ms -->
                </var>
            </var>
        </var>

@shansari25
Copy link

shansari25 commented Jan 29, 2019 •
edited
Loading

Dear @gwharton - thank you for such a quick response. it looks like the view.xml is correct. Im attaching it here. i changed it to txt file so that it can be uploaded here.

        <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->

not able to get it whats going wrong here without making code change.

view.xml.txt

@gwharton
Copy link
Contributor

OK, that view.xml file doesnt seem to be the right one as it is not matching the setting on your webpage.

Your webpage indicates that the following values are set to false

gallery/captions
gallery/fullscreen/captions
gallery/fullscreen/arrows

but the view.xml file shows they are not all false.

You have 3 options.

  1. Upgrade your store to 2.2.7. No other changes required. (RECOMMENDED). This bug was fixed in 2.2.7.
  2. Temporary workaround. Change the values of gallery/captions, gallery/fullscreen/captions, gallery/fullscreen/arrows from false to true in your themes view.xml. This will result in the images "alt" text being displayed under the image, but atleast it will display the image with no spinner.
  3. Modify your code in the following file to match the 2.2.7 version. https://github.com/magento/magento2/blob/2.2.7/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml

@gwharton
Copy link
Contributor

I too can't explain why this is happening if, as you say, there has been no code changes. The bug only happens in 2.2.4 for entries in the theme view.xml where values are set to false. When they are set to true, the bug does not happen. Did you update or change themes recently. Perhaps the previous version of the theme had these values set true.

@shansari25
Copy link

Dear @gwharton - YOU ARE AWESOME to say the least.

Thank you my dear friend - you solved my big issue and i was struggling with it from last 20 days with no resolution. Thank you so much !!

Now everything works well but on click it opens a full page of image viewer but doesnt provide any CLOSE option for that window/page, it covers entire screen with no option to go back.

Is there any way we can include the CLOSE option in the full screen page to go back to the product page , because majority of the times customers will click back button and that will take them to the list page and their product page will be lost.

@gwharton
Copy link
Contributor

Fullscreen should have a cross in the top right corner. See the attached image.

image

@shansari25
Copy link

yes it shows magnifying icon but not the close option, anyways this is workable. Thank you so much @gwharton

Im running through one more issue with 2.2.4 but i found that its a bug in the tool. Mya be you might have some workaround for that.

When we add a product in the cart, and click on "Go to Checkout" it takes to this page https://www.colorcherry.com/checkout/#payment and we apply the Discount code, then it doesn't work there. But if you go to "View Cart" and you enter the discount code then it works there.

Not sure if there is any solution for this issue.

@gwharton
Copy link
Contributor

No idea on your separate issue I am afraid. not something that I have seen.

I have just had another thought about your original issue. The problem is that variables in your view.xml file are not processed properly when they are set as false. The first workaround was to change them to true and accept the fact that you would get fullscreen and captions, but instead of changing them to true, you could try removing the line entirely from the view.xml (well, or better to comment them out).

This should have the effect of removing the erronous content from your webpage and letting the fotorama library set the default options for fullscreen and caption (which I think has fullscreen set to false and caption set to false). (This should work, aslong as it is not inheriting the values from a parent theme).

I havent tried this myself. was just thinking. Worth a go atleast.

@shansari25
Copy link

thank you @gwharton - i will try that as well.

@flancer64
Copy link
Contributor

I think it is possible to use:

<var name="caption">0</var>

instead of:

<var name="caption">false</var>

in /app/design/frontend/<theme>/frontend/etc/view.xml

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests