Dynamic Pages

Page Template Types

Dynamic Page Templates Example

[1] Multiplexer page [2] Dynamic pages

Multiplexer Page Template

If used - always folder start page

  • All linked pages have uniform URL: e.g. https://www.egger.com/en/myegger/ (IND & not IND)​
  • Except for when wildcard is chosen​: e.g. https://www.egger.com/en/furniture-interior-design/decors/H1384_40​ - path is from FS - Decorcode from PIM (depending on which decordetailpage the user is)
  • Needed if you have more than one page with the same url or the last part of the url is from PIM​
  • Only used to reference the pages in the folder where the multiplexer page is the start page​
  • No content on this page​

Mandatory fields (please simply add placeholder information so that it is clear what kind of multiplexer site it is [e.g. Decors EFP]):​

  • Page settings​
  • SEO: Page title, page description, H1, Microfrontend, References​
  • General Search: Thumbnail

All these fields are overwritten by the Microfrontend.

Multiplexer Page Settings

[1] Microfrontend: Connection to data source (e.g. PIM) - mandatory

Microfrontend Used for
News -
EDP Decorsearch Decoroview page EDP
EBP Product Product group and detail pages EBP
EFP Decordetail Articledetailpage EFP
Case Studies Overview -
EDP Decordetail Decordetailpage EDP
EFP Decorsearch Decorview page EFP
EDP Product Product group and detail pages EDP
EFP Product Product pages EFP
CMS -

[2] Wildcard:

false = all linked pages have uniform URL

true = pages have different URLs (path + microfrontend information)

[3] References: link here all pages that are in the folder of the multiplexer page (via internal link). The order of the pages in the folder and the order of the references must match. The pages must be referenced individually for each language.

Order of pages in the multiplexer folder

The pages in the folder of a multiplexer page must be sorted in a specific order. The folder start page is always the multiplexer page, below it are the dynamic pages. The dynamic pages must be sorted from bottom to top from the least restricted page (usually default without restriction) to the most restricted page (e.g. IND).

Page Order Navi

[1] & [3] Pages without restrictions (default - all page variants with restrictions are above the default variant)

[2] Pages with restrictions (From top to bottom: FS Restictions (e.g. IND Portal) > Custom Restrictions (productcode, decorcode, articlenumber, type > default))

[4] Multiplexer page (always startpage)

Dynamic Page Template

Use if a pages consists of dynamic content.

  • Dynamic content from PIM, Messagefiles, …​
  • Connection FS ↔ PIM via Microfrontend​Needed if you have a page with data from PIM, Messagefiles, …​
  • Data is filled automatically according to page settings​
  • Needs to be referenced in the multiplexer page if there is more than one page for the same topic (e.g. decordetailpages, …) in the same folder​
  • Dynamic components (Data from PIM, …) and all other components can be used (Content added in FS)

Mandatory fields:​

  • Page settings​
  • SEO: Page title, page description, H1, Microfrontend ​
  • General Search: Thumbnail​

All these fields are overwritten by the Microfrontend.

Dynamic Template Page Settings

[1] Microfrontend: same as for Multiplexer page - mandatory

Custom Restrictions

Determine, which information needs to be used from PIM​. Need to be set, if a page contains different content, than the default page (e.g. EDP Productgroup pages ⭢ different „recommended products“ for each productgroup ⭢ default doesn‘t contain „recommended products“)​. If no (custom) restriction fits, the default page will be shown online​.

Restrictions Dynamic Page

[1] Standard restrictions: can be set as for the standard pages

[2] Custom Restrictions: new for dynamic page templates, include key & value to restrict the page (to for example specific decors)

Page Type Key Value
EDP Decordetail code DECORCODE (e.g. H1367_40)
EDP Productdetail type product
product PRODUCTCODE (e.g. SPLASHBACK)
EDP Productgroup type category
product PRODUCTCODE (e.g. EDGING)
EFP Decordetail code ARTICLENUMBER (e.g. 1667262)
EFP Productpage product PRODUCTCODE (e.g. DESIGNPLUS)
EBP Productdetail type product
product PRODUCTCODE (e.g. OSB2)
EBP Productgroup type category
product PRODUCTCODE (e.g. OSBBOARDS)
General Search (All tab) type all
General Search (Tabs) type tab

Dynamic Components

Can be added on the dynamic page template: New section > Dynamic Component > Select component type > Add content

  • Different types can be chosen: Accessories, BannerList, BaseProductAvailability, Component Mount Point, ContentSlider, CTA HeroTeaser, DecorData, DecorRecommendation, DecorSlider, DescriptionList, DownloadSearch, FactHeroTeaser, GeneralSearchList, Image, InlineNavigation, Media Stage, ProductComparison, ProductComparisonList, ProductSustainability, PropertyDataList, Search Result Item, SearchHeader, Table, Textblock
  • Some are only available within the dynamic component, others are available as „normal“ components as well​
  • Some work without additional content, others need added content (e.g. headlines, …) that can either be a link, text, localized text or media​
  • Can be used within a grid – if used without a grid it‘s always fullwidth​
  • Dynamic contents are not visible in the preview ⭢ as contents come from PIM, system can only determine the correct contents for each mark

Dynamic Components First Spirit

[1] Component Type: select from a pool of different components

[2] Content: insert key and value

[3] Tracking information

Content

  • Key & type + depending on type other information like the text or a link need to be maintained​
  • Keys are always determined by COM & DEV teams (cannot be any key)​
  • Only localized_text, link and media need to be translated & maintained manually:

Localized text Localized text

Text Text

Link Link

Media Media

Content Datasources

The link will take you to Figma and an overview of the data sources from which the various components of a dynamic page originate: Content Datasource Overview

Naming Convetion

Eventhough page names/titles/description + H1 might come from PIM, please always name these fields in EN (for all languages) and coherent with the current namings​.

How to add a Component to specific pages

1 Bookmark the teaser component

2 Create new page (Name the page: Page - Teaser [e.g. Decordetail default - Interior Match]) > without menu item > copy content (from page where you want to add the teaser) > finish [reload the page if you face an ISE]

3 Move the page at the correct position according to the restrictions

4 Check page settings (identical to copied page) + change name, description and H1 to Page - Teaser (e.g. Decordetail default - Interior Match)

5 Add custom restrictions (e.g. add all decors e.g. code | F021_75,F121_87)

6 Insert bookmarked teaser (maintain translations)

7 Reference page at Multiplexer page (reference position = same as navi position) - needs to be done in every language

8 Release page & multiplexer page

Tip

Alternative: Add custom restriction at component level (step 5)

Example: Interior Match Teaser

Please insert the teaser in the following steps:

  1. bookmark the interior match teaser component (last page in your navigation)

  2. create new page (Decordetail - default - Interior Match) > without menu item > copy content (Decordetail - default) > finish [reload the page if you face an ISE]

  3. move the page above the Decordetail - default page in the navi

  4. check page settings (identical to Decordetail default page) + change name, description and H1 to Decordetail - default - Interior Match

  5. add custom restrictions (add all decors from the list above with e.g. code | F021_75,F121_87)

  6. insert teaser (above DecorRecommendations component) [maintain translations, add the headline to the stickybar via HTML ID + short text, add download link: market specific flyer]

  7. reference page at EDP Decors Multiplexer page (reference position = same as navi position)

  8. release page & multiplexer page (no yamls required)

The teaser must be installed on all three decor detail pages (default, logged in, IND). Please also note the order of the pages in the navigation (must also be referenced in this order in the multiplexer): Furniture Interior Design > Decors

  1. Decors EDP (Multiplexer)

  2. Decordetail - IND - default - Interior Match

  3. Decordetail - IND - default

  4. Decordetail - logged in - default - Interior Match

  5. Decordetail - logged in - default

  6. Decordetail - default - Interior Match

  7. Decordetail - default

last updated: 11/24