Add a store locator to TYPO3

What you get

Your location map with list, search and filters on a TYPO3 page, for example "Locations" or "Find a dealer". You manage the data in My Store Locator, not in TYPO3.

Before you start

• A My Store Locator account (sign up free)
• A published map (status "Live")
• For the extension, an administrator account in the TYPO3 backend
• For the way without the extension, the embed code from the Embed Studio in the app and a TYPO3 backend user that may use the "Plain HTML" content element (with restricted editor rights an administrator has to allow it)

Install the extension

1. Download the zip file above. Do not unzip or rename it - TYPO3 reads the extension key my_store_locator from the file name.
2. In the backend, open Admin Tools → Extensions, choose Upload Extension at the top and upload the file. Activate the extension if TYPO3 has not done so already.
3. Include the settings. In TYPO3 13: Site Management → Sites, click the pencil icon next to your site, pick the set My Store Locator under Sets for this Site and click Save. In TYPO3 12: in the root template under Site Management → TypoScript, include the static template My Store Locator (my_store_locator) after Fluid Content Elements.

Uploading in the backend only works for installations without Composer. If your TYPO3 runs with Composer, install the extension straight from Packagist and then set it up:

composer require shss/my-store-locator
vendor/bin/typo3 extension:setup

Do not skip the second command. Only extension:setup creates the extension's database fields. Without it, TYPO3 shows an SQL error about the column icon_type when you add or display the content element. Then include the settings as in step 3.

Connect to My Store Locator

1. Open the Page module, select the page in the page tree, click Create new content and choose My Store Locator map in the Plugins tab.
2. In the Map tab, paste the token into the Map token field. The embed code or the map link work too. Or click the icon to the right of the field, log in to My Store Locator and pick your map. The token is filled in.
3. Click Save and open the page in the frontend with View webpage.

Two-click consent is on by default. Height, language and layout are set per element.

Updates

TYPO3 does not update an extension installed from a zip by itself. For a new version, upload the new file from this page again with Upload Extension and let it overwrite the existing version. With Composer, get new versions with composer update shss/my-store-locator and run vendor/bin/typo3 extension:setup again afterwards. Once the extension is in the TER, you will find it here.

Without the extension: "Plain HTML" content element

1. In Embed Studio, copy the code from the iframe tab.
2. In the TYPO3 backend, open the Page module and select the page in the page tree.
3. Click Create new content in the column you want.
4. On the Special elements tab, choose Plain HTML.
5. Paste the code into the HTML code field, save and check the page in the frontend.

<iframe src="https://app.my-store-locator.com/#/m/YOUR-TOKEN" title="Store locator" style="width:100%;height:640px;border:0;max-width:100%" loading="lazy" allow="geolocation"></iframe>

The content element outputs the code unchanged. Check the page in the frontend after saving, because the backend preview only shows the source.

Several languages

If you run a German and an English page in TYPO3, use the same code in the translation and change the language in Embed Studio (parameter lang=en in the address, or data-lang="en" for the widget).

Privacy: two-click consent

In Embed Studio, turn on "Load the map only after a click (GDPR)" and copy the code again. Visitors then see a placeholder with a privacy notice first, and the map only loads after a click. More under GDPR & security.

If the map does not show up

• Element missing from the list: your user may not use "Plain HTML". An administrator can allow it in the backend group's permissions.
• Content Security Policy: TYPO3 12 and later can send a CSP for the frontend. Add app.my-store-locator.com to frame-src there.
• "Map not available": the map is still a draft. Publish it in the app.

All options are explained in the embedding guide.

FAQ