{"id":55934,"date":"2022-12-07T12:48:54","date_gmt":"2022-12-07T07:18:54","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=55934"},"modified":"2024-06-10T15:40:00","modified_gmt":"2024-06-10T10:10:00","slug":"deep-dive-into-a-seamless-customer-experience-with-aem-using-adobes-cif","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/deep-dive-into-a-seamless-customer-experience-with-aem-using-adobes-cif\/","title":{"rendered":"Deep dive into a seamless customer experience with AEM using Adobe&#8217;s CIF"},"content":{"rendered":"<p>As we already know, the power of AEM in a digital world. It offers many capabilities to its customers to build their website quickly and faster to the market, including many features that reduce the complexity of authoring or core components that reduce the need for custom code, accelerating the time to market for brands.<\/p>\n<p>With the ever-increasing demand for integration of AEM and commerce framework, Adobe has developed a framework that can help you connect AEM with any commerce (Adobe commerce, hybris, etc.) engine. This framework is known as CIF (Commerce Integration Framework).<\/p>\n<p><span style=\"font-weight: 400;\">CIF extends the Experience Manager with commerce capabilities and standardizes the integration with a commerce engine. It connects AEM with the commerce engine to provide seamless content and commerce experience.<br \/>\n<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-55931\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/12\/cif.png\" alt=\"CIF\" width=\"721\" height=\"101\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/12\/cif.png 721w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/cif-300x42.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/cif-624x87.png 624w\" sizes=\"(max-width: 721px) 100vw, 721px\" \/><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">Key Feature of CIF<\/span><\/strong><\/h3>\n<ul>\n<li><span data-preserver-spaces=\"true\">It extends the AEM authoring experience which gives many capabilities such as introducing a product tab in the side panel, category, and product picker resource type for dialogs. These all features can be explored from\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-cloud-service\/content\/content-and-commerce\/journeys\/author\/getting-started.html?lang=en\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">here<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">CIF provides out-of-the-box commerce core components that reduce the need for custom code, accelerating the time to market for brands. These components can be extended using a sling delegation pattern.<\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">AEM standard archetype provides the option of including changes for commerce projects, including CIF core components and other supporting configurations by default. This can be done by selecting option\u00a0<\/span><strong><span data-preserver-spaces=\"true\">Y<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0for the\u00a0<\/span><strong><span data-preserver-spaces=\"true\">includeCommerce<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0field while creating an archetype from\u00a0<\/span><a class=\"editor-rtfLink\" href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-core-components\/using\/developing\/archetype\/overview.html?lang=en\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">here<\/span><\/a><span data-preserver-spaces=\"true\">.<\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">This framework can connect to any commerce engine(Adobe commerce, Hybris, etc.), but please note that Adobe commerce is default supported with standard functionality that is already part of CIF. If you need to connect to any other commerce engine or extend CIF, it can be achieved using Adobe IO (or any serverless solution) for API mapping. The same can be referred from the below diagrams:<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-55932\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_Magento_Architecture.png\" alt=\"AEM CIF Architecture\" width=\"2380\" height=\"578\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_Magento_Architecture.png 2380w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_Magento_Architecture-300x73.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_Magento_Architecture-1024x249.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_Magento_Architecture-768x187.png 768w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_Magento_Architecture-1536x373.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_Magento_Architecture-2048x497.png 2048w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_Magento_Architecture-624x152.png 624w\" sizes=\"(max-width: 2380px) 100vw, 2380px\" \/> (For Adobe Commerce)<br \/>\n[Reference: <a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-65\/assets\/AEM_Magento_Architecture.png?lang=en\">https:\/\/experienceleague.adobe.com\/docs\/experience-manager-65\/assets\/AEM_Magento_Architecture.png?lang=en<\/a>]<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-55933\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_nonMagento_Architecture.png\" alt=\"AEM_nonMagento_Architecture\" width=\"2486\" height=\"578\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_nonMagento_Architecture.png 2486w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_nonMagento_Architecture-300x70.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_nonMagento_Architecture-1024x238.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_nonMagento_Architecture-768x179.png 768w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_nonMagento_Architecture-1536x357.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_nonMagento_Architecture-2048x476.png 2048w, \/blog\/wp-ttn-blog\/uploads\/2022\/12\/AEM_nonMagento_Architecture-624x145.png 624w\" sizes=\"(max-width: 2486px) 100vw, 2486px\" \/>(For Non-Adobe Commerce Engine)[Reference:<a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-65\/assets\/AEM_nonMagento_Architecture.png?lang=en\"><span style=\"font-weight: 400;\">https:\/\/experienceleague.adobe.com\/docs\/experience-manager-65\/assets\/AEM_nonMagento_Architecture.png?lang=en<\/span><\/a>]<\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">The AEM Venia reference storefront is a modern production-ready reference storefront showcasing a basic B2C commerce journey. The code can be accessed from <\/span><a href=\"https:\/\/github.com\/adobe\/aem-cif-guides-venia\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<p>Refer to this <a href=\"https:\/\/www.tothenew.com\/blog\/step-by-step-tutorial-on-setting-up-adobe-commerce-with-venia-store\/\">blog<\/a> to go into greater detail about our practical experience with CIF. Here we will set up Adobe Commerce (community edition), and AEM with venia open source codebase.<\/p>\n<p>References: <a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-cloud-service\/content\/content-and-commerce\/home.html\"><span style=\"font-weight: 400;\">https:\/\/experienceleague.adobe.com\/docs\/experience-manager-cloud-service\/content\/content-and-commerce\/home.html<\/span><\/a><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>As we already know, the power of AEM in a digital world. It offers many capabilities to its customers to build their website quickly and faster to the market, including many features that reduce the complexity of authoring or core components that reduce the need for custom code, accelerating the time to market for brands. [&hellip;]<\/p>\n","protected":false},"author":1362,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":81},"categories":[5868],"tags":[5061,5059,5062,4847,5060,912,911],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55934"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1362"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=55934"}],"version-history":[{"count":9,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55934\/revisions"}],"predecessor-version":[{"id":56142,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55934\/revisions\/56142"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=55934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=55934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=55934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}