Read Magento product data via GraphQL in AEM

Posted in AEM Tutorials By Raj On September 6, 2019


In my previous articles, I have explained how to integrate AEM with Magento, in this article, I am going to explain how to read product information via GraphQL. If you are looking for Magento installation and integrate AEM with Magento then I would recommend you check below articles.

For easy understanding, I am taking a simple example which is reading product name, description and status via GraphQL. I am calling this component as Product Details component.

Here, I am using AEM Venia storefront which is a reference implementation to showcase B2C commerce journey, the good thing is it comes with predefined templates, themes, and components. We know that we are going to build a product details component, so we must place this component on the product details page. 

The reference implementation works on selectors, the product page contains product name in the URL and category page contains category id in the URL as selectors. To query specific product information first we need to have a filter and this filter is the product name, we can get this from the current page URL.

Generally, in traditional application’s we used to follow query strings to fetch data from the database dynamically. But in AEM instead of query string, we are using selectors.

Product details page selector :


Category Id selector :


The below product details sling model gets the product name and description. explanation for every step is provided in the class as comments.

In product detail sightly template add below code, to render name and description,

Output :


In my next article, I will explain integrating AEM with Magento high level architecture.