Javascript listing impossible to figure out!

JavaScript
1

Okay first things first. Firebug this website http://www.locksmith.com/

You will see that they have a script in the head tag. That script is:

<script class=“yext-synd-74qWXpBkYak=”>
(function () {
var el = document.createElement(‘script’);
el.async = true;
el.src = ‘//s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=&latitude=&longitude=’;
(document.getElementsByTagName(‘head’)[0] ||
document.getElementsByTagName(‘body’)[0]).appendChild(el);
})();
</script>

They also have a form. That form is:

<form title=“Enter your zip and find a qualified, local locksmith” action=“results.asp” method=“POST”>
<p><font style=“font-size: 19px; font-weight: 700”>FIND A LOCKSMITH</font>
<input type=“text” value=“14646” style=“font-family: Arial; font-size: 22px; color: #666666; font-weight:bold;” onclick=“this.value=‘’” size=“5” name=“zip”>
<input type=“image” style=“position: relative; top:5px” name=“B1” src=“images/smallgo2.jpg”>
</p>
</form>

When you enter your zip code into that form, I think it is passed to the el.src variable as a parsed string and sent to s.yext-listings.com/ like this://s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=INSERT_ZIP_CODE_PASSED_FROM_THE_FORM_HERE&latitude=&longitude=

When you click the submit button on the form with an input zip code, it takes you to a page where there is a huge DIV block with this script executing inside it:

[i]<script class=“yext-synd-74qWXpBkYak=”>

(function () {
var el = document.createElement(‘script’);
el.async = true;
el.src = ‘//s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=33405&latitude=&longitude=’;
(document.getElementsByTagName(‘head’)[0] ||
document.getElementsByTagName(‘body’)[0]).appendChild(el);

})();

&lt;/script&gt;[/i]

Well the result on the second page is a listing pulled from a database and laid out in the second page in a DIV block.

My question! How do I emulate this on my website? I have the Yext service. I have been on the phone with the company for over a week now and I cant get any technical support on the integration. Apparently they are having a lot of lay offs and technical support is unavailable.

I am assuming that I need to build a form in HTML and have it pass the zip code to that JavaScript snippet somehow? I also want to know how the JavaScript on the second page renders a listing result from that passed form value?

Thank you so much for the help in advance. I know you guys can figure this out before I do.

2

All the JavaScript you have posted there is doing is adding script tags to the page to link to the actual JavaScript that does the processing. If you look at the content of the scripts that code is adding then you should be able to see how the code works.

3

Thanks for the reply. I dont see the code where it adds any tags, or writes any data to the document. All I see is the el.src script…

But the more important question I have is, how does the second page display the listing results. All I see is the same el.src script from the first page…

4

The code is adding a script tag to the page the correct way using the appropriate DOM commands.

el = document.createElement(‘script’); // create a script tag

el.async = true; // set the async attribute on the tag to ‘true’

el.src = ‘//s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=&latitude=&longitude=’; // sets the src attribute - the one that identifies the script to be run

document.getElementsByTagName(‘body’)[0].appendChild(el); // appends the script tag just before the </head>and runs the script that it points to.

5

Ok so far from what I gather the code creates a script tag (<script></script>) before the </head> tag. But what is that script? And where does it execute document.write commands to write to the page a directory listing?

6

Found the code that writes to the page. I think. Can someone explain this to me?

(a.services?soy.$$escapeHtml(a.services):“”)+‘</div><div class=“hours”>’+(a.hours?soy.$$escapeHtml(a.hours):“”)+‘</div></div><a href=“javascript:void(0)” onclick=“” class=“less” id="less’+soy.$$escapeHtml(c)+‘" style=“display:none;”>Less Details</a><div style=“height:0; clear:both;”><!–spacer–\></div>’}}return d};var adUnitId=“74qWXpBkYak=”;var templateFn=yext.synd.templates.displayListings;var soyContext={“data”:{“currentPage”:0,“numPages”:1,“listings”:[{“zip”:“33401”,“services”:“Locksmiths, 24 Hour Locksmiths, Auto Locksmiths, Commercial Locksmiths, Emergency Locksmiths, Residential Locksmiths, Lock Installation, Lock Repair, Master Key Services, Re-key Services, Biometric Locks, Combination Locks, Digital Locks, Magnetic Locks, Alarm Systems, CCTV Systems, Intercom Systems”,“phone”:“5613707659”,“adLevel”:“GOLD”,“areaCode”:“561”,“hours”:“M-Su 24hr”,“link”:"http://www.yext-listings.com/l/firstplaceinternet/pls-locksmith-miami2.html?srid=QdH%2Fe6hIUwugcsOoPel0Lg%3D%3D",“state”:“FL”,“city”:"West Palm …etc etc

7

Put the code in jsbeautifier.org and it will be easier to understand.

8

I figured it out with the help of my developer, thanks! : D