INTEGRATION GUIDELINE FOR
FELDHAUS KLINKER WEB MODULES
INTRODUCTION This document contains technical guidelines for integration of the following Feldhaus Klinker web modules developed by Cadesign form as:
CUSTOMIZER PRODUCT VIEWER
Both modules integrate by injecting content into an existing HTML page by the means of loading external JavaScript files that in return retrieve data from a central data source (server). This method of integration yields these immediate advantages:
Very easy and lightweight integration with just a few lines of HTML code Webserver/Language independent integration using standard client‐side JavaScript Fully automated updates; nothing to deploy locally when things are changed
CUSTOMIZER The customizer module is designed to use the maximum available space in a given context. The minimum useable area is approximately 900 x 700 pixels (will fit on a de facto standard tablet screen size in landscape mode).
Example of embedded customizer module in a fixed sized container. Background texture is part of the body styling, the white outline is part of the container styling.
Embedding the module on a page is a matter of adding just a few HTML elements: 1) 2) 3) 4)
Designate an area in the page for the module to load into Add a single HTML‐element for the module Add an HTML script block and define relevant parameters (e.g. language settings) Add a few lines of HTML code to initiate the loading procedure of style sheet files and JavaScripts
In the following, each of the above steps will be detailed.
Step 1: Prepare the module containing area on your page Add to your page a container element to hold the module, e.g. a <div>‐element, and style it according to your preferences and website layout. The container element can either be of fixed size (e.g. 1100 x 800 pixels) or flexible/dynamic (e.g. to fill up a percentage of – or the full – browser window).
The illustrations below outline the two common scenarios:
LOGO <div class=”fixed-size-container”>
<div class=”customizer”>
Example CSS width: 900px; height: 700px;
A fixed size container. The customizer element will adapt to the fixed container size.
LOGO <div class=”fluid-container”>
<div class=”customizer”>
Example CSS top: 100px; bottom: 0px; left: 0px; right: 300px;
A fluid container, for example having corner anchor points fixed according to the browser dimensions. The customizer element will adapt to the dynamic container size. In the most bare‐bone page you can use the <body>‐element as the container and have the customizer module fill up the entire browser window.
Step 2: Add the customizer module Inside you HTML container element you must now place a single additional element like this: <div class="customizer"></div>
This element will be automatically sized to 100 % in both dimensions (height and width), and thus will fill up your container element entirely.
Step 3: Define customizer settings Add to your page, preferably in the page <head>‐section, a script element like this: <script type="text/javascript"> var customizerSettings = { language: "de" } </script>
The available language value codes are (as of writing):
de = German en = English
fr = French
Step 4: Add external resource links Finally, add these lines of code to your page header: <script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script> <link rel="stylesheet" type="text/css" href="http://feldhaus.customizer.cadesignform.dk/assets/feldhaus.css" /> <script src="http://feldhaus.customizer.cadesignform.dk/assets/customizer.js" type="text/javascript"></script>
Assuming you have added both code blocks from step 3 and 4 to your page header, you should now have a complete HTML page looking similar to this (example with a fixed size container), excluding your own page elements:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Your Page Title</title> ... <script type='text/javascript'> var customizerSettings = { language: 'de' } </script> <link rel='stylesheet' type='text/css' href='http://feldhaus.customizer.cadesignform.dk/assets/feldhaus.css' /> <script src='http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js'></script> <script src='http://feldhaus.customizer.cadesignform.dk/assets/customizermin.js'></script> </head> <body> ... <div class="container" style="width: 900px; height: 700px;"> <div class='customizer'></div> </div> ... </body> </html>
PRODUCT VIEWER The Feldhaus Klinker Product Viewer module will embed in an arbitrary size, but the main content of the module will have a fixed width of 1000 pixels while the content height will vary. Thus, when embedding the module, your design should accommodate for the dynamic content dimensions of the module and allow for the minimum width required by the module content.
The green outline in the screenshot above only serves to illustrate the boundaries of the embedded module.
The module embedding process is similar to that of the customizer module described previously, i.e.: 1) 2) 3) 4)
Designate an area in the page for the module to load into Add a single HTML‐element for the module itself Add an HTML script block and define relevant parameters (e.g. language settings) Add a few lines of HTML code to initiate the loading procedure of style sheet files and JavaScripts
In the following, each of the above steps will be detailed.
Step 1: Prepare the module containing area on your page First, add a container element to hold the module, e.g. a <div>‐element, and style it according to your preferences and website layout. Make sure it is at least 1000 pixels wide to hold the content, and allow it to expand vertically to accommodate for varying content height. I.e. do not apply a fixed height to the container.
The following illustration below outline the page wireframe:
FELDHAUS PRODUCTS
Example CSS width: 1002px;
<div class=”productviewer-container”>
Variable height
<div class=”productviewer”>
A fixed‐width container holding the Product Viewer content.
For the container element you can use the default class name “productviewer‐container” or use your own. Using the default class will apply a suitable background image to fill the container. If you choose to use your own class, the only requirement is, that the element has a properly defined CSS position attribute like this: .myOwnContainer { position: relative; ... }
Step 2: Add markup for the module Inside you HTML container element place a single, properly classed element like this: <div class="productviewer"></div>
This element will automatically center inside the container width and will expand/contract vertically when the content of the module changes during user interaction.
Step 3: Define module settings Add to your page, preferably in the page <head>‐section, a script element like this: <script type="text/javascript"> var customizerSettings = { language: "de" } </script>
The available language value codes are (as of writing):
de = German en = English
fr = French
Step 4: Add external resource links Finally, add these lines of code to your page header: <script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script> <link rel="stylesheet" type="text/css" href="http://feldhaus.customizer.cadesignform.dk/assets/productviewer.css" /> <script src="http://feldhaus.customizer.cadesignform.dk/assets/productviewer.js" type="text/javascript"></script>
Assuming you have added both code blocks from step 3 and 4 to your page header, you should now have a complete HTML page looking similar to this (example with a fixed size container), excluding your own page elements:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Feldhaus Product Viewer</title> ... <script type='text/javascript'> var customizerSettings = { language: 'de' } </script> <script src='http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js'></script> <link rel='stylesheet' type='text/css' href='http://feldhaus.customizer.cadesignform.dk/assets/productviewer.css' /> <script type='text/javascript' src='http://feldhaus.customizer.cadesignform.dk/assets/productviewer.js' ></script> </head> <body> <p>some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content</p> ... <div class="productviewer-container" style="width:100%;"> <div class='productviewer'></div> </div> </body> </html>