← Showcase Site Components

Tour Modal

NOTE: This component is no longer being sold on current showcase sites, because the alert has been moved to a modal and the potential for multiple modals would be bad UX.

This component allows the client to put a modal on their sites that shows up when the site is opened for the first time. It’s meant as a “tour” or “welcome to our new site” sort of thing. On close, it sets a cookie for a year. It is generally manually removed with a post-launch case after a while, because it doesn’t make sense to have a “welcome to our new site” modal when the new site’s been there for a long time.

JSON Files

  1. package.json - For the homepage “featured rates” section, all the necessary pieces in the mustache are controlled by the package.json file. Make sure that your componentTourModal variable in the package.json file is set to true if things aren’t working!

  2. -make.json - Since this is a component that adds content areas to the homepage, make sure to run gulp make-everything, grab the list of content areas from the templates.json that is generated, and paste them into the home template in your -make.json file.

Mustache Files

  1. src > templates > _partials > _tour-modal.mustache - The main file for the component.

  2. src > templates > home.mustache - Where the modal is included. Note that it’s not included on any subpages by default; it only appears on the homepage. This piece will automatically be un-commented if the componentTourModal in your package.json is set to true. If you are working with older showcase files, you may need to manually un-comment this.

Script

  1. src > scripts > banno-functions.js

    • Uncomment the banno.site.displayTour(); function at the top, this calls the function that is defined lower down. This piece will automatically be un-commented if the componentTourModal in your package.json is set to true. If you are working with older showcase files, you may need to manually un-comment this.

    • Function to display the modal, and ensures it only opens when it has content. This piece will automatically be un-commented if the componentTourModal in your package.json is set to true. If you are working with older showcase files, you may need to manually un-comment this.

  2. src > scripts > script.js

    • Inside the IF function at the top, to make sure the modal opens when the editor is opened. This piece will automatically be un-commented if the componentTourModal in your package.json is set to true. If you are working with older showcase files, you may need to manually un-comment this.

    • Inside the ELSE function at the top, to deal with what happens when the modal is closed. This piece will automatically be un-commented if the componentTourModal in your package.json is set to true. If you are working with older showcase files, you may need to manually un-comment this.

  3. src > scripts > sliders.js - There is a slider inside the modal. This piece will automatically be un-commented if the componentTourModal in your package.json is set to true. If you are working with older showcase files, you may need to manually uncomment this. Make sure to uncomment both the IF and the ELSE sliders–there are two, one for within the CMS and one for the published page.

Styling

  1. src > scss > themes > _general.scss - Styles for this component that are common across all themes.

  2. src > scss > themes > [yourtheme].scss - Styles that are specific to the theme you’re using.

Example Sites

This has not been put on any sites yet, but feel free to edit to include one of your sites as an example!