AEM commerce components access extension_attributes of Product

[Venkat3062258106jv]

I added new module in magento to extens product attributes in graphql. Now I get the extension_attributes in POSTMAN.

"extension_attributes": {

                        "website_ids": [

                            1

                        ],

                        "downloadable_product_links": [

                            {

                                "link_file": "/d/i/digitalpricingboardgetstartedflyer.pdf"

                            }

                        ]

                    }

I want to access these attributes in AEM component. when I tried to do product.data.json, it didn't return these attributes.

Can you please suggest what changes I need to make to get these from Magento graphql?

Thanks for your help

venkat

[SantoshSai]

Hi @Venkat3062258106jv,

Step 1: Confirm Magento GraphQL is Returning Your Data

You've already done this:

"extension_attributes": {
  "website_ids": [1],
  "downloadable_product_links": [
    {
      "link_file": "/d/i/digitalpricingboardgetstartedflyer.pdf"
    }
  ]
}

Step 2: Extend the Product GraphQL Query in AEM

1. In your AEM project, navigate to:

   ui.apps/src/main/content/jcr_root/apps/<your-project>/graphql/

2. Create or edit product.graphql with:

   query Product($sku: String!) {
     products(filter: { sku: { eq: $sku } }) {
       items {
         sku
         name
         extension_attributes {
           website_ids
           downloadable_product_links {
             link_file
           }
         }
       }
     }
   }

Step 3: Register This GraphQL Query in AEM

1. Go to AEM > Tools > General > Configuration Browser

2. Select your Commerce GraphQL Client Configuration

3. Under the field Product Query Path, enter the path to your custom query:

   /apps/<your-project>/graphql/product.graphql

Now AEM uses your custom query.

Step 4: Verify product.data.json

1. Visit the product page

2. Add .data.json to the URL (e.g. /content/xyz/en/product/abc.data.json)

3. Confirm that extension_attributes now appear in the response

Step 5: Access These Fields in the Component

If you're building a custom Sling model:

@GraphQLField
private ExtensionAttributes extension_attributes;

public class ExtensionAttributes {
    private List<Integer> website_ids;
    private List<DownloadableProductLink> downloadable_product_links;
}

public class DownloadableProductLink {
    private String link_file;
}

In HTL (Sightly):

<ul data-sly-list.link="${product.extension_attributes.downloadable_product_links}">
  <li><a href="${link.link_file}">${link.link_file}</a></li>
</ul>

[AmitVishwakarma]

Hi @Venkat3062258106jv ,

Try below steps:

1. Create Custom GraphQL Query in AEM

Location:
/apps/<your-project>/graphql/product.graphql

query Product($sku: String!) {
  products(filter: { sku: { eq: $sku } }) {
    items {
      sku
      name
      extension_attributes {
        website_ids
        downloadable_product_links {
          link_file
        }
      }
    }
  }
}

Make sure there’s no syntax or formatting error.

2. Register Custom Product Query in AEM

Go to:
AEM => Tools => General => Configuration Browser

Open your Commerce Configuration (usually under /conf/your-site/settings/cloudconfigs/commerce)

Set:

Product Query Path: /apps/<your-project>/graphql/product.graphql

This tells AEM to use your custom GraphQL query when rendering product.data.json.

3. Validate in product.data.json

Open a product page URL:

/content/<your-site>/en/products/sku-123.data.json

You should now see:

"extension_attributes": {
  "website_ids": [1],
  "downloadable_product_links": [
    {
      "link_file": "/d/i/digitalpricingboardgetstartedflyer.pdf"
    }
  ]
}

4. Create a Sling Model to Map Extension Attributes

Java Model:
DownloadableLinkModel.java

public class DownloadableLinkModel {
    private String link_file;

    public String getLink_file() {
        return link_file;
    }

    public void setLink_file(String link_file) {
        this.link_file = link_file;
    }
}

ExtensionAttributesModel.java

public class ExtensionAttributesModel {
    private List<Integer> website_ids;
    private List<DownloadableLinkModel> downloadable_product_links;

    public List<Integer> getWebsite_ids() {
        return website_ids;
    }

    public void setWebsite_ids(List<Integer> website_ids) {
        this.website_ids = website_ids;
    }

    public List<DownloadableLinkModel> getDownloadable_product_links() {
        return downloadable_product_links;
    }

    public void setDownloadable_product_links(List<DownloadableLinkModel> downloadable_product_links) {
        this.downloadable_product_links = downloadable_product_links;
    }
}

ProductModel.java

@Model(adaptables = Resource.class)
public class ProductModel {

    @Inject
    @Named("extension_attributes")
    private ExtensionAttributesModel extensionAttributes;

    public ExtensionAttributesModel getExtensionAttributes() {
        return extensionAttributes;
    }
}

5. Use in HTL

<ul data-sly-list.link="${product.extensionAttributes.downloadable_product_links}">
    <li>
        <a href="${link.link_file}">${link.link_file}</a>
    </li>
</ul>

Here product is your sling model instance (exported from backend).

Regards,
Amit

[Venkat3062258106jv]

under the cloud config, i don't see product query path:

this what i found:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Page">
<jcr:content
jcr:primaryType="cq:PageContent"
jcr:title="Commerce"
sling:configPropertyInherit="true"
cq:template="/libs/cif/shell/components/configuration/page/template"
sling:resourceType="cif/shell/components/configuration/page"
cq:graphqlClient="default"
magentoRootCategoryId="Mg=="
magentoStore="default"
enableUIDSupport="true"
enableClientSidePriceLoading="{Boolean}true"/>
</jcr:root>

[Venkat3062258106jv]