Can not see products in Commerce console.

[nikhilkumar24dev]

I can not see the products in Commerce console, although products get populated in the product section of drag and drop section of page.

I see below error in OOTB Teaser component:

[mhaack]

@nikhilkumar24dev does this happen on the local SDK or AEM Cloud instance?

For AEM Cloud instance this is a provisioning issue, please contact support. For AEM Cloud local SDK follow the instructions: https://docs.adobe.com/content/help/en/experience-manager-cloud-service/commerce/develop.html

[nikhilkumar24dev]

@mhaack - Thanks for reverting quickly! I have followed the steps as per the mentioned link, I am getting the product list as part of side panel on page. But can not see it in the Commerce console. I am using local SDK with CIF Addon.

[mhaack]

Ok I see there is something missing in the local SDK documentation. Please see https://github.com/adobe/aem-core-cif-components/tree/master/react-components#prerequisites, you need that local proxy for your Magento env. to deal with CORS.

In your AEM CIF Cloud Services config (http://localhost:4502/libs/cif/shell/content/configuration.html/conf/venia) use then http://localhost:3002/graphql instead of /api/graphl.

[nikhilkumar24dev]

@mhaack Tried local proxy, products load at http://localhost:3002/graphql but getting same error in AEM

I suspect something missing as part CIF addon for AEMaaCs SDK.

[mhaack]

Your config points still to /api/graphql see the error message. You have to update the CIF Cloud Service Config (http://localhost:4502/libs/cif/shell/content/configuration.html/conf/venia) and point the GraphQL URL to http://localhost:3002/graphql.

[nikhilkumar24dev]

@mhaack - Configuration is already in place.

[mhaack]

That looks correct indeed, but looks like it is not used by the console?

[nikhilkumar24dev]

Yeah, the console doesn't recognize the new endpoint it seems, and the product teaser throws the error for the new endpoint configured.

I am using the Archetype 24 which is CIF loaded.

[mhaack]

Can you do a GraphQL call to http://localhost:3002/graphql with a GraphQL client? Does it work.

[herzog31]

@nikhilkumar24dev can you please provide the SDK and CIF add-on version you are using? Please also share the output of the npx proxy command and the JavaScript console of the product console or the dialog (please enable verbose output) of AEM.

[nikhilkumar24dev]

@herzog31 AEM SDK : aem-sdk-2020.8.4119.20200827T010735Z-200730.zip CIF version: cif-cloud-ready-feature-pkg-2020.9.2-cq-commerce-addon-authorfar Proxy command: npx local-cors-proxy --proxyUrl https://.adobesandbox.com/ --port 3002 --proxyPartial graphql

[nikhilkumar24dev]

@mhaack - No query doesn't get executed at this end point. It throws below error: { "message": "Unexpected token < in JSON at position 0", "stack": "SyntaxError: Unexpected token < in JSON at position 0" }

[herzog31]

The command is wrong. Please use the exact command as documented.

[nikhilkumar24dev]

@herzog31 - Tried exact command but didn't work out npx local-cors-proxy --proxyUrl https://.adobesandbox.com --port 3002 --proxyPartial ''

As the endpoint authored in Osgi Config is https://.adobesandbox.com/graphql. So, I alsi tried below command: npx local-cors-proxy --proxyUrl https://.adobesandbox.com/grapghql --port 3002 --proxyPartial ''

But with

[herzog31]

npx local-cors-proxy --proxyUrl https://.adobesandbox.com --port 3002 --proxyPartial '' is the correct command.

[nikhilkumar24dev]

Am I missing commerce-cif-connector on AEM instance ? As I am using Acrhtype 24. So that should's be required . Right ?

[herzog31]

For Cloud SDK you use the CIF add-on. For AEM 6.5 you use the CIF connector. Don't install both.

[nikhilkumar24dev]

@herzog31 - Yep got it. Using SDK with Addon. I will try to debug more on the proxy server as the mentioned command didn't work. Let me know if you can replicate the issue.

Thank @herzog31 for the quick responses.

[herzog31]

Can you please elaborate what doesn't work?

So if you run the command, is the GraphQL endpoint available at http://localhost:3002/graphql?

[nikhilkumar24dev]

It shows it did not return a valid schema.

Mentioned command in Docs:

[herzog31]

Please check that http://localhost:3002/graphql is a valid GraphQL endpoint. I need to double check that the command works properly on Windows.

Additionally the JS console in the developer tools in your browser give you more information on what's wrong with the endpoint. Make sure you enable verbose/debug logs.

[herzog31]

@nikhilkumar24dev In Windows PowerShell, the command should be:

npx local-cors-proxy --proxyUrl https://.adobesandbox.com --port 3002 --proxyPartial '""'

The argument --proxyPartial needs to receive an empty string.

[nikhilkumar24dev]

npx local-cors-proxy --proxyUrl https://.adobesandbox.com --port 3002 --proxyPartial "" This command worked for me and was able to get the same response as magento end point. But Product Teaser shows it's incompatible with CIF.

[herzog31]

@nikhilkumar24dev Please provide the JS console (enable verbose/debug) output as requested.

[nikhilkumar24dev]

@herzog31 Below are the verbose logs:

[herzog31]

According to the logs, your Magento instance does not provide a valid version 2.3.5 or 2.4.0 schema. Those are the only versions that are supported at the moment. Which version of Magento are you using?

[nikhilkumar24dev]

v2.3.4

[herzog31]

I suggest to upgrade your instance to at least v2.3.5 then.

[sprince1504]

Hi @mhaack @herzog31

I am facing the same issue and I run the command

npx local-cors-proxy --proxyUrl --port 3002 --proxyPartial '""'

but when I am trying to hit the http://localhost:3002/graphql then it is giving me an error.

Can you please help me here? I am stuck in this issue from last 3 weeks.

Also if you can guide me on, how I can directly call the Magento Endpoint using the servlet and send the graphQL queries to Magento and get the response back.

[mhaack]

@sprince1504 this command is just a local reverse proxy. If it does not work likely, it is an issue with you origin Magento GraphQL endpoint. Does that work?

Also with the last CIF Add-On release we removed the need for the local-cors-proxy. It is not needed any more and now build into the CIF Add-On, please have a look at updated instructions (text! video is not updated yet) at: https://experienceleague.adobe.com/docs/experience-manager-cloud-service/commerce/develop.html?lang=en#project

[sprince1504]

Hi @mhaack , I am getting error that Graphql can not connect to an endpoint. the same which was mentioned at the top.

Can you please help us, because we are facing this issue for the last 3 weeks and not able to resolve it?

Thanks

[herzog31]

@sprince1504 It looks like your configuration is wrong. With the changes @mhaack mentioned, the components should access Magento via /api/graphql. Please double check the documentation.

[sprince1504]

@herzog31 - Configuration which I have set

I changed GraphQL Proxy Path * to /api/graphql -- it is also giving an error.

[herzog31]

@sprince1504 Please use the default OSGi configurations and configure the endpoint using the COMMERCE_ENDPOINT environment variable. There are multiple OSGi configurations that require the endpoint.

[sprince1504]

@mhaack @herzog31 above issue is resolved. that was the CORS issue.

but now the issue is I am not able to see products under commerce.html

even if I drag and drop the product components, I don't see the product field.

[herzog31]

@sprince1504 Please turn on debug logs in the JS console (of your browser). They will tell you what's wrong.