Home » CMS Components

CMS Components


A CMS component is a the base type of each component found on a page. A component can be as simple as a text paragraph or something more complex like a product rotating component. Each CMS components are made of three
things :

  • an item that extends AbstractCMSComponent or one of its subtype
  • a Spring MVC controller that extends AbstractCMSComponentController
  • a JSP (or other front end technology) to render the component

(In Hybris 6.X) To customize how customized item types are rendered within the WMCS cockpit, you need to create

• editorArea_myType.xml
• contentEditor_myType.xml
• wizardConfig_myType.xml

SmartEdit

Now in Commerce Cloud 1905 and greater version SmartEdit was introduced, Which will be explained later in the tutorial

How to create a cms component

In this example we will create a CMS component to display a reminder of order time limit if you want to be delivered on the following day.

Create a new item type :

<typegroup name="cloudnircms">
        <itemtype code="CartSuggestionComponent" extends="SimpleSuggestionComponent"
                  autocreate="true" generate="true">
                <description>Represents the suggestion component 
                that displays product references for each item in the cart.</description>
        </itemtype>
</typegroup>

Create our controller :

@Controller("CartSuggestionComponentController")
@RequestMapping(value = ControllerConstants.Actions.Cms.CartSuggestionComponent)
public class CartSuggestionComponentController extends AbstractCMSComponentController<CartSuggestionComponentModel>
{
	@Resource(name = "cartFacade")
	private CartFacade cartFacade;

	@Resource(name = "simpleSuggestionFacade")
	private SimpleSuggestionFacade simpleSuggestionFacade;

	@Override
	protected void fillModel(final HttpServletRequest request, final Model model, final CartSuggestionComponentModel component)
	{
		if (cartFacade.hasSessionCart())
		{
			model.addAttribute("title", component.getTitle());
			model.addAttribute(
					"suggestions",
					simpleSuggestionFacade.getSuggestionsForProductsInCart(component.getProductReferenceTypes(),
							component.isFilterPurchased(), component.getMaximumNumberProducts()));
		}
	}

	@Override
	protected String getView(final CartSuggestionComponentModel component)
	{
		return ControllerConstants.Views.Cms.ComponentPrefix + StringUtils.lowerCase(SimpleSuggestionComponentModel._TYPECODE);
	}
}

• Creating a controller is not mandatory, if you don’t create your custom controller then DefaultCMSComponentController will be used.

• It loads all attributes from the item type and load them into your model.

Create a JSP :

We need to create a JSP to display our cms component, create a new file

cloudnirstorefront / web / webroot / WEB-INF/ views / responsive / cms / cartsuggestioncomponent.jsp:

<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<div class="ui-front">
<p>
<c:if test="${suggestions}">
        ${title}
        ${suggestions}
</c:if>
<c:if test="${not suggestions}">
        <fmt:message key="suggestions.missing"/>
</c:if>
</div>

Add this into your localization :

suggestions.missing = suggestions are missing


Run ant all, start your server and update your system, then run this (example
based on the electronic store front) :

$contentCatalog=electronicsContentCatalog
$contentCatalogName=Electronics Content Catalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Online])default=$contentCatalog:Online]

INSERT_UPDATE CartSuggestionComponentComponent;$contentCV[unique=true];uid[unique=true];name;message[lang=en];&componentRef;
;;cartSuggestionComponentComponent;Cart Suggestion Component Component;”Your Suggestion are Here”;cartSuggestionComponentComponent;

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef)
;;Section1Slot-CartPage;Section1 Slot for Cart Page;true;cartSuggestionComponentComponent

You should now see your new CMS component under your Cart page.