How to develop and customize a shopping cart based on ASP.NET with nopCommerce

An essential component of the online store is the shopping cart. It might also be among the hardest components to create for an eCommerce website. Customers can choose things, evaluate their choices, edit them, add more items if necessary, and then buy the items using a shopping cart. During checkout, the program normally produces an order total that takes into account postage, packing, and handling fees as well as taxes, if applicable.

In the case of nopCommerce, a shopping cart, as well as a wishlist is built-in. If enabled in the admin area, each product can be put into the shopping cart or wishlist. The nopCommerce shopping cart and wishlist can be disabled, the access control list page can be used to configure it. Simply look for the "Enable shopping cart" and "Enable wishlist" permissions for the required customer profiles, and uncheck them.

To learn more about shopping cart functionality, as well as how other components of nopCommerce work, we recommend taking the nopCommerce training course, which has been composed by the core developers team.

Shopping cart structure of the .NET eCommerce platform

To start with, open and look at the shopping cart page. At first, it has a summary view of the order with selected checkout attributes, price, quantity (which can be adjusted), the total for each added item, and a remove button.

Next, a customer can add estimated shipping, as well as select checkout attributes, and enter discount codes and gift cards. Finally, an order is calculated and it is offered to proceed to checkout, where customers enter billing and shipping information and pay.

By the way, the shopping cart related action methods are all placed in the ShoppingCartController from Nop.Web. These methods allow a customer to interact with all page components.

Let’s break down all the main components of the nopCommerce shopping cart functionality. It consists of checkout attributes, discount, and gift card boxes, the totals step, and the checkout process. It is significant to consider a database structure as well.

Checkout attributes

Starting with checkout attributes, they are displayed on the shopping cart page and provide the opportunity to offer more services to customers, i.e. gift wrapping, before placing the order.

Checkout attributes have their own service classes in the Nop.Services.Orders folder and are stored as XML in the CheckoutAttributesXml column of the Order table. They all have almost the same functionality as product attributes.

CheckoutAttributeService class

CheckoutAttributesXml column

Discount box

The next feature of the shopping cart is the discount box. It allows a customer to enter a coupon code to apply a discount to order totals or shipping. The discount feature has its own folder that is located in the Nop.Services section. Any rules and logic of a discount implementation process can be adjusted there.

Talking about the database, the discounts themselves are stored in the Discount table. There are also a few mapping tables that store how the discounts are mapped to products, manufacturers, and categories. The DiscountRequirement table stores the discount requirements determining in which case a discount should be applied. The last table is the DiscountUsageHistory table which stores information about the discounts applied to orders.

Gift card box

The other shopping cart component is the gift card box. A customer should enter the code here to apply a gift card. A gift card is a special type of product. You can mark a product as a gift card on the product details page and sell gift cards that customers can use this way. After customers complete purchases with the gift card products, you can then search and view the list of all the purchased gift cards here.

In case you need to configure gift card functionality, you may use the GiftCardService class, which is located in the Nop.Service.Orders folder.

Considering the database, the gift cards that are manually created or bought as products are stored in the GiftCard table. Once a gift card is used in the order, the appropriate record is inserted into the GiftCardUsageHistory table of the database.

A customer can apply both a discount and a gift card on the shopping cart page.

Totals

The last interesting block on the shopping cart page is the shopping cart totals. They are calculated based on the shopping cart items, applied discounts and taxes, chosen shipping, and payment methods. A total consists of a few rows:

1. Sub-Total. The subtotal is the total of all items and quantities in the shopping cart, including applied item promotions;
2. Shipping is the shipping cost calculated based on the customer’s shipping address;
3. Then, the applied taxes are displayed. nopCommerce provides tax plugins that allow to manually or automatically apply taxes to products;
4. The payment method additional fee row is self-descriptive. It can be set up on the payment method configuration page;
5. Then, it displays the applied discounts and gift cards;
6. The reward points if applied;
7. And finally comes the order total.

The order totals are calculated in the OrderTotalCalculationService from Nop.Services.Orders. As you can see, it contains such methods as GetShoppingCartShippingTotal, GetTaxTotal, the methods related to reward points, discounts, and others. In its turn, the payment method additional fee is calculated in the payment service of Nop.Services.Payments.

Checkout process

For a more clear view of the whole buying experience, It is important to consider the checkout process. Checkout starts when the customer leaves the shopping cart to proceed to payment and shipping.

nopCommerce provides two types of checkout process design. They are one-page checkout, which is set by default, and checkout with multiple pages. One-page checkout allows a customer to go through the whole checkout process using a single page. You can set this up on the Order settings page. By the way, you can temporarily disable checkout for your customers if needed in the same Checkout section.

A customer goes through the following steps during the checkout process:

1. A customer needs to enter a billing address;
2. Then shipping address;
3. Then, they need to choose a shipping method;
4. And a payment method;
5. Then, we show the required payment information to the customer;
6. And finally, it’s the confirmation step where the customer confirms the order.

There are more conditions that impact the number of checkout steps. They can be adjusted in the Order settings.

All the action methods related to the checkout process are placed in the CheckoutController. As you can see, this controller has separate regions: for the multistep checkout and one-page checkout. Multistep checkout methods return views, while one-page checkout methods return JSON as a result. There is no separate service that manages the checkout process. All work is done in the controller.

Database operation of the ASP.NET shopping cart

In nopCommerce, a shopping cart and a wishlist both have the same structure. For more understanding, it is better to look at the database. In the ShoppingCartItem table, both shopping cart and wishlist items are stored together. However, they are distinguished by ShoppingCartTypeId.

Moreover, looking at the “Domain – Orders” folder, there could be seen ShoppingCartType enumeration that provides two types: ShoppingCart and Wishlist with appropriate numeric values. These are the values that are stored in the ShoppingCartTypeId column in the database. This is the only difference between a shopping cart and a wishlist in the database terms;

The other fields represent the customer identifier as a foreign key. It is an ID of a customer that has added this item to the shopping cart. Also, there is ProductId that identifies which product has been added to the cart, which is followed by StoreId representing the store of that product. Further, ShoppingCartTypeId that we already discussed determines whether the customer has added this item to the shopping cart or wishlist.

Then comes the AttributesXml column. This column stores the product configuration added to the cart with all attributes chosen by a customer. Here is the process of how this XML works:

1. open any product page and choose two attributes of this product;
2. add the product to the cart;
3. select Top 1000 rows of ShoppingCartItem;
4. click on a cell under AttributesXML;
5. you will see the first attribute that is with ID 9 and a value of 21, as well as the second with ID 10 and a value of 25.

This is the way how chosen product attributes are stored. To parse such XMLs, there is a special class named ProductAttributeParser located in the Nop.Services Catalog folder. This class manipulates product attribute XMLs. For example, using the ParseProductAttributes method, it creates an XML based on the chosen attributes when a customer adds the product to the cart.

As you can see, this method accepts a form from the product details page. It is also used to recalculate the product price when the attribute values are changed on the product details page (GetUnitPriceAsync method). So, in this class, you can find the methods operating with product attribute XML records. It also manipulates product attribute combinations, rental dates, and gift card attributes.

Another important column is the CustomerEnteredPrice. It is used when the “Customer enters price” option is available for a certain product. The Quantity column is quite self-descriptive, as it shows chosen quantity of a product. The RentalStartDate and RentalEndDate columns are used when the product type is rental. Finally, CreatedOn and UpdatedOn dates are self-explanatory.

Conclusion

The nopCommerce shopping cart is a structured and flexible component. Based on information from this article, you can effectively create and configure a website with an advanced shopping cart and a wishlist using the nopCommerce platform.

There is no need to build everything from scratch, so it allows you to focus only on the specific requirements of your eCommerce business. One of the reasons for it is that the nopCommerce shopping cart has the most used features, like shipping estimation, checkout attributes, and a gift card and discount implementation.

Finally, the database structure enables you to update what kind of shopping cart data is required to be stored and managed. You can also find these details in our documentation under the Default database schema section.