Click Here to view this article as a PDF.
Author: Kristenson, Joel
Last Updated: 2017-02-09
This article walks through the steps to get a shopping cart integrated with your website. It includes steps to setup new products, generating the code needed to integrate in your website, and how to track sale orders as they come in.
It’s a good idea to have someone on staff with a good understanding of web (html/css/js) development to complete this task effectively. You can also contact our live support team for help (1-866-909-8700).
Here’s an example of a finished shopping cart using the Trail Blazer features covered in this article (you can also view a live interactive demo by navigating to this page: http://www.trailblz.com/kb/images/kb0063/Example Trail Blazer Shopping Cart.html):
Tip: Many customers use the event system to sell products for their organization as it’s a bit easier to setup and utilize and provides many configuration options. Click here to read articles on how to use the event system and click here to watch videos on the same. The major difference in these systems is that the event system will lead the shopper away from your website to the Trail Blazer domain where the shopping cart (covered in this KB) will keep them on your site.
#1 Steps to Create/Update Products
#2 How to Build your Shopping Cart, Integrate it with your Website (Example Code Snippets Included)
#3 Test the Checkout Process & How to Track Sale Orders/Inventory as Purchases Occur
#4 Related Resources
#1 – Steps to Create/Update Products
Navigate to the Products List by following Application Menu > Contacts (Voters/Donors) > Product Sales > Products.
Click [Search] to populate the current list of products in your database. In my example I had 14.
To begin creating a new product click the [+ New] button on the Search Tool Strip.
Fill in all the details for your new product. The full list of options that you have include:
- Unit Price
- Unit Cost
- Handling Fee
- Quantity On Hand
- Max Per Order
- Item is considered shipped when ordered – no further fulfillment is required
- Item has free shipping
- Item is tax exempt
My example is below for a baseball camp.
*If you want to add an image for the product, navigate to the Image tab, and click the [Get Image File] button.
Locate the image file on your machine, select it, and click [Open].
Click [OK] when you get the popup notification.
Paste the product html code into a program like Notepad++ or TextEdit to use in the future when embedding the code into your website.
Click [Search] to refresh the list of products in your database and the new product will display. My example is below.
In my example I created 3 new products in total as shown below.
The next section will show you how to take the product code you saved, embed it on your site. The final section walks through the steps to test your shopping cart and track the orders as they come in.
#2 – How to Build your Shopping Cart & Integrate it with your Website (Example Code Snippets Included)
Finish adding code to style the page prior to adding it to your website. Some typical items that will need to get added:
- Images (especially for the product thumbnails & Add To Cart buttons)
- Links (especially all of the ones that say ReplaceThisDomain which is automatically generated in your database for things like redirect pages)
- Colors to match your color scheme
- Resizing of images/layout (making the site mobile-friendly is always a good plan in this day-and-age)
- Database Name Sources
- Add the dollar amount next to the items
- URL’s for things like the post-checkout redirect page (thank-you page)
You’ll want to make sure you create
an Image Button to use for the [Add to Cart] section of the shopping
cart. Here’s an example from my finished
The code you’ll need to swap out
type="hidden" name="fullurl" /> <input
size="3" type="text" /> <input src="http://www.trailblz.info/DemoNonprofit_Joel/doc/NwAxADQANgAzADYALQAxADAAMQA3ADkA0/2017-02-06-add-to-cart-button-for-pandamonium-site.png"
alt="Add To Cart" name="_AddToCart" />
To create an [Add to Cart] button you have many options, here are just a few examples to get you started:
the html <button> tag, this tutorial on W3 schools
a Bootstrap button, this tutorial
on W3 schools shows how
the free service Da Button Factory
to design your own button and
receive the source code needed to add to your shopping cart
a program like MS Paint to create an image (jpeg, png, etc.) of a button and
use that as the source in your
shopping cart code
My finished example can be downloaded by following this link and using the source code. This is a good starting point but will require thorough testing to make sure everything is linked properly to your own database.
Paste the finished code into your website and verify everything is wired up properly. The next section walks through a test checkout process, displays the emails that get sent to the buyer (and database admins), and shows how to track the data in Trail Blazer.
#3 – Test the Checkout Process & How to Track Sale Orders/Inventory as Purchases Occur
Open your finished (or beta) shopping cart page on your website. In my example it was located at http://www.trailblz.com/kb/images/kb0063/Example%20Trail%20Blazer%20Shopping%20Cart.html
Add some items to your shopping cart by clicking your [Add to Cart] button. You can also change the quantity value to verify that is working properly.
Once you’ve verified that all the buttons work for adding items to the shopping cart, click the [Proceed to Checkout] button.
Select the Register here radio button, fill out the form, and click the [Click Here to Register] button.
Enter your credit card information (or use a fake credit card number if you’re in test mode) and then click the [Process and Check Out] button.
You’ll be redirected to the thank you page you configured in the html code, and you’ll receive a confirmation email receipt that looks like the example below.
In the database you can view this information as it’s collected, in many different ways:
- Within the contact’s record card
- In the Sales Orders list
- In the Sales Order Lines list
Img 1 of 2 – Viewing Sales Orders
Img 2 of 2 – Viewing Sale Order Lines
Checkout the related resources below for other articles and videos related to this topic.
Article: Purchase Orders – Manually Enter an Order for Tickets, Products, or Memberships from within an Event, and Record the Related Contribution Record
Article: How to Upload Documents to your System Gallery such as PDF’s, Spreadsheets, Audio Clips, Image Files, Etc.
Article: How to Create an Event with Tickets and/or Merchandise – 2013 Upgrade
Article: How to Delete an Event Purchase Order and the Linked Donation Record (Typically for Refunds or if a Mistake Occurred or if Data needs to be Moved)
Article: How to Duplicate an Event – Save Time by Not Re-Creating Everything from Scratch
Article: Events 2014 – Part I
Article: Events 2014 – Part II
Article: Events 2013 | How to Create an Event with Tickets and Merchandise
Video: Events – pay for an event online
Video: Events – Remove Person from Event
Video: Events 2013
Download: Example HTML Shopping Cart File (used for this kb)
Interactive Demo Page: Example Trail Blazer Shopping Cart
Trail Blazer Live Support
* As a policy we require that you have taken our intro training class before calling or emailing our live support team.
Click here to view our calendar for upcoming classes and events. Feel free to sign up other members on your team for the same training.
* After registering you’ll receive a confirmation email with the instructions for how to log into the GoToMeeting session where we host our live interactive trainings.
* This service is included in your contract.