All Collections
Advanced Topics
2-Part Installation method
2-Part Installation method

This installation method allows our customers to attach the locator to an arbitrary HTML element while keeping the JavaScript separate

Michael Fatica avatar
Written by Michael Fatica
Updated over a week ago

Some content management systems and plugs move JavaScript automatically and allow users to only control HTML and JavaScript independently. This article describes how to install a MetaLocator interface in 2 separate parts, HTML and JavaScript . This method should only be used if you need to add the JavaScript and HTML separately.

Step 1. Obtain your Interface ID as shown below:

Step 2. Add an HTML element to your page, where the MetaLocator Interface should appear. The HTML element should be a block-level element, such as a DIV. Replace the single occurrence of XXXXXXX with your Interface ID.

<div data-metalocator="locator" data-metalocator-itemid="XXXXXXX"></div>

Step 3. Add the following JavaScript and ensure it runs after the above HTML is output, or on DOM ready.

<!-- MetaLocator.com Code START -->
<script>
var ml___thisScript = document.querySelector('[data-metalocator="locator"]');
var ml___Itemid = ml___thisScript.getAttribute('data-metalocator-itemid');
function ml___showLocator(Itemid){var divId="___ml_container"+Itemid,div=document.createElement("div");div.setAttribute("id",divId);var domWrite,thisScript=document.querySelector('[data-metalocator="locator"]');return thisScript.parentElement.insertBefore(div,thisScript),(function(){var c=0;function evals(pString){for(var script,scripts=[],regexp=/<script[^>]*>([\s\S]*?)<\/script>/gi;script=regexp.exec(pString);)scripts.push(script[1]);(scripts=scripts.join("\n"))&&eval(scripts)}return function(t,e){var r="string"==typeof t?document.getElementById(t):t,n=document.createElement("script"),i=document.write,o="",a="",l="",m=100;function s(){o!==a?(a=o,l=window.setTimeout(s,m)):(r.innerHTML=o,evals(o),0==c--&&(document.write=i))}document.write=function(t){window.clearTimeout(l),a=o,o+=t,l=window.setTimeout(s,m)},c++,n.setAttribute("language","javascript"),n.setAttribute("type","text/javascript"),n.setAttribute("src",e),document.getElementsByTagName("head")[0].appendChild(n)}})()(divId,"https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=_javascript&framed=1&format=raw&tmpl=component&no_html=1&Itemid="+Itemid),setTimeout(function(){null!==document.getElementById("locator_loading"+Itemid)&&(document.getElementById("locator_loading"+Itemid).style.display="none")},1000),!1} ml___showLocator(ml___Itemid);
</script>
<!-- MetaLocator.com Code END: Do not modify this code block. See TOS for details. -->

Step 3. Copy the completed code to your Website where you would like the locator to appear.

Did this answer your question?