In this guide we’ll briefly look at OxyPowerPack’s Interactivity Engine. What it does, how to use it & what types of everyday things it can be useful for.
It’s something we’ll be using in future tutorials for creating different types of user interactions in Oxygen. So, to prevent repeating the same information later, this post can lay the groundwork for some basic understanding & show some simple use cases with the settings needed to implement them.
The OxyPowerPack Plugin
OxyPowerPack is an Oxygen add-on, adding some new dynamic components to Oxygen and bringing some new functionality for us to use on existing elements.
We won’t go over the full functionality of the plugin. In short, there are parallax effects, adding attributes, lazy loading, adding tooltips, countdown timers, maintenance mode etc. Details are found on the OxyPowerPack website with documentation being added.
The interactivity engine though, for me at least, is the most exciting part. It gives us an interface to be able to make certain events trigger certain actions. This is something that would usually take writing custom javascript or adding seperate plugins to achieve in Oxygen.
This can be a nice timesaver for those of us who know javascript and opens up a whole range of new possibilities for the many Oxygen users that don’t.
An Overview of the Interactivity Engine
The OxyPowerPack interactivity engine is found inside the drawer that appears at the bottom of the screen after clicking the small OxyPowerPack symbol inside the builder.
After clicking on any element and selecting ‘Interactivity’ from the tabs at the top, we can see the available options. (It’s recommended to ‘dock’ the drawer to prevent it from closing while working with the Interactivity Engine. There is a button on the top right of the drawer for this).
Taking a closer look, we have a list of ‘Events’ to choose from on the left side and then a list of ‘Event Actions’, which we can tie to those events, on the right side.
Events
The events come in two types, global events and events that are specific to the selected element;
We have global events such as..
- When the page first loads
- When the user first scrolls the page
- When a contact form 7 form is submitted
- When a countdown timer reaches zero.
And we have element specific events such as..
- When the user clicks an element
- When the user scrolls over an element
- When the user hovers the cursor over an element
- When one element passes over another element
- When an element first goes out of view
- ..more
Event Actions
Once we have chosen an event, we can then choose which action(s) we want that event to trigger.
Here are some examples of the actions;
- Scroll user to the top / bottom of the page
- Add / Remove Classes from elements
- Show / Hide elements
- Redirect user to a new page
- Open / Close a Modal
- Show an Alert to user
- .. more
Multiple actions can be triggered by a single event and the order of the actions can be changed by just dragging and dropping the action into the correct order in the list.
We can also add little comments to each action so we don’t lose track of what everything is for.
Some Simple Use Cases
Just looking at the list of available events and actions probably already brings up some ideas of what we can create.
Being able to match any event with any action means we could obviously do some absurd things such as scrolling the user to the bottom of the page every time they hover over an element. Or redirect the user to another page every time they first start scrolling a page.
But in terms of actually creating useful experiences for users, here are some simple use cases with the settings needed to implement them..
1. Thank the user for submitting a form by changing the text above the form once it has been submitted
Event: Contact Form 7 submitted
Action: Set Text
Action Settings: We need to choose the selector of the text element or heading which we intend to change the text of. Then type in the new text in the ‘text’ field. For now, be careful not to use apostrophes in the text.
2. After a countdown timer reaches zero on a sales page, inform the user they have missed the current LTD deal, then redirect them to another page to get on the waiting list.
Event: Countdown Timer Finished
Event Settings: We can choose a selector for a specific countdown timer, or it can be left blank if there is only one countdown timer on the page.
1st Action: Alert
Settings: We add the text that needs to be inside the alert
2nd Action: Redirect
Action Settings: The URL of the next page to redirect them to.
3. Reveal the comment section on blog posts only when user has clicked a button to see the comments
This requires the comment section to be initially hidden with display: none; and a button or div to be added to act as the trigger.
Event: Click
Action: Show
Action Settings: We can choose if we want a fade effect when the comments are revealed. Then we add the class or ID of the element we want to be as the trigger, our button.
There are also more examples on the OPP site, showing the functionality, found on the interactivity engine page.
Advanced Use Cases
In upcoming tutorials, we’ll be looking at creating more complicated user interactions, especially making use of the action ‘toggle class’ and how we can use with Oxygen’s built in style settings and with custom CSS.
The action ‘toggle class’ can be very useful as a way to have more control over how elements are revealed/transformed using CSS only. We can make an element do pretty much anything we want by just adding a class to it and then removing that class dynamically. This is often how off-canvas elements are built, or more fancy effects that happen when a user clicks on an element. The limitation is then only in the styles that we apply to that toggled class.