Favorite Lists

A favorite list is a collection of products explicitly saved by a user or a group of users – typically to save a product for a later purchase or as a publish wish list.

Favorite lists can be created and managed from both frontend – by interacting with either the Customer Center app or the Customer Experience Center – Favorites app – or from the backend using the Favorite Lists node (Figure 1.1).

Figure 1.1 The Favorite List node

To create a favorite list from the backend:

  • Navigate to either Favorites for users or Favorites for groups
  • Click Add in the toolbar
  • Enter a Name and select a user/user group this list should be active for

If the favorite list is for a single user, it may be marked as the Default favorite list – this means that tags/commands which add or remove products from a favorite list will target this list by default, unless a different favorite list ID is specified.

Likewise, products may be added to a favorite list from the backend:

  • Navigate to either Favorites for users or Favorites for groups and open the favorite list
  • Click Add product in the toolbar and select one or more products – or Add by SKU to enter a list of ProductNumbers or ProductIDs
  • Click Save and close

In most cases, however, you want to make it possible for your registered users to work with favorite lists by themselves from frontend.

In most cases you want to empower the user to work with their favorite lists by themselves from frontend. How you approach this depends on the type of design a website has.

  • In TemplateTags-based designs you can interact with the Customer Center app using a series of tags – either posting to it from a product catalog app or creating, editing or removing lists from the Customer Center Favorites tab.
  • In ViewModel-based designs you can can use a set of favorites commands to create lists, remove lists, add products to list from anywhere on a solution. The Customer Experience Center – Favorites app can then be used to publish favorite lists to frontend.

We don’t recommend mixing these two approaches -  read more about each below.

Registered users can view and manager their favorite lists via the Customer Center app – using the sections called My Lists. In broad terms you must:

  • Add a favorites list section to the Customer Center menu layout template
  • Render favorites lists and list details using the My List and My List details templates

To show a favorite list to anonymous users you should also:

  • Create a page for showing a favorite list to someone and add the Show List app to it
  • In the Customer Center, select his page as the Public List page in the Links section

The Show List app is a very simple app – it consists of a template for rendering a favorite list to anonymous users. The context is set by adding a PublishID parameter to the query string when linking people to the page, e.g. /ecommerce/show-list-app?PublishedID=Q1wFhUp5iN – the PublishID value is autogenerated when a favorite list is created and is available from the favorite list templates in the customer center.

Of course, there’s a template tag which does all this for you - Ecom:CustomerCenter.List.PublicURL.

Both Customer Center templates also contain tags for emailing a favorite list to someone – the layout and content of this email is controlled using the My List Email Settings (Figure 3.1).

Figure 3.1 The My List email settings

The Customer Center templates also contain tags for creating, editing and removing favorite lists - and products on a list.

Adding products to a list takes place from a product catalog - here is an example from inside a products loop in the product catalog list template:

RAZOR
<!--Adding or removing products happens from a Product Catalog app--> <!--Adding or removing from default favorite list--> @if (@product.GetBoolean("Ecom:Product.IsProductInDefaultList") == true) @*Check if product is in default list*@ { <a href='@product.GetString("Ecom:Product.RemoveFromList")'>Remove<a /> @* If is is allow user to remove it*@ } else { <a href='@product.GetString("Ecom:Product.AddToList")'>Add<a /> @* If not allow user to add it*@ } <!--Adding or removing from specific list--> @foreach (var listtype in @product.GetLoop("CustomerCenter.ListTypes")) @* We used to have several types of favorite list *@ { foreach (var productlist in @listtype.GetLoop("CustomerCenter.ProductLists")) @* You want to use only 'product lists' - for each of these *@ { if (productlist.GetBoolean("Ecom:Product.List.IsProductInThisList") == false) @* If the product is not in a list make it possible to add it *@ { <a href='@productlist.GetString("Ecom:Product.AddToThisListAction")'>Add</a> } else { <a href='@productlist.GetString("Ecom:Product.RemoveFromThisList")'>Remove</a> @* Else make it possible to remove it *@ } } }

Favorite Commands are commands for manipulating a favorite list – e.g. adding or removing a product from it, creating it, renaming it, or deleting it. Use these on ViewModel-based designs alongside the Customer Experience Center – Favorites app.

Like it’s conceptual sibling the cart command a favorite command can be executed in two ways:

  • By submitting an URL with the favoritecmd parameter and a set of other parameters and values appropriate for the command
  • By submitting a Form using a button with the name FavoriteCmd and a set of input fields with names and values appropriate for the command

Here is a list of Favorite Commands:

Command

Parameters

Notes

CreateFavoriteList

Name

Creates a favorite list

CreateFavoriteList

FavoriteListId

Removes the favorite list with the ID specified

RenameFavoriteList

FavoriteListId

Name

Sets the name of the favorite list specified to the value of the Name parameter

AddProductToFavoriteList

ProductId

ProductVariantId

FavoriteListId (optional)

Adds the specified product to the specified (or default) favorite list

RemoveProductFromFavoriteList

ProductId

ProductVariantId (optional)

FavoriteListId

Removes the specified product from the specified (or default) favorite list

In addition to these commands, the User class contains a number of useful methods for working with favorite lists:

  • GetFavoriteLists() : List<FavoriteList>
  • IsProductInAnyFavoriteList(ProductId) : bool
  • IsProductInAnyFavoriteList(ProductId, VariantId) : bool
  • IsProductInFavoriteList(FavoriteListId, ProductId, VariantId)
  • IsProductInFavoriteList(FavoriteListId, ProductId)

You can see some of these demonstrated in the example below:

RAZOR
@using Dynamicweb.Core @using Dynamicweb.Ecommerce.CustomerExperienceCenter.Favorites @using Dynamicweb.Security.UserManagement <h3>Favorite commands</h3> <form id="cmdForm" method="post"> <div class="form-group col-md-12"> <label for="FavoriteCmd">Command</label> <select class="form-control" id="FavoriteCmd" name="FavoriteCmd"> <option></option> <option value="createfavoritelist">create</option> <option value="removefavoritelist">remove</option> <option value="renamefavoritelist">rename</option> <option value="addproducttofavoritelist">add product</option> <option value="removeproductfromfavoritelist">remove product</option> </select> </div> <div class="form-group col-md-12"> <label for="FavoriteListId">Favorite list id</label> <select class="form-control" id="FavoriteListId" name="FavoriteListId"> <option></option> @{ var currentUser = Dynamicweb.Security.UserManagement.User.GetCurrentExtranetUser(); } @if (currentUser != null) { foreach (var list in currentUser.GetFavoriteLists()) { <option value="@list.ListId">@list.Name (@list.ListId)</option> } } </select> </div> <div class="form-group col-md-12"> <label for="Name">Name</label> <input type="text" class="form-control" id="Name" name="Name"> </div> <div class="form-group col-md-12"> <label for="ProductId">Product id</label> <input type="text" class="form-control" id="ProductId" name="ProductId"> </div> <div class="form-group col-md-12"> <label for="ProductVariantId">Product variant id</label> <input type="text" class="form-control" id="ProductVariantId" name="ProductVariantId"> </div> <div class="form-group col-md-12"> <label for="Note">Note</label> <input type="text" class="form-control" id="Note" name="Note"> </div> <button type="submit" class="btn btn-primary">Submit command</button> </form>
database

These are the database tables associated with Favorite Lists:

EcomCustomerFavoriteLists

Links favorite lists (Id) with users (AccessUserId).

Field name Data type Length
Id int 4
AccessUserId int 4
Name nvarchar 255
IsPublished bit 1
PublishedToDate datetime 8
Type nvarchar 255
IsDefault bit 1
Description nvarchar Max
PublishedId nvarchar 255
IsShared bit 1

EcomCustomerFavoriteProducts

Links favorite lists (FavoriteListId) with products (ProductId, ProductLanguageId, ProductVariantId).

Field name Data type Length
FavoriteListId int 4
ProductId nvarchar 30
ProductLanguageId nvarchar 50
ProductVariantId nvarchar 255
Note nvarchar Max
ProductReferenceUrl nvarchar Max
CustomerFavoriteProductAutoId int 4
Quantity int 4
SortOrder int 4