Adobe Developers Live 2021, Session | CIF Extensibility via GraphQL

[kautuk_sahni]

Session Details

Learn how to extend Commerce core components using GraphQL.

Experience League Session Recording 

Session Schedule

9-Feb, 12:15 PM - 12:45 PM PST

Speaker(s)

Mark J. Becker

Full Schedule

Check Here

Q&A

Please use this thread to ask the question related to this Session. Click here for the session slides.

Session FAQs

Q. can the Magento schema be customized and will the schema be imported into the model as well? Or is customizing Magento schema, not an option?

A. Yes it can be customized. Especially the product schema part always will be custom, since you use your custom product attribute set.

Additional customization is possible by custom Magento modules as well. And yes this can be imported and used by CIF. For simple things, this might not be even needed. You can always generate your project-specific model classes and used them in CIF. The generation tool is public on GitHub as well.

Q. is there a roadmap for future features?

A. At this point there is no public roadmap available. Feel free to request features on GitHub.

Q. payment gateways from Magento can it be pulled into AEM for checkout?

A. Checkout and cart are implemented via client-side components. The components access Magento GraphQL directly. As long as payment gateways are exposed via the GraphQL API, they can be used.

Q.What's the recommended pattern for customizing the client-side portion of CIF Components?

A. Logic of the components is exposed via React hooks. You can write a component with a custom markup that uses the component logic via React hooks.

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

[wbanks]

Fantastic post, thank you!

Will Banks

[Yonit]

This url mentioned in the slides is missing.  

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/commerce/customize/customiz...

[Yonit]

It appears this is the new url for the page,

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content-and-commerce/storef...

//MyProductTeaserImpl.java

private static final String ECO_FRIENDLY_ATTRIBUTE = "eco_friendly";

@PostConstruct
public void initModel() {
    productRetriever = productTeaser.getProductRetriever();

    if (productRetriever != null) {
        productRetriever.extendProductQueryWith(p ->
             productRetriever.extendProductQueryWith(p -> p
                .createdAt()
                .addCustomSimpleField(ECO_FRIENDLY_ATTRIBUTE)
            );
        );
    }
}

However, the example will not compile.  Does not like this code in step 5

 Also, the complilation instructions are wrong since there is no autoInstallPackage profile, should be autoInstallSinglePackage

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

[MarkBecker]

You can use the following piece of code:

private static final String ECO_FRIENDLY_ATTRIBUTE = "eco_friendly";

@PostConstruct
public void initModel() {
    productRetriever = productTeaser.getProductRetriever();

    if (productRetriever != null) {
        productRetriever.extendProductQueryWith(p -> p
            .createdAt()
            .addCustomSimpleField(ECO_FRIENDLY_ATTRIBUTE)
        );
    }
}

[Yonit]

this worked (well for my coworker)!  Thank you!

I am still having this issue.  Do you know what could be causing it?

com.adobe.cq.wcm.core.components.models.datalayer,version=[1.3,2) -- Cannot be resolved

[Yonit]

I was able to resolve this issue.  I had tried using this version of the sdk (latest)  It didn't work.

2021.7.5607.20210705T063041Z-210600

I went back two months to this one and it did

2021.5.5343.20210524T070738Z-210527

This is a bit concerning.

[Herzog31]

I can't reproduce this behaviour locally (see screenshot).

Please feel free to report a ticket at https://github.com/adobe/aem-cif-guides-venia/issues with more details, so we can get this problem sorted out.

[Yonit]

the clone from github was using the sdk from 2020.  I tried changing the version to the most current.  This is where I had the issue.  When I switched it to the version from 2 months ago it was ok.  I can try to submit the issue I had to github