Creating WCMS Custom Component

1)Requirment:-

->How to change Rs though HMC?

Solution:-

Internationalization———–>curriency—–>IND——>dubble click

 

 

2)Requirement :-

   ->Creating Custom Component Which is consists of  Collection CmsLink,image,two localze Strings

and this will define in the home page(landinglayout2 page)

Solution

1)Creating Itemtype (build and update)

2) Writting impex to that respected item type

3)writing Controller and  jsp

4)Then we will use this component in out Page Template

Defining Collection CmsLink,image,two localze Strings items.xml file component

refferes:-(https://wiki.hybris.com/display/release5/How+to+Add+a+New+CMS+Component)

datamodel

<collectiontype code=“CMSOfferLinkCollection”

elementtype=“CMSLinkComponent” autocreate=“true” generate=“true”

type=“list” />

<itemtype code=“CUSTOfferImageComponent” generate=“true”

extends=“SimpleCMSComponent” autocreate=“true”

jaloclass=“in.com.cust.core.jalo.components.CUSTOfferImageComponent”>

<description>Used to display image banners on homepage

</description>

<attributes>

<attribute type=“localized:java.lang.String” qualifier=“title”>

<modifiers read=“true” write=“true” optional=“false” />

<persistence type=“property” />

</attribute>

<attribute type=“localized:java.lang.String” qualifier=“text”>

<modifiers read=“true” write=“true” optional=“false” />

<persistence type=“property” />

</attribute>

<attribute type=“Media” qualifier=“backgroundimage”>

<modifiers read=“true” write=“true” optional=“false” />

<persistence type=“property” />

</attribute>

<attribute type=“CMSOfferLinkCollection”

qualifier=“backGroundImageLink”>

<persistence type=“property” />

<description>CMS Link Component</description>

<modifiers read=“true” write=“true” />

</attribute>

</attributes>

</itemtype>

 

2) type ant all then CUSTOfferImageComponentMOdel.java will create

package in.com.cust.core.model.components;

@SuppressWarnings(“all”)

public class CUSTOfferImageComponentModel extends SimpleCMSComponentModel

{

////////

}

3)goto hac the Update then CUSTOfferImageComponent table will create

4) coming to impex

macros of cms-content.impex

$contentCatalog=electronicsContentCatalog

$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]

$productCatalog=electronicsProductCatalog

$productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default=’Staged’])[unique=true,default=$productCatalog:Staged]

$picture=media(code, $contentCV);

$image=image(code, $contentCV);

$media=media(code, $contentCV);

$page=page(uid, $contentCV);

$contentPage=contentPage(uid, $contentCV);

$category=category(code, $productCV)

$siteResource=jar:in.com.cust.electronicsstore.constants.electronicsstoreConstants&/electronicsstore/import/coredata/contentCatalogs/$contentCatalog

$jarResourceelectronicsStoreCms=jar:in.com.cust.electronicsstore.constants.electronicsstoreConstants&/electronicsstore/import/coredata/cockpits/cmscockpit

$lang=en

$backgroundimage=image(code, $contentCV);

i)frist create collection of links

INSERT_UPDATE CMSLinkComponent;$contentCV[unique=true];uid[unique=true];name;url;&linkRef;&componentRef;target(code)[default=’sameWindow’];$category;

;;WomenOfferLink;Women Offer Link;/WomenOfferLink;WomenOfferLink;WomenOfferLink;;;;

;;MenOfferLink;Men Offer Link;/MenOfferLink;MenOfferLink;MenOfferLink;;;;

;;GirlsOfferLink;Girls Offer Link;/GirlsOfferLink;GirlsOfferLink;GirlsOfferLink;;;;

;;BoysOfferLink;Boys Offer Link;/BoysOfferLink;BoysOfferLink;BoysOfferLink;;;;

ii)create image

copy the image(katrina.png) in specified location

INSERT_UPDATE Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default=’image/png’];&imageRef;folder(qualifier)[default=’images’];altText

;;katrina2.png;$siteResource/images/banners/homepage/katrina.png;;katrina2.png;;

iii)importing our data in offer component

INSERT_UPDATE CUSTOfferImageComponent;$contentCV[unique=true];uid[unique=true];name;title[lang=$lang];text[lang=$lang];backgroundimage(code);&componentRef;backGroundImageLink(&linkRef);

;;backGroundImagesComponent;backGround Images Component;”up to 30 % off”;”on all summer

<br>collection”;katrina2.png;backGroundImagesComponent;WomenOfferLink,MenOfferLink,GirlsOfferLink,BoysOfferLink

iv)defing contentslot

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef)

;;backgroundimageslot;backgrouns image slot;true;backGroundImagesComponent

V)defining ContentSlotForPage

INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true] ;position[unique=true];page(uid,$contentCV)[unique=true][default=’homepage’];contentSlot(uid,$contentCV)[unique=true]

;;backgrounsimageslotforpage-Homepage;OfferImageLeft;;backgroundimageslot

Vi)defining contentSlotName

INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default=’LandingPage2Template’];validComponentTypes(code);compTypeGroup(code)

;OfferImageLeft;;CUSTOfferImageComponent

5)Defining in ControllerConstant

package in.com.cust.electronics.storefront.controllers;

in.com.cust.core.model.components.CUSTOfferImageComponentModel;

public interface ControllerConstants

{

/**

* Class with action name constants

*/

interface Actions

{

interface Cms

{

String _Prefix = “/view/”;

String _Suffix = “Controller”;

String CUSTOfferImageComponent = _Prefix + CUSTOfferImageComponentModel._TYPECODE + _Suffix;

——–

———-

—–

}

——————

—————–

}

}

6)defing controller

package in.com.cust.electronics.storefront.controllers.cms;

import in.com.cust.electronics.storefront.controllers.ControllerConstants;

import in.com.cust.core.model.components.CUSTOfferImageComponentModel;

import javax.servlet.http.HttpServletRequest;

import org.springframework.context.annotation.Scope;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller(“CUSTOfferImageComponentController”)

@Scope(“tenant”)

@RequestMapping(value = ControllerConstants.Actions.Cms.CUSTOfferImageComponent)

public class CUSTOfferImageComponentController extends AbstractCMSComponentController<CUSTOfferImageComponentModel>

{

@Override

protected void fillModel(final HttpServletRequest request, final Model model, final CUSTOfferImageComponentModel component)

{ // YTODO Auto-generated method stub

model.addAttribute(“backGroudImageLink”, component.getBackGroundImageLink());

model.addAttribute(“backGroundImage”, component.getBackgroundimage());

model.addAttribute(“title”, component.getTitle());

model.addAttribute(“text”, component.getText());

}

}

7) defing links, img and strings in jsp

<%@ page trimDirectiveWhitespaces=“true”%>

<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core&#8221;%>

<%@ taglib prefix=“cms” uri=“http://hybris.com/tld/cmstags&#8221;%>

<%@ taglib prefix=“format” tagdir=“/WEB-INF/tags/shared/format”%>

<%@ taglib prefix=“product” tagdir=“/WEB-INF/tags/desktop/product”%>

<%@ taglib prefix=“ycommerce” uri=“http://hybris.com/tld/ycommercetags&#8221;%>

<%@ taglib prefix=“fn” uri=“http://java.sun.com/jsp/jstl/functions&#8221;%>

<section class=“col_360px margin_b_0”>

<article class=“margin_b_0 home_banner padding_tb_10px”>

<p class=“banner_title padding_l_10px margin_b_10px”>${title}</p>

<p class=“banner_subtitle padding_l_10px margin_b_10px”>${text}</p>

<ul class=“banner_list”>

<c:forEach items=“${backGroudImageLink}“ var=“bannerComp”>

<li class=“padding_t_10px”><a href=“${bannerComp.url}“>${bannerComp.name}</a></li>

</c:forEach>

</ul>

<img alt=“katrina” src=“${backGroundImage.url}“ class=“div_tr”>

</article>

</section>

• note:-title,text are the String
• backGroudImageLink-be the link(${bannerComp.url}),${bannerComp.name}
• ${backGroundImage.url}-be the img url

note)**** Creation of Component is Over how to Display the this Component in Home Page

——————————————————- ——-

8) go to Vm file

OfferImageLeft(VM)= OfferImageLeft(ContentSlotName)

<tr>

<td colspan=”1″ class=”structureViewSection”>

<cockpit code=”OfferImageLeft” />

</td >

<td colspan=”1″ class=”structureViewSection”>

<cockpit code=”OfferImageCenter” />

</td>

<td colspan=”1″ class=”structureViewSection”>

<cockpit code=”OfferImageRight” />

</td>

</tr>

 

<table width=”100%” cellspacing=”0″ style=”margin:0;padding:0;table-layout:auto;border:1px solid #1E4EBF;”>

<tbody>

<tr>

<td colspan=”1″ class=”structureViewSection”>

<cockpit code=”SiteLogo” />

</td>

<td colspan=”3″ class=”structureViewSection”>

<table width=”100%” cellspacing=”0″ style=”margin:0;padding:0;table-layout:auto;border:1px solid #1E4EBF;”>

<tbody>

<tr>

<td class=”structureViewSection”>

<cockpit code=”CitySelectionSlot” />

</td>

<td class=”structureViewSection”>

<cockpit code=”TopHeaderFixedBarSlot” />

</td>

<td class=”structureViewSection”>

<cockpit code=”HeaderLinks” />

</td>

</tr>

<tr>

<td colspan=”2″>

<cockpit code=”SearchBox” />

</td>

<td>

<cockpit code=”MiniCart” />

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

<td colspan=”5″ class=”structureViewSection”>

<cockpit code=”NavigationBar” />

</td>

</tr>

<tr>

<td colspan=”1″ class=”structureViewSection”>

<tr>

<td colspan=”2″ class=”structureViewSection”>

<cockpit code=”RotatingHeroBanners” />

</td>

<td colspan=”2″ class=”structureViewSection”>

<cockpit code=”RightBanners” />

</td>

</tr>

</td>

<td colspan=”3″ class=”structureViewSection”>

<tr>

<td colspan=”1″ class=”structureViewSection”>

<cockpit code=”OfferImageLeft” />

</td >

<td colspan=”1″ class=”structureViewSection”>

<cockpit code=”OfferImageCenter” />

</td>

<td colspan=”1″ class=”structureViewSection”>

<cockpit code=”OfferImageRight” />

</td>

</tr>

<tr>

<td colspan=”3″ class=”structureViewSection”>

<cockpit code=”homepageImage” />

</td>

</tr>

<tr>

<td colspan=”3″ class=”structureViewSection”>

<cockpit code=”BestSellingFeaturedCategoryProductsSection” />

</td>

</tr>

</td>

</tr>

<tr>

<td colspan=”5″ class=”structureViewSection”>

<cockpit code=”FeaturedFashionProducts” />

</td>

</tr>

<tr>

<td colspan=”3″ class=”structureViewSection”>

<cockpit code=”HorizontalBanners” />

</td>

</tr>

<tr>

<td colspan=”5″ class=”structureViewSection”>

<cockpit code=”FeaturedCategoryProductsSection” />

</td>

</tr>

<tr>

<td colspan=”5″ class=”structureViewSection”>

<cockpit code=”SignUpPopup” />

</td>

</tr>

<tr>

<td colspan=”5″ class=”structureViewSection”>

<cockpit code=”Footer” />

</td>

</tr>

</tbody>

</table>

 

 

 

 

 

9)displaying in Home page Jsp(landingLayout2Page.jsp)

OfferImageLeft(VM)= OfferImageLeft(ContentSlotName)= OfferImageLeft(landingLayout2Page.jsp)

<article class=“offer-image-banner”>

<cms:pageSlot position=“OfferImageLeft” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

<cms:pageSlot position=“OfferImageCenter” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

<cms:pageSlot position=“OfferImageRight” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

</article>

landingLayout2Page.jsp

<%@ page trimDirectiveWhitespaces=“true”%>

<%@ taglib prefix=“template” tagdir=“/WEB-INF/tags/desktop/template”%>

<%@ taglib prefix=“cms” uri=“http://hybris.com/tld/cmstags&#8221;%>

<%@ taglib prefix=“common” tagdir=“/WEB-INF/tags/desktop/common”%>

<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core&#8221;%>

<%@ taglib prefix=“jspcache”

uri=“/WEB-INF/common/tld/jspfragmentcache.tld”%>

<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core&#8221;%>

<%@ taglib prefix=“template” tagdir=“/WEB-INF/tags/desktop/template”%>

<%@ taglib prefix=“spring” uri=“http://www.springframework.org/tags&#8221;%>

<%@ taglib prefix=“header” tagdir=“/WEB-INF/tags/desktop/common/header”%>

<%@ taglib prefix=“cms” uri=“http://hybris.com/tld/cmstags&#8221;%>

<%@ taglib prefix=“footer” tagdir=“/WEB-INF/tags/desktop/common/footer”%>

<%@ taglib prefix=“nav” tagdir=“/WEB-INF/tags/desktop/nav”%>

<%@ taglib prefix=“sec”

uri=“http://www.springframework.org/security/tags&#8221;%>

<template:homePage pageTitle=“${pageTitle}“>

<section class=“padding-top”>

<div class=“container”>

<div class=“row”>

<div class=“col-sm-12 paddingtop”>

<div class=“col-sm-9 bbslider”>

<div class=“centerRotatingBanner “

style=”padding-right: 0px; padding-left: 0px;”>

<cms:pageSlot position=“RotatingHeroBanners” var=“feature”

element=“div” class=“yCmsComponent”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

</div>

</div>

<div class=“col-sm-3” style=”padding-left: 0; padding-right: 0“>

<div class=“left-sidebar rt-bannerimg”>

<cms:pageSlot position=“RightBanners” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

</div>

</div>

</div>

<article class=“offer-image-banner”>

<cms:pageSlot position=“OfferImageLeft” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

<cms:pageSlot position=“OfferImageCenter” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

<cms:pageSlot position=“OfferImageRight” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

</article>

<cms:pageSlot position=“homepageImage” var=“feature”>

<cms:component component=“${feature}“ />

<c:set value=“${carouselHideActiveIndx+1}“

var=“carouselHideActiveIndx” scope=“session” />

</cms:pageSlot>

<div class=“col-lg-12 paddingbottom”>

<div class=“col-sm-12 col-sm-902 paddingtop1 padding0”>

<c:set value=“0” var=“carouselHideActiveIndx” scope=“session” />

<div class=“commnets”>

<div class=“category-tab withoutDots”>

<div class=“col-sm-12 paddingleft”>

<ul class=“nav nav-tabs”>

<li><a href=“#carousel2” data-toggle=“tab”

id=“bestsellers_crousel”>Best Sellers</a></li>

<li class=“active”><a href=“#carousel3” data-toggle=“tab”

id=“featuredproduct_crousel”>Featured PRODUCTS</a></li>

</ul>

</div>

<div class=“tab-content”>

<jspcache:cache

key=“desktop-bestSellingFeaturedCategoriesSection”>

<cms:pageSlot

position=“BestDealsFeaturedCategoryProductsSection”

var=“feature”>

<cms:component component=“${feature}“ />

<c:set value=“${carouselHideActiveIndx+1}“

var=“carouselHideActiveIndx” scope=“session” />

</cms:pageSlot>

</jspcache:cache>

</div>

</div>

</div>

<div class=“response-area”>

<div class=“category-tab withoutDots”>

<div class=“col-sm-12 paddingleft”>

<div class=“tbd”>Hot Picks</div>

</div>

<div class=“tab-content”>

<jspcache:cache

key=“desktop-bestSellingFeaturedCategoriesSection”>

<cms:pageSlot position=“FeaturedFashionProducts” var=“feature”>

<c:set value=“${carouselHideActiveIndx+0}“

var=“carouselHideActiveIndx” scope=“session” />

<cms:component component=“${feature}“ />

</cms:pageSlot>

</jspcache:cache>

</div>

</div>

</div>

</div>

<!– div col–sm-9 –>

<%–

col–sm-3″ style=”padding-left: 0px; padding-right:2px”>

sidebar“>

var=”feature”>

</div>

</div> –%>

<!– div col-sm-3 –>

</div>

</div>

</div>

<div class=“col-sm-12” >

<%–

 

</div> –%>

<article>

<article class=” margin_b_0″>

<section class=“reward-offer margin_b_0”>

<cms:pageSlot position=“HorizontalBanners” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

</section>

</article>

</article>

</div>

</section>

<section id=“slider” class=“withoutDots1”>

<jspcache:cache key=“desktop-featuredCategoryProductsSection”>

<cms:pageSlot position=“FeaturedCategoryProductsSection”

var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

</jspcache:cache>

</section>

<div class=“slider_component logo-slide”>

<div id=“mycrawler1” class=“marquee”>

<cms:pageSlot position=“BrandsHorizontalBanners” var=“feature”>

<cms:component component=“${feature}“ />

</cms:pageSlot>

</div>

</div>

</template:homePage>