Our GeoJSON update for WebApps will work with both newly created WebApps, and WebApps that have been updated after the release of this update.
To apply the update to an existing WebApp, simply go to the WebApp Builder view, and click 'Save'.
Webapp items have 2 new fields by default:
location
- GeoJSON - Stores the location value of your item as coordinates - [long, lat]
address
- Text - Stores the human-readable address value of your item
To set these values in Siteglide you will see the new 'Location' tab on the WebApp item edit view. Here you have 2 choices:
Search for an address and then select it from the results dropdown - Recommended
Manually enter the Address and Longitude/Latitude values for your item
Our new Location Search feature relies on 2 URL parameters to work:
longlat
- LongLat - The coordinate value of the center point for the search - long,lat
distance
- Int - The number of kilometres from the center point
Example - /map?longlat=-1.2660643,51.3926564&distance=18
To display results from these parameters you will need the new use_location_search
parameter on your WebApp include:
use_location_search
- 'true' or 'false' - default: 'false'
Example - {%- include 'webapp', id: '1', use_location_search: 'true' -%}
Note - Location Search `(uselocationsearch) and Text Search
(usesearch`) will not work together at the same time_
Example code to search a WebApp by location, and output the results on a map or in a list.
In this example we'll show you how to add a location search to a Page, and then output the results of that search both in a list and on a map. Items will display in the result set when they are within the radius of a chosen location. One example of how you can use this is as a Store Locator for a franchise of Shops.
Two different options are provided in this example:
Add HTML and JavaScript
:::codeblocktabs
:::
Use a Layout of your choice.
This relies on there being a layout named 'json'. See the contents of 'json' in the 2nd block of code.
Add HTML + Liquid
The Liquid makes sure the map is only outputted after the Page has been refreshed by the JavaScript and the correct parameters are available in the URL for filtering the results.
Add JavaScript
The following function is triggered by the script from step 1, only after it has finished loading- this occurs because the function's name is referenced in the URL parameter fetching the Script. The code must be placed above the <script> tag from step 1.
Layout 'json':
When enabled, WebApps have automatically generated Detail Pages, which use your chosen Detail Layout to display each WebApp Item's content. Users can make new WebApp items and the page will automatically be created for them.
To output a WebApp list within a detail layout you must include the following parameter: type: 'list'
See more about nesting dynamic content inside your WebApp Layouts in the Nested Content and Datasources section of the documentation. See more about list output parameters on the List Layouts doc.
When you create a WebApp, default files are automatically created for you. WebApp list layouts are stored in the following folder structure, which you can view via Code Editor: layouts/webapps/webapp_ID (My WebApp)/
Within this folder you will find the following:
detail/
- the detail layouts of the WebApp, visible on the url of the item
default.liquid
- the default detail layout
To create a custom layout file, right click on the detail folder. Alternatively, you can edit the default file. All layout files must use the .liquid
file extension, for example mylayout.liquid
. You can select which detail layout a WebApp from a dropdown on the edit WebApp page.
While editing the layout of the WebApp using Code Editor, you can output any field using the dropdown along the top of the editor.
When placed onto a page or a template, this liquid displays the WebApp items using the defined list Layout.
When sorting by Custom fields, you'll need to refer to the field by its Custom Field ID
. e.g. to sort by the 2nd Custom Field created on webapp_1
, you should set the Sort Type to: sort_type: "properties.webapp_1_2"
We use this syntax to access the field directly in the database, in order to help increase Page Load performance.
Learn more about Custom Field IDs here: Understanding Custom Field Names and IDs - and when to use them
When you create a WebApp, default files are automatically created for you. WebApp list layouts are stored in the following folder structure, which you can view via Code Editor: layouts/webapps/My WebApp (webapp_ID)/
Within this folder you will find the following:
list/
- the list layouts, used when outputting items as a section on a page
default.liquid
- the default list layout
To create a custom layout file, right click on the list folder. Alternatively, you can edit the default file. All layout files must use the .liquid
file extension, for example mylayout.liquid
. Any files created within this folder will automatically become available in the dropdown selector when outputting a WebApp from the Toolbox
Parameter
Description
id
the WebApp's ID
item_ids
output one or more WebApp items. For multiple ids comma separate them like so: item_ids: '17559,17546'
.
category_ids
output all items in one or more categories. Comma separate category ids to filter by multiple categories e.g: category_ids: '17559,17546'
.
show_all_sub_items
default is 'true'
- When setting a category, this defines whether or not items should be shown if they are in sub-categories
layout
default is 'default'
- layout values are relative to the folder: layouts/webapps/My WebApp (webapp_1)/[layout name]
per_page
defines the number of items outputted on the page
show_pagnation
default is 'true'
- defines if items should be paginated when the per_page is met.
ignore_pagination
default is 'false'
- defines if the output should ignore pagination in the URL. This is useful when outputting fixed WebApp/Module items in a sidebar, that don't need to be affected when moving page number.
sort_type
defines the type by which items are ordered. This can be a field (e.g. sort_type: 'properties.name'
or sort_type: 'properties.webapp_field_1_2'
) or you can choose to sort by your array of 'item_ids' if you are outputting specific items (sort_type: 'item_ids'
)
sort_order
defines the order in which the type is sorted
collection
default is 'false'
- If you set it as collection: 'true'
then any layout is suppressed.
use_wrapper
default is 'false'
- If you set it as use_wrapper: 'true'
then your layout will be layouts/webapps/My WebApp (webapp_1)/[layout name]/list/wrapper
and the wrapper file needs to contains Liquid to output the items: {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
Field Name
Liquid Tag
Description
Item Name
{{ this['name'] }}
name of the FAQ
Slug
{{ this['full_slug'] }}
url of the current item, relative to the layout
Weighting
{{ this['weighting'] }}
weight of item, used for sorting
Release Date
{{ this['release_date'] }}
release date of the item
Expiry Date
{{ this['expiry_date'] }}
expiry date of the item
Enabled
{{ this['enabled'] }}
enable/disable the item