Favorites List

Sometimes customers are browsing your product list just for inspiration and not for buying – at least not right now. They might want to save items and return later to buy them. This is why favorites lists are handy as they allow customers to group various items on self-created lists, which will be saved in their customer center (Figure 1.1).

When the customer adds an item to a favorite list a small notification apears in the bottom right corner. If the customer has created more than one favorite list an off canvas menu will apear on the right. In this menu the customer will have to choose which favorite list the item should be added to. 

Figure 1.1 Favorites lists shown in the customer center

If you want to setup the favorites list app manually follow this guide.

You'll need to create two pages, one in the customer center and a Swift Tools page in the folder called "Services".

We'll start with the page in the customer center:

  1. In the content tree, navigate to: Content/Navigation/Utilities/My account
  2. Create a new page in the “My account” folder and call it something suiting – E.g. “My favorites”

Next, you want to set-up your favorites list page.

  1. Open the Visual Editor.
  2. Add a 2-column 3/9 row
  3. In the first column add a navigation and make the navigation root link to the “My account” folder
  4. Let the theme and style match the navigation column on the other customer center pages

The second column is where the customers favorites lists will be located. To create the area for the lists, add the "Customer Experience Center" app to the empty column.

  1. Give the app the title “My favorites”
  2. Make sure to link the following fields to the following pages:
    1. Orders page to My orders
    2. Account settings page to My account information
    3. Addresses page to My addresses
    4. Product details page to Products/Details
    5. Product list page to Products

When all this is done enter the App part of the settings by clicking “App” in the top banner menu and change the following settings:

  1. Retrieve list based on User id
  2. In the templates section link List with the FavoritesLists.cshtml file and Detail with the FavoritesDetail.cshtml file.

In the Display section you can change:

  • How many lists you want to show per page
  • How the lists should be sorted
  • And whether the sorting should be ascending or descending

When this is done, we'll need to set up the Favorite Service Page. 

  1. In the content tree, navigate to the folder called "Services" located in "Swift tools"
  2. Click "New page" on the folder "Services"
  3. Add an empty page, name it "Favorites service" and hit OK
  4. Click “New paragraph”, scroll to the bottom and choose “App”
  5. Name it “Product catalog” and hit OK

Now you need to enter the App part of the paragraph and choose Product catalog for ViewModel in the ECOMMERCE section. To configure the App you need to:

  1. Choose a query on your products (Product.query) in the dropdown menu.
  2. Scroll down to the Templates section. In the product field select the Favorites.cshtml file.
  3. Click Save and Close

Then you only need to add the FavoriteServicePage tag. To do this:

  1. Enter the properties on your Favorite service page
  2. Click on options in the top menu
  3. Click navigation and write FavoriteServicePage in the empty field 
  4. Hit OK and Save And Close 

With that done the customer favorites lists page is ready to use.