Developing AEM Commerce develop

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

Local Development for AEM Commerce local

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

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’.

Local setup

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

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 project

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.

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.

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