Click Here to view this article as a PDF.

Author: Kristenson, Joel

Last Updated: 2017-02-09

Overview

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.

Outline

#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.

*If you need to make changes to your current products or if you need to get the html/javascript code for your online shopping cart you can click on any of the blue hyperlinks to open that record.

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:

- Description

- Code

- 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].

Once the image is uploaded, click [Save].  Navigate back to the HTML tab, and click the [Step 1) Copy JavaScript] button.

You’ll get a popup notification stating that you only need to copy the JavaScript code one time, click [OK] to proceed.

Paste the JavaScript code into a program like Notepad++ (PC) or TextEdit (MAC) to use for future use when you embed it into your website (covered in the next section).

Click the [Step 2) Copy Html] button which will copy the html specific to the product you’re working with.  Unlike the JavaScript code you’ll need to copy html the code each time that’s specific to the product for the shopping cart to function correctly.

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 [Cancel] on the product screen to close out of the window once you’re finished configuring your product and finished saving the html & JavaScript code.

Click [Search] to refresh the list of products in your database and the new product will display.  My example is below.

Repeat these steps until all products are created, saved, and you have the code saved for future use.  Remember that you need to copy the html code for each product into a program like Notepad++ for future use but you only need to copy and save the JavaScript code one time.  Save the file as an .html document once you’re finished which will be used in section #2 of this article.

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)

Open the .html file in a program such as Notepad++ (or another web development I.D.E.) that you saved in the previous steps that has the html and JavaScript code you’ll need to embed on your website.  In my example it was called Example Trail Blazer Shopping Cart.html.

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

- Font-styles

- 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)

Example screenshot:

 

To create an [Add to Cart] button you have many options, here are just a few examples to get you started:

- Use the html <button> tag, this tutorial on W3 schools shows how

-          Use a Bootstrap button, this tutorial on W3 schools shows how

-          Use the free service Da Button Factory to design your own button and receive the source code needed to add to your shopping cart

-          Use 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.

Related Resources

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

  Phone:  1-866-909-8700

   Email:  support@trailblz.com

   Facebook: https://www.facebook.com/pages/Trail-Blazer-Software/64872951180

   Twitter: https://twitter.com/trailblazersoft

* 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.