Vebra Search Integration Guide

Size: px

Start display at page:

Download "Vebra Search Integration Guide"

Colin Byrd
5 years ago
Views:

Guide Introduction... 2 Requirements... 2 How a Vebra search is added to your site... 2 Integration Guide... 3 HTML Wrappers... 4 Page HEAD Content... 4 CSS Styling... 4 BODY tag CSS.

1 Guide Introduction... 2 Requirements... 2 How a Vebra search is added to your site... 2 Integration Guide... 3 HTML Wrappers... 4 Page HEAD Content... 4 CSS Styling... 4 BODY tag CSS... 5 DIV#s-container tag CSS... 5 Search Options... 6 Summary Familiarise yourself with the searches Provide us with wrappers and <HEAD> content HTML Style the search pages as required Put the site live

2 Introduction This document describes the method to add Vebra search functionality to a client web site. It is intended for use by Web developers with a thorough understanding of CSS and HTML Requirements Client data must be held on the Vebra portal. Knowledge of HTML and CSS is essential. An HTML/CSS development tool will be invaluable to assist with styling the search pages. (e.g Firebug for Firefox, Developer Tools for Internet Explorer) How a Vebra search is added to your site The Vebra searches are a collection of pages that provide all of the search functionality for client properties held on the Vebra portal. The search pages are hosted on All the client web site will need to do is provide a link to these search pages. We will provide you with a search key specific to your client. This search key is used to build the URL to the search pages. key]/property/search/[search type] [search key] is the unique client identifier for your client. This will normally correspond to the client name [search type] is the property type being searched for 1 - for residential sales. 2 - for residential lettings. An example URL for a search on Properties for sale would therefore be of the form:- Adding a link of this format to the site menu, or within a page, will allow the user to navigate to the hosted search page displaying a form of search criteria. The form posts to a self contained set of hosted pages containing all the search functionality offered by the Vebra system. An example search page demonstrating the functionality can be seen at:- 2

3 The example search shows no customization. The following sections describe how to customize a search to match the look and feel of the client web site. Integration Guide The integration work required by the developer is entirely concerned with changing the appearance of the search pages to match the rest of the site. This is achieved by: 1. HTML wrappers HTML that will be added before and after the search contents when the page is delivered. Typically this will be a header and menu before content and footer following content. 2. Page HEAD content HTML that will be added to the HEAD section of the search pages delivered. Invariably this will include a link back to CSS files on the client site that control the look and feel of the hosted pages. Each hosted search page will have the general form. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <HTML lang="en" xml:lang="en" xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> [Company Name] property search </title> <link rel="stylesheet" href="/agents/version/2.0/css/default.css" type="text/css" media="screen"> [ PAGE HEAD CONTENT INSERTED HERE ] </head> <body class="[db2]" id="[search]"> [ TOP WRAPPER INSERTED HERE ] <div id= s-container > [VEBRA SEARCH CONTENT WILL APPEAR HERE] </div> [ BOTTOM WRAPPER INSERTED HERE ] </body> </html> 3

4 Dynamic content is enclosed in [square brackets]. You, as the developer will supply the contents outlined in [red] HTML Wrappers The Vebra search pages will each contain a <div id= s-container >. This <div> will contain all of the search content provided by Vebra. With reference to the search content, your HTML wrappers are added as follows. [ TOP WRAPPER INSERTED HERE ] <div id= s-container > [VEBRA SEARCH CONTENT WILL APPEAR HERE] </div> [ BOTTOM WRAPPER INSERTED HERE ] You will therefore need to supply us with the HTML that you want added to each page immediately before the search <div> is opened and the HTML that you want added to each page immediately after the search <div> is closed. As the search pages are hosted on any links (e.g main navigation menu, images) included within your HTML wrappers will need to be absolute. If you are using a development server, please provide content with links back to your development environment in the first instance. This will allow you to view and test the layout before go-live. We can then change the links, at your request, prior to go live. Page HEAD Content Content can also be added to the <HEAD> section of the search pages. We are able to add any valid content, but it is essential that this content includes a link back to CSS files under your control. The major part of the integration process will be the CSS styling of the search pages to match your client site. This is achieved via your own CSS files hosted on your domain being linked to from the Vebra search pages. As with the HTML wrappers, any links added to the <HEAD> section can initially reference your development server and then be changed at your request prior to go live. CSS Styling The layout and appearance of the search pages is changed by targeting the generated elements on the Vebra hosted pages with the CSS from files on your own servers. The generated search pages contain valid XHTML with element id s and class names. By default, the search pages will link to a CSS file hosted on the Vebra services providing a standard layout (as seen on the test search 4

5 This default CSS can be removed if you prefer, although we would recommend that you retain the default layout and amend via your own CSS. The search functionality will differ according to the customer software and settings. This guide does not list the full set of element ID s and classes used in the generated content. The best way to achieve styling is by navigation through the searches and targeting elements with CSS as required. It is highly recommended that you use one of the many tools available that allow you to view generated content and identify CSS targets by clicking on the relevant page section. Our current favourite is Firebug for Mozilla Firefox. BODY tag CSS The <body> tag of each search page will contain an id and a class that allows you to identify the current context. The id will identify which search page is being displayed allowing you to target CSS on a per page basis if required. The id of any given page is seen by navigating to the page and viewing the generated source. TIP: The integration allows the use of only one set of HTML wrappers; each search page will therefore contain identical wrappers. However, it is still possible to display HTML content on specific pages only with the use of the CSS display:none e.g. If your HTML wrappers include the mark up <h2 class- myclass >SEARCH NOW!</h2>, the following will display the text SEARCH NOW only on the initial search page ( id = search): body h2.myclass { display:none; } body#search h2.myclass { display:block }, The body tag will also contain a class that identifies the search type: body.db1 Search type 1 i.e. Residential Sales body.db2 Search type 2 i.e. Residential Lettings This allows you to create different CSS themes and layout for each search type. DIV#s-container tag CSS All of the generated search content is contained within the <div id= s-container >. The HTML mark up of this content cannot be changed. The content is styled in exactly the same way that you would style any other HTML content within the site. Each element within the content can be specifically targeted with CSS via a combination of id and class. This level of flexibility makes an exhaustive list of element identifiers far less useful than the many developer tools available for targeting CSS. 5

6 Search Options There is a standard charge for the creation of the customer searches and the addition of supplied HTML wrappers and <HEAD> content. Various options are available at additional charge:- User Profiles: Customers can register with the site and elect to me notified when properties matching their search criteria are added. Geo Search: Searches on place name or postcode Quick Search: A script to automatically generate a search form that can be added to any page within your site. Featured Properties: A script to automatically generate a list of properties, selected by the client, to be displayed on any page within your site. These can be displayed as a list or slideshow and each property displayed will click through to the appropriate Vebra hosted details page. Video Tours: If the client purchases Video tours direct from Vebra, then this will replace the static photos on the search results. IMPORTANT: The test search shows the standard search options together with the optional User Profiles. Summary 1. Familiarise yourself with the searches When offering the Vebra searches to your client we would strongly recommend that you first take some time exploring the functionality and viewing the generated source of the search pages If the client is an existing Vebra customer, we will set up a search group containing the customer properties and provide you with the relevant URL. It the client is not yet a Vebra customer, you can explore the test searches: IMPORTANT: We are unable to guarantee that the customer search will be identical in every respect to the test search. A large number of different software systems upload to the Vebra portals and not all systems will upload all of the data seen in the test searches. If the customer is considering a move to Vebra, please let us know the customer upload method and any areas of functionality that are regarded as deal breakers. We will endeavour to confirm that the functionality is available. 6

7 It is also important to remember that the generated XHTML cannot be changed. We are unable to insert any content within the <div id= s-container div >, nor are we able to change the order of any elements within this <div>. 2. Provide us with wrappers and <HEAD> content HTML We are able to use HTML source from a development page if you would prefer, as long as the TOP and BOTTOM wrappers are clearly identified within the source. Please remember that all URLS within the HTML source must all be absolute. This includes navigation links and image etc. Links to a development environment can be used at this stage. The head content must include a valid link to a CSS file under your control. Without this you will not be able to style the search pages. 3. Style the search pages as required Modify your CSS stylesheet to achieve the desired appearance and layout. Use a developer tool or browser view source to identify elements and target CSS files. If the client does not have Vebra data at this stage, we will add test data to allow you to complete styling. 4. Put the site live Please let us know in advance of the go live date. We will then replace any links to your development server with links to the live environment. We will also remove any test data. If you are not confident with the above requirements, please let us know. The Media Design House will be happy to provide a quote to complete the entire integration process for you. We regret that we are unable to advise on specific CSS design requirements. 7

Introduction to HTML5

Introduction to HTML5 History of HTML 1991 HTML first published 1995 1997 1999 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.