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:
- Created a widget.
- Added a grid to arrange the widget elements.
- Added a Google Map element from + Add Elements > Display > Google Maps.
- Added an empty box to organize the events, from + Add Elements > Layout > Empty Boxes.
- Placed a text element and a list-type repeater in the box.
- 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.
- 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
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
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:
- Imported the
wix-data
module, which allows us to query the Wix Events Collection and get information about the event’s location.
- Added widget properties for types of event filtering. These properties will later be updated in the custom panel.
- Fetched the events data and filtered it according to what the user chose in the custom panel.
- Populated the repeater elements with the events data.
- Set an
onClick
event on each repeater item, for moving to the right place on the map.
See how it looks
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:
- Created the Settings custom panel.
- Added toggles to let users filter upcoming events and events that are on sale.
- Added a button to take users to their Events dashboard.
- Added panel code to manage the toggles and the button.
See how it looks
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:
- Named the widget’s main action button Settings and connected it to the custom panel that we created.
- Marked several layout elements to be non-selectable, so that users will not be confused clicking the wrong elements.
See how it looks
Installation Settings
Installation Settings is where you can define how the app behaves during its first installation on a site. In this area we:
- Defined the widget to be automatically added to the homepage of the site it’s installed on.
- Set the Mobile preset to be the default preset for mobile screens.
- Added preset images. Make sure to change these images to your own if you change the appearance of the app.
See how it looks