The value of GraphQL Service URL is not appearing on configMgr console in AEM version 6.5

[#1]

Hi,

I'm trying to create AEM CIF project using the CIF Project archetype to integrate Magento with AEM but the value of GraphQL Service URL is not appearing on http://localhost:4502/system/console/configMgr console (other parameter are appearing). For reference please find attached screenshot.

Please suggest,

Thank you.

Thank you,
Nitin.

[jadhavni3 · Accepted solution]

Hi @jadhavni3 ,

The CIF Magento GraphQL AEM commerce connector has to be configured to access your Magento instance and bind the catalog data. Follow the steps below to configure the bundle:

1. Configure the generic GraphQL instance

   • Go to http://localhost:4502/system/console/configMgr
   • Look for CIF GraphQL Client Configuration Factory
   • Create a child configuration
     • Keep the default service identifier or set something custom. Make sure to use the same value in step 2) below.
     • For GraphQL Service URL enter the URL of your Magento GraphQL endpoint (usually https://hostname/graphql)
     • With Default HTTP method you can define whether the underlying HTTP client will send GET or POST requests. Starting with version 2.3.2, Magento supports and can cache some GraphQL queries when using GET.

2. Configuration of the connector

   • Go to http://localhost:4502/system/console/configMgr
   • Look for CIF Catalog Magento GraphQL Configuration Factory
   • Create a child configuration
     • For Magento GraphQL Service Identifier enter the ID of the GraphQL client you already configured (see "pre-requisites")

3. Create a cloud service configuration for Magento

   • In AEM go to Tools -> General -> Configuration Browser (or http://localhost:4502/libs/granite/configurations/content/view.html/conf)
   • Create a configuration
     • Give it any name you wish
     • Check the Cloud Configurations capability (this is essential since the connector configuration will make use of this capability)
   • Go to Tools -> Cloud Services -> CIF Configuration (or http://localhost:4502/libs/commerce/gui/content/configuration.html/conf)
   • You'll find the configuration created in the previous step there. Click on it and click 'Create configuration'
   • All the fields are required:
     • For Commerce provider choose magento-graphql
     • For Root category id enter the ID of the Magento root category you want to define as the root
     • For Magento store view enter the code of the Magento store view that you want to use
     • For Catalog identifier select the ID of the connector instance you created in the previous step
     • For Graphql client select the GraphQL client you created at step 1

4. Binding of product catalog to AEM resource tree

   • Go to AEM Commerce product console (http://localhost:4502/aem/products.html/var/commerce/products)
   • Click on Create > Bind Products
   • Enter a title and a name
   • For the Context-Aware Configuration select the configuration you created in step 3
   • Save the changes

5. AEM content editor product drag & drop

   • To allow authors to drag & drop product assets from the AEM Assets Browser to a page a project specific configuration is needed to configure which component is used when dragging a product to a page. See AEM documentation about Configuring a Paragraph System so that Dragging an Asset Creates a Component Instance for details.

Regards,

Santosh

[jadhavni3 · Accepted solution]

Hi @santhosh_kumark,

Yes, it's worked but getting error while Integrating AEM with Magento in the AEM Products Console: http://localhost:4502/aem/products.html/var/commerce/products

we are getting below error message.

And where I can find GraphQL Proxy Path

Please suggest.

Thank you.
Nitin.

[santhosh_kumark · Accepted solution]

Hi @jadhavni3 ,

can you check this.

https://aemsimplifiedbynikhil.wordpress.com/author/nikhil240393/

Hi @Nikhil-Kumar , any points on proxy path?

Regards,

Santosh

[jadhavni3 · Accepted solution]

Hi @Nikhil-Kumar, @santhosh_kumark 

Can you please explain below command as I'm not able to understand this properly from your blog

npx local-cors-proxy –proxyUrl https://<namespace&gt;.adobesandbox.com/ –port 3001 –proxyPartial “”

Can you please confirm few points:

1. Do we need to use these(-proxyUrl, -port,  –proxyPartial) as well.

2. What will be the proxyUrl.

3. What will be the proxyPartial.

4.  Do we need to use  3001 or 3002 port only ?

Please advice.

Thank you,
Nitin.