Using a shopping cart on MVC sites

In the Kentico.Ecommerceintegration package, you can find supporting models and services to build a shopping cart in your on-line store. Visitors can put products into shopping carts and after their browsing through your store, they can continue with the checkout process to create an order and become a customer.

Creating a shopping cart on MVC websites

When a visitor opens your website, you need to create a shopping cart instance and assign the instance to the customer. To create a shopping cart, use the Kentico.Ecommerce integration package.

Open your MVC project in Visual Studio.
Create a controller for the shopping cart.
- In all documentation examples regarding the checkout process, the CheckoutController is shared by all checkout process steps.
```
  public class CheckoutController : Controller
  {
  }


  
```

Initialize the ShoppingService, PricingService, KenticoPaymentMethodRepository, KenticoCustomerAddressRepository, and KenticoShippingOptionRepository classes that connects to the shopping cart in Kentico.

We recommend using a dependency injection container to initialize service instances. When configuring the lifetime scope for the services and repositories, create a separate instance for each request.




         private readonly IShoppingService shoppingService;
         private readonly IPricingService pricingService;
         private readonly IPaymentMethodRepository paymentRepository;
         private readonly ICustomerAddressRepository addressRepository;
         private readonly IShippingOptionRepository shippingOptionRepository;

         /// <summary>
         /// Constructor.
         /// You can use a dependency injection container to initialize the services and repositories.
         /// </summary>
         public CheckoutController()
         {
             shoppingService = new ShoppingService();
             pricingService = new PricingService();
             paymentRepository = new KenticoPaymentMethodRepository();
             addressRepository = new KenticoCustomerAddressRepository();
             shippingOptionRepository = new KenticoShippingOptionRepository();
         }

After initializing the services and repositories, your MVC application can use the shopping cart and other steps of the checkout process from Kentico. The shopping cart processes actions that customers require when using your on-line store. Namely, customers can expect the following actions that you need to implement:

Display the shopping cart content
Add a product to the shopping cart
Update an item (a product) already in the shopping cart
Remove an item (a product) from the shopping cart
Continue with the checkout process to make an order

The source code examples below often use classes from the Kentico.Ecommerce namespace from the Kentico.Ecommerce integration package.

Tip: To view the full code of a functional example directly in Visual Studio, download the Kentico MVC solution from GitHub and inspect the LearningKit or DancingGoat projects.

Displaying the shopping cart

To the checkout controller, add a method that retrieves the current visitor’s shopping cart and displays it.




        /// <summary>
        /// Displays the current site's shopping cart.
        /// </summary>
        public ActionResult ShoppingCart()
        {
            // Initializes the shopping cart model
            ShoppingCartViewModel model = new ShoppingCartViewModel();

            // Gets the current user's shopping cart
            model.Cart = shoppingService.GetCurrentShoppingCart();
            model.RemainingAmountForFreeShipping = pricingService.CalculateRemainingAmountForFreeShipping(model.Cart);

            // Displays the shopping cart
            return View(model);
        }

If you do not want to use coupon codes, you do not need to create a model for your shopping cart. You can just display the shopping cart and adjust the view accordingly:




return View(cart);

In the shopping cart’s view, you can then use the shopping cart’s properties to display the content of the shopping cart. For example:




@if (Model.Cart.IsEmpty)
{
    <span>Your shopping cart is empty.</span>
}
else
{
    <ul>
        @* Loops through all shopping cart items *@
        @foreach (Kentico.Ecommerce.ShoppingCartItem cartItem in Model.Items)
        {
            @* Displays the shopping cart items' properties *@
            <li>
                @cartItem.Units&times; @cartItem.Name ... @currency.FormatPrice(cartItem.Subtotal)

                @using (Html.BeginForm("RemoveItem", "Checkout", FormMethod.Post))
                {
                    @Html.Hidden("ItemId", cartItem.ID)
                    <input type="submit" value="Remove" />
                }
            </li>
        }
    </ul>
}

Add a button to enable the visitors to continue with the checkout process.




    @* The continue button *@
    @Html.ActionLink("Continue to the customer details step", "DeliveryDetails")

The example code targets at the customer details step.

Adding a product to the shopping cart

To the checkout controller, add a POST method that adds a product to the shopping cart. For example, the system can trigger the method after a visitor clicks the Add to cart button.




        /// <summary>
        /// Adds products to the current site's shopping cart.
        /// </summary>
        /// <param name="itemSkuId">ID of the added product (its SKU object).</param>
        /// <param name="itemUnits">Number of added units.</param>
        [HttpPost]
        public ActionResult AddItem(int itemSkuId, int itemUnits)
        {
            // Gets the current user's shopping cart
            ShoppingCart cart = shoppingService.GetCurrentShoppingCart();

            // Adds a specified number of units of a specified product
            cart.AddItem(itemSkuId, itemUnits);

            // Displays the shopping cart
            return RedirectToAction("ShoppingCart");
        }

Updating a shopping cart item

To the checkout controller, add a POST method that changes the number of units of a shopping cart item. For example, the system can trigger the method after a visitor clicks the Update button in the shopping cart.




        /// <summary>
        /// Updates number of units of shopping cart items in the current site's shopping cart.
        /// </summary>
        /// <param name="itemID">ID of the updated shopping cart item.</param>
        /// <param name="itemUnits">Result number of units of the shopping cart item.</param>
        [HttpPost]
        public ActionResult UpdateItem(int itemID, int itemUnits)
        {
            // Gets the current user's shopping cart
            ShoppingCart cart = shoppingService.GetCurrentShoppingCart();

            // Updates a specified product with a specified number of units
            cart.UpdateQuantity(itemID, itemUnits);

            // Displays the shopping cart
            return RedirectToAction("ShoppingCart");
        }

Removing a shopping cart item

To the checkout controller, add a POST method that removes a shopping cart item from the shopping cart. For example, the system can trigger the method after a visitor clicks the Remove button in the shopping cart.




        /// <summary>
        /// Removes a shopping cart item from the current site's shopping cart.
        /// </summary>
        /// <param name="itemID">ID of the removed shopping cart item.</param>
        [HttpPost]
        public ActionResult RemoveItem(int itemID)
        {
            // Gets the current user's shopping cart
            ShoppingCart cart = shoppingService.GetCurrentShoppingCart();

            // Removes a specified product from the shopping cart
            cart.RemoveItem(itemID);

            // Displays the shopping cart
            return RedirectToAction("ShoppingCart");
        }

Checking out

To the checkout controller, add a method that enables the visitor to continue with the checkout process to the next step to make an order. You need to validate the shopping cart first.

The next step is usually a step where the visitor/customer types their details, see Customer details step in MVC checkout.




        /// <summary>
        /// Validates the shopping cart and proceeds to the next checkout step with customer details.
        /// </summary>
        [HttpPost]
        [ActionName("ShoppingCart")]
        public ActionResult ShoppingCartCheckout()
        {
            // Gets the current user's shopping cart
            ShoppingCart cart = shoppingService.GetCurrentShoppingCart();

            // Validates the shopping cart
            ShoppingCartCheckResult checkResult = cart.ValidateContent();

            // If the validation is successful, redirects to the next step of the checkout process
            if (!checkResult.CheckFailed)
            {
                return RedirectToAction("DeliveryDetails");
            }

            // If the validation fails, redirects back to shopping cart
            return RedirectToAction("ShoppingCart");
        }