Monday, August 1, 2022

AEM and Magento Integration Using Commerce Integration Framework(CIF) — Local Setup (Part2)

 In my previous post on this series, we have discussed how to enable local Magento open source commerce platform on local.

Tools Required:

  • AEM 6.5(latest service pack — 6.5.12)
  • Java 11
  • Node JS
  • NPM

CIF addon/Venia sample project setup:

As a first step, download the CIF addon compatible with AEM 6.5 version from the Adobe Software Distribution Website and install it through the package manager on both Author and publisher.

git clone https://github.com/adobe/aem-cif-guides-venia
mvn clean install -PautoInstallSinglePackage,classic

Proxy Server Setup:

As discussed earlier, the CIF react components directly connect(from the browser )with the Magento server to enable the eCommerce functionalities, e.g., Cart Management, Checkout, and accounts management(the product detail and category details are server-side integrated from AEM to Magento), to avoid the CORS issues run a proxy server to proxy the client-side requests to Magento server.

npx local-cors-proxy --proxyUrl http://albin.magento.com/ --port 3002 --proxyPartial /

Configurations:

I am enabling the following configurations through the OSGI console for demo but enable through the code config. The default configurations are placed under aem-cif-guides-venia/classic/ui.config/src/main/content/jcr_root/apps/venia/osgiconfig-classic/config for AEM 6.5(classic) deployment.

CIF GraphQL Client Configuration Factory:

Commerce Config:

Commerce Cloud configuration is enabled under /conf/venia(enabled through code)

http://localhost:4502/content/venia/us/en/products/product-page.html/apollo-running-short.html#MSH02-33-Blackhttp://localhost:4502/content/venia/us/en/products/category-page.html/men/tops-men.html
{"errors":[{"message":"Cannot query field \"applied_gift_cards\" on type \"Cart\".","extensions":{"category":"graphql"},"locations":[{"line":1,"column":536}]}]}

Additional Marketing Contents:

You should be able to associate additional product-specific marketing data to the Product Detail pages through Experience/Content Fragments and Assets.

MSM:

You can use AEM’s MSM capability to support multiple country/language stores in AEM. Refer to the following Adobe Document for details on multi-store setup through MSM — Commerce Multi-Store Setup | Adobe Experience Manager

Specialized Product and Category Pages:

By default, we are using generic Product/Category pages to display the different Category and Product details(displayed through a dynamic selector). If required, you can define the specialized Category/Product pages for specific Categories and Products. Refer to the following document for details on enabling specialized Category/Product Pages — Creating Multiple Category and Product Pages | Adobe Experience Manager

SiteMap:

The CIF framework uses Apache Sling Sitemap to generate https://github.com/apache/sling-org-apache-sling-sitemap#readme. Refer to the following document to get more details on the SiteMap/SEO — https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/overview/seo-and-url-management.html?lang=en