CIF Add-on with AEM

 

In this post we will discuss how to setup the AEM with CIF add-on.

 Prerequisites:

Some of the prerequisites for the setup are :

1. AEM as a Cloud Service SDK

2. Java 11

3. Node.js

4. npm

5. CIF-Add On far file

Step-1 Follow this blog to setup AEM instance on local. 

https://codingwithtea.blogspot.com/2021/08/aem-local-set-up.html

Step-2 CIF Add-on

Latest CIF add-on should be downloaded from the Software Distribution portal. It is a zip file which contains the respective far file as add-ons for author and publish instance.

• Make sure you have the latest AEM as a cloud service SDK. Follow #1.
• Stop AEM running instance.
• Once the quickstart folder has been created , go inside it and create a folder named install.

• Unzip the CIF add-on package file and copy the correct .far file in the install folder of the relative instance you are planning to run i.e. author .far file for author-4502 instance and publish .far for publish-4503 .

• Start AEM instance.

Login author AEM SDK and verify the CIF add-on related bundles 

at http://localhost:4502/system/console/osgi-installer

You will also be able to see the additional Commerce tab in http://localhost:4502/aem/start.html

Similarly, setup for publish instance.

Venia Code with AEM SDK and Magento

 

In last blog we have setup AEM SDK with CIF add-on in AEM author instance. Now its time to deploy Venia ecommerce project.

Prerequisites:

1. AEM as a Cloud Service SDK

2. Java 11

3. Node.js

4. npm

5. Magento Instance URL 

Follow below steps to deploy existing project on AEM author:

1. Clone aem-cif-guides-venia project

git clone https://github.com/adobe/aem-cif-guides-venia.git

2. Comment dispatcher profile from root pom.xml ( not required as of now)

3. Go to Project directory and run below command to deploy code on AEM author:

4. Once the project is installed in AEM , traverse to http://localhost:4502/commerce.html or go to

http://localhost:4502/aem/start.html > Commerce>

5. Below is the error that shows up when you open the console.

This is because our AEM instance can’t access the Cross origin graphQL proxy endpoint of Magento.

6. To setup proxy, run below command:

npx local-cors-proxy --proxyUrl http://localhost/magento2 --port 3000 --proxyPartial ""

If you have already run this command as part of previous blog then skip this step.

7. Now go to http://localhost:4502/aem/start.html 

Tools > Cloud services > CIF Configuration

Click Properties

Add below configuration:

• GraphQL point: default( by default selected)
• Store view: default
• GraphQL query path : http://localhost:3000/graphql
• language: English
• Root category Id: 2

Click Save & Close.

8. Go to http://localhost:4502/aem/start.html > commerce>

or directly http://localhost:4502/commerce.html/browse

you can see Viena Code is coming in commerce 

Click on viena, all products gets loaded

And graphQL query is

Happy Coding!!!