<< Click here to display Table of Contents >>

Integrating E-Catalog

Contents

In this article we will explain how the FocalPoint E-Catalog can be integrated into your current website using iFrames.

The base src URL for accessing the E-Catalog is

https://focalpointportal.com/cp/Catalog/rental

From here you can either view Categories (FocalPoint Groups)

/Categories.aspx

Or your Rentals (FocalPoint Rate Tables)

/Rental/Default.aspx

So the E-Catalog knows what to display we use URL parameters

PID = Your unique portal ID provided by Visum *Required

SID = The stores unique number with in FocalPoint *Optional

CAT = The groups unique ID number with in FocalPoint *Optional only usable with Categories

PageSize = The number of items in the Rental List to show per page *Optional only usable with Rentals

Embedded = Hides the Title bar with in the iFrame *Required with value of True

For example if you want the iFrame to display your categories and you portal id was 123 your src URL would be

https://focalpointportal.com/cp/Catalog/Rental/Categories.aspx?pid=123&sid=1&embedded=true

Or you want to display your rental items your src URL would be

https://focalpointportal.com/cp/Catalog/Rental/Default.aspx?pid=123&sid=1&embedded=true

The ending HTML code for the iFrame would be

If your are using WordPress here is a good article on How To Embed WordPress iFrame

Another tip is if you are wanting the categories or rentals to not have a fixed height but to be scrollable with in the browser window add this bit of code in your web page

function pageY(elem) {

return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;

}

var buffer = 10; //scroll bar buffer

function FocalPointIframe() {

var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;

height -= pageY(document.getElementById('FocalPoint')) + buffer;

height = (height < 0) ? 0 : height;

document.getElementById('FocalPoint').style.height = height + 'px';

}

window.onresize = resizeIframe;

window.onload = resizeIframe;

</script>

And then add an onload event to your iFrame

If you have implemented a Custom Domain for your Integration, please replace focalpointportal.com/cp with your chosen sub-domain and the PID parameter is no longer needed

Example: if your Custom Domain is portal.myrentals.com your iFrame would look like