Please enable JavaScript to view this site.

FocalPoint Online Help

Navigation: Portal & E-Catalog

Integrating E-Catalog

Scroll Prev Top Next More

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

 

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

 

HTML Links

For example if you want a link to display your categories and you portal id was 123 your href URL would be

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

 

Or you want to display your rental items your link href URL would be

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

 

More information about HTML Links can be found here

 

iFrame Integration

*With iOS browsers like Safari it is not recommend to use an iFrame as you may have issues

 

For example if you want a 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 iFrame 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

  <iframe id="FocalPoint" src="https://focalpointportal.com/cp/Catalog/Rental/Categories.aspx?pid=123&sid=1&Embedded=true" style="width: 100%; height: 900px; border-width: 0px;"></iframe>

 

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

  <script language="javascript" type="text/javascript">

      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

  <iframe id="FocalPoint" src="https://focalpointportal.com/cp/Catalog/Rental/Categories.aspx?pid=123&sid=1&Embedded=True" style="width: 100%; border-width: 0px;" onload="FocalPointIframe();"></iframe>