{"id":56839,"date":"2023-03-10T13:47:09","date_gmt":"2023-03-10T08:17:09","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=56839"},"modified":"2024-06-10T15:35:35","modified_gmt":"2024-06-10T10:05:35","slug":"install-and-configure-the-cif-add-on-in-aem-to-connect-venia-store","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/install-and-configure-the-cif-add-on-in-aem-to-connect-venia-store\/","title":{"rendered":"Install and Configure the CIF Add-on in AEM to connect Venia Store"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In this episode of the CIF Add-on blog post series, we will cover the setup of AEM (Adobe Experience Manager) and CIF Add-on installation along with configuration. We are also going to set up the AEM Venia project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So far, we have completed the Adobe Commerce and Venia store setup in the local environment, and if you haven\u2019t done yet, check our previous post <\/span><a href=\"https:\/\/www.tothenew.com\/blog\/step-by-step-tutorial-on-setting-up-Adobe-Commerce-with-Venia-Store\/\"><span style=\"font-weight: 400;\">here<\/span><\/a><span style=\"font-weight: 400;\"> on the same.<\/span><\/p>\n<h2><b>Prerequisite<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">To start with the setup, we will need to install some dependencies and download a few files,<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Install NPM, NodeJS, Java SDK 11<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Download AEM as a Cloud Service SDK: <\/span><span style=\"font-weight: 400;\">The latest SDK can be downloaded from <\/span><a href=\"https:\/\/experience.adobe.com\/#\/downloads\/content\/software-distribution\/en\/aemcloud.html?orderby=%40jcr%3Acontent%2Fjcr%3AlastModified&amp;orderby.sort=desc&amp;layout=list&amp;p.offset=0&amp;p.limit=120\"><span style=\"font-weight: 400;\">Adobe&#8217;s Software Distribution<\/span><\/a><span style=\"font-weight: 400;\">. The file to download will be in the following format <\/span><b>AEM SDK v********<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Download CIF Add-on Package: <\/span><span style=\"font-weight: 400;\">The latest CIF Add-on package too is available to download on <\/span><a href=\"https:\/\/experience.adobe.com\/#\/downloads\/content\/software-distribution\/en\/aemcloud.html?orderby=%40jcr%3Acontent%2Fjcr%3AlastModified&amp;orderby.sort=desc&amp;layout=list&amp;p.offset=0&amp;p.limit=47\"><span style=\"font-weight: 400;\">Adobe&#8217;s Software Distribution<\/span><\/a><span style=\"font-weight: 400;\">. The file will be in the following format <\/span><b>AEM CIF Add-On v*****<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Clone AEM CIF Venia Project: <\/span><span style=\"font-weight: 400;\">The Venia project can be cloned from Adobe&#8217;s official<\/span> <a href=\"https:\/\/github.com\/adobe\/aem-cif-guides-venia\"><span style=\"font-weight: 400;\">GitHub repo<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now that we have all that we need to set up the instances, we can begin with the Author instance first, followed by the Publish instance, then the code deployment, and finally, the CIF add-on configuration.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<h2><b>AEM Setup<\/b><\/h2>\n<h3><span style=\"font-weight: 400;\">Setting up the Author Instance<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><strong>1.<\/strong> Place the AEM as a Cloud Service SDK jar file into a folder; let us call it <\/span><b>aem-author<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>2.<\/strong> Before starting the instance, we must unpack the jar first to incorporate the CIF Add-on package. To do so, use the following command:<\/p>\n<p><\/span>(<b>Note<\/b> that we have renamed the <b>AEM SDK v******** <\/b>jar file to <b>aem-author-p4502.jar<\/b>.)<\/p>\n<pre><i><span style=\"font-weight: 400;\">java -jar aem-author-p4502.jar -unpack<\/span><\/i><\/pre>\n<p>Once completed, it should create the <i style=\"font-size: 1rem;\"><span>crx-quickstart<\/span><\/i><span style=\"font-weight: 400;\"> folder.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>3.<\/strong> Unzip the CIF Add-on package (the <\/span><b>AEM CIF Add-On v***** <\/b><span style=\"font-weight: 400;\">file) contents, and copy the <\/span><b>cif-cloud-ready-feature-pkg-******-cq-commerce-addon-<\/b><b>author<\/b><b>far.far<\/b><span style=\"font-weight: 400;\"> file and paste it into a new directory named <\/span><strong><i>install<\/i><\/strong><span style=\"font-weight: 400;\"> within the <\/span><i><span style=\"font-weight: 400;\">crx-quickstart<\/span><\/i><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> directory.<\/span><\/span><\/span><\/span><\/p>\n<div id=\"attachment_56821\" style=\"width: 635px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-56821\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-56821 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-1024x289.png\" alt=\"\" width=\"625\" height=\"176\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-1024x289.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-300x85.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-768x217.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-624x176.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed.png 1355w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><p id=\"caption-attachment-56821\" class=\"wp-caption-text\">CIF Add-on file location<\/p><\/div>\n<p><span style=\"font-weight: 400;\"><strong>4.<\/strong> With this, we complete the add-on installation. Now let&#8217;s start the instance and verify whether the changes work fine. Starting the instance with the <\/span><em><strong>start<\/strong><\/em><span style=\"font-weight: 400;\"> script file under the <\/span><i><span style=\"font-weight: 400;\">crx-quickstart\/bin<\/span><\/i><span style=\"font-weight: 400;\"> directory will do just fine.<br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>Note:<\/b><span style=\"font-weight: 400;\"> After running the script, it will not show any output. Check on the link <\/span><i><span style=\"font-weight: 400;\">http:\/\/localhost:&lt;port&gt;\/system\/console\/bundles<\/span><\/i><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> and wait until all bundles transition into <em>Active<\/em> state.<\/span><\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>5.<\/strong> Navigate to the AEM dashboard once all the bundles are in the Active state. A new tab called <\/span><b>Commerce<\/b><span style=\"font-weight: 400;\"> should appear, certifying the successful installation of the CIF Add-on.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><br \/>\n<\/span><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56822 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image2-1024x496.jpeg\" alt=\"\" width=\"625\" height=\"303\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image2-1024x496.jpeg 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image2-300x145.jpeg 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image2-768x372.jpeg 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image2-1536x744.jpeg 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image2-624x302.jpeg 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image2.jpeg 1776w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><span style=\"color: #757575; font-size: 0.857143rem; font-style: italic; background-color: transparent;\">Commerce Tab<\/span><\/p>\n<h3><strong>Setting up the Publish Instance<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Similar to the author instance, the Publish instance setup can be done following the same steps. The only variable part is the file names, so the <\/span><i><span style=\"font-weight: 400;\">author<\/span><\/i><span style=\"font-weight: 400;\"> becomes <\/span><i><span style=\"font-weight: 400;\">published<\/span><\/i><span style=\"font-weight: 400;\">, and the <\/span><i><span style=\"font-weight: 400;\">4502<\/span><\/i><span style=\"font-weight: 400;\"> port becomes <\/span><i><span style=\"font-weight: 400;\">4503<\/span><\/i><span style=\"font-weight: 400;\">. Like for example aem-<\/span><strong><em>publish<\/em><\/strong><span style=\"font-weight: 400;\">&#8211;<\/span><strong><em>p4503<\/em><\/strong><span style=\"font-weight: 400;\">.jar and <\/span><span style=\"font-weight: 400;\">cif-cloud-ready-feature-pkg-******-cq-commerce-addon-<\/span><em><strong>publish<\/strong><\/em><span style=\"font-weight: 400;\">far.far<\/span><\/p>\n<h2><b>Venia Code Deployment<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The AEM instances are ready for deployment. The Venia project can be deployed using the following command.<\/span><\/p>\n<pre><i><span style=\"font-weight: 400;\">mvn clean install -PautoInstallSinglePackage,classic<\/span><\/i><\/pre>\n<h2><b>CIF Add-on Configuration<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">In the first blog of this series, we learned that Adobe Commerce has a GraphQL layer. To consume the commerce data, a GraphQL Client needs to be configured. To do so, navigate to the <\/span><a href=\"http:\/\/localhost:4502\/system\/console\/configMgr\"><span style=\"font-weight: 400;\">configuration manager<\/span><\/a><span style=\"font-weight: 400;\">, and look out for the \u201c<\/span><b>GraphqlClientImpl~venia<\/b><span style=\"font-weight: 400;\">\u201d configuration. And update the following 2 properties <\/span><b><i>GraphQL Service URL<\/i><\/b> <span style=\"font-weight: 400;\">and <\/span><b><i>Allow HTTP communication<\/i><\/b><span style=\"font-weight: 400;\"> as shown below; the rest of the other properties will remain the same.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Prior to that, we need to set up a proxy server using the below command to avoid the CORS error in the future. The same proxy URL can be configured in the <\/span><i><span style=\"font-weight: 400;\">GraphQL Service URL <\/span><\/i><span style=\"font-weight: 400;\">property.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\"><i>npx local-cors-proxy --proxyUrl http:\/\/localhost --port 3000 --proxyPartial \"\"<\/i>\r\n<\/span><\/pre>\n<div id=\"attachment_56823\" style=\"width: 860px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-56823\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-56823 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-1.jpeg\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-1.jpeg 850w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-1-300x127.jpeg 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-1-768x325.jpeg 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-1-624x264.jpeg 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><p id=\"caption-attachment-56823\" class=\"wp-caption-text\">GraphQL Client Configuration<\/p><\/div>\n<p><span style=\"font-weight: 400;\">You can use the GraphQL client now; just adjust the CIF configuration based on the details of your Magento store. In order to reach this configuration, go to <\/span><i><span style=\"font-weight: 400;\">AEM Tools<\/span><\/i><span style=\"font-weight: 400;\"> and select <\/span><i><span style=\"font-weight: 400;\">Cloud Services<\/span><\/i><span style=\"font-weight: 400;\">, then click on <\/span><i><span style=\"font-weight: 400;\">CIF configuration<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<div id=\"attachment_56824\" style=\"width: 860px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-56824\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-56824 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-2.jpeg\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-2.jpeg 850w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-2-300x127.jpeg 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-2-768x325.jpeg 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-2-624x264.jpeg 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><p id=\"caption-attachment-56824\" class=\"wp-caption-text\">CIF Configuration<\/p><\/div>\n<p><span style=\"font-weight: 400;\">After accessing the CIF configuration window, select <\/span><i><span style=\"font-weight: 400;\">Venia<\/span><\/i><span style=\"font-weight: 400;\"> and then <\/span><i><span style=\"font-weight: 400;\">Commerce<\/span><\/i><span style=\"font-weight: 400;\"> to access additional options. Finally, choose <\/span><i><span style=\"font-weight: 400;\">properties<\/span><\/i><span style=\"font-weight: 400;\"> from the top bar. <\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56825 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-3.jpeg\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-3.jpeg 850w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-3-300x127.jpeg 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-3-768x325.jpeg 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/annotely_image-3-624x264.jpeg 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/>Venia Configuration<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-56826 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-1-1.png\" alt=\"\" width=\"850\" height=\"360\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-1-1.png 850w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-1-1-300x127.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-1-1-768x325.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-1-1-624x264.png 624w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><span style=\"font-weight: 400;\">Magento Store Information<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56828 size-medium\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-2-300x271.png\" alt=\"\" width=\"300\" height=\"271\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-2-300x271.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-2-768x694.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-2-624x564.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-2.png 884w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">To check out the categories and products from the Magento Venia store, return to the <\/span><i><span style=\"font-weight: 400;\">Commerce<\/span><\/i><span style=\"font-weight: 400;\"> tab on the AEM dashboard, and click on <\/span><b>Venia<\/b><span style=\"font-weight: 400;\"> card.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56829 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-3-1024x515.png\" alt=\"\" width=\"625\" height=\"314\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-3-1024x515.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-3-300x151.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-3-768x386.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-3-1536x773.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-3-624x314.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-3.png 1600w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The final appearance of the Venia site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-56830 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-4-1024x531.png\" alt=\"\" width=\"625\" height=\"324\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-4-1024x531.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-4-300x155.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-4-768x398.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-4-1536x796.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-4-624x323.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/03\/unnamed-4.png 1600w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">This completes the configuration of the CIF Add-on.<\/span><\/p>\n<h2><b>Conclusion<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">In this series of blogs, we saw the <\/span><a href=\"https:\/\/www.tothenew.com\/blog\/deep-dive-into-a-seamless-customer-experience-with-aem-using-adobes-cif\/\"><span style=\"font-weight: 400;\">architecture and features of Adobe\u2019s CIF Add-on<\/span><\/a><span style=\"font-weight: 400;\"> in detail. Further, to explore the practical implementation of the add-on, we set up<\/span><a href=\"https:\/\/www.tothenew.com\/blog\/step-by-step-tutorial-on-setting-up-adobe-commerce-with-venia-store\/\"><span style=\"font-weight: 400;\">\u00a0the Adobe Commerce engine<\/span><\/a>.<span style=\"font-weight: 400;\"> And finally, installed and configured the CIF add-on on our local AEM instances. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">With these blogs in your arsenal, you should now be able to integrate Adobe Commerce with the AEM seamlessly.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Stay tuned for our blogs on various other topics.<\/span><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>In this episode of the CIF Add-on blog post series, we will cover the setup of AEM (Adobe Experience Manager) and CIF Add-on installation along with configuration. We are also going to set up the AEM Venia project. So far, we have completed the Adobe Commerce and Venia store setup in the local environment, and [&hellip;]<\/p>\n","protected":false},"author":1383,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":409},"categories":[5868],"tags":[5061,5059,4847,5060,2838,911],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56839"}],"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\/1383"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=56839"}],"version-history":[{"count":4,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56839\/revisions"}],"predecessor-version":[{"id":59432,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/56839\/revisions\/59432"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=56839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=56839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=56839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}