GTM snippet

Sunday, September 29, 2019

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