一、创建一个图片加文字的Components items
-
定义Components
core-items.xml定义Components继承CMSParagraphComponent -
<itemtype code="CMSMediaParagraphComponent" generate="true" jaloclass="de.hybris.platform.yacceleratorcore.jalo.cms2.components.CMSMediaParagraphComponent" extends="CMSParagraphComponent" autocreate="true"> <description>It represents paragraph component with an additional media attribute.</description> <attributes> <attribute qualifier="media" generate="true" autocreate="true" type="localized:Media"> <persistence type="property" /> <description>Attribute that stores the localized media of the paragraph.</description> </attribute> </attributes> </itemtype>
-
配置国际化
core-locales_en.properties -
type.CMSMediaParagraphComponent.name=Media Paragraph Component type.CMSMediaParagraphComponent.description=It represents paragraph component with an additional media attribute. type.CMSMediaParagraphComponent.content.name=Content type.CMSMediaParagraphComponent.content.description= type.CMSMediaParagraphComponent.media.name=Media type.CMSMediaParagraphComponent.media.description=
-
创建jsp
storefront/web/webroot/WEB-INF/components/cms2创建一个cmsmediaparagraphcomponent.jsp(新组件的code全小写命名);-
定义Controller
默认使用DefaultCMSComponentController来支持新的组件,它将组件的所有属性添加到Spring MVC模型中。
如有特殊要求需创建对应的Controller。
命名(包):com.o2o.storefront.controllers.cms
CMSMediaParagraphComponentController.java -
自定义页面布局
<div class="content"> <img src="${media.url}" alt="${media.altText}"/> ${content} </div>
-
-
添加组件
core/import/contentCatalogs/electronicsContentCatalog/cms-content.impex 添加组件$wideContent或$narrowContent;$narrowContent=ProductFeatureComponent,CategoryFeatureComponent,CMSImageComponent,SimpleBannerComponent,BannerComponent,ImageMapComponent,RotatingImagesComponent,ProductCarouselComponent,CMSParagraphComponent,CMSMediaParagraphComponent
-
创建访问权限
core/import/cmscockpit/cmscockpit-access-rights.impex -
Type;UID;MemberOfGroups;Password;Target;read;change;create;remove;change_perm ;;;;CMSMediaParagraphComponent;+;+;+;+;+;
二、cockpit 配置
在core/resources/yacceleratorcore-config/cmsmanagergroup文件下
-
editorArea配置
editorArea_CMSMediaParagraphComponent.xml<?xml version="1.0" encoding="UTF-8"?> <editor> <group qualifier="General" visible="true" initially-opened="true"> <label lang="de">Stammdaten</label> <label lang="en">General</label> <property qualifier="CMSItem.name"/> <property qualifier="CMSItem.catalogVersion" editor="shortListEditor"/> <property qualifier="AbstractCMSComponent.visible"/> </group> <group qualifier="editorial" visible="true" initially-opened="false"> <label lang="de">Redaktionell</label> <label lang="en">Editorial</label> <property qualifier="CMSParagraphComponent.content" editor="wysiwyg"/> <property qualifier="CMSMediaParagraphComponent.media" editor="simpleMediaReferenceSelector"> <parameter> <name>mimeTypes</name> <value> image/jpeg;image/gif </value> </parameter> <parameter> <name>mimeTypes</name> <value> image/jpeg;image/gif </value> </parameter> <parameter> <name>allowCreate</name> <value>true</value> </parameter> <parameter> <name>restrictToCreateTypes</name> <value>Media</value> </parameter> <parameter> <name>celumMediaFormat</name> <value>picture</value> </parameter> </property> </group> <group qualifier="visibility" visible="true" initially-opened="false"> <label lang="de">Context Visibility</label> <label lang="en">Context Visibility</label> <property qualifier="AbstractCMSComponent.restrictions"> <parameter> <name>allowCreate</name> <value>true</value> </parameter> </property> <property qualifier="AbstractCMSComponent.onlyOneRestrictionMustApply"/> </group> <group qualifier="admin" visible="true" initially-opened="false"> <label lang="de">Administration</label> <label lang="en">Administration</label> <property qualifier="CMSItem.uid"/> <property qualifier="AbstractCMSComponent.slots"/> <property qualifier="AbstractCMSComponent.container"/> <property qualifier="Item.pk" /> <property qualifier="Item.creationTime" /> <property qualifier="Item.modifiedtime" /> </group> <custom-group class="de.hybris.platform.cockpit.services.config.impl.UnassignedEditorSectionConfiguration" qualifier="unassigned" initially-opened="false" visible="false"> <label lang="de">Andere</label> <label lang="en">Other</label> </custom-group> </editor>
-
LiveEdit模式
支持将下面的代码添加到contentEditor_CMSMediaParagraphComponent.xml文件
<?xml version="1.0" encoding="UTF-8"?> <content-editor hideEmpty="true" hideReadOnly="true" groupCollections="false"> <template> <![CDATA[ <table width="100%" style="margin:0px;padding:0px"> <tbody> <tr> <td colspan="2"><div style="height:6px"/></td> </tr> <tr> <td colspan="2"><div class="contentEditorHeader" style="background-color:#C3C3C3;font-size:11px;padding:3px;"><b>$label</b></div></td> </tr> <tr> <td style="width:900px"><cockpit code="property" value="CMSParagraphComponent.content"/></td> <td><div style="height:6px"/></td> </tr> <tr> <td style="width:900px"><cockpit code="property" value="CMSMediaParagraphComponent.media"/></td> <td><div style="height:6px"/></td> </tr> </tbody> </table> ]]> </template> <custom-editors> <property qualifier="CMSParagraphComponent.content" editorCode="wysiwyg"> <parameter> <name>inline</name> <value>true</value> </parameter> <parameter> <name>fckToolbarConfiguration</name> <value> [['Bold', 'Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','OrderedList','UnorderedList','-','Outdent','Indent','-','Table'],'/',['FontName','FontSize','TextColor','-','Source']] </value> </parameter> <parameter> <name>editorWidth</name> <value>700px</value> </parameter> <parameter> <name>editorHeight</name> <value>200px</value> </parameter> <parameter> <name>labelWidth</name> <value>120px</value> </parameter> </property> <property qualifier="CMSMediaParagraphComponent.media" editorCode="simpleMediaReferenceSelector"> <parameter> <name>mimeTypes</name> <value>image/jpeg;image/gif</value> </parameter> <parameter> <name>allowCreate</name> <value>true</value> </parameter> <parameter> <name>restrictToCreateTypes</name> <value>Media</value> </parameter> <parameter> <name>imageHeight</name> <value>80px</value> </parameter> <parameter> <name>celumMediaFormat</name> <value>picture</value> </parameter> </property> </custom-editors> </content-editor>
-
wizard配置
wizardConfig_CMSMediaParagraphComponent.xml -
<?xml version="1.0" encoding="UTF-8"?> <wizard-config showPrefilledValues="false" selectMode="true" createMode="true" displaySubtypes="true"> <displayed-properties> <group qualifier="General" visible="true" initially-opened="true"> <label lang="en">General</label> <label lang="de">General</label> <property qualifier="CMSItem.name"/> </group> <group qualifier="Properties" visible="true" initially-opened="true"> <label lang="en">Properties</label> <label lang="de">Eigenschaften</label> <property qualifier="CMSParagraphComponent.content" editorCode="wysiwyg" /> <property qualifier="CMSMediaParagraphComponent.media" editorCode="simpleMediaReferenceSelector" /> </group> </displayed-properties> </wizard-config>
三、创建组件模板数据
-
ImpEx文件
cms-content_en.impex# Macros / Replacement Parameter definitions $contentCatalog=electronicsContentCatalog INSERT_UPDATE Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpg'];altText;folder(qualifier)[default='images'] ;;sampleCMSParagraphImage.jpg;$siteResource/images/sampleCMSParagraphImage.jpg;; # CMS Media Paragraph Component INSERT_UPDATE CMSMediaParagraphComponent;$contentCV[unique=true];uid[unique=true];name;content[lang=$lang];&componentRef ;;SampleCMSMediaParagraphComponent;Sample MediaParagraphComponent;"Sample content";SampleCMSMediaParagraphComponent # Component for sontentSlot INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];active;cmsComponents(&componentRef) ;;Section1Slot-Homepage;true;SampleCMSMediaParagraphComponent