Developing AEM Commerce

Developing AEM Commerce projects based on Commerce Integration Framework (CIF) for AEM follows the same rules and best practices like other AEM projects. Please review these first:

Local Development for AEM Commerce

A local development environment is recommended to work with CIF projects.

NOTE

The following instructions help you setting up a local AEM development environment for AEM Commerce using CIF with focus for AEM 6.5). If you are using AEM as a Cloud Service, please see the AEM Commerce as a Cloud Service documentation.

The AEM Commerce Add-On for AEM 6.5 aka. CIF Add-On is available for local development as well and provided as an AEM package. It can be downloaded from the Software Distribution portal as a feature pack.

Required Software

The following should be installed locally:

Accessing the CIF Add-On

The CIF add-on can be downloaded from the Software Distribution portal, search for ´AEM Commerce add-on`.

TIP

Make sure you always use the latest CIF Add-On version.

Local setup

For local CIF project development using the AEM and the CIF add-on following steps:

  1. Get the AEM 6.5 release and install the AEM 6.5 Service Pack. AEM 6.5 Service Pack 7 is required, however we recommend installing the last available service pack.

  2. Unpack the AEM .jar to create the crx-quickstart folder, run:

    java -jar <jar name> -unpack
    
  3. Create a crx-quickstart/install folder

  4. Copy the CIF add-on all package, downloaded from Software Distribution portal, into the crx-quickstart/install folder.

TIP

Alternatively the CIF add-on package can also be installed via Package Manager.

  1. Start the AEM quickstart

Verify the setup via OSGI console: http://localhost:4502/system/console/osgi-installer. The list should include the CIF add-on related bundles, content-package, and OSGI configurations. Make sure that all bundles are started.

Project Setup

There are two ways to start your AEM Commerce project using CIF.

Use AEM Project Archetype

The AEM Project Archetype is the main tool to bootstrap a preconfigured project to get started with CIF. CIF Core Components and all the required configurations can be included in a generated project with one extra option.

TIP

Use AEM Project Archetype 25 or later to generate the project.

See AEM Project Archetype usage instructions on how to generate an AEM project. To include CIF into the project use the includeCommerce option.

For example:

mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.granite.archetypes \
 -D archetypeArtifactId=aem-project-archetype \
 -D aemVersion=6.5.5 \
 -D appTitle="My Site" \
 -D appId="mysite" \
 -D groupId="com.mysite" \
 -D frontendModule=general \
 -D includeExamples=n \
 -D includeCommerce=y

CIF Core Components can be used in any project by either including the provided all package or individual using the CIF content package and related OSGI bundles. To manually add CIF Core Components to a project use the following dependencies:

<dependency>
    <groupId>com.adobe.commerce.cif</groupId>
    <artifactId>core-cif-components-apps</artifactId>
    <type>zip</type>
    <version>x.y.z</version>
</dependency>
<dependency>
    <groupId>com.adobe.commerce.cif</groupId>
    <artifactId>core-cif-components-config</artifactId>
    <type>zip</type>
    <version>x.y.z</version>
</dependency>
<dependency>
    <groupId>com.adobe.commerce.cif</groupId>
    <artifactId>core-cif-components-core</artifactId>
    <version>x.y.z</version>
</dependency>
<dependency>
    <groupId>com.adobe.commerce.cif</groupId>
    <artifactId>graphql-client</artifactId>
    <version>x.y.z</version>
</dependency>
<dependency>
    <groupId>com.adobe.commerce.cif</groupId>
    <artifactId>magento-graphql</artifactId>
    <version>x.y.z</version>
</dependency>

Use AEM Venia Reference Store

A second option to start a CIF project is to clone and use the AEM Venia Reference Store. The AEM Venia Reference Store is a sample reference storefront application that demonstrates the usage of CIF Core Components for AEM. It is intended as a best-practice set of examples and a potential starting point to develop your own functionality.

To get started with the Venia Reference Store simply clone the Git repository and start customizing the project according to your needs.

NOTE

The Venia Reference Store project contains two build profiles for AEM as a Cloud Service and AEM 6.5. Check the project readme.md to see how they are used. For AEM 6.5 use the classic profile.

Connect AEM to the Commerce System

To connect your project to the commerce system AEM must be configured with the GraphQL endpoint of your commerce system.

Both, a project generated by the AEM Project Archetype or the AEM Venia Reference Store, already include a default config which must be adjusted.

Replace the value of the url in com.adobe.cq.commerce.graphql.client.impl.GraphqlClientImpl~default.cfg.json with the GraphQL endpoint of your commerce system used by the project.

The AEM Commerce Add-On and CIF Core Components connect to the commerce GraphQL endpoint via the AEM server and directly via the browser. Client-side CIF Core Components and CIF Add-On authoring tools by default connect to /api/graphql. If needed this can be adjusted via the CIF Cloud Service config (see below).

The CIF add-on provides a GraphQL proxy servlet at /api/graphql. If you don’t plan to use a local AEM Dispatcher, it is recommended to configure the GraphQL proxy servlet as well.

Navigate to http://localhost:4502/system/console/configMgr and create an OSGI config for the Adobe CIF GraphQL Proxy Configuration service. Use the same GraphQL endpoint of your commerce system as used for the GraphQL client above.

Additional Resources

On this page