[AEM GEMs] Integrate AEM & CIF framework to build a rich and immersive e-commerce experience

[kautuk_sahni]

Register: https://adobe.ly/3O0uXl5  

Session Details

Understand how Adobe’s CIF framework can be used to build a consistent and content-rich and immersive commerce experience. The Experience Manager and Adobe Commerce are seamlessly integrated using the Commerce Integration Framework (CIF). CIF enables AEM to directly access and communicate with the commerce instance using Adobe Commerce’s GraphQL APIs.

High-level agenda:

- What is CIF and Why to use CIF?

- CIF integration types and how to use CIF with AEM

- CIF component library

       - AEM CIF Core components

       - PWA studio library react components

- Considerations for multi-brand and multi-store setup

       - Cloud service configuration in AEM

       - FE code organization and deployment

       - Context-aware configurations

       - Multisite management

- Best practices and learnings

- Demo

Housekeeping details:

1. Duration: 60 minutes including 10 minutes of Q&A
2. Audience: Customers, Partners, and Adobe Employees
3. Recording & Slides will be made available to the public after the session
4. The session is free of charge, registration will be required

Session Recording

Session Schedule

Wednesday, April 27, 2022, | 8 am PDT OR 5 pm CET OR 8.30 pm IST 

Speaker(s)

Kunal Gaba, Technical Architect, Adobe & Vinay Kumar, Technical Architect, Adobe

Moderator(s)

Sambasivaraja Ramasubramanian & Ketan Purohit 

Product(s)

Adobe Experience Manager & CIF e-commerce Framework

Q&A

Please use this thread to ask the question related to this Session.

Don't forget to register yourself for this session using the registration link shared above. 

[kautuk_sahni]

Recording for this session has been uploaded above!!

[Albin_Issac]

H @kautuk_sahni 

Thanks for the gems session; very informative and helpful.

I have a quick question on adopting the react commerce frontend components while integrating AEM with the SAP Commerce Cloud (Hybris).

In my understanding, the Front end commerce components are built based on Magento-specific libraries. Is the recommendation to adopt the same components to be used, but the GraphL calls are translated to rest API through Adobe IO runtime?

Also, is the reference/diconium reference extension layer support multiple stores with external commerce systems, e.g., Hybris?

Regards
Albin

[Martin_Buergi_Adobe]

Hello,

We leave it up to the project whether they want to re-use the components and translate the GraphQL calls via I/O Runtime vs building custom components that talk directly to the 3rd party endpoint. The decision depends on the amount of customization needed, latency, etc. Both approaches are fine.

Regarding 3rd party connector and multi store: Our reference implementation does not support multi store OOTB, but you can easily extend it to support it. As we don't own the hybris connector, I suggest you ask the question in the respective GitHub.

hth,

Martin

[Albin_Issac]

Thanks, @Martin_Buergi_Adobe for the response

[Vinay_Kumar_adobe]

Hi @Albin_Issac ,

Just adding on top of @Martin_Buergi_Adobe reply.

"Also, is the reference/diconium reference extension layer support multiple stores with external commerce systems, e.g., Hybris?"

You can write an easy extension by combining OOTB functionality.

1. Just setup the multi store configuration in AEM as per https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content-and-commerce/storef...

2. Apply Configuration on language root of content to pick up specific store data.

3. AEM will send the store (Site in hybris) and locale information as part of Store attribute in header.

4. AIO will parse store and locale value to make hybris call

5. if these values are not available in request header, it can point to default.

Thanks

[RajTSC]

Hi Kautuk,

I like to attend the future sessions related to Commerce and others too. How can we get notifications on this.

THanks

Rajkumar

[kautuk_sahni]

Keep an eye on this AEM community or keep checking on https://experienceleague.adobe.com/events/ 

HTH

[manpreetk908]

Thanks for the insightful session!

[manpreetk908]

Hi @kautuk_sahni,

We are trying to integrate AEM with a third-party commerce system (SAP CC). We have set up our adobe.io runtime functions to cater for the integration based on CIF documentation. However, we are facing (so far) the following challenges:

1. Root category: It seems the author UI as well as CIF core components  expect the commerce catalog to have a single, "root category". Our catalog currently has multiple "top level" categories, not a single root one. Is there a way arounds this without having to adjust our commerce catalog structure (i.e. providing a single, root category at the top of our catalog)?
2. Category ID: According to GraphQL query documentation , the queries expect an Integer as a category ID value. However in our commerce solution we have alphanumerics as category IDs. Has anyone else faced this issue and if yes, what would be an efficient workaround?

I understand for the above issues, a way to tackle them would be to customize both Author UI and Core components sightly as well as Java code, but obviously this is something we'd like to avoid.

Do we have any insights around this?

Thanks,

Manpreet

[VijayDo]

Hi @kautuk_sahni I am looking for the sequence diagram when you customize a CIF Component from the video. is it possible to send the sequence diagram. The one in the video is not very clear.

[kautuk_sahni]

 @Albin_Issac @RajTSC We are coming up with a Live In-person Meetup in New York on Content & Commerce Optimization. See: https://adobe.ly/3A6DFYy  | Join and Invite your Peers.

[manpreetk908]

Hello @Kunal_Gaba_ and Team,

We are trying to connect AEM with SAP hybris e-commerce using CIF.
In this process, we have followed the official documentation and reference guide and have adopted Diconium suggested Adobe IO reference implementation.

However, we are facing few issues -

1) While resolving the response from Hybris and converting them into GraphQL schema (as all the Core components are tightly coupled with Magento schema). Do we have any detailed guide apart from reference documents to tackle it and any suggested approach recommended by Adobe that we can follow?
Any reference implementation for CIF Core components with Hybris and details will also be highly appreciated.

2) Root category: It seems the author UI as well as CIF core components  expect the commerce catalog to have a single, "root category". Our catalog currently has multiple "top level" categories, not a single root one. Is there a way around this without having to adjust our commerce catalog structure (i.e. providing a single, root category at the top of our catalog)?

3) Category ID: According to GraphQL query documentation , the queries expect an Integer as a category ID value. However in our commerce solution we have alphanumeric as category IDs. Has anyone else faced this issue and if yes, what would be an efficient workaround? We understand for the above issues, a way to tackle them would be to customize both Author UI and Core components sightly as well as Java code, but obviously this is something we'd like to avoid.

Any guidance around these issues would be really helpful.

Thanks,
Manpreet

[sambasivara]

Hi @manpreetk908 

1) Yes , CIF core components are tied to Magento Schema , but it also provide extension hooks to retrieve the response for any new attributes returned from AIO .So we can extend the core cif component and customize as per the need . Please refer

[0] https://experienceleague.adobe.com/docs/experience-manager-65/commerce/storefront/developing/customi...

2) Yes there should be Single Root Category . Please check if all top level categories are mapped to some default category on the Commerce side .

3) Could you please confirm the exact core components that fires this queries . Mostly Categories query will be fired with UID parameter . Here UID is alphanumeric . Please check whether you are using latest Magento Schema. 

In the reference url that you have mentioned ,its mentioned as below as well

The category query has been deprecated. Use the categories query instead.