Repository files navigation

The AEM CIF Core Components project serves as accelerator to get started with projects using AEM, CIF and Adobe Commerce. The project contains re-useable Commerce core components which combine server-side rendered AEM components with client-side React commerce components (MPA) for dynamic experiences / data.

This project is intended to be used in conjunction with theAEM Sites Core Components. AEM CIF Core Components use the AEM Sites Core Components as a foundation where possible and extending them.

For starting a new project please have a look at ourarchetype project. Also have a look at ourVenia sample project that uses the WCM and CIF core components to deliver a stunning store-front experience.

See theAEM Content & Commerce documentation for usage and configuration instructions of the AEM CIF Core Components andIntroduction to AEM Component Development.

• Product v1
• Product v2 - Adobe Commerce EE only with version >= 2.4.2
• Product List v1
• Product List v2 - Adobe Commerce EE only with version >= 2.4.2
• Product Collection v1
• Product Collection v2 - Adobe Commerce EE only with version >= 2.4.2
• Product Teaser
• Product Carousel
• Related Products
• Navigation
• Breadcrumb
• Search Results v1
• Search Results v2
• Searchbar
• Shopping Cart
• Featured Category List
• Commerce Teaser
• Commerce Button
• Commerce List
• Sign In
• Create Account
• Mini Account
• Account Details
• Address Book
• Reset Password
• Category Carousel
• Commerce Experience Fragment
• Commerce Content Fragment
• Commerce Content Fragment
• Cart Details
• Checkout Page

• Product Recommendations - requiresAdobe Commerce Product Recommendations

Components that are in technical preview may change in a none backward compatible way at any time. This includes all asepects and in particular the content structure, API, markup and styling if applicable. Do not use these components in production.

• Product v3 - Adobe Commerce EE only with version >= 2.4.4

The latest version of the AEM CIF Core Components, require the below minimum system requirements:

For a list of requirements for previous versions, seeHistorical System Requirements.

For AEM as a Cloud Service deployments this project requires the CIF Add-On provisioned on eachAEM as a Cloud Service environment. The CIF Add-On is installed automatically, no extra deployment is needed. The CIF Add-On is also available for local development with AEM SDK fromSoftware Distribution portal.

For AEM on-prem installations, this project requires the AEM Commerce Add-On for AEM 6.5 to improve the authoring experience by leveraging the product pickers, product assets view, and product consoles provided by the connector package. The AEM Commerce Add-On for AEM 6.5 is also available on theSoftware Distribution portal. It must be installed separately.

This project relies on theAEM Sites Core Components. They are typically installed as part of AEM. If you install AEM without sample content option you have todeploy them manually before using the AEM CIF Core Components.

Starting with 2.3.2, Adobe Commerce supports cache-able GraphQL requests and starting with version 0.2.1 the CIF core components will use it by default. To make the components work with Adobe Commerce 2.3.1 you can manually disable this feature in the following locations:

• For client-side components:CommerceGraphqlApi.js

1. Clone this repository.
2. Run amvn clean install in the root folder to install the artifacts to your local Maven repository.
3. Switch to theall project and run amvn clean install content-package:install.

Here is a fullvideo walk-through of the setup process.

If you want to build all the modules yourself and get all the latest (yet)unreleased changes, just build and install all the modules with the following command at the root of the repository:

mvn clean install -PautoInstallAll

This installs everything by default tolocalhost:4502 without any context path. You can also configure the install location with the following maven properties:

• aem.host: the name of the AEM instance
• aem.port: the port number of the AEM instance
• aem.contextPath: the context path of your AEM instance (if not/)

This project relies on the AEM 6.5.7cq-quickstart UberJar. This is publicly available onhttps://repo.adobe.com

For more details about the UberJar please head over to theHow to Build AEM Projects using Apache Maven documentation page.

The released version of the AEM CIF Core Components are available on themaven central repository. To include theAEM CIF Core Components package into your own project maven build you can add the dependency

<dependency>    <groupId>com.adobe.commerce.cif</groupId>    <artifactId>core-cif-components-all</artifactId>    <type>zip</type>    <version>x.y.z</version></dependency>

and sub package section

 <subPackage>     <groupId>com.adobe.commerce.cif</groupId>     <artifactId>core-cif-components-all</artifactId>     <filter>true</filter> </subPackage>

to thecontent-package-maven-plugin.

To connect the AEM CIF Core Components with your Adobe Commerce environment or a 3rd party commerce deployment follow theconfiguration steps. For a multi store / site setupadditional steps are needed to link an AEM site to a Adobe Commerce store view configuration.

For customizing CIF Core Components, we provide use cases and examples in our documentation atCustomizing CIF Core Components.

The client-side JavaScript code of the components is covered using Mocha unit tests executed with Karma. Please make sure that for every contribution new client-side code is covered by tests and that all tests pass.

cd ui.appsnpm installnpmtest

Karma will test with Chrome and Firefox. Make sure you have both browsers installed.

You can find the code formatting rules in theeclipse-formatter.xml file. The code formatting is automatically checked for each build. To automatically format your code, please run:

mvn clean install -Pformat-code

For formatting JavaScript and CSS we useprettier. The formatting is automatically checked when runningnpm test in theui.apps project. To automatically format your code, please run the following command inui.apps:

npm run prettier:fix

Releases of this project are triggered by manually runningmvn release:prepare release:clean on themaster branch on the root folder of this repository. Once you choose the release and the next snapshot versions, this commits the change along with a release git tag like for examplecore-cif-components-reactor-x.y.z. Note that the commits are not automatically pushed to the git repository, so you have some time to check your changes and then manually push them. The push then triggers a dedicatedCircleCI build that performs the deployment of the tagged artifact to Maven Central.

Important: this project does Maven reactor releases, donot trigger releases from sub modules!

Note: in case it is needed to update the version of a java bundle because of API changes and semantic versioning, one can easily update the parent POM version and all the POMs referencing the parent POM version by running the following command in the PARENT project folder:mvn versions:set -DnewVersion=x.y.z-SNAPSHOT. This will ensure all projects have the same version.

Contributions are welcomed! Read theContributing Guide for more information.

This project is licensed under the Apache V2 License. SeeLICENSE for more information.