Overview #
Version 4.10.13 of the Agile Store Locator plugin introduces a new feature that allows you to customize the column layout of your store locator and search filter using Bootstrap 4’s grid system. This feature provides flexibility in creating responsive layouts that adapt beautifully to different screen sizes.
Shortcode Attributes #
With this update, you can use the following shortcode attributes to control the layout:
- md: Defines the column configuration for medium screens (≥ 768px).
- lg: Defines the column configuration for large screens (≥ 992px).
Each attribute can accept up to two comma-separated values:
- The first value specifies the width of the search filter (list column).
- The second value specifies the width of the store locator (map column).
If only one value is provided, the remaining columns will automatically fill the space to ensure a total width of 12 columns, as per Bootstrap’s grid system.
Default Configuration #
If you do not specify any attributes, the plugin uses the following default configuration:
- md (Medium Screens): 5 columns for the list, 7 columns for the map.
- lg (Large Screens): 4 columns for the list, 8 columns for the map.
Usage Examples #
Example 1: Default Layout #
If you use the shortcode without any attributes, the default layout will be applied:
[ASL_STORELOCATOR]Result:
- On medium screens: 5 columns for the list and 7 columns for the map.
- On large screens: 4 columns for the list and 8 columns for the map.
Example 2: Custom Medium Screen Layout #
You can customize the layout for medium screens by providing a single value:
[ASL_STORELOCATOR md="6"]Result:
- On medium screens: 6 columns for the list and 6 columns for the map (since
12 - 6 = 6). - Large screens will follow the default layout.
Example 3: Full-Width Map on Large Screens #
To make the map full-width on large screens:
[ASL_STORELOCATOR md="12" lg="12"]Result:
- On large screens: The map takes up all 12 columns, and the list is drop to the next row.
- Medium screens will also be full width as 12 columns value.
Example 4: Custom Layout for Both Medium and Large Screens #
You can specify custom layouts for both medium and large screens:
[ASL_STORELOCATOR md="4,8" lg="6,6"]Conclusion #
This new feature in version 4.10.13 of the Agile Store Locator plugin makes it easier than ever to create custom, responsive layouts using the familiar Bootstrap 4 grid system. Whether you want a balanced layout or a full-width map, you have complete control over the design of your store locator.
