B2C Commerce Cloud Component Types for CMS Content
B2C Commerce Cloud uses components to display content. To include CMS content in components, define a new component type for each CMS content type. Each component type requires a definition file, a JavaScript file, and a template file.
The definition file specifies information about the component, such as the display name when you select the component in Page Designer.
To indicate that the component uses CMS content, create an object in the attribute_definitions array that defines the content type’s attributes. In that object, set the type field to cms_record and the editor_definition object’s content_type field to the name of the content type.
This sample definition file creates a component type for CMS content. The CMS content uses a custom content type called “Promotion.” The attribute_definition_groups.id field has a value of cmsPromotion, which is used in the JavaScript file to reference the CMS content in the component.
The JavaScript file makes the content available for use with the template. The imported content’s fields are available in the context.content.{id_from_definition}.attributes object. Replace {id_from_definition} with the value from the definition file’s attribute_definition_groups.id property.
The template file uses a model object to access the content’s fields. To make the content’s fields accessible from the template, assign the content’s fields to the model.
This sample JavaScript file corresponds to the definition file sample. In the definition file, the attribute_definition_groups.id value is cmsPromotion, so the content’s fields are accessible as properties of the context.content.cmsPromotion.attributes object.
The template file contains the HTML that determines how browsers display the component. In this file, use the pdict object to access the model for the content. All properties of the content model created in the JavaScript file are accessible as properties of the pdict object.
This sample template file corresponds with the other sample files.