Configure wish lists for OSF applications

Commerce includes Open Storefront Application (OSF) widgets that let you add wish lists to your OSF applications.

Wish list plug-ins are included with Commerce, but they are not enabled and are not available by default in the reference application.

This section describes how to add wish list functionality to an OSF application. This section is intended for developers who want to use OSF to create Commerce storefront applications. The procedures in this section assume that you have set up a working OSF development environment and have created an application where you will add wish lists. For more information, see Understand the Open Storefront Framework.

Add wishlist package dependencies to your application

Commerce provides a read-only npm (Node Package Manager) registry that you can access to obtain OSF packages and their dependencies.

1. Navigate to your <workspace-dir>/packages/apps/<appname> folder.
2. Run the following commands:

   yarn add @oracle-cx-commerce/wishlist-endpoints

   yarn add @oracle-cx-commerce/wishlist-actions

   yarn install

3. Ensure wishlist dependencies are installed to your local node_modules/@oracle-cx-commerce folder.

Add wish list plug-in exports to your application

You must export references that enable the application's endpoints to be accessed using dynamic imports.

1. Navigate to your <workspace-dir>/packages/apps/<appname>/src/plugins/actions/index.js file and add the following line. Make sure this line appears above default exports:

   export * from '@oracle-cx-commerce/wishlist-actions'; //

2. Navigate to your <workspace-dir>/packages/apps/<appname>/src/plugins/actions/meta.js file and add the following line. Make sure this line appears above default exports:

   export * from '@oracle-cx-commerce/wishlist-actions/meta'; //

3. Navigate to <workspace-dir>/packages/apps/<appname>/src/plugins/endpoints/index.js file and add the following line. Make sure this line appears above default exports:

   export * from '@oracle-cx-commerce/wishlist-endpoints'; //

4. Navigate to <workspace-dir>/packages/apps/<appname>/src/plugins/endpoints/meta.js file and add the following line. Make sure this line appears above default exports:

   export * from '@oracle-cx-commerce/wishlist-endpoints/meta'; //

Allow shoppers to move items to a wish list from the cart

Once your OSF application has been built and deployed to the Commerce server environment, you can use the administration interface's Design page to enable the Move to Wish list functionality on the Cart page.

1. Log into Commerce and click the Design icon in the main menu. In the top-right corner of the Design page, you should see a dropdown menu where you can select a deployed OSF application.
2. Select your OSF application from the dropdown menu.
3. Use the Filter Layouts field to search for the Cart Page layout and then open the Cart container.
4. Click on Settings icon on the Cart Item Details layout.
5. Click the Move to Wish List checkbox.
6. Publish your changes.

Understand wish list layouts and widgets

The wish list widgets let shoppers create and manage multiple wish lists. The OSF wish list widgets make use of the Commerce wish list service and interface with the corresponding Social Wish Lists API endpoints.

The wish list widgets let shoppers do the following tasks:

• Create, edit, and delete wish lists with different privacy settings: Private (Only the owner can see and add to the list.), Group (Only the owner and people they invite can see, comment on, and add items to the list.), and Shared (Anyone with a link can see the list, but only the owner and people they invite can comment on and add items to the list.)
• Add items from a product's Product Details Page to a new or existing wish list. (The default widgets do not support adding items to a wish list from the Product Listing Page, but you can extend them in your OSF workspace to add this functionality.)
• Move items from a wish list to the cart or from the cart to a wish list.
• Move items from one wish list to another.
• Edit or delete wish list items.
• Add comments to wish list items.
• Share wish lists with other people via a link or invite them to a wish list, where they can also edit and comment on the list.

Note: The default widgets do not support sharing via Facebook, Pinterest, or Twitter, or receiving automatic price change notifications for products in a wish list. Default wish lists also do not show item availability (stock status). However, you can extend the widgets in your OSF workspace to add this functionality. The out-of-the-box OSF wish list implementation also does not currently allow the wish list owner to manage wish list settings.

Commerce includes the following wish list layouts:

• Wish Lists
• Wish List Details

• Commerce includes the following wish list widgets:
• Add to Wish List (Add this to the Product Details container)
• Wish List Details
• Wish Lists
• Wish List Breadcrumbs

Detailed information about each widget's code, including actions, selectors, fetchers, and endpoints, is available in the JS API documentation that you can download from Oracle Customer Connect.