Commercetools Integration for DXM

[ptylr]

Originally available in Crownpeak's Github repository.

commercetools

The eCommerce Solution for Innovators and Visionaries. Increase business agility and innovate across new business models. Build your commerce architecture of the future with the most flexible, cloud based commerce API solution on the market.

This integration allows a content author to fully-manage the non-ecommerce/product management experience of the commercetools Sunrise demonstration site from within DXM.

Capabilities

The commercetools Integration for DXM leverages Sunrise SPA, commercetool's sample single page application site, and extends it to allow full content management from within DXM.

A Crownpeak Content Xcelerator℠ manifest is included, to allow you to provision Sunrise SPA within DXM in minutes.

Optionally, an Amazon Web Services (AWS) CloudFormation Template is included within this repo, to allow rapid provisioning of the public-facing experience within a serverless AWS environment.

Configuration Steps (with Crownpeak Content Xcelerator℠)

1. Download Crownpeak Content Xcelerator℠ and install, per the instructions.

2. Download Sunrise-SPA-DXM.xml to your favourite location.

3. Open Crownpeak Content Xcelerator℠ and select Import Data.

4. Complete information within "Import" screen with your details (see the instructions on the Crownpeak Content Xcelerator℠ if you are unsure).

5. Select Sunrise-SPA-DXM.xml and pick the commercetools root folder.

6. Click Next and wait for any Problems to be identified. Assuming none are, click Next again.

7. Choose the DXM Folder Path where you would like the content deployed, and click Go.

   (N.B. A top-level folder called commercetools will be created automatically.)

8. Wait for Sunrise-SPA-DXM.xml to be deployed.

9. Browse to your deployed Sunrise SPA site and open the Home Asset in Preview Mode.

10. Finally, configure your publishing requirements within DXM.

Configuration Steps (Manually)

We recommend using the steps above, combined with Crownpeak Content Xcelerator℠ to install Sunrise SPA into DXM - however, if you do choose to install manually, you may follow the steps below.

1. Clone/download Sunrise SPA from commercetools' GitHub repository.

2. Follow all installation/configuration instructions in the Sunrise SPA repository.

3. Add/replace source files within the contents of ./src/ including all sub-folders within this repository.

4. Copy files within ./public/ into /public/ within your repository.

5. Re-build the Sunrise SPA site.

   npm run build

6. Upload the contents of /dist/ within your site into a new Folder within DXM.

7. Create new Project in DXM to hold Templates & Library Files. Ensure that Project is created inside Component Library.

8. Create New Library Files, per contents of ./Library/

9. Create New Templates, per contents of ./Templates/

10. Create relevant Assets using the Templates that you have configured.

11. Finally, configure your publishing requirements within DXM.

Configuration Steps (AWS Serverless Deployment)

This is an optional step, using an Amazon Web Services (AWS) CloudFormation Template, to allow rapid provisioning of the public-facing experience within a serverless AWS environment (S3, CloudFront and Lambda).

1. Login to your Amazon Web Services Console and visit CloudFormation.

2. Select the Region that you wish to deploy the CloudFormation Stack into and click Create Stack.

3. Upload Sunrise-SPA-DXM-Serverless.yaml.

4. Give the Stack a name (TIP: I use the Fully-Qualified Domain Name (FQDN), to make it easy to find in future).

5. Supply the ARN for your pre-generated SSL Certificate, managed by AWS Certificate Manager.

6. Supply the FQDN.

7. Complete the wizard to provision the CloudFormation Stack.

8. Once completed, create an IAM Policy to enable the DXM to upload files to the S3 Bucket. See below for an example:

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Effect": "Allow",
               "Action": "s3:ListAllMyBuckets",
               "Resource": "arn:aws:s3:::*"
           },
           {
               "Effect": "Allow",
               "Action": [
                   "s3:ListBucket",
                   "s3:GetBucketLocation"
               ],
               "Resource": [
                   "{The_S3_Bucket_ARN}"
               ]
           },
           {
               "Effect": "Allow",
               "Action": [
                   "s3:ListBucket",
                   "s3:PutObject",
                   "s3:GetObject",
                   "s3:DeleteObject"
               ],
               "Resource": [
                   "{The_S3_Bucket_ARN}/*"
               ]
           }
       ]
   }

9. Create an IAM User, inheriting the IAM Policy. Configure publishing from within DXM, using the Export S3 settings.

10. Browse to your site.

You can find the full article with supporting screenshots on our Github repository.