AEM Ecommerce Unleashed

Why Ecommerce in AEM?

Let’s start with basics, why Ecommerce?

To ease shopping experience by bringing your choice of market at your laptop, search for discount and get delivery at your doorsteps without any extra effort.

How to develop Ecommerce?

Imagine if you are a leading businessman and you want to improvise your business by allowing your products sale online. What kind of site would you’ll be looking for? Take a minute to think on this and come with an answer:

My Basic approach would be to develop an ecom site in AEM which is User Friendly, author friendly and most importantly developer friendly.

It’s most important that a developer should create it in a systematic way with a cleaner approach and using simple logics but in most optimized way to have the best performance and if it’s a clean code then in future any developer can proceed with it as well as for the same developer too it’s better to maintain the code anytime in future. Also if your logics are straight forward and simpler then in future too there won’t be much requirement to change them.

Then comes the point that for Author it should be very straightforward to author and create ecom site as per requirement, hence component should work as expected and should not be confusing in behavior. E.g. Component should be used in order of product, shopping cart and checkout.

Last but not the least, End user for whom you’ve created this Ecommerce site and who are actually going to use it and increase your business. So, to get most of it your website must be user friendly, dynamic, smooth in performance and an eye pleasing design will obviously win more hearts.

Now Question arises, Why Ecommerce using AEM?

Answer is AEM provides pre built codes to handle ecommerce in very professional way which is also easy to maintain and customize. Hence, developer’s efforts get reduced, Testers can test the working smoothly, Authors get better experience and finally organization get a best product to handle their business.

Also, it has multiple tested payment gateway integration. So far one of the best CMS and hence that makes it a perfect choice for Ecommerce website. Who doesn’t want a drag drop set of component for creating important features like product list, shopping cart, checkout and order details, vouchers etc.

1. What all I require from AEM : You require commerce components for creating ecom site in AEM, if your site is huge then you may require a third party ecommerce engine like Hybris, Elastic Path etc. Go through adobe’s official page for more information https://docs.adobe.com/docs/en/aem/6-3/administer/ecommerce.html 
2. What all commerce components I need to create for a simple ecom site: Before moving further, make sure you’re having your AEM installed properly. If yes, then you will find commerce folder under libs/cq. This folder will comprise of all AEM out of box ecommerce components. Post this, you can download my code and install as a package in your instance. Once it's done then you can proceed through below ones.
3. Product: http://localhost:4502/content/aem1/t1/ecom-testpage.html / http://localhost:4502/content/aem1/t1.html , on these pages I dragged dropped product component and browse products one by one.
4. Shopping Cart: To perform all activities in your cart: http://localhost:4502/content/aem1/t2.html , on this page I dragged dropped shopping cart component and this page will have data only if we add any product to our shopping cart from above mentioned pages.
5. Checkout: To finally place an order. : http://localhost:4502/content/aem1/t3.html , on this page we dragged checkout , address , shipping method, payment method components one by one according to our UI design. To change any design in these component, we can overlay these components and make changes in our css.  Address, Shipping method, Payment method, Form (For submitting final order and provide output window)

I’ve not created anything new in this article, I used all existing components only but in a way to prepare entire ecommerce site, in my next article I would be covering steps to create a customized commerce provider and to create our generic Ecommerce site.

AEM Ecommerce Unleashed-2 / Hybris integration with AEM

Creating Customized Ecom provider

What is Commerce Provider in AEM’s Ecommerce?

After my previous article on ecommerce's example you have seen that I used “geometrixx” as my commerce provider which already exists in code set of geometrixx. In this article, we’ll learn why we require this commerceprovider and how to create it.

How a Commerce Provider works?

When importing data from a commerce engine into your AEM eCommerce site, a commerce provider is used to supply the importers with data. One commerce provider can support multiple importers. A commerce provider is AEM code customized to either:

1. interface to a back-end commerce engine
2. implement a commerce system on top of the JCR repository

Though usually a project will need to develop their own, customized, commerce provider specific to their PIM and product data schema.

How can I create my own Commerce Provider?

The ProductServicesManager maintains (through OSGi) a list of implementations of the ProductImporter and CatalogBlueprintImporter interfaces. These are listed in the Importer/Commerce Provider dropdown field of the importer wizard (using the commerceProvider property as a name).

When a specific importer/commerce provider is available from the dropdown, any supplemental data it needs must be defined (depending on the importer type) in either:

/apps/commerce/gui/content/catalogs/importblueprintswizard/importers

/apps/commerce/gui/content/products/importproductswizard/importers

The folder under the appropriate importers folder must match the importer name; for example: .../importproductswizard/importers/geometrixx/.content.xml

The format of the source import file is defined by the importer. Or the importer may establish a connection (e.g WebDAV or http) to the commerce engine.

1. Create Service Factory : Highlighted one is defining my commerce provider

@Component(metatype = true, label = "Adobe CQ Commerce Factory for Training")

@Service

@Properties(value = {

       @Property(name = "service.description", value = "Factory for training commerce service"),       @Property(name = "commerceProvider", value = "ckj-test")

}) public class ckjServiceFactory extends AbstractJcrCommerceServiceFactory implements CommerceServiceFactory { 

   public CommerceService getCommerceService(Resource res) {

       return new ckjServiceImpl(getServiceContext(), res);   } 

}

2. Creating respective files like ckjServiceImpl, ckjSessionImpl, ckjProductImpl, SimpleDSComponent, click here to download all code.
3. Once you’ve your code at place then in content node make sure to change following property:

You can replace cq:commerceProvider value from “geometrixx” to “ckj-test” and all functionalities should work as expected.

Integration of Hybris with AEM

Setting up Hybris server?

Please go through below URLs posted by me for setting up hybris server on your local and do a product import, on this video I've explained in detail but in case if you're facing any issue then please feel free to contact
https://www.slideshare.net/RestWest/ecom-adobe https://www.youtube.com/watch?v=TIcw7WSDPIg&t=186s https://www.youtube.com/watch?v=wuvP2PNyb7g

You can also go through adobe’s URL : https://docs.adobe.com/docs/en/aem/6-2/deploy/ecommerce/hybris.html

Creating Hybris Connectors?

To create Hybris connector, we can get their code from Hybris directly and can create ours based on that with modification if required. Here is a link of some developer who shared a sample hybris connector code, I'm not sure how correct is it but very soon I'll share mine as well: https://github.com/Adobe-Marketing-Cloud/cq-java-hybris-extensions

Connecting AEM using Hybris Connector?

First of all, from Hybris end all the process must have a webservice API created which need to be called with required param from AEM end via :
1. Using Hybris API methods. 2. Using Ajax call on Hybris API.

So, with this I end my Ecommerce implementation in AEM. Please share your feedback if any and help to improvise as well, your effort will be appreciated and known. On Ecommerce I'll continue to share more articles like payment gateway integration etc. Thanks for going through this article.