Sitecore E-Commerce Services Part 2 - Product Presentation and Shopping Cart

Thursday, November 14, 2013 @ 04:38

Sitecore E-Commerce Services Part 2 – Product Presentation and Shopping Cart
By: Dusty Eves, Senior Developer 

Group Page Presentation

So now that we have a handful of products and categories let us dig into how to present them.   Like any content aggregation page process is simply to retrieve the collection and render.  However with the Product Groups pages we don't have a field of guids of the products we need to retrieve.  What we have instead is the product resolver.

The first thing to do is instantiate the ICatalogProductResolverStrategy.  Something to note in SES is that it makes heavy use of Dependency Injection, or Inversion of Control.  Don't be discouraged if you're unfamiliar with either, its simply a different pattern of object instantiation.  To retrieve the resolver strategy we first need the Product Selection Method defined in the Product Group, pass the method into the IoC resolver and viola, we pull the product items via the GetProductsCatalog method.  Once we've the Sitecore items, we just render just like any other Sitecore aggregation page.

 

Shopping Cart

Pre-Setup

If you've followed the tutorial so far there's some additional scaffolding we'll need before we can start in on the shopping cart or we'll get some confusing errors.  First of which, if your site node in the web.config doesn't have the content database defined (i.e. content=”master”) make sure to define it as such is needed for the shopping cart.  The second piece we need is in the webShop configuration.  The cart cannot process without a currency configured so we need to give it one.  Under WebShop Business Settings add a new Currency called USD.  Next under WebShop Site Settings, if you don't already have one add a General node.  In your General node point your Master Currency field to the field you created.

 

 

 

Add to Cart

So now that we have our products next is the first step of making them available for purchase.  Let us start with the ability to add items to the cart.  Like most things the wiring and presentation is up to the implementer but SES takes care of the cart management for us.  The IShoppingCartManager gives is the ability to add and remove items from the cart as well as retrieve the shopping cart contents.  The Product Code is the field by which all interactions with the shopping cart are keyed.  So the “Add To Cart” button is a simple matter of retrieving the IShoppingCartManager from the IoC Resolver and tying it into our cart page.


Display Cart and Cart Management

So now that we have items in the cart what do we do for an actual shopping cart screen.  For SES the shopping cart can mostly be treated like any other page.  To lay the scaffolding create a checkout folder and and shopping cart page (no specific E-Commerce template is required) underneath your site.  Then
create a ShoppingCart sublayout.  This is where our render code will go.

 

 

 
Once we have the items setup we just need to add the rendering to the Shopping Cart sublayouts.  The IShoppingCartManager takes care of adding a removing items from the cart.  To get the contents of the cart we the the ShoppingCart instance which we pull from the Sitecore.Ecommere.Context.   It gives us the cart contents as an IEnumerable of ShoppingCartLine.   ShoppingCartLine gives us all the product fields as well as the quantity, price and line item totals.  To render the cart contents, all we need to do is retrieve them from the ecommerce context and bind them to a repeater.  Similarly, to remove line items we bind a button with the product code in the command argument, and pas that into the remove method of the IShoppingCartManager.