Events Map

Wix Blocks

Events Map

Wix Blocks
This template is built with:
This template demonstrates the use of the Wix Events API to show event locations on a site. With Wix APIs, you can add custom functionalities to our native business solutions, like Stores or Bookings. It is an excellent starting point if you plan on using Wix APIs to manage a site’s business data. The template has a custom panel that lets you filter the events on the map. Use this template to integrate with Wix apps and build on our existing capabilities.

How We Built This: An Overview

This app was built on several areas of the Wix Blocks editor. Here is how we did it.

Widgets and Design | Widgets

The Widgets area is where you create the user interface of your widgets, using drag and drop Wix elements. In this area, we:

  1. Created a widget.
  2. Added a grid to arrange the widget elements.
  3. Added a Google Map element from + Add Elements > Display > Google Maps.
  4. Added an empty box to organize the events, from + Add Elements > Layout > Empty Boxes.
  5. Placed a text element and a list-type repeater in the box.
  6. Defined the box that holds the repeater (#box5) as “overflow content” - so users can scroll through the events while keeping the repeater in a fixed size.
  7. Added text elements for the event heading and details.

We used more grids in several places in the widget, to organize the elements. You can see them and all other elements in the Layers panel.

See how it looks desig-presets

Widgets and Design | Design Presets

Design presets let you create various styles and layouts for the same widget. The widget structure, code and functionality stays the same across presets. In the Design Presets area, we created four design presets:

  • Floating: The events repeater is placed on top of the map.
  • Mobile: This preset is built vertically, to adjust better to mobile phone screens.
  • Side by side: The events repeater is placed next to the map.
  • Slider: We changed the type of the repeater to a slider repeater, which is horizontal.
See how it looks desig-presets

Widgets and Design | Widget Code

The widget code includes the business logic of a specific widget and can also contain widget API properties, events and functions. In this area we:

  1. Imported the wix-data module, which allows us to query the Wix Events Collection and get information about the event’s location.
  2. Added widget properties for types of event filtering. These properties will later be updated in the custom panel.
  3. Fetched the events data and filtered it according to what the user chose in the custom panel.
  4. Populated the repeater elements with the events data.
  5. Set an onClick event on each repeater item, for moving to the right place on the map.
See how it looks desig-presets

Editor Experience | Custom Panels Tab

The Editor Experience area configures how site builders who install your app can interact with it and edit it. In the Custom Panels tab, we:

  1. Created the Settings custom panel.
  2. Added toggles to let users filter upcoming events and events that are on sale.
  3. Added a button to take users to their Events dashboard.
  4. Added panel code to manage the toggles and the button.
See how it looks desig-presets

Editor Experience | Configuration Tab

The configuration tab allows you to fine-tune what users can and cannot configure in your widget, when it’s installed on their site. In this area, we:

  1. Named the widget’s main action button Settings and connected it to the custom panel that we created.
  2. Marked several layout elements to be non-selectable, so that users will not be confused clicking the wrong elements.
See how it looks desig-presets

Installation Settings

Installation Settings is where you can define how the app behaves during its first installation on a site. In this area we:

  1. Defined the widget to be automatically added to the homepage of the site it’s installed on.
  2. Set the Mobile preset to be the default preset for mobile screens.
  3. Added preset images. Make sure to change these images to your own if you change the appearance of the app.
See how it looks desig-presets