Feature tour v1.0-alpha4

Release Notes


  • Fixes location of Hopscotch css file in relation to the image folder
  • HTML markup (e.g. p tags) within a tour stop content is now displayed correctly


  • It's now possible to specify where the bubble should appear in relation to the target (top, bottom, right, left)
  • Administrator is now forwarded to the list of tour stops directly after creating a tour page


  • Instructions for creating new tour stops are now clearer

Known problems:

  • The Page field of a Feature tour page does not support slash character yet (so e.g. "blog" works but "blog/all" doesn't)
  • i just tested this version on 1.11.2. the hopscotch css file is loaded correctly and so is display.js. however, the hopscotch or joyride js file is not being loaded. i looked in start.php and searched the plugin source for  elgg_require_js lines to go with the elgg_define_js commands for these js files and did not find any... so as far as i know, that explains why the js files are not loading.. but that would also mean that there is no way that the plugin could function and i am sure you and others must be testing this and getting it to work - right?

    anyway, now i have both JS files (display and the tour library) loading and also the css file, but when i configure tour elements they still do not render in firefox. i have no idea why yet as i am still upgrading my own site to 1.11 and so haven't had timespace available to thoroughly debug this plugin.

  • i looked in start.php and searched the plugin source for elgg_require_js lines to go with the elgg_define_js commands for these js files and did not find any

    The modules are loaded asynchorously using require() in tour/display.js

    others must be testing this and getting it to work - right?

    Yes, I'm successfully using the plugin on a production site.

  • ah ok. i disabled my theme and i can now see the help button.

    i removed the elgg_require_js lines that i added and tested again.

    now when i click the 'help' button i see this in the console:

    Error: Script error for: hopscotch
    http://requirejs.org/docs/errors.html#scripterror require-2.1.10.min.js:8:251
    SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data jquery-1.11.0.min.js:4:16132

    when i test this with joyride instead of hopscotch, i see nothing after clicking 'help'.

    there is nothing helpful in the php log either.

    any idea for what i can do to resolve this?

  • What is the unexpected character? Use console.log() to print out the data if you're not able to access it otherwise.

  • i have run various versions of:




    and none have produced anything other than: data is not defined

  • At the end of views/default/tour/hopscotch.php add:

    error_log(var_export($tour, true));

  • ok, here's the output:

     "PHP message: stdClass::__set_state(array(
       'id' => 'hopscotch-tour',
       'steps' =>
      array (

  • The 'steps' property is empty, so there aren't any tour stops defined. Or at least none can be found for that particular page.

    Check that:

    • Tour page has correct URL path (e.g. 'blog' or 'register')
    • Tour stops have been defined for the tour page
    • The current user has access to both the page and the stops
  • If you have started using the plugin from an early alpha version, disable and re-enable the plugin to make sure that the entity classes get registered.

  • as far as i can see, the configuration is ok.

    i have one test tour for the page: http://dev.ureka.org/discussion/all

    the tour has one stop on it that is attached to: .elgg-heading-main

    the only potential issue i can see is that for some reason the stop is shown in the list of stops as not having a page assigned to it, even though there is a page assigned to it when i view the stop's edit page:

    test 2

    • Page:
    • Target: .elgg-heading-main
    • Order: 999


  • ok, i just disabled the plugin and re-enabled it, but it made no difference.

  • I was finally able to reproduce the problem. I had forgotten that the page field doesn't support slash character yet.

    So this works: discussion

    This doesn't: discussion/all

  • ok, so now i have pointed to the root of discussion i am seeing this in the PHP error log:

    PHP message: stdClass::__set_state(array(
       'id' => 'hopscotch-tour',
       'steps' =>
      array (
        0 =>
           'title' => 'test 2',
           'target' => '.elgg-heading-site',
           'content' => '<div class="elgg-output"><p>tes 2</p></div>',
           'placement' => 'bottom',

    and still seeing the same JSON error in the browser console.

  • Oops, sorry. I didn't read all the way to the end.

  • Are you sure you have json extension installed for PHP?

    What happens if you add this to views/default/tour/data.php:

    error_log(var_export(json_encode($tour), true));

  • as far as i know, i have the default json packages installed. i just checked php-pecl-jsonc and that is the latest version at least.
    this is the output of that error log:

    PHP message: Array
        [0] => Tour\Stop Object
                [url_override:protected] =>
                [icon_override:protected] =>
                [temp_metadata:protected] => Array

                [temp_annotations:protected] => Array

                [temp_private_settings:protected] => Array

                [volatile:protected] => Array

                [tables_split:protected] => 2
                [tables_loaded:protected] => 2
                [attributes:protected] => Array
                        [guid] => 15997
                        [type] => object
                        [subtype] => 65
                        [owner_guid] => 1
                        [site_guid] => 1
                        [container_guid] => 15996
                        [access_id] => 2
                        [time_created] => 1434961088
                        [time_updated] => 1434969416

  • What if you change this:

    echo elgg_view("tour/{$js_lib}", array('stops' => $stops));


    $test = elgg_view("tour/{$js_lib}", array('stops' => $stops));

    error_log(var_export($test, true));

    echo $test;

  • ah, so i found that the view is being outputted with a prefix of the 'wrap views' text from the core developer tools plugin. when i disabled the wrap views option, the hopscotch tour started working.

    the joyride version still doesn't work though and i think that is because the joyride .js file is being loaded last in the list of scripts on the page and the display.js script is unable to access it.

  • hm.. so i re-enabled my site's theme and switched to hopscotch and now i see 'tour is undefined' in the console when i click the help button.. so there appears to be some type of loading / dependency glitch occurring.

  • ok, i grabbed that and renamed it to 'tour' and over-wrote the old version. the result is that now there are no errors in the console and also there is no tour box being rendered when my site's theme is loaded and hopscotch is enabled. (i don't know what in my theme is blocking hopscotch).
    when i disable my theme, hopscotch works and joyride outputs a requirejs type of script error (non specific).

  • for unknown reasons, when my theme is enabled, the hopscotch function is unusable. if i call it manually using the console i see:

    ReferenceError: hopscotch is not defined

    suggesting that the hopscotch library has not been loaded - which makes sense since you are loading it asynchronously in the javascript. however, when i click the 'help' button while my theme is loaded, nothing occurs in the UI at all: no tour popups are loaded into the page and no errors are outputted..

    i have no clue at this point what the problem is. i don't think my own javascript is interfering with the tour javascript and i don't think any of my views are over-riding any of yours.

  • i have got this working ok now. i'm not sure what was causing the JS errors, but they appear to be gone now.

    the reason why the boxes weren't appearing when my theme was active is that the page element i had attached the test tour box to, was not being rendered in my theme ;) doh!

  • it would be good to put some logic around the adding of the tour button to the topbar, so that it is only added if there are stops saved for the current page.

Project Info


  • Category: Uncategorized
  • License: GNU General Public License (GPL) version 2
  • Updated: 2017-9-30
  • Downloads: 1476
  • Recommendations: 7

Other Projects

View Juho Jaakkola's plugins