...
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'.
You could do like what we did yesterday: use
, download that definition to YAML, then put it in theExpand Use the Groovy App to create a content app
apps
registry of some module, and it should work. I have already done this for you for this case, if you don't want to repeat the work. Even if you do, if something goes wrong, you can instead use this one: offers.yaml.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 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 | ||
---|---|---|
|