settings.disqus is undefined in disqus.js [#2894876]

I'm running Drupal 8 with an off-canvas menu supported by mmenu (http://mmenu.frebsite.nl/). When I enabled the menu, the Disqus comments disappeared. The Disqus comments were running on the same theme without this menu library. So I can confirm that my setup is configured correctly. Also, when I switch to Drupal's default themes,

Here is an example page with Disqus comments enabled, but nothing is showing:
https://swingtx7left.org/blog/house-party-alex-triantaphyllis

The disqus_thread div is being generated, but the disqus comments box are not displaying. It seems that settings.disqus is undefined when Drupal.behaviors.drupal is called, and thus, the code to embed disqus is never executed in disqus.js.

Update:

I have a theory of what might be happening. None of the javascript is being loaded from the disqus module. This might be due to a conflict between the call to Dupal.behaviors.disqus and the call to $(document).ready() to initialize the off-canvas menu.

The mmenu tutorial provides that the off-canvas menu can be initialized using $(document).ready():

        $(document).ready(function() {
                $("#my-menu").mmenu({});
        });

See http://mmenu.frebsite.nl/tutorials/off-canvas/the-page.html

I'll see if I can tweak how the off-canvas menu is initialized.

Update 2:

So it seems that settings.disqus is no longer defined when Drupal.behaviors.drupal is attached.

In my personal virtual server, I changed how the off-canvass menu is loaded using another Drupal.behaviors function. And I can see the disqus behaviors when I setup a breakpoint inside the Drupal.attachBehavoirs function. So in all there doesn't seem to be a conflict with the behaviors, but instead the settings.disqus is undefined.

Comments

Comment #1

14 July 2017 at 13:55

orange-wedge created an issue. See original summary.

Comment #2

orange-wedge CreditAttribution: orange-wedge commented 15 July 2017 at 04:12

Issue summary:

View changes

Comment #3

orange-wedge CreditAttribution: orange-wedge commented 15 July 2017 at 04:13

Issue summary:

View changes

Comment #4

orange-wedge CreditAttribution: orange-wedge commented 23 July 2017 at 06:12

Title:	Drupal 8 comments not appearing with off-canvas mmenu	» settings.disqus is undefined in disqus.js
Issue summary:	View changes

Comment #5

orange-wedge CreditAttribution: orange-wedge as a volunteer commented 24 July 2017 at 02:24

I tried adding a dependency to the drupalSettings in disqus.libraries.yml to force the drupalSettings to load before the disqus javascript library is loaded, but that did not work.

E.g.:

disqus:
  version: 1.x
  js:
    js/disqus.js: {}
    js/disqus.settings.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal
    - core/drupal.form
    - core/drupalSettings

Both settings and drupalSettings remained undefined in disqus.js regardless of the dependency.

But I stumbled on this change record for Drupal core: https://www.drupal.org/node/2513818

Fabianx suggests using the following code in the rare event drupalSettings is not being loaded in time.

var settingsElement = document.querySelector('script[type="application/json"][data-drupal-selector="drupal-settings-json"]');
var drupalSettings = JSON.parse(settingsElement.textContent);

As a proposed patch for the disqus module, I've added an if-statement to check if settings.disqus is undefined, and if settings.disqus is undefined then force settings to be loaded using the JSON.parse statement above.

E.g.:

Drupal.behaviors.disqus = {
  attach: function (context, settings) {
    if (typeof settings.disqus === 'undefined') {
                var settingsElement = document.querySelector('script[type="application/json"][data-drupal-selector="drupal-settings-json"]');
                settings = JSON.parse(settingsElement.textContent);
        }
    // Load the Disqus comments.
    if (settings.disqus || false) {