Develop 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 the following first:

Local development for AEM Commerce local

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

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

The AEM Commerce add-on for AEM as known as the 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 AEM and the add-on CIF, do the following:

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

    code language-bash
    java -jar <jar name> -unpack
    
  2. Create a crx-quickstart/install folder

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

TIP
Alternatively, install the CIF add-on package using Package Manager.
  1. Start the AEM quickstart

Verify the setup through the 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.

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

You can use CIF Core Components in any project. Just include the provided all package or use the CIF content package and related OSGi bundles individually. Add CIF Core Components to a project manually by using 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.

Get started with the Venia Reference Store by cloning 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 configuration that 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 through the AEM server. Or, directly from the browser. Client-side CIF Core Components and CIF add-on authoring tools by default connect to /api/graphql. If needed, you can adjust it by way of the CIF Cloud Service config (see below).

The CIF add-on provides a GraphQL proxy servlet at /api/graphql. If you do not 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

recommendation-more-help
51c6a92d-a39d-46d7-8e3e-2db9a31c06a2