Integrate AEM with Magento – 4

Posted in AEM Tutorials By Raj On August 18, 2019

This is the continuation of the previous article which is http://keysandstrokes.info/integrate-aem-magento-3/. After deploying your CIF project into AEM, you need to configure your AEM instance to connect with Magento. In this article, we are going to see how to connect to Magento and load products information on the AEM page.

Step 1:

Open http://localhost:4502/system/console/configMgr and edit  CIF GraphQL Client Configuration Factory

  1. By default the GraphQL Service Identifier points to “default”, you can change this to anything which you feel you can remember, here I changed this to “custom”
  2. Enter your Magento server hostname by appending with “/graphql” in the GraphQL Service URL ex: https://localhost:4502/graphql.
  3. If you are setting up development environment then you must enable “Accept self singed SSL certificate” and install a self-signed certificate for your domain otherwise it won’t work.
  4. Keep remaining things as it is.

grapgql-client

Step 2: 

Now, edit CIF Catalog Magento GraphQL Configuration Factory and provide Magento GraphQL Service Identifier to “custom” and keep remaining things as it is. 

grapgql-client1

Step 3 :

Now, go to the products console ( http://localhost:4502/aem/products.html/var/commerce/products ) and bind products

  1. Click on create button 
  2. Select Bind Products
  3. You should see the below screen.
  4. Enter title, Name and select Commerce provider as “magento-graphql”
  5. Enter Magento Store view as “default” or check with your Magento developer
  6. Enter Root Category Id is 2 or check with your Magento developer for category id
  7. Select Project as a “custom” which you configured in step 1

products-bind

Now, click on the Bind button, after that you should see below screen, The difference between Hybris and Magento is, in Hybris we import products and categories into AEM, but In Magento we don’t import products instead of that we get products information on demand from Magento.

For example, the “Bottoms” and “Tops” will appear only when you click on the “Women” category

products-bind-1

Now, open this URL ( http://localhost:4502/editor.html/content/jara-magento/us/en.html ) and if you see below screen then the integration is successful.

products-bind-2

In my next article, I will explain how to create a custom component which consumes data from Magento using GraphQL and display on the AEM page.

  • Raj Selva

    Hi Raj,
    Can you please explain how to create custom component which consumes data from Magento using GraphQL and display on the AEM page