PageTemplate:-
* The template defines the the structure of the pages & it’s like blue print.
* One template can be assigned to multiple pages
Page:-
* In hybris 3 types of page content page,product page, category page.
* Pages have content slots.
* Pages are used to display information.
Content Slots:-
*Contentslots hold the component reference.
*Contentslots can hold multiple components.
Components:-
* Components are used to hold small piece of information to show in site.
* Hybris provided a lot of components. We can also create a new custom component.
Below is the Impex for creating template,page,components,
===================================================================
/traininginitialdata/resources/traininginitialdata/import/sampledata/contentCatalogs/catalogName/training_displaydatavertically.impex
$contentCatalog=electronicsContentCatalog
$contentCatalogName=Electronics Content Catalog $contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Online])[default=$contentCatalog:Online] $productCatalog=electronicsProductCatalog $productCatalogName=Electronics Product Catalog $productCV=catalogVersion(catalog(id[default=$productCatalog]),version[default='Online'])[unique=true,default=$productCatalog:Online] $picture=media(code, $contentCV); $image=image(code, $contentCV); $media=media(code, $contentCV); $page=page(uid, $contentCV); $contentPage=contentPage(uid, $contentCV); $product=product(code, $productCV) $category=category(code, $productCV) $siteResource=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electronicsstore/import/sampledata/contentCatalogs/$contentCatalog $productResource=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electronicsstore/import/sampledata/productCatalogs/$productCatalog $jarResourceCms=jar:de.hybris.platform.electronicsstore.constants.ElectronicsstoreConstants&/electronicsstore/import/sampledata/cockpits/cmscockpit
INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]
;;TrainingPageTemplate;Training Page Template;product/Trainingtemplatename;; # TrainingPage Template INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='TrainingPageTemplate'];validComponentTypes(code);compTypeGroup(code) ;SiteLogo;;;logo ;HeaderLinks;;;headerlinks ;SearchBox;;;searchbox ;MiniCart;;;minicart ;NavigationBar;;;navigation ;MiddleContent;;CMSParagraphComponent,SimpleResponsiveBannerComponent ;BottomContent;;;wide ;SideContent;;;narrow ;Footer;;;footer ;TopHeaderSlot;;;wide ;BottomHeaderSlot;;;wide ;PlaceholderContentSlot;;;
# Bind Content Slots to Page Templates
INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='TrainingPageTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
;;SiteLogo-Training;SiteLogo;;SiteLogoSlot;true ;;HomepageLink-Training;HomepageNavLink;;HomepageNavLinkSlot;true ;;MiniCart-Training;MiniCart;;MiniCartSlot;true ;;NavigationBar-Training;NavigationBar;;NavigationBarSlot;true ;;Footer-Training;Footer;;FooterSlot;true ;;HeaderLinks-Training;HeaderLinks;;HeaderLinksSlot;true ;;SearchBox-Training;SearchBox;;SearchBoxSlot;true ;;TopHeaderSlot-Training;TopHeaderSlot;;TopHeaderSlot;true ;;BottomHeaderSlot-Training;BottomHeaderSlot;;BottomHeaderSlot;true ;;PlaceholderContentSlot-Training;PlaceholderContentSlot;;PlaceholderContentSlot;true
# Content page
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'] ;;Trainingcontentpage;Training content page;TrainingPageTemplate;/Trainingcontentpage;;; #Images INSERT_UPDATE Media;$contentCV[unique=true];code[unique=true];realfilename;@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpeg'];altText;folder(qualifier)[default='images'];&mediaRef ;;mediaimage1;cam1.jpeg;$siteResource/images/banners/Elec_228x178_HomeCat_DigiSLR_DE_01.jpg;image/jpg;Training product;;mediaimage1 #Banner component INSERT_UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;media(&mediaRef) ;;TrainingProductBanner;Training product Banner;TrainingProductBanner;mediaimage1 INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(&componentRef) ;;Section1Slot-Training;Section1 Slot for Training;true;TrainingProductBanner INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true][default='Trainingcontentpage'];contentSlot(uid,$contentCV)[unique=true] ;;Section1-Training;Section1;;Section1Slot-Training # CMSParagraphComponents INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;content;;; ;;TrainingProductInfo;Training product information;TrainingProductInfo;<b>Training Product Info :: </b>Extracts limited product information for a given product <br> Price::25000 <br>brand::Sony # Content Slots INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];cmsComponents(&componentRef) ;;TrainingProductInfoSlot;TrainingProductInfo # ContentSlotForPages INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true][default='ktwcontentpage'];contentSlot(uid,$contentCV)[unique=true];;; ;;TrainingProductInfoSlotForPage;Section2;;TrainingProductInfoSlot |
=>Create JSP with frontend template name
/trainingstorefront/web/webroot/WEB-INF/views/responsive/pages/product/Trainingtemplatename.jsp
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="template" tagdir="/WEB-INF/tags/responsive/template"%>
<%@ taglib prefix="cms" uri="http://hybris.com/tld/cmstags"%>
<%@ taglib prefix="product" tagdir="/WEB-INF/tags/responsive/product"%>
<template:page pageTitle="${pageTitle}">
<div class="row">
<div class="col-md-5">
<cms:pageSlot position="Section1" var="comp" element="div" class="">
<cms:component component="${comp}" element="div" class=""/>
</cms:pageSlot>
</div>
<div class="col-md-5">
<cms:pageSlot position="Section2" var="comp" element="div" class="">
<cms:component component="${comp}" element="div" class=""/>
</cms:pageSlot>
</div>
</div>
</template:page>
|
=>To display veritcally we are using this ccs properties
<div class="row">
<div class="col-md-5">
</div>
</div>
|
=>Give request to this url
