← Building Showcase Processes

Basics for Setup & Build

This is not an all encompassing guide with regards to Showcase+ as this option allows for customization, which is hard to capture everything. If you have questions ask Chris, Marie, or Aaron.

  1. Open Figma in the app or in your browser
  • Search by site name or JSource number and open the design file. For Showcase+, check the dev notes section on the homepage for any specific changes to the site.
  1. Create git repo

  • You have 3 options for this step, so use whichever method is most comfortable for you.

    Create from Template

    • Create git repo on GitHub (github.banno.com, click the green ‘New’ button on the right side, below the header)
    • Select the Banno/webdev_showcase repository under ‘Repository Template’
    • Keep ‘Include All Branches’ unchecked
    • Repo should use the following format: jsourcenumber_bankname (ex.2520_cnbsomerset)
    • For the radio buttons, keep ‘Internal’ selected
    • Click the green ‘Create repository Button
    • Clone your new site repo
    • Open your new site repo in your preferred text editor

    Copy Files

    • Create git repo on GitHub (github.banno.com, click the green ‘New’ button on the right side, below the header)
    • Repo should use the following format: jsourcenumber_bankname (ex.2520_cnbsomerset)
    • For the radio buttons, keep ‘Internal’ selected
    • Click checkbox to initialize repo with a README
    • Do NOT add git ignore, this is added from our base files
    • Leave license as ’none’
    • Clone the new repo
    • Copy the development folder and .gitignore-rename from the webdev_showcase repository into your new site repo.
    • Specifically, you want the .gitignore-rename because it contains different files to include/exclude. The regular .gitignore file is for the purposes of the base files themselves, and excludes different things than you will need to for your individual site.
    • Remove -rename from .gitignore
    • Open your new site repo in your preferred text editor

    Clone Showcase Repo

    • Create git repo on GitHub (github.banno.com, click the green ‘New’ button on the right side, below the header)
    • Repo should use the following format: jsourcenumber_bankname (ex. 2520_cnbsomerset)
    • For the radio buttons, keep ‘Internal’ selected
    • Do NOT add git ignore, this is added from our base files -Leave license as ’none’
    • Run git clone git@github.com:Banno/webdev_showcase.git <your-new-project-name> in the terminal. Make sure <your-new-project-name> matches the name of the repo you created.
    • Run git remote set-url origin <new-repourl> to set the new origin
    • Run git branch -M main to set the main branch
    • Open your new site repo in your preferred text editor
    • Delete the .gitignore file and remove -rename from .gitignore-rename
    • When you’re ready to push run git push -u origin main
  1. Download and unzip the dev-assets.zip folder from the Trello card. It should contain header and footer logos, an atm and branch pin, and a favicon zip folder.
    • Upload the atm and branch pin to the src > images > location pins folder. Make sure to replace the existing atm.png and branch.png with the images given to you by the designer.
    • Upload the header and footer logos into the src > images folder.
    • Unzip the favicon folder and place them in your site’s repo under src > root > icons. Make sure to completely delete what’s previously inside that folder, so that the only favicons in your folder are for your site, rather than some for your site and other leftovers that still say JH

Package Explanation

  1. Open the package.json file

    • Edit the package to match info found on the Trello card. Here is a breakdown of what each line on the package.json can do for customization of the site:
      • site: The name of your site. If your site name has any special characters, you may encounter an issue when running npm install and/or gulp.
      • zip: the zip file for your site. This should match the site’s URL.
      • theme: The theme your site uses. As of now, we have six active themes: Alabaster, Rosewood, Midnight, Cedar, Periwinkle, and Marigold.
      • bankLocation: The location of the bank, found in the Web Institution Trello card
      • colorLogoPath: The relative path of the logo that goes in the header
      • whiteLogoPath: The relative path of the logo that goes in the footer
      • major, minor, and accent: Replace the default hex codes with the hex codes given in the Trello card
      • logoWidth: Replace the default logo width with the width given in the Trello card
      • logoHeight: Replace the default logo width with the width given in the Trello card
      • footerLogoWidth: Replace the default footer logo width with the width given in the Trello card
      • routingNumber: The routing number of the bank, found in the Web Institution Trello card. If one isn’t given, you can leave it as null for now.
      • nmls: The nmls number of the bank, found in the Web Institution Trello card, if applicable
      • phoneNumber: The phone number of the bank, found in the Web Institution Trello card. If one isn’t given, you can leave it as null for now.
      • fiType: The type of financial institution, which determines if the footer should show the FDIC or Member FDIC logo.
      • parallax: Determines whether or not the large hero ad should have a parallax effect. By default this is set to true, but you can change it to false if the client doesn’t want it.
      • dqmPremium: If the client opts in to DQM, set this to true. However, if the client has also been set up w/ Auto Fix, set this to false so the Auto Fix icon and the Accessibility icon do not overlap. Reminder to also email Hannah Toler to set up DQM. Make sure to include the name of the bank, JSource ID, the UAT URL, and cc the Project Coordinator.
      • accessibilityForm: If the client opts in to the accessibility feedback form to their site, set this to true.
      • includeNewsletter: If the client opts in to the email collection form to their site, set this to true.
      • marketing: If the client opts in to marketing on their site, set this to true. See the marketing documentation for more information.
      • monitor: If the client opts in to Banno Monitor on their site, set this to true. If this is set to false, remove "SENTINEL"from the list of features in your -make.json file.
      • captcha: Set to true by default. Don’t change this unless the client requests Captcha be removed from their site. You can also do this on a form-by-form basis in the -make.json file and with Postman.
      • olbVendor: For OLB vendors that we commonly work with, you can set this value to ‘NetTeller’, ‘Banno’, or ‘Digital Insight’ and the online banking will be set up with the proper HTML as long as you have the olbAction value set. You can also set this value to ‘Multiple’, and the basic structure will be there for you to select between multiple online banking logins if the client has them. If there is a vendor the client is using that we don’t normally work with, or you need to make additional edits to online banking, open up the olb_shared_form.mustache file. For more information on setting up online banking, read the online banking documentation.
      • olbAction: The value that will go in the actionattribute of the online banking form
      • olbEnroll: Online banking enrollment link
      • olbPassword: Online banking forgot password link
      • smartbanner: If the client has smartbanners, change this value to true. The PC should provide information on the smartbanner URLs on the trello card if the client is using them. If there is a section for smartbanners but no information included, or it doesn’t specifically say that the client has no smartbanners, feel free to reach out to the PC for clarification.
      • smartbannerApple: The href to the client’s online banking app on the App Store
      • smartbannerGoogle: The href to the client’s online banking app on the Google Play Store
      • socialIcons: Set this to true if the client will be linking to any of their social media accounts. This will enable the menu in the footer_shared_social.mustache file.
      • numberOfATMNetworks: Left as 1 by default since we are assuming they have their own ATMs. If they have other ATM Networks such as Co-Op, Shazam, etc., update this number. If greater than 1 the layout of the ATM page will change automatically
      • microsite: This is set to “basic” by default. You can change this value to “premium” to have it pull in extra styling, custom variables, etc. from bootstrap. These changes will take effect on the microsite.html that you can copy and place in the specific microsite folder, once you get to that point.
      • domain: The live site domain for your FI. Change this to match the domain name that your site will be launching on, including www. and including .com, .net, .bank etc, but NOT http/https.
      • scaffold:The name of your -make.json file (i.e. bankName-make.json)
      • url
        • uat: Change this to reflect the site’s UAT URL. The PC should have set up the DNS for the UAT site already and included what they set it up as in the trello card; if not, feel free to reach out to them. If your site is a remake, the UAT URL should be in the format finame####-uat.banno.com, where #### is the current year; for example barharbor2020-uat.banno.com
        • prod: Change this to reflect the site’s live URL, for example https://barharbor.bank.
      • environment
        • uat: Leave as is
        • prod: Leave as is
      • name: The hyphenated, all-lowercase name of your FI. Make sure not to include symbols like the ampersand, periods, or commas. For example, "name": "first-bank-&-trust-co." will cause errors, so instead use "name":"first-bank-and-trust-co".
      • version: Do not change this value.
      • description: The name of your FI followed by “Website”
      • browserslist: Do not change this value.
      • engines: Do not change these values.
      • devDependencies: Do not change these values.
      • repository
        • type: Do not change this value.
        • url: Change this to the github repo for your site. Not the URL to go to the github page, but when you are on that page, click the green button that says Code, and in the dropdown that appears, open the SSH tab if needed, then there is a text field with a clipboard next it. Either manually copy the value within the text field, or click the clipboard icon, and paste the value in place of the base/default value within your package.json.
      • bootstrap-version: Do not change this value.
      • author: Change this value to your name in double-quotes.
      • original-dev: If you are the person building this site initially, also change this value from “Web Dev” to your name, again ensuring that things are spelled correctly. If you are not the builder and instead are doing a case or pre-live site changes, leave this value as-is.
      • license: Do not change this value.

Theme JSON

  1. For Showcase+, the client may have opted to put one theme’s components on a different theme. For example, placing Alabaster’s quicklinks on Rosewood. Note: If all sections of the site should follow the site’s overall theme, then all these variables should be set to null.

Showcase Plus Components JSON

  1. Boolean values to include/exclude HTML, Sass, JS, and templates.json used for components. These are all set to false by default and should only be set to true if the client purchased the component.
  1. In terminal/iTerm run npm install. If you have issues building with gulp, you may additionally need to run npm run showcase-reset, and then run npm install again.

Make File Explanation

  1. Rename -make.json file to match the bank url and make sure this also matches in the package.json
  2. Open your -make.json file
    • Search for [Financial Institution] and replace it with the name of the bank
    • Update anywhere the word “showcase” is to your FI’s url
    • Update institution ID found on the Trello card
    • Update ATM default location information, found in the Web Institution Trello card. If this site is a Banno rebuild, you can go into the existing UAT site and find the default address under Content > Locations
    • Based on which theme your FI selected, open the corresponding -homepage-content.json and -styleguide-content.json and copy this into the -make.json for your homepage content. If they have marketing enabled, make sure to copy from the -marketing-homepage.json and -marketing-styleguide.json files.
    • If you have a regular Showcase, check with the designer and/or PC to see if the FI purchased a sitemap consultation.
      • If your FI is a Showcase+, OR is a regular Showcase and purchased a sitemap consultation:
      • Update categories based on sitemap provided.
      • Within the Trello card for your site, there should be a PDF sitemap.
      • Use that PDF to create the JSON for all pages listed on the sitemap by updating nav_01.mustache.
      • If your FI is a regular Showcase did not purchase a sitemap consultation:
      • Update categories - PC should normally provide you with this info if the FI did not purchase a consultation.
      • You are not responsible for subpage creation - the FI or PC will handle creation of all subpages.
      • You will notice some pages already in the -make.json, which you can leave as they are - no need to delete! If the client doesn’t use/want them, they or the PC can just delete them later.
    • In terminal/iterm, run gulp make-everything. This will make the JSON for your pages, templates, and menus.
      • If your site is Showcase+, Open custom-pages.json. Beautify and copy the content. Then, copy/paste the content below the last calculator page within the "pages": [] section of the -make.json file.
      • Open site-specific-templates.json. Beautify and copy the content. Then, copy/paste the content and paste it within the "templates": []section of the -make.json file.
      • Open menus.json. Beautify and copy everything within "menus": []. Then, copy/paste it within the "menus": []section of the -make.json file.
  3. Upload zip to UAT grunt cms_upload:uat --email=$EMAIL --password=$PASSWORD --code=authycodehere
  4. Scaffold to UAT grunt cms_site_scaffold:uat --email=$EMAIL --password=$PASSWORD --code=authycodehere
  5. Build menus via CMS if not already done (at minimum, set up the categories for your regular Showcase site.)
  6. Post to Basecamp for Design/PC Review—It should be checked by default, but make sure ‘Our team only—private to us’ is checked at the top of the page. Move the Trello card to ‘On UAT’.