You are here

Case Statements: a better way to organize your NationBuilder sidebars

Submitted by Kate on June 15, 2011 - 2:08pm

Have you played with NationBuilder yet? It's lots of fun and really exciting for everyone who does online outreach, fundraising, etc. We've been doing a lot of great things with Nation Builder, and learning a lot on the way.

This blog post updates our previous blog post about customizing sidebars with Liquid markup language.

We're new to Liquid, so we thought we would try some cool logic to have more than one sidebar. Since we're most familiar with PHP, we used if/else statements. This is fine if you plan on having the main sidebar and one variation, but the PHP-style elseif statement we were counting on for multiple variations does not work in Liquid. But never fear, because we've got a great solution to have a bunch of custom sidebars. Get your text editors ready.

A case statement is really simple, and a lot like the if/elseif/else statements used in PHP. Here's a simple example for isolating pages by page ID:

  1. {% case %}
  2. {% when 12 %}
  3.  <div>this is my sidebar for page 12!</div>
  4. {% when 24 %}
  5.  <div>this is my sidebar for page 24!</div>
  6. {% else %}
  7.  <div>this is my sidebar for every other page!</div>
  8. {% endcase %}

I'm sure your sidebars are much better than that. The basic structure of the sidebars is the same: the _columns_2 sidebar is for logged out users, and the supporter_nav is for logged in users; you can differentiate between supporters by role to give admins different menus from interns, etc.; and you can still use if/else statements (even inside of case statements) for when you just need two variations of something.

Here is a helpful resource on case statements and other Liquid code

Hope that helps! As always, feel free to send us your feedback or ask questions!

UPDATE: To keep things nice and neat, we've found using include statements really helpful. Here's how to do it:

  1. Put your custom sidebar code in a new file by going to Pages > Theme > New File. Make sure to name your file with an underscore ("_yourfilename").
  2. Make a case in your NB sidebar file (either _columns_2 or _supporter_nav) like above.
  3. After your case, type {% include "yourfilename" %}, with no underscore.
  4. Write yourself a note or comment to make sure you know where everything is, and you're done!
  5. Related Posts: