...
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 Now we'll
make a page to display the items from that app: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 - 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.yz
Page Turner | ||
---|---|---|
|