1. Umbraco /Product Finder
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Umbraco /Product Finder
An overview

2. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
How can Umbraco be used
Umbraco is the CMS (content management system) used for our product data
Presentation of product data
One entry point, multiple viewings
All viewings automatically updated for new entries and and existing products.
All product information maintained in one place
Comparison of products (New Product Finder)
The front end is also referred to as Product Finder or Solution Finder

3. Examples of use on the website
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Examples of use on the website
Building element
Product
Building Type
Product list
Mega menu:
Building element and search

4. Examples of use on the website
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Examples of use on the website
Product search on home page
Product compare

5. Examples of use on the website
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Examples of use on the website
Data sheets
Brochure
CAD drawings

6. Umbraco interface Structure of Umbraco
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Umbraco interface
Structure of Umbraco
Content (storage of the product data)
Media (images and files not used by products)
Settings (All generic elements and labels are translated through Dictionary items)
Structure of the Content area:
Products
Building elements (constructions)
Buidling types
Downloads (CAD, brochure, data sheets, certificates etc.)
Relations:
Products, constructions, bulding types and library assets are tighted together using relations

7. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Products

8. Products Products are stored in a folder structure.
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Products
Products are stored in a folder structure.
This structure can be adapted to fit local needs
The folder structure equals the structure in left navigation of the website
Products associated to each category.
Are shown in on the website under the main folders
Product properties used for technical data table

9. The build-up of a product
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
The build-up of a product
A product holds a number tabs:
Content. A content area where the following can be added
Free text
Images
Macros
Data sheet
”Raw” product data
Predefined text areas and images
Relations
Products are connetcted to constructions, bulding types, downloads and library assets using relations
Product categorization (only in the new setup. Sep. 2014))
The values used in product filter
Macros are predefined snippets that helps you insert content from the Datasheet tab.
Tip! If you need to create many product at the same time you can copy an existing one to limit the amount of work with creating the content part – content is copied, data is not.
See next slide for examples of where the front end viewing gets its content from

10. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media

11. Assortment table and technical data table
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Assortment table and technical data table
Dimensions tables and technical data tables are inserted in the content area using macros
Assortment based on dimensions table
Tehnical data based on product properties

12. The tabs Usage, Products and Downloads are based on relations
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
The tabs Usage, Products and Downloads are based on relations

13. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Building elements

14. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Building elements
Building elements and its constructions are stored in a predefined folder structure
Structure can be changed to accomendate local needs
Shown in the left navigation of the website
The entrance point of the compare function
A building element consists of 3 levels
Building element, description
Construction, relations to building types and products
Description of the construction and relevant relations

15. Buidling element – front end viewing
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Buidling element – front end viewing
Building element

16. Building element – front endt
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Building element – front endt
Description of construction
Construction

17. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Building types

18. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Building types
Access to products through visulization of building types
From the bulding types bulding elements a chosen

19. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Downloads

20. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
Downloads
Brochures, CAD, data sheets, certificates and tools each has their own folder with different content
Used in relations across the entire site
Has an individual “library” where all items can be found

21. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
New Product Guide

22. New Product Guide Entrance from the Bulding Elements
Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media
New Product Guide
Entrance from the Bulding Elements
Holds a compare function
The left navigation is kept: E.g. if you access from Pitched Roof and choose a product you stay in the Pitched Roof univers
Only when you access the product overview the left navigation will reflect the complete product overview and structure

23. Presentation of Umbraco / Product Finder - An overview of backend and frontend - October Catharina Brodka, Digital Media