Headless Map Rendering¶

Introduction of middleware¶

With the introduction of the StoreFinderMiddleware it's possible to integrate a headless version of the map.

The middleware provides categories and locations. In addition its possible to use location and fulltext search in combination with category filtering.

Only the endpoints are provided. You need to implement the javascript yourself.

Preparation of data¶

To modify the categories and locations events ModifyMiddlewareCategoriesEvent and ModifyMiddlewareLocationsEvent are provided.

As an example on how to use the ModifyMiddlewareLocationsEvent the listener ModifyMiddlewareLocationsListener is present.

Integration¶

To use the middleware, it's important to include th Ajax.yaml in the site config

config/sites/{your-site}/config.yaml¶

 imports:
   - { resource: 'EXT:store_finder/Configuration/Routes/Ajax.yaml' }

Fields to output and conversion can be changed with TypoScript key plugin.tx_storefinder.ajax

Template example¶

Below is an example on how to use the configuration and endpoints with your custom code.

Map.html¶

 <store-finder-map
     showSearch="{sf:bitwiseIf(a: settings.showBeforeSearch, b: 1, then: 1, else: 0)}"
     showList="{sf:bitwiseIf(a: settings.showBeforeSearch, b: 4, then: 1, else: 0)}"
     categoriesEndpoint="{f:uri.typolink(parameter: '/api/storefinder/categories/{cObjectData.uid}')}"
     locationsEndpoint="{f:uri.typolink(parameter: '/api/storefinder/locations/{cObjectData.uid}')}"/>