How to add components to custom page!

In this bolg we are adding 2 Components (CMSParagraph, SimpleBannerComponent)

Run the following impexs and you will be good to go

File name is cms-responsive-content.impex

#Macros for impex

$contentCatalog=electronicsContentCatalog

$contentCatalogName=Electronics Content Catalog

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

$productCatalog=electronicsProductCatalog

$productCatalogName=Electronics Product Catalog

$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);

$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

1.Create a CMSParagraph Component

INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;;;;content

;;SaleHeadingComponent;Sale Heading Paragraph Component;SaleHeadingComponent;;;;Limited Time Sale Hurry Up!

1.1 Create a SimpleBannerComponent

INSERT_UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef

;;SaleBannerComponent;Sale Banner Compoonent; SaleBannerComponent

2.Update The component to Page template

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

;SaleHeading;;;wide

;SaleBanner;;;wide

3.Update the Content Slot Global

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active

;;SaleHeadingSlot;Sale heading cotent slot;true

;;SaleBannerSlot;Sale Banner;true

4.Add Content Slot to PageTemplate

INSERT_UPDATE ContentSlotForTemplate;$contentCV[unique=true];uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='PhonePageTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite

;;SaleHeadingComponent-PhonePage;SaleHeading;;SaleHeadingSlot;true

;; SaleBannerComponent -PhonePage; SaleBanner;; SaleBannerSlot;true

4.1 Update the Media

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

;;SaleBanner.png;$siteResource/images/banners/phonepage/SaleBanner.png;;;"Sale Banner Image"

4.2 Add media Object to banner component

UPDATE SimpleBannerComponent;$contentCV[unique=true];uid[unique=true];$picture[lang=$lang]

;; SaleBannerComponent;SaleBanner.png

5.Update the cmsComponent

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];cmsComponents(uid,$contentCV)

;;SaleHeadingSlot;SaleHeadingComponent

;; SaleBannerSlot; SaleBannerComponent

6. Add the component  to the jsp file in my case its phone.jsp

<template:page pageTitle="${pageTitle}">

           <div class="SaleBanner">

              <cms:pageSlot position="SaleBanner" var="feature">

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

              </cms:pageSlot>

             </div>

         

           <div class="SaleHeading">

              <cms:pageSlot position="SaleHeading" var="feature">

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

              </cms:pageSlot>

              </div>

         

         

</template:page>

7. For CSS you can make following changes in style.css file

.SaleHeading{

    font-weight: bold;

    margin-right: 5px;

    color: #D4AF37;

    font-size: 35px;   

}

.SaleBanner{

          width: 30%;

          visibility: true;

          heigh: 30%; 

}

8.Paste the image to the following destination

electronicsstore/resources/electronicsstore/import/sampledata/contentCatalogs/electronicsContentCatalog/images/banners/phonepage/SaleBanner.png

9. Out Come will be