Creating a simple shopping cart in SharePoint

Introduction

The beauty of SharePoint as a platform for business solutions is its flexibility. You can use it to create any type of solution that you don't currently have dedicated software for.

With the right type of add-on, such as our Ultimate Forms, the sky is the limit! Our customers have been building a wide variety of solutions, from simple tracking lists, to full-fledged project management solutions. To have some idea of what is possible, take a look at our Solutions gallery. All the business solutions there are free for you to install with a click!

Shopping Cart

I was asked if it was possible to create a shopping cart mechanism in SharePoint using our product. Well, after some thinking I sat down and built it and I want to show you how something like that can be easily accomplished.

Our shopping cart is based on a blank site and offers the following functionality:

• Manage product categories, products and price lists
• Create shopping carts and add multiple products to them
• Automatically calculate tax and totals
• Print out the cart or create a PDF document.

We will be using the following component of Ultimate Forms:

• Forms - will allow us to control permissions of certain columns, based on the shopping cart's lifecycle
• Associated Items column - will allow us to create relationships between the cart and its content
• Connected Lookup column - will allow us to create advanced lookup columns, with cascading functionality
• Print - will allow us to print the shopping cart content or convert it into PDF
• Item ID - will allow us to generate custom IDs (such as cart ID)
• Color Choice column - will allow us color-code cart based on status

I used SharePoint Online (Microsoft 365), but you can also use SharePoint on premises.

How to build

Lists

We will start with a blank site template and create the following lists:

• Product Categories (custom list) - contains the product categories, no changes are required to this list.
• Products (custom list) - contains the product names. Add a lookup field pointing to Product Categories. You can use the built-in lookup field or Connected Lookup. Connected Lookup will also allow you to add new categories on-the-fly while adding new products, which is very convenient. This column cannot be blank (required).
• Pricelist (custom list) - contains the product prices. Add the following columns to the list:
• Category - lookup to Product Categories. Can be a built-in lookup column or a Connected Lookup. Required.
• Product - Connected Lookup pointing to Products with Category being the parent column. Selecting a category filters the list of products. Required.
• Price - single line of text, required. In the simple scenario each product will have just one price, but you can also extend the site to have multiple prices (for example, temporary discounts). We will convert the column to Currency once we are done setting up all the lists, as we won't be able to use it in lookups unless it is a single line of text.
• Title - the Title column is already present, but we don't really need it. To make it uneditable, add an item ID pattern "[Category] - [Product]" for the column in Item ID Settings and select Prevent manual editing. That will fill the column in automatically with the selected product category and product name without the column having to appear on the data entry forms.

• Items (custom list) - contains the shopping cart line items. To enable a multiple-to-single relationship with the shopping carts, we need to replace the default content type "Item" with our custom content type "Associated Item". To do so:
  • Go to List Settings
  • Go to Advanced Settings
  • Enable content type management (first option at the top) and save
  • You should now see the content type listing, it should only contain Item.
  • Click to add an existing content type and select Associated Item under Infowise. Save.
  • Click on Item and delete this content type
  • You can now disable content type management

Add the following columns to the list:

• Category - lookup to Product Categories list. Required.
• Product - Connected Field pointing to Products with Category being the parent column. Required.
• Price -  Connected Field pointing to Pricelists with Category being the parent column. Required.
• List Price - single line of text. We need to copy the price value from the lookup column into a currency column to be able to use the value in calculations. We will convert this column to be Currency once we are done setting up the list.
• Qty - number, required.
• Line Total - calculated column, [List Price] * [Qty]. We will format this column as currency.
• Create an item ID to fill in the List Price column using the Price column value. Select Prevent manual editing to hide the column from data entry forms.
• Shopping Carts (custom list) - contains the actual shopping carts. You should limit the user to only view their own items in the list settings. Add the following columns to the list:
• Title (already exists) - create an item ID to fill in this column with an ID pattern of your liking. I used "SP-$Year([Created])-[#]", which will produce values such as "SP-2012-2", but you can do whatever you like. Prevent the column from being manually edited. Rename the column to "Cart #".
• Bill to - multiple lines of text. Billing address.
• Ship to - multiple lines of text. Shipping address.
• Products - Associated Items. The column will show the related items from Items list. You can leave the default settings intact.
• Subtotal - Associated Items Summary. Calculate the sum of Line Total values of the Products column.
• Tax - number as percentage. Use the default value according to your local laws. You can also skip this column if tax is not applicable.
• Total - calculated column. Use the formula [Subtotal]+[Subtotal]*[Tax].
• Status - Color Choice column. Enter the shopping cart status values such as Open, Processing and Shipped. You can also use the regular choice field if you don't need the extended color-coding capability.

We are done creating all the lists. This would be a good time to convert some of the field from single line of text to Currency, as mentioned above.

We can also add tabs to Shopping Cart list to make the data entry easier. Also, you should set column permissions of the Status column to prevent data entry in New form. We will be using the default value there at this point, no user input is required.

This is how our Shopping Carts list looks like:

Print

Also create a print template for the Shopping Cart list to make the print-out look professiona. Add your logo, contact info and maybe some terms and conditions. You can use the Simple mode and just select the columns you want to be displayed. The columns will be just stacked one on top of the other, as shown below.

We can also use the Advanced mode and have full control over the layout of the print template.

We are done. Fill in Product Categories, Products and Pricelist lists and your users can start shopping!

Summary

With SharePoint and Ultimate Forms it's easy and fast to create a simple shopping cart solution based entirely on SharePoint lists. The solution includes the sophisticated smart forms, repeating sections and customizable print templates with PDF conversion. It's just one example of the flexibility of Ultimate Forms!