Let’s pretend you’ve finished building a marketplace web app.
For this article, let’s say the web app you built was similar to Skillshare, Domestika, or LinkedIn Learning. Now that your platform has a list of courses to show for, let’s proceed to build a home page that allows users to optimize a navigation search bar to check out available content. When developing your home page, don’t forget to include a text input element. This allows users to type their inquiries or search for content they like.
Even when they don’t find what they’re looking for, this gives them a chance to find something similar; like when a user settles with SEO marketing after searching for social media marketing.
To start, we’ll need to create a new workflow to develop a navigation search bar on Bubble. Additionally, bear in mind that you’ll have to build a new workflow when the input value is changed.
In this workflow, we’ll then have to build a navigation event that leads to an outside website. By doing so, we allow ourselves to personalize the destination page URL, extending us the capacity to include whatever content the user searches for. Furthermore, note that the landing page URL should be our home page URL + results page title + the search bar input value.
Displaying available lessons and courses
Once a search query is worked on, we’ll have to build a separate results page, enabling us to show a complete list of lessons that match whatever the search query is. Here, we’ll have to put a repeating group element, making sure its content type is a list of the available courses.
What’s more, this repeating group’s data source will be taken from the user query value from our added URL string. For this specific example, we’ll be searching for all of the lessons where the title contains data from the current page URL.
We’ll also have to make sure that we don’t pull this data from the parameter but from the URLs path. Furthermore, we’ll have to make sure that an added constraint is placed on the repeating group. In this case, what’s displayed are only courses where the published status is “yes.”
Once this repeating group has been established, we can fill out the relevant dynamic content fields.
Sending data to different pages
You can also create events within each solo column within a repeating group. This will become useful when developing navigational features on the app you build. Conventionally, learning resource web apps will only show an overview of every available lesson—its title, price, and a cover photo. That said, you’ll want to show the complete lesson details for every item on different pages.
Remember to host this supplemented content on your dedicated course page.
To make this event work, you’ll need to develop a workflow that leads a user to your lesson page when a lesson’s photo is clicked. Use a navigation event on this workflow to send a user to a separate page. From there, choose the destination page type for the lesson page. Next, send supplemented data to this page so Bubble knows which particular lesson the user is opening. The data you’ll need to present is the course of the current cell.
How to display dynamic content
Once a user has been led to a particular lesson page, you can seamlessly display the appropriate content once it’s sourced from your workflow. And like all the other times before, you’ll have to match the data type of your user to the appropriate destination page.
Here, set it to course property from the course page.
You can then proceed to work on your page elements by adding dynamic content, allowing your web app to present the lesson’s information that’s been established in your workflow.
With the complete list of lesson modules and chapters, you’ll also have to display another repeating group. In this module, include whatever file is needed that contains the actual lesson content—video, audio, PDFs.
Because you only want to show the complete lessons to those who’ve bought your digital offering, these elements have to be “not visible by default.”
By putting in place an additional element condition, you afford your web app the opportunity to show the complete content only when a user is an acknowledged course student.
For elements to behave the way you need them to, turning to conditions is the best way to do that. Case in point, our condition will determine when the current lesson’s list of enrollees contains the current user. When conditions are met, we can then proceed to make the element visible, allowing your user to access the content.
Creating a checkout
This is the exciting part — the checkout! Every business leader’s objective is to make sure their prospects become paying customers. For others to be able to buy your course or lesson, you’ll need to create a checkout experience to facilitate payments on Bubble. The platform extends the chance to optimize plugins, but Stripe is by far the most common choice for matters involving web app payments.
Once the Stripe plugin is in place, we can proceed to build a workflow when the “enroll” or ‘buy course” button is clicked. In this workflow, build a payment event to charge the appropriate user. When optimizing this event, make sure to put the correct purchase data based on the prices of your courses.
Once the payment workflow has been configured, the Stripe plugin will work automatically, displaying when a user’s card payment has been successful.
When a payment is complete, we can then add one last step to include this payor in a course’s list of students. That way, they can access your lessons.
And you’re done! You now have your very own version of Skillshare!
Do you have apps you want to build? We can help you!
Schedule a call with us today!
(All screenshots are from Bubble.io)
