Skip to main content

Connect Salesforce CMS to Page Designer

Learning Objectives

After completing this unit, you’ll be able to:
  • List three tasks a developer must take to connect Salesforce CMS to Salesforce B2C Commerce Page Designer.
  • Explain the purpose of the CMS workspace.
  • Describe how to work with content types in Salesforce CMS and Page Designer.
  • Explain how to create a Page Designer component type that accesses Salesforce CMS content.

Implementation Plan

Vijay and Brandon are ready to get Salesforce CMS up and running with Page Designer. So what’s their plan? Brandon’s part—creating, managing, and using the awesome new content—can happen only after Vijay takes these steps.

  1. Get a connection to a Salesforce org.
  2. Open Salesforce CMS.
  3. Install and configure Salesforce CMS.
  4. Create new Page Designer components for Brandon to use.

Salesforce Org

Cloud Kicks doesn’t have a Salesforce org, so Vijay asks his Salesforce account manager for a free administrator org that he can use.

Salesforce CMS

Brandon and his team want to use Salesforce CMS content in Page Designer, so Vijay must make sure his Salesforce org includes the Salesforce CMS app. His management contacts their Salesforce account executive (or their Salesforce B2C Commerce success manager) for information about pricing and packaging for this application.

Connect B2C Commerce and CMS

Next up, Vijay connects his B2C Commerce instance to a Salesforce CMS channel and assigns the channel to his site library. Remember, a B2C Commerce instance is similar to a Salesforce org.

Another important concept is the Salesforce CMS workspace. A workspace is how you organize and secure content in the Salesforce CMS app.

Although some of the following steps are in Salesforce core, this unit assumes you are a B2C Commerce developer with the proper permissions to perform B2C Commerce tasks. If you’re not a B2C Commerce developer, that’s OK. Read along to learn how your developer would take these steps in Salesforce core and a B2C Commerce sandbox instance. Don’t try to follow these steps in your Trailhead Playground. B2C Commerce, which is the focus of this module, isn’t available in the Trailhead Playground.

If you have a sandbox instance of B2C Commerce, you can try out these steps in your sandbox. If you don’t have a sandbox and you’re a customer or partner developer, ask your manager if there is a sandbox that you can use.

Tip

Tip

Page Designer is automatically enabled for each instance type.

To follow these steps you need site administrator rights in your sandbox. If you’re not a site admin, ask your administrator which login credentials to use to connect to the sandbox.

Here’s how to connect a B2C Commerce instance to a Salesforce CMS channel.

  1. Open a support ticket and request a trust relationship between your Salesforce org and your B2C Commerce instance.
  2. Open a Salesforce org.
  3. Add the Salesforce CMS app.
  4. In Salesforce CMS, click Add Workspace to add a CMS workspace to host the Page Designer content (or use an existing workspace).

    In Salesforce CMS, add a CMS workspace.
  5. In Salesforce CMS, create a Commerce Cloud channel.
    • From the CMS Home tab, select Channels.
    • Select Create Channel.
    • Name the channel: Cloud2Cloud_1
    • Select the connection type: Commerce Cloud
      In Salesforce CMS, create a channel by adding a connection type.
    • Click Create.
  6. In the CMS workspace:
    • Click Add Channel.

      In a Salesforce CMS workspace, add a channel.
    • Select the Commerce Cloud channel you just created.
    • Click Add.

Connect Business Manager

Now that Vijay has the CMS channel, he can add it to his B2C Commerce configuration in Business Manager.

Here are the steps to take.

  1. Open Business Manager.
  2. Select Administration > Sites > Libraries > site > General.
  3. Scroll to the bottom of the page.
  4. Assign the CMS channel to your site library.

Mapping Rule Syntax

Vijay’s next job is to configure a new Page Designer component type with an attribute that’s assigned to Salesforce CMS content. Before he does this, he asks Brandon what type of content he wants to use. Brandon’s answer determines the component type attributes that Vijay creates. Initially, Brandon wants to show text and graphics (that he creates in Salesforce CMS) in a headline banner.

The content type is key. You must use the same content type in Salesforce CMS and Page Designer. So Vijay uses the news content type to create and manage his content because it already exists in Salesforce CMS.

Later, if the content type Brandon wants to use on the Page Designer page doesn’t exist in Salesforce CMS, Vijay simply creates it. For now, Vijay creates a component type that includes attributes assigned to type cms_record, with the content_type specified in the editor_definition element.

For example, the following meta definition file and script file for component type CMS Headline Banner use the headline content attribute type cms_record, with the editor_definition content_type news. The banner has a call to action button. When the shopper clicks the banner, B2C Commerce sends them to a URL.

cmsheadlinebanner.json

Remember, for a Page Designer component, you need both a JSON and a JavaScript component. Here’s the JSON file.

{
    "name": "CMS Headline Banner",
    "description": "Image, text overlay from CMS that links user to a B2C target using the markup editor",
    "group": "assets",
    "attribute_definition_groups": [{
        "id": "headlineContent",
        "name": "Headline Content",
        "description": "The presentation of the headline",
        "attribute_definitions": [{
            "id": "cmsItem",
            "name": "Headline Content",
            "type": "cms_record",
            "required": true,
            "editor_definition": {
        "content_type": "news"
            }
        }]
    },
    {
            "id": "calltoaction",
            "name": "Call to Action Button",
            "description": "Label and target for the call to action button",
            "attribute_definitions": [{
                 "id": "ctaTitle",
                 "name": "Button Title",
                 "type": "string",
                 "required": true
            },
            {
                 "id": "ctaLink",
                 "name": "Button Link",
                 "type": "url",
                 "required": true
            }
           ]
          }
        ],
        "region_definitions": []
} 

cmsheadlinebanner.js

Here’s the matching JS file.

'use strict';
var Template = require('dw/util/Template');
var HashMap = require('dw/util/HashMap');
var ImageTransformation = require('~/cartridge/experience/utilities/ImageTransformation.js');
/**
 * Render logic for the assets.headlinebanner.
 */
module.exports.render = function(context) {
   var model = new HashMap();
   var content = context.content;
   if (content.cmsItem) {
        model.bannerTitle = content.cmsItem.attributes.title;
        model.bannerCopy = content.cmsItem.attributes.body;
        if (content.cmsItem.attributes.bannerImage) {
            model.bannerImg = {
            src: {
                 mobile:
ImageTransformation.url(content.cmsItem.attributes.bannerImage, {
device: 'mobile' }),
                 desktop:
ImageTransformation.url(content.cmsItem.attributes.bannerImage, {
device: 'desktop' })
               },
               alt: content.cmsItem.attributes.excerpt
            };
         }
     }
     model.callToAction = {
         title: content.ctaTitle,
         link: content.ctaLink
     }
     return new
Template('experience/components/assets/headlinebanner').render(model).
text;
} 

Good JavaScript

Vijay uses the node package manager (npm) script to make sure his JavaScript adheres to the repository's guidelines. He enters these commands before committing his code.

npm install
npm run lint 

Next Steps

In this unit, you learned how to connect your B2C Commerce instance to a Salesforce CMS channel and assign the channel to your B2C Commerce site library. You also learned how to create a Page Designer component type that accesses the Salesforce CMS content. Next, you learn how to create new content in Salesforce CMS and use that content in a Page Designer component.

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities