Example 1 - Extend WKND Site with the JCR Commerce Framework

In the first article (What is the Future of building Commerce Experiences?) of this trilogy we recognized that if we move the creation of commerce content and all the commerce functionality into AEM, we have a significantly more powerful solution to build commerce experiences than with a traditional integration.

In this article I will use the JCR Commerce Framework JECIS (JCR E-Commerce Information System) to add a shopping experience to the WKND Demo Site. Adobe uses WKND to demonstrate how you can build a compelling Web experience over a weekend.

Step 0 - Prerequisites

The WKND Demo Site is a great example to demonstrate the powerful features and capabilities of Adobe's CMS AEM (Adobe Experience Manager). It comes with a comprehensive tutorial, explaining how to built the WKND site, step-by-step. This example uses the templates and design of WKND, but adds the missing commerce capabilities.

• Download the the WKND Tutorial and build the demo site.
• You can of course also just download the WKND Package and install it into a running AEM instance.
• Request a free Developer license of the JCR Commerce Framework JECIS by sending me a direct message or Email.

After building or installing the WKND Demo Site, you will notice that Adobe has prepared the site with a page titled Shopping. However, that page has no content yet, most likely because it requires an integration with Magento or another eCommerce tool. We will now see how simple and straight-forward it is to add the shopping experience.

Step 1 - Use the JECIS Web App to create a Store

After launching AEM via browser, you can launch the JECIS Web App from the navigation console.

JIM stands for JECIS Information Management and is the JCR-Commerce Web app that authors/marketers use to not only create/manage all the commerce content, but also to create new commerce elements where needed (e.g. for non-product driven commerce experiences).

Select Create Store from within JIM to create a new Store. We will name the Store WKND - LA Skateparks.

Step 2 - Add Product Information

Now we can start to create all the relevant Commerce Content. AEM still has some products from the old We.Retail demo site. We will use those products for this example.

First you start with the configuration content, e.g. categories, client types, price types, etc. Then you setup your store, e.g. by defining the modules, like e.g payment, shipping, tax, currency, etc. And at last you add the complete product content.

Note: All the Commerce Content created with JIM is stored by the JCR Content Repository API and is visible with CRX DE or the CRX Explorer (root node /jecis).

Step 3 - Build the AEM Components

While authors/marketers are creating the commerce content, developers can of course already start building the Commerce Experience. For this example we create 4 components:

• Product List Component - A component that will list products based on their categories.
• Single Product Component - A component that will show the details of a single product.
• Cart Component - This is an example of how to build a cart.
• Checkout Component - This component will be used for the checkout/payment process.

The Product List Component will allow the author to first select a Store and then select a Category created for that Store. There are some AEM features being used, like DataSource, to list the Stores and Categories.

There is a neat little AEM feature being used. After selecting the Store the "Select Category" field will list only the categories of the selected store. And all is commerce content.

The Single Product Component will be used to show the details of a product after a user clicks on a product in the product list.

The component calls a simple model class that uses the JECIS API to retrieve the product data. Note that all content is baked into the existing WKND layout/design. The separation of content from layout/design is a key element in AEM. The JCR Commerce Framework of course does the same.

The Cart Component lists the contents of the Cart. Carts can of course have many states, but for this example we list the items from the open cart.

The component uses a simple model class to retrieve the Cart information, but also uses REST calls and Sling Servlets to update the Cart. In addition, the API also documents the Cart actions (e.g. add, remove, reduce, increase, etc.), collecting statistical information about how the visitor interacts with the Cart. This allows building dashboards showing the activities and behaviors of visitors/shoppers.

The Checkout Component is just an example. Since the commerce content and the functionality are managed separately, with no dependencies to each other, you can build any type of checkout, like single page, partial checkout, multi-page, etc.

The Checkout is a good example why you want an API-like framework over a (closed) process. Developers can use the JECIS API to build any sorts of checkout process, while a pre-coded process doesn't leave much options.

For this demo we created a single page checkout.

Authors can define the payment types they want to use on the site directly in the commerce Web app JIM. For this demo we are using three of the out-of-the-box payment modules. Each of these modules is connected to their according payment sandbox, but of course can easily be re-routed to the real payment solution.

Step 4 - Build Sling Model Classes and extend Commerce Functionality

The commerce functionality is provided as API-style Java framework. This will make it very easy and attractive to create model classes, components, but also extend and customize processes like carts and checkouts.

Use Sling Model classes to make it easy to populate commerce content via components. These model classes are easy to build, since they can rely on the JECIS API to collect all the commerce content or execute any commerce functionality.

Furthermore, the JECIS API has many abstract classes that can be used by developers to build and customize additional commerce functionality. These classes are used to build modules (payment, shipping, taxes, currencies), but also to build process-driven functionality (carts, checkout, promotions).

Developers can also use the dialog predicate or datasource attributes to create dialogs that populate commerce content, e.g. to select products, categories, stores and more. The JECIS API has pre-built Sling Servlets to create the necessary input for these AEM Dialogs.

Summary - Features and Capabilities of the JCR Commerce Framework JECIS

By creating the commerce content in AEM and by consuming the commerce functionality provided by the JECIS API, we not only can save the costly hassle of dealing with an integration, but there are also other powerful capabilities:

• Authors can use the full-fledged commerce content management Web app JIM to create all the commerce content required for the commerce experience directly into AEM.
• JIM can also be used to create new commerce elements, e.g. for non-product driven industries like hospitality, insurances, auctions and others.
• You can also implement Adobe Sensei AI functionality (e.g. asset indexing, asset recognition, etc.), since all commerce content is within the same JCR content repository.
• The commerce functionality is provided as API-like Java framework. The JECIS API can be used to serve Sling model classes, Sling Servlets and of course custom Java/OSGi bundles and services.
• Content properties can be added without developer involvement, not like with database-driven solutions, where changes to the database schemas are a tedious and costly process.
• No integration with e.g. Magento or Hybris is needed, reducing learning effort of another system, reducing integration coding (micro services), reducing development time and reducing overall costs significantly.

In the third and last article (Example 2 - Build 'non-product-related' Sites with the JCR Commerce Framework) of this trilogy we will explore the perhaps most important benefit of the JCR Commerce Framework. We will show how the JCR Commerce Framework JECIS can be used to create and manage non-product-related commerce experiences. The example will be a Hotel resort, with Restaurants and a Boutique.