Skip Navigation

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 30 replies, has 4 voices.

Last updated by Alejandro 1 month ago.

Assigned support staff: Alejandro.

Author Posts
August 11, 2020 at 10:15 pm #6780993

fernandoG-11

I am trying to: Save a translation in the ATE which contains HTML/JS code

The content to be translated is added to the rich text editor in text mode in an ACF field, then can be shown for translation in the WPML ATE by searching for the "<" character. It appears as follows:

<script>
    window.itb_widget = window.itb_widget || { init: t => { const e = document.createElement("script"); e.async = !0, e.type = "text/javascript", e.src = "<em><u>hidden link</u></em>", e.onload = function () { window.itbWidgetInit(t) }, document.getElementsByTagName("head")[0].appendChild(e) } };
    window.itb_widget.init({
        apiKey: "hidden_for_support_ticket",
        language: 'en',
        options: {
            tokenId: 'DASH',
            hideNavigator: true,
            loader: true
        }
    })
</script>
<div class="widget-container">
<div data-target="itb-widget" data-type="token-summary"></div>
<div class="itb-charts-container">
<div data-target="itb-widget" data-type="transactions-volume"></div>
<div data-target="itb-widget" data-type="average-transaction-size"></div>
<div data-target="itb-widget" data-type="correlation-to-btc"></div>
<div data-target="itb-widget" data-type="east-vs-west"></div>
</div>
<div data-target="itb-widget" data-type="call-to-action"></div>
</div>

I am trying to change the language code to 'es' in the following line:

language: 'en',

WPML ATE does not allow me to save the translation. Clicking the save button or pressing Ctrl + Enter has no effect.

Link to a page where the issue can be seen: hidden link

I expected to see: Widget loads from remote site in Spanish

Instead, I got: Widget still uses the original code instead of the translated version with the correct language code. Cannot save translation in ATE.

Debug information not relevant, since content is on ATE which is external to our WPML installation.

August 12, 2020 at 1:56 am #6781367

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hi There,

I used your script and run a quick test and was able to successfully save the translation.

Please review my screenshot.

What are your results if you create a new page and simply add one line and then the script?

August 12, 2020 at 10:45 pm #6789543

fernandoG-11

Hi Bobby, thanks for your quick response. I tried creating two new pages, both with and without using ACF. In both cases I cannot save the translation. I've recorded a short video demonstrating my workflow, just in case I am doing something obviously wrong.

hidden link

Any ideas? Thanks!

August 13, 2020 at 5:46 pm #6797765

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Thank you for the screencast!

When you click to save are there any errors within the console? (Right click->Inspect->Console)

It almost seems like a JS/Jquery error.

I would like to request temporary access (wp-admin and FTP) to your site to test the issue.
(preferably to a test site where the problem has been replicated if possible)

**Before we proceed It is necessary to take FULL BACKUP of your database and your website. Providing us with access, you agree that a backup has been taken **

I often use the Duplicator plugin for this purpose: http://wordpress.org/plugins/duplicator/
You will find the needed fields for this below the comment area when you log in to leave your next reply.
The information you enter is private which means only you and I have access to it.

NOTE: If access to the live site is not possible and the staging site does not exist please provide me with a duplicator package created with the duplicator plugin.

Thank you,
Bobby

August 13, 2020 at 11:27 pm #6798797

fernandoG-11

Hello, login information included in previous private message. I am indeed getting an error in the console when clicking the "Save and complete" button:

application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1523 {stack: "TypeError: Cannot read property 'toString' of unde…efda34a9b9616151dc9e22d2c886e94f56beb.js:765:3240", message: "Uncaught TypeError: Cannot read property 'toString' of undefined"}message: "Uncaught TypeError: Cannot read property 'toString' of undefined"stack: "TypeError: Cannot read property 'toString' of undefined↵    at n (<em><u>hidden link</u></em>    at <em><u>hidden link</u></em>    at Array.map (<anonymous>)↵    at e.value (<em><u>hidden link</u></em>    at e.value (<em><u>hidden link</u></em>    at e.value (<em><u>hidden link</u></em>    at e.value (<em><u>hidden link</u></em>    at e.action (<em><u>hidden link</u></em>    at e.value (<em><u>hidden link</u></em>    at <em><u>hidden link</u></em>"__proto__: Object
value @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1523
window.onerror @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1523
error (async)
bindOnError @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1523
value @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1523
(anonymous) @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1525
(anonymous) @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1525
t @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:651
(anonymous) @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1523
t @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:651
(anonymous) @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:2496
t @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:651
(anonymous) @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:651
(anonymous) @ application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:651
application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1529 Uncaught TypeError: Cannot read property 'toString' of undefined
    at n (application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1529)
    at application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1529
    at Array.map (<anonymous>)
    at e.value (application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1529)
    at e.value (application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:974)
    at e.value (application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:974)
    at e.value (application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:974)
    at e.action (application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:1529)
    at e.value (application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:765)
    at application-43f0bd5775ce7ef8395f1c77887efda34a9b9616151dc9e22d2c886e94f56beb.js:765
August 14, 2020 at 10:45 pm #6805657

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Thank you for updating me!

As the plugins on the site are all behind on version and will require updating I'd like to test if the latest version resolves the issue.

To do this I'd need to create a duplicator package and test locally to not interfere with your site and not perform this test on your live site.

If I get positive results then I will update you accordingly.

Please install the plugin Duplicator for me and I can take it from there. (At the moment I am not able to install a plugin without authentication)

August 17, 2020 at 1:39 am #6811191

fernandoG-11

Hi Bobby,

no need to install Duplicator, I have updated all plugins and WordPress core to the latest versions. The problem remains, as far as I can tell. What should we try next?

August 17, 2020 at 11:05 pm #6818989

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

The next step is to test for any 3rd party plugin compatibility as I am not able to reproduce this issue with the same JS script in my staging environment, which was another reason I request the duplicator package.

To perform this test you can do it in a staging envrionment , or we can test it on our cloudways staging environment by making a quick duplicate of your site onto our staging servers where we can perform this safely.

However, if you would like to do this test on your live site the steps are below:

-Deactivate all non WPML related plugins
-Switch for a moment to a WordPress default theme like Twenty Fourteen.
-If the issue is gone, activate one by one to see with which one there is an interaction issue

Let me know your results, please.

NOTE: If the issue persists even with a minimal environment we will need to escalate this ticket, and a duplicator package or a cloudways migration will be required as I have not been able to reproduce in a new environment.

August 23, 2020 at 10:15 pm #6855529

fernandoG-11

Just a placeholder to keep this open, I will attempt this in the next few days.

August 24, 2020 at 10:41 pm #6863089

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

No problem,

If you are not able to and the thread does close due to inactivity when you open a new thread ask to be assigned to me as I already know the problem.

August 28, 2020 at 12:15 am #6889839

fernandoG-11

I have updated all plugins again (WP 5.5/WPML 4.3.19) cloned the build site to our staging server, disabled all non-WPML plugins and enabled Twenty Sixteen theme. The problem remains. I expected this, since I don't see how a plugin on our server could cause a JS error in code that is served by your ATE server, not by a plugin on our WP instance. One of your engineers is going to have to debug that specific error I think.

You can have a look at the environment using your existing credentials, URL is hidden link
Please try to translate the "ITB test" page into Spanish as described above.

Let me know what you would like to try next. I'm happy to install a duplicator plugin on the staging server and you can clone our site from there if necessary. 🙂 Thanks for the help!

August 28, 2020 at 1:58 am #6890017

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Please take a look at my screenshot, this is a test i did using the ITB with translation into Greek.

I searched for < in the source area.

additionally, I also did the same test again in a new environment on my staging servers and got the same results.

August 31, 2020 at 1:02 am #6902725

fernandoG-11

That's weird! Why does the first screenshot show translation from English to Greek, but the second one from German to Spanish???

I cannot get this working no matter what I try. I thought maybe there was some cached older version of the script, but it also fails in private mode in both Chrome 85.0.4183.83 and Firefox 80.0. Both browsers return the same JS error in the console that I pasted above. I even tried disabling all browser extensions (I had ABP and Lastpass running, but the error persists with extensions disabled).

I'm happy for you to make the changes on our production site for us if it works on your end, or we can continue working to track down the bug. It might be worth discussing our setup with Alejandro at WPML, as he supported us through significant problems with the ATE database when we migrated deploy of the ATE from the staging to production site. The cause might be related to that?

August 31, 2020 at 7:04 pm #6910099

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hi There,

I test again and was able to reproduce the issue on my staging environment.

The problem is the following code

<div class="widget-container">
<div data-target="itb-widget" data-type="token-summary"></div>
<div class="itb-charts-container">
<div data-target="itb-widget" data-type="transactions-volume"></div>
<div data-target="itb-widget" data-type="average-transaction-size"></div>
<div data-target="itb-widget" data-type="correlation-to-btc"></div>
<div data-target="itb-widget" data-type="east-vs-west"></div>
</div>
<div data-target="itb-widget" data-type="call-to-action"></div>
</div>

This indeed results in the JS error

Uncaught TypeError: Cannot read property 'toString' of undefined

My recommendation here is to try the following:

1. Go to pages and edit your page in the default language
2. Add the translation as usual but leave out the change of language code in the JS code
3. Go back to the default language edit page
4. Use the language switcher in the top header and switch to the translation (dismiss the warning)
NOTE: This will allow you to remain in the standard WP editor view
5. Edit the language code manually outside of ATE and save now.

Let me know your results, please.

September 1, 2020 at 5:07 am #6912039

fernandoG-11

Sorry, your steps are not clear. I tried:

1. Edit page in English.
2. What do you mean "add the translation as usual"? Using the ATE or do not start the translation process? Add the Spanish translation to the English page?? Which code do you want me to leave out? I'm not sure what you mean by the "change of language code".
2a. I tried leaving the JS code and remove the <div> tags in the source and completed the translation.
2b. I tried to remove the JS code and leave the <div> tags in the source , in this case I cannot save the translation.
2c. I tried completing the translation with both the JS and <div> code in, but unconfirmed in ATE.
2d. Or did you mean something else, like remove the language: 'en' line?
3. Back to edit page.
4. Switch language to Spanish (no warning appears).
5. Only the page title is visible. The content from the ACF repeater fields does not appear, so I'm not able to edit it.

I thought maybe this was due to the system field settings for ACF, so I tried setting "_content_sections_0_section_description" to both Copy and Translate. In both cases I could not get the ACF content to appear when the language is set to Spanish in the top bar.

If you could record a Loom going through the steps that would help, otherwise please be a bit more explicit in your instructions. Thanks!