I just received my certification as a NationBuilder Expert and I wanted to give something to the NationBuilder community to celebrate :). As I thought about something I could do, I remembered that I have a customer that wants to sell products in their nation. So, I will share that solution. I warn you, it is not for the technically challenged or the faint of heart.

At the moment there isn’t an easy way to sell products and services on NationBuilder websites. So, here is how I approached this problem, but the instructions may not be applicable in the future once NationBuilder makes changes to the system. Please note that charging tax and shipping is an issue with this approach, so you may want to rethink your usage of it. If you need help setting this up, leave a comment or find me in the NationBuilder Expert directory.

Overview

We will use the following page types to mimic a shopping cart experience:

• Basic
  • Product Catalog with links to various product pages
  • Thank You page after the purchase is made that explains shipping, returns, customer service…etc.
• Event
  • There will be an Event page for each product or service to be sold that includes detailed information about the product and a “Add to Cart” button.
• Donation
  • Shopping Cart and the payment workflow to allow users to purchase the products they placed in the shopping cart.

Initial Configuration

We want to be able to track purchases and alert certain people about purchases so we have to configure certain items to allow this.

Tracking Code

Create a tracking code for purchases made through your shop (e.g. products).

Contact Type

Create a new Contact Type (e.g.“Purchase”). This will be used to create a custom way to alert someone to trigger product shipping or service provisioning.

Thank You Page

Create a Thank You page as a Basic Page. You can make this an empty page for now. We just need it ready when we want to point the Shopping Cart to it.

Shopping Cart

Create a new Donation page. Set the page for “one time payment” unless you want to allow people to make installment payments.

Note: Installment payments may be hard to track, but I haven’t tried. If you offer installment payments and you only ship once the final payment is made, you are effectively offering layaway. If you ship immediately and allow your customer to make installments, you are basically offering them credit. In both instances there is a lot to think about and track and I am not sure if NationBuilder in its current form would help you do either effectively.

Options

• You should allow multiple donations and any amount would be fine as this will be overridden when someone selects a product for sale.
• Select the tracking code you created earlier.
• You could set a goal if you are selling items to reach some goal that you want publicly viewable. I tag donors as “shopper”, but you can call it what you want. This allows me to target people that have made purchases before.
• I also tag donors as needing follow up so I can insure their product or service is processed and shipped or provisioned by someone.
• Set the follow up type to the Contact Type you setup earlier. Set “Follow up by” to today to speed processing.
• If you are actually selling a membership then you should select the membership and set the expiration date.
• I also turn off all options on the page to limit distractions from purchase. No comments, streams…etc.
• You should also edit your autoresponse template to change the wording to reflect the word “purchase” instead of “donation” or “contribution” (note: don’t change “donation” that appears between {{ }} brackets as those need to stay the same for the page to work).
• You may want to update the page template to also reflect purchase instead of donation. While you are in the template you may want to add a continue shopping button that points back to your Product Catalog page.

The rest of the options are up to you. This is NationBuilder so there are many more options you can set, but this should get you started with an OK shopping cart page.

Product Page

Next, create an Event page for each production you want to sell.

Event Settings

Basic

• If you have a set amount of inventory, you can set “Maximum Occupancy” to limit the number of purchases that can be made. You will have to adjust the template to change the message “Sorry, this event is sold out.” to something like Sorry, this item is sold out.”
• Check “Sell Tickets”.
• Set “Redirect to this page to purchase tickets” to the Shopping Cart (Donation) page created earlier.
• Set “Donation tracking code” to the tracking code create earlier.
• Nothing else should be checked besides “Don’t list this event on the website” so your product doesn’t show up in your event calendar.

Intro

• Add a detailed description of the product and maybe a picture.

Tickets

• Add the name and pricing for your product. Example, if you were selling a T-Shirt you could offer multiple pricing (or multiple ticket levels) based on size of the T-Shirt. I would leave “Description” blank.

View Cart

In the product catalog and product page templates, you can add a link to your shopping cart page. Alternatively, this can be added to the website template or you can add the page to the navigation. There should be a way for your visitors to get back to the shopping cart page.

<div><a href="/shopping_cart">View Cart</a>

Of course you should add a class so you can add some flair. If you add the link to the individual product page templates, as you create new product pages you may want to clone them so you don’t have to manually add the link.

Website Template

There is a message that displays when a product is added to the cart. It references tickets so I also replace that message. This is the message, “Thanks for coming! Now please complete your order, your tickets have been automatically added to the page below.”

I use a technique discussed on this post, . Basically, in your _flash.html template you override the default message that mentions tickets to one that talks about items (more generic).

Replace

{{ flash.message }}

with

{{ flash.message | replace: 'Thanks for coming! ', '' | replace: 'Now please complete your order, your tickets have been automatically added to the page below.','Thank you. Your items have been added.' }}

I had to do the nasty double replace for some reason or it wouldn’t work.

Demo

I can’t give a public demo, because I’m lazy, but below are some screen shots of an example I worked through as I wrote this post. You will have to pretend that I took the time to properly layout and style the pages :).

  Product Catalog

Imagine product pictures and descriptions with a view details or buy now buttons instead of just text links.

 

Product Page

Imagination is needed here too.

 

Shopping Cart

Imagine the items laid out in a table and other niceties. Again, charging tax and shipping is an issue so you may want to rethink your usage of this. This could also use a subtotal (a little JavaScript magic may be in order). Once user is ready for purchase, they would follow the normal workflow for donation payments.

Conclusion

This is not a robust system for product and service sales, but it works. There is a lot to optimize and make better if sales is your primary on your site, you need another solution. You can’t use it to manage a large catalog of products as maintaining the products and the associated pages would be a nightmare. Every time you need to add, edit or remove a group of products you have to do it on each individual Product (Event) page. Yet, it gives you a way to offer a few products for sale on your Nation until the new feature for product sales is ready on NationBuilder.