Magnolia 5.5 reached end of life on November 15, 2019. This branch is no longer supported, see End-of-life policy.
...
Create a component definition:
Code Pro | ||||||
---|---|---|---|---|---|---|
| ||||||
|
Create a dialog with the following fields:
title
for the cars section on the page.subText
to enter some introduction text about this particular selection of cars.productFolderRef
link field that allows the user to select a folder of cars from the Products app. The template displays all cars from the selected folder.sectionName
to display in the navigation menu.Code Pro | ||||||
---|---|---|---|---|---|---|
| ||||||
|
The template script should do the following things:
...
To understand what the script needs to output, have another look at the static HTML prototype:
Code Pro | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
|
Turning this into a FreeMarker script we end up with:
Code Pro | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
In the script we make heavy use of cmsfn
and damfn
templating functions. They make common templating tasks such as creating links easier:
cmsfn.contentById(content.productFolderRef, "products")
gets the folder of cars the user selected. You can find the folder in the products
workspace using its unique ID (UUID) which is stored in the productFolderRef
property.cmsfn.children(productFolder, "mgnl:product")
builds a list of cars in the selected folder.damfn.getAsset(product.image!"")
gets an asset from the Magnolia DAM. This is the car photo. It is linked to the car (product) by the image
property.damfn.getAssetLink(product.image, "large")
builds a hyperlink to the asset so we can display a car image on the page. We also pass a variation name large
that you will create in Using a site definition.cmsfn.decode(product).description
decodes content entered in the rich text field. See: Decode text.Components are meant to be added to areas which are defined in a page template.
Edit the template definition of the page template main and make the new component available at the content-sections
area:
Code Pro | ||||||
---|---|---|---|---|---|---|
| ||||||
templateScript: /one-pager-module/templates/pages/main.ftl
renderType: freemarker
visible: true
title: One pager template
dialog: one-pager-module:pages/main
areas:
content-sections:
availableComponents:
content-items-list:
id: one-pager-module:components/content-items-list |
Now you can use the component.
Add the new component on the page. In the dialog, select the the /cars/classics
folder from the Products app. Add another component using cars from the the /cars/007
folder.
...
Code Block |
---|
one-pager-module/ ├── dialogs/ │ ├── components/ │ │ ├── content-items-list.yaml └── templates/ └── components/ ├── content-items-list.ftl └── content-items-list.yaml |
...