Frontend Developer Manual / Version 2204
Table Of ContentsCopyright CoreMedia GmbH © 2022
CoreMedia GmbH
Ludwig-Erhard-Straße 18
20459 Hamburg
International
All rights reserved. No part of this manual or the corresponding program may be reproduced or copied in any form (print, photocopy or other process) without the written permission of CoreMedia GmbH.
Germany
Alle Rechte vorbehalten. CoreMedia und weitere im Text erwähnte CoreMedia Produkte sowie die entsprechenden Logos sind Marken oder eingetragene Marken der CoreMedia GmbH in Deutschland. Alle anderen Namen von Produkten sind Marken der jeweiligen Firmen.
Das Handbuch bzw. Teile hiervon sowie die dazugehörigen Programme dürfen in keiner Weise (Druck, Fotokopie oder sonstige Verfahren) ohne schriftliche Genehmigung der CoreMedia GmbH reproduziert oder vervielfältigt werden. Unberührt hiervon bleiben die gesetzlich erlaubten Nutzungsarten nach dem UrhG.
Licenses and Trademarks
All trademarks acknowledged.
September 13, 2022- 1. Preface
- 2. Quick Start
- 3. Web Development Workflow
- 4. Workspace Concept
- 5. How-Tos
- 5.1. Creating a New Theme
- 5.2. Creating a New Brick
- 5.3. Using Bricks
- 5.4. Using an Example Brick
- 5.5. Theme Inheritance
- 5.6. Importing Themes into the Repository
- 5.7. Referencing a Static Theme Resource in FreeMarker
- 5.8. Embedding a favicon in FreeMarker
- 5.9. Customizing the Webpack Configuration of a Theme
- 5.10. Building Additional CSS Files from SCSS
- 5.11. Customizing the Babel Configuration of a Theme
- 5.12. Embedding Small Images in CSS
- 5.13. Integrating Non-Modular JavaScript
- 5.14. Changing the pnpm Registry
- 5.15. Rendering Markup
- 5.16. Rendering Container Layouts
- 5.17. Templates for HTTP Error Codes
- 5.18. Using Code Splitting for JavaScript
- 5.19. Building Standalone JavaScript Files
- 6. Reference
- 6.1. Example Themes
- 6.2. Theme Config
- 6.3. Bricks
- 6.4. Example Bricks
- 6.4.1. Example 360-Spinner
- 6.4.2. Example Carousel Banner
- 6.4.3. Example Cart
- 6.4.4. Example Detail
- 6.4.5. Example Download-Portal
- 6.4.6. Example Elastic Social
- 6.4.7. Example Footer
- 6.4.8. Example Fragment-Scenario
- 6.4.9. Example Hero Banner
- 6.4.10. Example Landscape Banner
- 6.4.11. Example Left Right Banner
- 6.4.12. Example Navigation
- 6.4.13. Example Popup
- 6.4.14. Example Portrait Banner
- 6.4.15. Example Product Assets
- 6.4.16. Example Search
- 6.4.17. Example Shoppable-Video
- 6.4.18. Example Square Banner
- 6.4.19. Example Tag-Management
- 6.5. CoreMedia FreeMarker Facade API
- 6.6. Scripts
- Glossary
- Index
List of Figures
- 3.1. CAE flow in detail
- 3.2. Enable Developer Mode in Studio
- 3.3. Content Application Engine flow in detail
- 4.1. Relations between package groups.
- 5.1. File Upload in Studio
- 5.2. Associated Theme
- 5.3. Class diagram of Models involved in Container Rendering
- 5.4. Container layouts for PageGrid
- 5.5. Sequence diagram showing view dispatching in the page grid
- 5.6. Sequence diagram showing view dispatching for nested items
- 6.1. Shared-Example Theme
- 6.2. Chefcorp Theme
- 6.3. Aurora Theme
- 6.4. Calista Theme
- 6.5. Hybris Theme
- 6.6. Sitegenesis Theme
- 6.7. SFRA Theme
- 6.8. Wireframe of an image map
- 6.9. Wireframe of media
- 6.10. Wireframe for preview on desktop
- 6.11. Example of fragmentPreview Setting Properties
- 6.12. Wireframe of 360°-Spinner on desktop
- 6.13. Wireframe of 360°-Spinner on mobile
- 6.14. Wireframe for carousel-banner on desktop
- 6.15. Wireframe for carousel-banner on mobile
- 6.16. Wireframe of footer on desktop
- 6.17. Wireframe of footer on mobile
- 6.18. Wireframe for hero-banner on desktop
- 6.19. Wireframe for hero-banner on mobile
- 6.20. Wireframe for landscape-banner
- 6.21. Wireframe for left-right-banner
- 6.22. Wireframe for left-right-banner (alternative)
- 6.23. Wireframe for navigation on desktop
- 6.24. Wireframe for navigation on mobile
- 6.25. Wireframe for portrait-banner on desktop
- 6.26. Wireframe for portrait-banner on mobile
- 6.27. Wireframe of search on desktop
- 6.28. Wireframe of search on mobile
- 6.29. Wireframe of search on mobile with open filter menu
- 6.30. Wireframe of shoppable video
- 6.31. Wireframe for square-banner
List of Tables
- 1.1. Typographic conventions
- 1.2. Pictographs
- 1.3. CoreMedia manuals
- 1.4. Changes
- 3.1. Developer workflow commands
- 3.2. Properties for remote web development workflow REST service
- 3.3. Options to configure live reload server
- 3.4. Options to configure the monitor mode
- 4.1. Available Commands
- 4.2. Groups of packages
- 4.3. Types of CoreMedia specific packages
- 4.4. Entries of CoreMedia specific packages
- 6.1. Special Hero Banner Types
- 6.2. Special Portrait Banner Types
- 6.3. Special Landscape Banner Types
- 6.4. Special Left-Right Banner Types
- 6.5. Root attributes of the theme configuration
- 6.6. Attributes of the
L10Ntype - 6.7. Shared attributes of the
ScriptandStyletype - 6.8. Additional attributes of the Script type
- 6.9. Parameters of Teasers
- 6.10. Parameters of the Image Map
- 6.11. Parameters of the media view for responsive images
- 6.12. Parameters of the media brick
- 6.13. Parameters of the Detail View
- 6.14. Parameters of the Navigation
- 6.15. Parameters of the Image Map
- 6.16. Parameters of cm.include
- 6.17. Parameters of cm.getLink
- 6.18. Parameters of cm.dataAttribute
- 6.19. Parameters of cm.hook
- 6.20. Parameters of
cm.getId - 6.21. Parameters of cm.responseHeader
- 6.22. Parameters of cm.getRequestHeader
- 6.23. Parameters of cm.localParameter
- 6.24. Parameters of substitute
- 6.25. Parameters of message
- 6.26. Parameters of getMessage
- 6.27. Parameter of hasMessage
- 6.28. Parameter of metadata
- 6.29. Parameters of getStudioAdditionalFilesMetadata
- 6.30. Parameters of isActiveNavigation
- 6.31. Parameters of setting
- 6.32. Parameters of generateId
- 6.33. Parameters of truncateText
- 6.34. Parameters of truncateHighlightedText
- 6.35. Parameters of isEmptyRichtext
- 6.36. Parameters of previewTypes
- 6.37. Parameters of getStackTraceAsString
- 6.38. Parameters of getDisplayFileSize
- 6.39. Parameters of getDisplayFileFormat
- 6.40. Parameters of isDisplayableImage
- 6.41. Parameters of isDisplayableVideo
- 6.42. Parameters of getLinkToThemeResource
- 6.43. Parameters of bp.getBlobLink
- 6.44. Parameter of getPageMetadata
- 6.45. Parameter of getPlacementPropertyName
- 6.46. Parameter of getContainer
- 6.47. Parameter of getDynamizableContainer
- 6.48. Parameters of getContainerFromBase
- 6.49. Parameter of getPageLanguageTag
- 6.50. Parameter of getPageDirection
- 6.51. Parameter of getPlacementHighlightingMetaData
- 6.52. Parameters of responsiveImageLinksData
- 6.53. Parameters of getBiggestImageLink
- 6.54. Parameters of transformedImageUrl
- 6.55. Parameters of formatPrice
- 6.56. Parameter of createProductInSite
- 6.57. Parameters of available
- 6.58. Parameters of complaining
- 6.59. Parameter of getElasticSocialConfiguration
- 6.60. Parameter of isAnonymous
- 6.61. Parameter of hasUserWrittenReview
- 6.62. Parameter of getReviewView
- 6.63. Parameter of hasUserRated
- 6.64. Parameter of getCommentView
- 6.65. Command-line options for the login command
List of Examples
- 4.1. File structure of the workspace
- 4.2. Example configuration of
@coremedia/brick-utils - 4.3. Filesystem structure of a theme
- 4.4. Theme config example
- 4.5. File structure of a brick
- 4.6. Folder structure of the Sass files
- 4.7. Import order in entry files of a theme
- 4.8. Import order in entry files of a theme with bricks
- 4.9. Preview.settings.json
- 4.10. String / String List
- 4.11. Integer / Integer List
- 4.12. Boolean / Boolean List
- 4.13. Link / Link List
- 4.14. Date / Date List
- 4.15. Struct / Struct List
- 4.16. Example of a fallback in FreeMarker
- 4.17. Difference between JSP and FreeMarker type-hinting comment
- 4.18. Passing parameters
- 4.19. Import from src/templates/com.coremedia.blueprint.common.contentbeans/CMArticle.ftl using relative path
- 4.20. Import from any other template using acquisition
- 5.1. Example configuration in
package.jsonfor a brick - 5.2. Example of a typical
resourceBundlesproperty of a theme - 5.3. Shimming in webpack.config.js
- 5.4. The added code
- 5.5. Shimming in the theme's package.json
- 5.6. Container.asContainer.ftl
- 5.7. PageGridPlacement.ftl
- 5.8. PageGridPlacement.ftl
- 5.9. _variables.scss
- 5.10. Static Import for videoIntegration
- 5.11. Dynamic Import for videoIntegration
- 6.1. Shopping Cart Example
- 6.2. Carousel Example
- 6.3. Imagemap Example
- 6.4. Example import of the logger
- 6.5. Example use of center-absolute mixin
- 6.6. Example use of the button macro
- 6.7. Example template to render the search form
- 6.8. Making sure that a provided value is not cm.UNDEFINED
- 6.9. Include a template with view and parameters.
- 6.10. Returns the URL to this page.
- 6.11. Setting a template hook with id "page_end".
- 6.12. Set the content type for the HTTP response header.
- 6.13. Returns a single parameter from the localParameters map.
- 6.14. Returns the localParameters as map.
- 6.15. Use of cm.substitute().
- 6.16. Renders a localized button with the given key "button_close"
- 6.17. Renders a button with localized title
- 6.18. Example of
cm.messageandcm.getMessage()with arguments - 6.19. Checks if a translation for a message exists and translates the message key into a localized String.
- 6.20. Getting Metadata for a container with title and text.
- 6.21. Include CSS and JavaScript from content settings with the names "studioPreviewCss" and studioPreviewJs".
- 6.22. Assign a CSS class if this element is part of the navigation list.
- 6.23. Define a
"maxDepth"setting or default to2. - 6.24. Generate an ID for a form input.
- 6.25. Shorten a teaser text to a limit, defined in the page settings or default to 200.
- 6.26. Check if the teaserText is empty.
- 6.27. Assign the link to this CMVideo object to a variable.
- 6.28. Assign the link to this CMVideo object to a variable.
- 6.29. Check if this blob has content and is an image.
- 6.30. Check if this blob has content and is a video.
- 6.31. Using the path to an image.
- 6.32. Returns the URL to a blob in the local settings.
- 6.33. Renders metadata information to the HTML tag
- 6.34. Renders the placement name to the metadata section.
- 6.35. Gets the container for a related view.
- 6.36. A new container is created with a new subset of items and rendered as a teaser
- 6.37. Renders the value of the lang attribute.
- 6.38. Renders the value of the dir attribute.
- 6.39. Renders a div with additional data attribute containing information about the state of the placement.
- 6.40. Adding responsive attribute data to an image
- 6.41. Renders the biggest image link of a page
- 6.42. Renders a specific size and aspect ratio of an image
- 6.43. List all items in a cart with given price
- 6.44. List all product links in a cart
- 6.45. Render a CSS class depending on product availability
- 6.46. Render the Download Portal via include
- 6.47. Enrich user specific data to component
- 6.48. Checks if Elastic Social is enabled
- 6.49. Sets the form action
- 6.50. Specified value rendering
- 6.51. Specified value rendering
