This guide discusses creating location pages in the Interface Builder. This is the preferred method of creating Location Pages using the latest templating technology available from MetaLocator.
MetaLocator's SEO solution includes Directory Pages and Location Pages. The directory represents the hierarchy of pages for each geographic area. E.g. city level pages, state level pages and so forth. The Location Pages are the single pages created for each location in your MetaLocator data.
Setup
Initial setup and provisioning of the Location Pages product is done by the MetaLocator Team. Setup of the custom domain, DNS instructions and deployment are handled as part of our Enterprise setup process. This article provides the reference material necessary for the HTML implementation and maintenance of the location and directory pages after setup is complete.
Templates
There are 3 Twig templates involved in the creation of location pages as follows.
The Location Page Template. This is the template used to display each individual location page. This template is used to create the page that displays a single location.
The Directory Page Template. This is the template used to display the hierarchy of geographic pages, e.g. the city page, the state page and so forth.
The Website Template. This optional template, if provided, is wrapped around the location and directory page templates. This allows a single template for the website's common header and footer for both the directory and location pages. However, if the template needs to be different between the location and directory pages, the Website template may be omitted (empty) and the Location Page and Directory Page templates will be responsible for the full page content. The following code must be present and indicates where the system will insert the Location Page and Directory Page after "binding" with the data:
{{ include(template_from_string(template_item.twig_page_template)) }}
The Location Page Template
This is the template used to display each individual location page. This template is used to create the page that displays a single location.
The template attributes available to the location page can be "dumped" as shown below:
<pre><!-- this is a raw dump of the template variables -->
{{ template_item | json_encode(constant('JSON_PRETTY_PRINT')) }}
</pre>
The template_item contains the entire location object, including all custom fields. Some special fields include:
template_item.interface_name //the name of the Interface.
template_item.canonical // the canonical tag for the location page.
template_item.page_title // the title of the location
template_item.page_url // the url of the location page.
template_item.year // the current year
The Directory Page Template
This is the template used to display the hierarchy of geographic pages, e.g. the city page, the state page and so forth.
The template attributes available to the location page can be "dumped" as shown below:
<pre><!-- this is a raw dump of the template variables -->
{{ template_item | json_encode(constant('JSON_PRETTY_PRINT')) }}
</pre>
Location Hours
<!-- this is the green/yellow/red status icon -->
<span data-metalocator-timezone="{{template_item.location.time_zone}}" data-metalocator-hours="{{template_item.location.hours}}"></span>
<!-- this is the word open or closed -->
<span data-metalocator-timezone="{{template_item.location.time_zone}}" data-metalocator-hours="{{template_item.location.hours}}"></span>
<!-- this is the "opens today at 9", or "open today from 9-5" etc. -->
<span data-metalocator-timezone="{{template_item.location.time_zone}}" data-metalocator-hours="{{template_item.location.hours}}"></span>
<!-- this is the full hours table -->
{{template_item.location.hours_formatted|raw}}
The Location Page Map & Marker
The location page often includes a static map image which also includes a marker. An example markup for the static map is shown below:
<img loading="lazy" class="ml_static d-block w-100" width="100" src="https://cdn.metalocator.com/index.php?option=com_locator&task=tools.createstaticimage&format=raw&url=pin-m-marker+e63b12({{template_item.location.lng}},{{template_item.location.lat}})&lng={{template_item.location.lng}}&lat={{template_item.location.lat}}&zoom=16&width=500&height=500&density=@2x&style=light-v10" alt="{{template_item.location.name}}"/>
The "src" attribute of this image tag calls our static image API endpoint.
The marker shown on the map can be specified as an icon (pin-m-marker) with a color, as shown in bold below:
https://cdn.metalocator.com/index.php?option=com_locator&task=tools.createstaticimage&format=raw&url=pin-m-marker+FF6A67({{template_item.location.lng}},{{template_item.location.lat}})&lng={{template_item.location.lng}}&lat={{template_item.location.lat}}&zoom=16&width=500&height=500&density=@2x&style=light-v10"
The marker can also be specified as a full URL to a PNG file. The format of the url parameter above is as follows:
&url=url-<iconurl>(<lng>,<lat>)
Where iconurl is the full path to the marker image beginning with https, and url-encoded and lng/lat indicates the position of the marker, which is usually the exact same as the location image, so a full url parameter with an image might look like:
&url=url-https%3A%2F%2Fd23g0hayoxy5dh.cloudfront.net%2Ful%2F156%2Fimages%2Fbulk%2Fgallery%2Fmap_marker_f04d80_34x34.png(-87.683066,30.375339)
The image itself can be uploaded to MetaLocator under Tools > File Uploader, or it can be uploaded in the Interface builder if it's the same marker used in the locator.
Language Constants
Language constants can be accessed via the ml_language object as shown below. As in other areas of MetaLocator the active language is defined by the language set in the interface settings, or as overridden by the lang parameter in the URL.
{{template_item.ml_language.LOCATOR_GET_DIRECTIONS}}
Some language constants include placeholders such as
LOCATOR_FOUND_RESULTS="%s emplacements trouvés correspondant à votre recherche."
Those can be specified in the page template as
{{ template_item.ml_language.LOCATOR_FOUND_RESULTS|format(200) }}
There are also numbered placeholders where multiple placeholders might be specified as
LOCATOR_DIRECTORY_PAGE_TITLE="%1$s locations in %2$s"
Those are handled similarly, as in this example
{{ template_item.ml_language.LOCATOR_DIRECTORY_PAGE_TITLE|format(region.current_value_count,region.label) }}
And this example
{{ template_item.ml_language.LOCATOR_DIRECTORY_PAGE_TITLE|format(nearby.value_count,nearby.value) }}
Custom Language Variables for Navigation Elements and Website Header & Footer
MetaLocator can automatically synchronize your Websites template, (your header and footer) directly into the The Website Template setting described above. If you plan to display your location pages in multiple languages, the header & footer must include language constants in place of any user-facing English text. The same strategy can be used for links which might be different from language to language.
For example, if your Website Template includes a banner that says "Store Locator", it might include it as follows:
<h2>Store Locator</h2>
This will always display as English to the end user, regardless of the language passed to MetaLocator.
To display language-specific text,
Create a constant in the desired language files to store the "Store Locator" text in each language, e.g. LOCATOR_MYSITE_STORELOCATOR. In your en-US language file, it would still have "Store Locator", however, in your es-MX file, it might contain "Localizador de tiendas".
Replace the English text in the Website Template setting with
<h2>{{template_item.ml_language.LOCATOR_MYSITE_STORELOCATOR}}</h2>Save the Interface and preview your Location Page, (or Directory Page) and include the "lang" parameter for the desired language file at the end of the URL. E.g.
&lang=es-MX (1)at the end of the preview link or?es-MX (1)for the real search-engine-friendly URL.
Language-specific links can be crafted in the same way in the language file. In the example above, if your "Store Locator" text was also a link, as in:
<h2><a href="/en">Store Locator</a></h2>
You would create the LOCATOR_MYSITE_STORELOCATOR just as described above and also another constant for the link itself, LOCATOR_MYSITE_STORELOCATOR_LINK="/en"
Then the code in the Website Template setting would be as shown below, replacing both the text and the link with the translation constants.
<h2><a href="{{template_item.ml_language.LOCATOR_MYSITE_STORELOCATOR_LINK}}">{{template_item.ml_language.LOCATOR_MYSITE_STORELOCATOR}}</a></h2>
Linking from the Locator
The location page typically replaces the Details window. To add the link to the results, add the field as shown below:
