CloudNir

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.