Skip to content
A set of configurations and components to get you started with AEM Commerce development
Java JavaScript HTML CSS Dockerfile
Branch: master
Clone or download

Latest commit

dplaton CIF-1072 - Support Registered Cart+Checkout (#234)
* Add the customer cart and the merge carts related queries
* Add the user token for the cart queries.
* Add the token to every request, if available.
* Refresh the cart id in the state object after sign-in / sign-out
* Reset the cart cookie after signing out
* Update unit tests
* Update dependencies versions
Latest commit b62ec2c Mar 27, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci CIF-1168 - [Build] Use the production build of React Components upon … ( Jan 30, 2020
.github @trivial - add release-drafter config (#169) Dec 19, 2019
all @releng [maven-scm] :prepare for next development iteration Feb 28, 2020
bundles/core CIF-1316 - Price display and client-side price fetching for grouped p… Mar 26, 2020
dispatcher CIF-1205 - Clean up old cart JS leftovers (#181) Jan 28, 2020
parent CIF-1306 - Remove CIF Connector Dependency from CIF Core Components p… Mar 12, 2020
react-components CIF-1072 - Support Registered Cart+Checkout (#234) Mar 27, 2020
ui.apps CIF-1316 - Price display and client-side price fetching for grouped p… Mar 26, 2020
.gitignore CIF-1166 - Internationalization support for AEM client-side Core Comp… Mar 18, 2020
LICENSE CIF-792 - Open-source CIF core components May 3, 2019
README.md CIF-1306 - Remove CIF Connector Dependency from CIF Core Components p… Mar 12, 2020
VERSIONS.md @releng - update readme (#218) Feb 28, 2020
eclipse-formatter.xml Introduce Code Formatting (#44) Jun 12, 2019
pom.xml @releng [maven-scm] :prepare for next development iteration Feb 28, 2020

README.md

CircleCI codecov Maven Central npm GitHub

AEM CIF Core Components

The AEM CIF Core Components project serves as accelerator to get started with projects using AEM, CIF and Magento. 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. The components use the Venia theme1.

This project is intended to be used in conjunction with the AEM 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 our CIF archetype project. There you will also find a complete sample project that uses the WCM and CIF core components to deliver a stunning store-front experience.

Documentation

See our wiki for usage and configuration instructions of the AEM CIF Core Components.

Available Components

System Requirements

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

CIF Core Components AEM 6.4 AEM 6.5 Magento Java
0.9.0 6.4.4.0 6.5.0 2.3.4 1.8

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

AEM Commerce connector for Magento

This project uses the AEM Commerce connector for Magento to improve the authoring experience by leveraging the product pickers, product assets view and consoles provided by the connector package. The AEM Commerce connector must be installed separately as part of the customer project.

AEM Sites Core Components

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

GraphQL Caching with Magento 2.3.2

Starting with 2.3.2, Magento 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 Magento 2.3.1 you can manually disable this feature in the following locations:

Installation

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

Here is a full video walk-through of the setup process.

Easy install with the "all" package

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 to localhost: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 /)

UberJar

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

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

Include core components as subpackage into your own project maven build

The released version of the AEM CIF Core Components are available on the maven central repository. To include the AEM 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 the content-package-maven-plugin.

You also need to add the AEM Commerce connector for Magento all package, see above. Make sure you add that as a dependency as well.

Configuration

To connect the AEM CIF Core Components with your Magento instance follow the configuration steps. For a multi store / site setup one additional step is needed to link an AEM site to a Magento store view.

Customization

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

Testing

Karma Unit Tests

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.apps
npm install
npm test

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

Code Formatting

Java

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

mvn clean install -Pformat-code

JavaScript & CSS

For formatting JavaScript and CSS we use prettier. The formatting is automatically checked when running npm test in the ui.apps project. To automatically format your code, please run the following command in ui.apps:

npm run prettier:fix

Packing Clientlibs with Webpack

We use webpack to build our clientlibs. Please read Packing Clientlibs with Webpack for more information.

Releases to Maven Central

Releases of this project are triggered by manually running mvn release:prepare release:clean on the master 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 example core-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 dedicated CircleCI build that performs the deployment of the tagged artifact to Maven Central.

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

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

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


1: "Venia" is the name of the sample progressive web app development by Magento. It has a specific theme which has been applied to our project, event though we're using classic AEM components

You can’t perform that action at this time.