Add a welcome tour to Umami

My first thought on implementing tours would be to consider what type of info to show. Since Umami is a DEMO.
What guide shall we give about?

1. Tour of UMAMI magazine site - Eg: Tour of Recipes, Articles, Footer, Banner, Authoring experience, Something about the demo itself.
etc...
2. Tour of "Drupal things" that Umami uses - Eg: Custom Block types, Recipe content types, Views, The WARNING message shown on top of the toolbar, about the purpose of this demo. etc..

These are my first-hand thoughts on this idea. I might be missing something. Kindly advise.

Nice idea to promote also the tour module.
If we want to integrate it, I suggest a story in 3 steps:

1. Explain that "Drupal 8 include this Tour feature in the core. It allow you to guide your visitors"
2. "You can log in here"
3. "You can search for recipe here"

My english is not pretty good, that's an idea to improve :)

About the fear of introducing counter productive clutter in the UI, I gess if we stay on those 3 elements only on the homepage. It sounds good (logo, login link, search).

Proof of concept for adding a tour to an Article node in Umami, highlighting the body copy & the view in the sidebar:

langcode: en
status: true
dependencies:
  module:
    - node
id: article-node
label: 'Article node'
module: umami_tour
routes:
  -
    route_name: entity.node.canonical
    route_params:
      node: '2'
tips:
  body-copy:
    id: body-copy
    plugin: text
    label: 'Body copy'
    body: 'This is the body copy of the page.'
    weight: 1
    attributes:
      data-class: field--name-body
  articles-view:
    id: articles-view
    plugin: text
    label: 'Related articles view'
    body: 'This is a view of related articles'
    weight: 2
    attributes:
      data-id: block-views-block-articles-aside-block-1

Here's a starter patch for adding tour to Umami.

At the advice of @smaz, I've created a new module called 'umami_tour' and started working on a couple of tips for the front page. Whilst we're developing the feature, @smaz believes it will be easier to keep the tour as a module since you can enable/disable the module with Drush each time the tips are edited or new ones added.

In case it helps, I used the devel module to discover routes.

So getting up and running should be as simple as applying the patch and enabling the umami_tour module. Once installed, the Tour link will appear top right of the admin bar when logged in.

I've applied the patch in #5 but don't seem able to get this to work in Firefox or Chrome or Safari. See attached video.

Firefox: I see a 'Tour' button but when I click on it, it gets a class of 'hidden' and disappears
Chrome and Safari: I see no button

I think we should name the module demo_umami_tour, to keep it consistent with the demo_umami_* namespace. And there's a few small typos that we can fix up as we progress.

I tested it both on Chrome and Firefox.

Based on patch #5 -

• I renamed the module name to demo_umami_tour
• Enabled it by default as part of Umami installation
• Added a missing node dependency

A note I forgot to add with my patch and something we need to look at:

css/components/tour/tour.theme.css is added by my patch but it's a copy and paste of core's tour CSS in order to have consistent tour dialogue styling between the admin theme and Umami.

@markconroy has suggested we see about using the core tour module CSS as a library dependency from the Umami theme to avoid duplicating CSS

Thanks @shaal for that patch. I now have the same experience on Firefox and Chrome and Safari, rather than slightly different ones.

Now, all browsers are behaving as Firefox was - I can see the link to tour, but when I click on it, it disappears and nothing happens.

Thanks for renaming the module. @kjay, yes, I think we should try to use the CSS from tour.module rather than duplicating stuff for ourselves. Let's see what Views does in it's tour for CSS.

When editing a View, Tour is using CSS code from the admin theme Seven.

On non-admin pages, and without having tour.theme.css file that was included in the patch, Tour is loading its CSS from Stable theme (see screenshot)

We can either keep the darker tour theme (a duplicate of Seven) or apply some changes to the existing Stable Tour CSS.

In preparation for @markconroy and I doing a sprint on this issue this evening, here's the latest patch which adds a number of tour tips to the front page. Stuff we need to look at:

• Admin menu obscures the top edge of the tip on initial reveal
• Tip point locations appear not to work; unable to locate a tip to the right bottom of navigation for example
• Seeing if we can get the tips styled consistently with the admin area's styles
• Use existing CSS in other base themes/tour rather than the copy/paste we are currently doing
• Tip content review and discussion

Some steps of Tour in Umami appear out of the screen.
Is it possible this is a bug in Tour itself?

This screenshot shows step #5 in Tour, which is almost completely out of the screen (you will find it at the bottom-left side of the screen)

There are a few places where although it is "correct" to point at the id of the block that contains the thing the Tip is referencing, it actually points to the "wrong" place because the div that has the id is bigger than its content.

An example of this is the main menu. The Tip was pointing into blank space as the menu items are floated right.

Tips can reference anything we can define in jQuery (when using data-class as opposed to data-id!), so it is possible to point directly at the first menu entry exactly...

In reference to #14, it works well to use the location parameter to set the location of the pointer downwards when the page needs to move down to show the next Tip. It kinda makes it display better.

Hi @rachel_norfolk,
Thanks for taking a look at our patch. Mark, Ofer and I did a sprint on this last night and we were able to come up with some understanding of how we need to work with the Tour module to avoid the main layout and scroll-to issues. It’s a little fussy about how things are done, as you are pointing out.

We’ve not had the chance to draw that into a new patch but I pasted the rough tweaks to the CSS and yml that we made during our call into Slack (check the backscroll in the OOTB channel from last night), ready for us to continue thinking about how we work. Turns out font size is critical in the tool tips.

Hi - yeah, that's great - just wanted to point out that pointing things can be more "specific" than simply IDs.

Will have a read of the back scroll tonight. For now, I need to go back to work...

Worked together with @kjay and @markconroy on this new shiny patch (based on #13)

This should just work™ ;)

Here's an update to @shaal's patch in #19. This adds line height to the button to improve layout of tooltips and provides some updates to the text.

This is looking great. Can't wait to have it added to OOTB. I've some very tiny changes I think we should make, and then I'll mark it RTBC.

1. +++ b/core/profiles/demo_umami/modules/demo_umami_tour/config/install/tour.tour.umami-front.yml
   @@ -0,0 +1,77 @@
   +    label: Drupal ‘out of the box’
   

   I think we should change 'out of the box' here to "Out of the Box"

2. +++ b/core/profiles/demo_umami/modules/demo_umami_tour/config/install/tour.tour.umami-front.yml
   @@ -0,0 +1,77 @@
   \ No newline at end of file
   

   We need a new line at end of file.

As well as that, I think we should swap Item 3 with Item 4 and Item 6 with Item 7 to stop jumping up and down the page.

I created a patch based on #21 recommendations,

In order to keep the tour steps in a nice visual order from top to bottom, I switched between steps 3,4,5 and also between steps 6,7.

Based on patch #23

Per @smaz suggestion, I created a patch that removes the direct link to Seven's Tour CSS, and instead use seven/tour-styling as a dependency.

With @kjay blessing, I made the last step of the front-page tour friendly again ;)

Everything looks fine except couple of issues.
1) Location on `navigation` tour item seems me wierd on both mobile and desktop.
2) Location of `managing-content` tour item seems not perfect on desktop

Same visual problem in core views-tour.
So if mobile menu tour not critical this issue may became rtbc

#25 is because of the way Tour works in core.
If Tour will be fixed in core - it will improve how it looks in Umami.

New patch attached - I changed the libraries to extend the tour libraries rather than always be included in the CSS.

Needs work as @kjay is about to make some content changes!

Content changes:

Tip: 2

Heading: Drupal "Out of the box"
Changed to: Drupal's core capabilities
Reason: I think I had this wrong originally because if we speech mark this and capitalise, then aren't we referring to the OOTB initiative? If so, demo users don't know about Out of the box initiative. If we format it as 'Drupal out-of-the-box' then would that make enough sense to demo users given the lack of context? I think this suggested heading change would probably makes more sense as a heading to the our users.

Tip: 2

Body: 'out of the box'
Changed to: out-of-the-box
Reason: Correct formatting

Tip: 4

Body: customising
Changed to: customizing
Reason: Umami is US English

Tip: 6

Reworked the body text to make more sense given it is now appearing prior to the tip on Views. Also made the description apply more to the view we are pointing at since the view modes are being used to switch the image format

Set to needs review.

Looks great so far, but with a couple of comments:

1. Step 2 of 8 has a pointer to the title block but I'm not sure the text tells me anything about the title block. Probably needs to be without a pointer.
2. To start the tour, a user must click the Tour link in the admin menu but I don't think someone new to Drupal would ever think to do that. Can we add a "success" message on install of the Umami tour module that prompts a user to click the Tour button?

I was looking at how to do 2 above but

function demo_umami_tour_install() {
  if (!\Drupal::service('config.installer')->isSyncing()) {
    \Drupal::messenger()->addMessage("To help you begin exploring this demonstration, a guided tour may be started by clicking Tour in the administration menu above.");
  }
}

still results in the message appearing at the configuration form and I can't figure out how to stop it...

Hi @rachel_norfolk. Thank you for your help.

Regarding your point 2. in #30, this is a topic we discussed on a recent call because you are absolutely right. Without some kind of prompt, highlighting or whatever, the tour is going to be somewhat a hidden feature in all likelihood!

However, to keep the scope of our goal to get our tour into core for 8.7.x, we have agreed to move any tasks that expand on, or enhance the tour, beyond tour working the way the tour module supports by default, in to follow up issues that can then (hopefully) be quickly committed in patch releases if they don't make it in for 8.7.x.

We have not created a follow up issue for tour visibility as yet.

Issue summary update.

I created a new patch during our OOTB call.

• Fixed extra spaces
• Per #30 suggestion, changed step 2 into a modal (instead of pointing at the logo).

This is brilliant. Thanks all for working on it. RTBC.

Superb thanks all. I agree we should explore somehow calling attention to the tour, maybe launch it right away on the first load? Is that too much? Many products do that when you install them at first. Maybe too much for someone who wants to demonstrate it to others. This would be great to discuss in a followup.

Follow-up created #3038406: How do we make sure people new to Drupal know about the Umami Tour?