1.5.3 Connect ACCS to AEM Assets CS

After completing the previous exercise, you could see a product being returned by ACCS to your website but it didn’t have an image yet. At the end of this exercise, you should see an image being returned as well.

1.5.3.1 Update Pipeline Config

Go to https://my.cloudmanager.adobe.com. The org you should select is --aepImsOrgName--.

Click to open your Cloud Manager Program, which should be called --aepUserLdap-- - CitiSignal AEM+ACCS.

Scoll down a little bit and then click Access Repo Info on the Pipelines tab.

You should then see this. Click Generate Password.

Click Generate Password again.

You should then have a password available. Next, click the copy icon next to the Git command line field.

Create a new directory in a location of choice on your computer and name it AEM Pipeline GitHub.

Right-click your folder and then select New Terminal at Folder.

You should then see this.

Paste the Git command line command that you copied before in the Terminal window.

You need to enter a user name. Copy the user name from the Cloud Manager’s Program Pipeline Access Repo Info and hit enter.

Next, you need to enter the password. Copy the password from the Cloud Manager’s Program Pipeline Access Repo Info and hit enter.

This maye take a minute. Once completed, you’ll have a local opy of the Git Repo that is linked to your Program’s Pipeline.

You’ll see a new directory in the AEM Pipeline GitHub directory. Open that directory.

Select all the files in that directory and delete all of them.

Make sure the directory is empty.

Go to https://github.com/ankumalh/assets-commerce. Click <> Code and then select Download ZIP. Download the file and then drop it on your desktop.

Next, copy the file assets-commerce-main.zip to your desktop and unzip it. Open the folder assets-commerce-main.

Copy all the files from the directory assets-commerce-main to the empty directory of your Program’s Pipeline Repository directory.

Next, open Microsoft Visual Studio Code and open the folder that contains your Program’s Pipeline Repository in Microsoft Visual Studio Code.

Go to Search in the left menu and search for <my-app>. You need to replace all occurences of <my-app> by --aepUserLdap--citisignalaemaccs.

Click the replace all icon.

Click Replace.

The new files are now ready to be uploaded back to the Git Repo that is linked to your Program’s Pipeline Repository. To do that, open the folder AEM Pipeline GitHub and right-click on the folder that contains the new files. Select New Terminal at Folder.

You should then see this. Paste the command git add . and hit enter.

You should then see this. Paste the command git commit -m "add assets integration" and hit enter.

You should then see this. Paste the command git push origin main and hit enter.

You should then see this. Your changes have now been deployed to your Program’s Pipeline Git Repo.

Go back to Cloud Manager and click Close.

After making changes to the Pipeline’s Git Repo, you need to run the Deploy to Dev pipeline again. Click the 3 dots … and select Run.

Click Run. Running a pipeline deployment may take 10-15 minutes. You need to wait until the pipeline deployment completes successfully before continuing.

1.5.3.2 Enable AEM Assets integration in ACCS

Go back to your ACCS instance. In the left menu, go to Stores and then select Configuration.

Scroll down in the menu to ADOBE SERVICES and then open AEM Assets Integration. You should then see this.

Fill out the following variables:

Click Save Config.

You should then see this.

1.5.3.3 Update config.json

Go to the GitHub repository that was created when setting up your AEM Sites CS/EDS environment. That repository was created in the exercise 1.1.2 Setup your AEM CS environment and should be named citisignal-aem-accs.

In the root directory, scroll down and click to open the file config.json. Click the edit icon to make changes to the file.

Add the below code snippet under line 5 "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/XXX/graphql",:

 "commerce-assets-enabled": "true",

Click Commit Changes….

Click Commit Changes.

Your change is now saved and will be published soon. It may take a couple of minutes before the change is visible on the storefront.

1.5.3.4 Verify Commerce Fields in AEM Assets CS

Log in to your AEM CS Author environment and go to Assets.

Go to Files.

Open the CitiSignal folder.

Hover over any asset and click the info icon.

You should now see a Commerce tab that contains 2 new metadata attributes.

Your AEM Assets CS environment now support the Commerce integration. You can now start uploading product images.

1.5.3.4 Upload Product Assets & Link to Products

Download the product images here. Once downloaded, export the files onto your desktop.

Click Create and then select Folder.

Enter the value Product_Images for the fields Title and Name. Click Create.

Click to open the folder you just created.

Click Create and then select Files.

Navigate to the Product_Images folder on your desktop, select all the files and then click Open.

Click Upload.

Your images will then be available in your folder. Hover over the product iPhone-Air-Light-Gold.png and click the Properties icon.

Scroll down and set the field Review Status to Approved. The AEM Assets CS - ACCS integration only works for approved images.

Scroll up, go to the Commerce tab and then click Add under Product skus.

Add the following SKU’s for this product:

You should then have this. Click Save & Close.

Hover over the product iPhone-Air-Space-Black.png and click the Properties icon.

Scroll down and set the field Review Status to Approved. The AEM Assets CS - ACCS integration only works for approved images.

Scroll up, go to the Commerce tab and then click Add under Product skus.

Add the following SKU’s for this product:

You should then have this. Click Save & Close.

Hover over the product iPhone-Air-Sky-Blue.png and click the Properties icon.

Scroll down and set the field Review Status to Approved. The AEM Assets CS - ACCS integration only works for approved images.

Scroll up, go to the Commerce tab and then click Add under Product skus.

Add the following SKU’s for this product:

You should then have this. Click Save & Close.

Hover over the product iPhone-Air-Cloud-White.png and click the Properties icon.

Scroll down and set the field Review Status to Approved. The AEM Assets CS - ACCS integration only works for approved images.

Scroll up, go to the Commerce tab and then click Add under Product skus.

Add the following SKU’s for this product:

You should then have this. Click Save & Close.

Every iPhone Air image should now have a green thumbs up, indicating that the asset has been approved.

1.5.3.5 Verify Product Images on AEM Sites CS/EDS Storefront

To verify that the integration is working, you need to open your CitiSignal website.

To acces your website, go to main--citisignal-aem-accs--XXX.aem.page and/or main--citisignal-aem-accs--XXX.aem.live, after replacing XXX by your GitHub user account, which in this example is woutervangeluwe.

So in this example, the full URL becomes this:
https://main--citisignal-aem-accs--woutervangeluwe.aem.page and/or https://main--citisignal-aem-accs--woutervangeluwe.aem.live.

You should then see this. Go to Phones.

You should then see a product image being shown for the iPhone Air. Click iPhone Air.

You should then see this. Make a change to the color and storage options, and you’ll see the images dynamically change based on the choices you made.

Here’s an example of changing the color to Light-Gold and the storage size to 256GB.

Next Step: Summary & Benefits

Go Back to Adobe Commerce as a Cloud Service

Go Back to All Modules