Develop a Component Type to Use CMS Content

Define a component type with an attribute assigned to Salesforce CMS content.

1. Determine the content required to configure the compontent type attribute.
   For example, you want merchants to be able to include a headline banner on their Page Designer page by selecting a CMS record. You can use the news content type, which already exists in Salesforce CMS, to create and manage the content for the headline banner.
   If the content type you want to use in the Page Designer page doesn't already exist in the CMS, create it. See Create Custom Content Types for Salesforce CMS.
2. Create a component type that includes attibutes assigned to type cms_record, with the content_type specified in the editor_definition element.

   For example, the following meta defintion file and script files for component type CMS Headline Banner use a Headline Content attribute of type cms_record, with content_type news.

   
                     cmsheadlinebanner.json
   {
       "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 cation 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
   '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;
   };