AEM Venia with Magento Integration Category + Product Page Data is not fetching

[ScriptHost]

Basically, I have set up AEM 6.5 venia theme, I also successfully connected CIF connector and fetched data from Magento using CIF Connector, but when I tried to the category as well as product page the data of product is not fetching at all, In commerce option, I can see all data fetching from Magento side. 

Attaching the screenshots for reference.

In properties of category page also the category picker is empty.Data rendering on Commerce

Empty value rendering on both category and product page

Any help will be appreciated !!

[mhaack]

The category page screenshot form the page editor shows the placeholder data while edition. Try switch to preview and navigate to the category. Or use "View with Category" from the actions menu of the editor.

[ScriptHost]

Hi @mhaack 

Thanks for the support.

I tired by the mentioned suggested, which I have attached screenshot below, no luck till now. In another scenario, I found that in search the data and layered navigation is working fine, but when coming to the category and list page the issue coming up with no data. I found out there is a error on console hereby attach the scrren shot for reference.

Could not fetch storefront instance context Error: Cannot query field "dataServicesStorefrontInstanceContext" on type "Query"

[mhaack]

The category list in your screenshot has no category information in the URL. With that it always will call back to the placeholder data. There must be category context provided via the URL. What happens if you navigate to a category via the Venia navigation?

[ScriptHost]

Yes, I am getting the default image. I am not able to see the breadcrumb to navigate to the category page. I accessed the category Page manually then I am seeing default images only. But I am able to see images with AEM 6.5 classic(6.5.5 jar + CIF  package)

[ielali]

Hello, I struggled a lot with this setup to understand while it's currently failing with magento open source. It turns out Product List V2 adds a staged attribute to the GraphQL query. This is only available in  Adobe Commerce and not the open source version.

If you use Product List V1 instead in the template you'll get your results but the html will no longer be compatible, I ended up renaming /apps/core/cif/components/commerce/productlist/v2 to /apps/core/cif/components/commerce/productlist/v1 in CRX-De to get the latest html with the sling model of Product List V1 and the everything worked.

[mhaack]

Just "preview" will not work from the editor, since the page requieres the category as context. Without the category information in the URL it will always display the placeholder images.

In the action menu of the page editor there is a "Preview with Category" menu item, try this.

[ielali]

Yes there is that aspect as well you need to have a category in the URL of course, but for the specific case of working with Magento Open Source there is a fixed filtering attribute called staged  added to the category/product GraphQL query in V2 of ProductList and Product components that causes the query to fail. When you revert to the sling models V1 of theses two products everything works with the open source version.

I also encountered the JavaScript error in the first post, and again this is only for the open source version of Magento. To address this one needs to install the Magento module magento/module-data-services-graphql