Bubble - Directory/Listings Template
This is a simple Listings/Directory Template that allows users to search for, view, rate and comment various places in a certain area.
Features
Search for different Categories such as Hotels,Restaurants,Bars etc and filter results to a certain area.
List and Map View – You can view the results in a list format or in a map.
A Listing contains general contact information, various images, a description and can be commented and rated.
Users can Login to Bookmark certain Listings, see all the ratings they gave and edit their profile.
Admins have access to the admin panel where new Listings can be added and current ratings can be moderated/deleted.
The Template is responsive and optimised for mobile on all pages and can be easily modified.
Documentation
Data Types
There are 5 different Data Types:
User: This is standard by Bubble and in our case it contains the bookmarks (list of things) and the user hierarchy. Set the hierarchy to “admin” in order to grant this user access to the admin panel. The field “name” is the name that will be displayed on the profile of the user.
Thing: This is the main Data Type of this Template as it represents the individual Listings on the app. It contains multiple field such as Email, description and name. The field “image” is the main image of the listing and consists of one image only whereas the field “slideshowimages” contains multiple images.
Category: The data type “Category” helps to sort the data type “Things” into various Categories. In order to add a new Category, head over to the Data App Data section of your App and create a new entry. The Category will then be displayed everywhere in the app.
Rating: The Data Type “Rating” is a rating that is assigned to a certain “Thing” (Listing). It consists of a title, description, the user that posted it and a grade which is a number from 0-5 and is converted to stars.
Comments: Comments are assigned to “Things” as well and also to the user that posted the comment. They just consist of the data field “content” which is displayed in the comments section of each listing.
To add a new Category to your app, please don't forget to add it via adding a new Data Entry for the Category Data Type of your app. Adding a Category manually will not work.
Key Points
On the Index Page the group “search” contains a link as well as the text “search”. When the Category Dropdown is empty, the text is displayed instead of the link. This is because a search cannot be made without a category being selected. Once “Search” is clicked, the selected category will be sent via the url to the results page as well as the address using the key “pos”, only if an address is entered.
All pages are fully responsive and can be used for mobile and desktop except the results page. For UX purposes we have decided to create a separate version for the mobile results page named “resultsmobile”. The functionality is identica, except the search for keyword, which is only available on the desktop version.
We work a lot with custom states, for example on the results page, when the user clicks the button Map, the state of results is changed to “map” and the Map is displayed.
The Data Type of the results pages (results and resultsmobile) is Category! This means that the page has to have a Category assigned to it, however an address is not necessary. When only a category is specified, results for all listings for this category will be displayed. The results will be limited only when an address is specified. Furthermore, the Map view will only work when an address is specified. When an address is not specified and the Map view is clicked, the Text “please specify an address ” will be displayed.
Users have to be Logged in to rate, comment and bookmark a listing. Listings can be rated only once, but can be commented multiple times. A Bookmark can be undone only in the Bookmarks section of the page “Profile”
The Button “Contact” on a Listing will send an Email to the specified Email and the Button “Visit” will open the specified website.
In the “Profile” page, logged in users can see and edit their bookmarks, view their ratings and edit their account.
In order to access the adminpanel, you have to be logged in and have to contain the field “admin” in the data field “hierarchy”. (See data types above). Just enter in the name of your url and add a “/admin” at the end. In the admin panel you can add new listings and view and delete ratings.
Last updated
