Page History

Should Could be based off of this: Code Snippets and https://documentation.magnolia-cms.com/display/DOCS56/Developing+a+custom+content+editor+app

We'll be using the FreeMarker directive continue, so we need to update the version of FreeMarker that came with Magnolia (2.3.25 - you could find it in your WEB-INF/lib). Add the following to your webapp pom:
Expand
Code Block
<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.27-incubating</version> </dependency>

Now we need a content app for managing something, call them 'offers'.

Expand

Use the Groovy App to create a content app called 'Offers'. (this is just to create the workspace and get us the roles)

Delete /modules/groovy/apps/offers (you will use my copy instead later)

Delete /modules/ui-admincentral/config/appLauncherLayout/groups/edit/apps/offers (you will put it somewhere else later)

Log out of Magnolia and log back in (this is for your user environment to pick up the new roles)

Add this: offers.yaml to light_modules/rewe/apps/ (I've made some useful changes and made sure it has no errors)

Import this configuration: config.modules.ui-admincentral.config.appLauncherLayout.groups.rewe.xml (This will put the app in it's own group)

Add 3 offers using your new Offers app.

Note
Make sure for 'Country', you use 'cn' and 'gb'. This is for later testing in the exercise.

Expand
Image Added

Now we'll need to create a component to display the offers, a page for that component to live on, and some styling:

Expand

title	Create an Offers Component

Code Block

title	/rewe/templates/components/offersList.yaml

title: Offers List
renderType: freemarker
templateScript: /rewe/templates/components/offersList.ftl

Code Block

title	/rewe/templates/components/offersList.ftl

[#assign previewCountry = ctx.getParameter('previewCountry')!?html] [#-- there are other ways to do this! --]

<div class='offers-list'>
    [#assign page = cmsfn.page(content)]
    [#assign pageLink = cmsfn.link(page)]
    [#assign offerName = state.getSelector()]
    [#assign offerNode = cmsfn.contentByPath("/"+(offerName!), "offers")]

    [#if offerName?has_content && offerNode?has_content]

        [#if offerNode.name?has_content]
            <h3>${offerNode.name}</h3>
        [/#if]
        [#if offerNode.location?has_content]
            <h4>[#if offerNode.date?has_content] ${offerNode.date?string["dd.MM.YYYY"]!} - [/#if]${offerNode.location}</h4>
        [/#if]

        ${offerNode.description!}

        [#if pageLink?has_content]
            <a href="${pageLink!}">Show all offers</a>
        [/#if]

    [#else] [#-- IF THERE IS NO SELECTOR, LIST OF offerS WILL BE DISPLAYED --]

        [#assign offersRoot = cmsfn.contentByPath("/", "offers")]
        [#assign offers = cmsfn.children(offersRoot,"offer")![]]

        [#list offers]
            <ul class="list-group">
                <li class="list-group-item active">Total offers: ${offers?size} </li>
                [#items as offer]
            [#if previewCountry != offer.country] [#-- there are other ways to do this! --]
            [#continue] [#-- go to the next item if it's not the right country --]
            [/#if]
                    [#-- It might be, that the page link does not contain '.html' and/or ends with '/' --]
                    [#assign linkWithSelector = ensureLinkEndsWithDotHtml(pageLink)?replace('.html','~'+offer.@name+'~.html')]

                    [#if linkWithSelector?has_content && offer.name?has_content]
                        <a href="${linkWithSelector}" class="list-group-item"><small>offer #${offer_index+1}: </small> ${offer.name} [#if offer.date?has_content][${offer.date?string["dd.MM.YY"]}][/#if]</a>
                    [#else]
                        <li class="list-group-item"><small>offer #${offer_index+1}: </small> ${offer.name} [#if offer.date?has_content][${offer.date?string["dd.MM.YY"]}][/#if]</li>
                    [/#if]
                [/#items]
            </ul>
        [/#list]

    [/#if]

</div>

[#function ensureLinkEndsWithDotHtml link]

    [#if !link?contains(".html")]
        [#if link?ends_with("/")]
            [#assign link = link?keep_before_last('/')]
        [/#if]
        [#return link+'.html']
    [/#if]

    [#return link]

[/#function]

Expand

title	Create an Offers Page

Code Block

title	/rewe/templates/pages/offers.yaml

renderType: freemarker
title: Offers Page
templateScript: /rewe/templates/pages/offers.ftl

areas:
  main:
    availableComponents:
      eventsList:
        id: rewe:components/offersList
      textImage:
        id: mtk:components/textImage

Code Block

title	/rewe/templates/pages/offers.ftl

<!DOCTYPE html>
<html xml:lang="${cmsfn.language()}" lang="${cmsfn.language()}">
  <head>
    [@cms.page /]
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>${content.windowTitle!content.title!}</title>
    <meta name="description" content="${content.description!""}" />
    <meta name="keywords" content="${content.keywords!""}" />

    ${resfn.css(["/rewe/.*css"])!}
  </head>
  <body class="three ${cmsfn.language()}">
    [@cms.area name="main"/]

    <div class="container ">

    </div>

    ${resfn.js(["/rewe/.*js"])!}
  </body>
</html>

Expand

title	Add Some Styling

Copy these files into your /rewe/webresources/js and /rewe/webresources/css as appropriate:

bootstrap.css ----- bootstrap.min.js ----- jquery.min.js

Create an Offers Page, and add to it an OffersList Component:
Expand
Image Added
Try it out! http://localhost:8080/offers-test-1.html?previewCountry=gb and http://localhost:8080/offers-test-1.html?previewCountry=cn and test out the links. Notice how we have here personalization without making any page variants. We did it all through FreeMarker.

Page Turner

button-links	true

Page tree

Versions Compared

Old Version 2

New Version Current

Key