Configuration - adobe/aem-cif-project-archetype GitHub Wiki

CIF Magento GraphQL base configuration

The AEM CIF Core Components connect to a Magento via GraphQL that has to be configured to access your Magento instance. 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)
      • If you use this project together with the AEM Commerce connector for Magento this has to be configured only once.
      • 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/crx/de/index.jsp
    • Navigate to the page root node e.g. /content/venia/jcr:content for the Venia sample page
    • Add a property cq:graphqlClient with the value of the service identifier of step 1
    • You can also add a property cq:magentoStore with the code of your Magento store view if it's not "default"

  3. Assign the Magento root category to your website

    • Navigate to the catalog page with your site structure e.g. /content/venia/us/en/products for the Venia sample page
    • Select the catalog page and open page properties
    • Select the Commerce tab
    • Enter the root category id of your Magento catalog the site should be assigned or use the category picker select any other category

Multi store / site configuration

The AEM CIF Core Components can be used on multiple AEM site structures and the underlying GraphQL client implementation can connect to different Magento stores / store views. The recommended setup is to use a 1:1 relationship between AEM site and Magento store view. Without the following configuration, the GraphQL client does not send any store view code and the default store view will be used. To connect an AEM site and AEM CIF Core Components so too to a dedicated store view follow the steps below:

  1. Configure multiple stores & store views according to the pattern described in Magento Websites, Stores & Views

  2. Configure base AEM CIF Core Components connection to a Magento as described above

  3. Assign the Magento store (view) code to an AEM site

    • Go to http://localhost:4502/crx/de/index.jsp
    • Navigate to the page country node e.g. /content/venia/us/jcr:content or the page language node e.g. /content/venia/us/en/jcr:content for the Venia sample page
    • Add a property cq:magentoStore with the value of the Magento store view code (get it from the Magento Merchant UI)

Repeat step 3 for every AEM page you would like to assign to a dedicated store view.

Sanitizing Product Description HTML

Our components sanitize HTML that is retrieved via GraphQL to prevent cross-site scripting (XSS) attacks. This is done using XSSAPI provided by Apache Sling which needs to be configured according to your needs if you want to use extensive HTML in your product descriptions. You can find more details at https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/security.html.

Every time the XSS library filters forbidden syntax from your product description, it will post an INFO log message similar to:

*INFO* GET /content/venia/us/en/products/product-page.sku.html HTTP/1.1 org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The div tag had a style attribute, "border-bottom-right-radius", that could not be allowed for security reasons.

To prevent those log messages either allow the filtered syntax in your AntiSamy configuration, remove it from your product description or raise the log level above INFO.