Topics
Affiliate Portal is the most dramatic leap forward we’ve ever undertaken in holistically improving the affiliate experience in AffiliateWP. This pro add-on – for those who choose to install it – is intended to be used as a wholesale replacement for the standard Affiliate Area that ships with AffiliateWP core.
Please note: The standard Affiliate Area is not going away. It and the Affiliate Portal pro add-on will continue to be developed in parallel, though with divergent feature sets.
Approach Approach
Major selling points for Affiliate Portal is that it ships with its own modern style and it renders full-screen, which means no hassles from incompatible themes and it looks and works great.
For ease of discoverability, the portal actually takes over the standard Affiliate Area page URL. During the initial beta stages when add-on integrations and core features are still being added, there is a toggle to let affiliates travel back and forth between them. In 1.0.0+, there will be a setting to only show affiliates one or the other.
This new opinionated approach is intended to provide a consistently great affiliate experience, and it’s with consistency in mind that we’ve designed its APIs in a similar fashion.
Architecture Architecture
Built atop object-oriented PHP, TailwindCSS, and AlpineJS, Affiliate Portal feels modern, almost like a SaaS. And with this modern architecture comes (more) modern minimum requirements than our average add-on:
Minimum Requirements Minimum Requirements
- PHP 5.6+
- AffiliateWP 2.6.7+
- WordPress 5.0+
Unlike the Affiliate Area, Affiliate Portal isn’t template-driven. In fact, views (pages within the portal) are rendered dynamically from a series of registered sections and controls accessed via our REST API.
And just to prove that it can be done well, we’ve actually dogfooded our own APIs to create all of the core views and official add-on integration views that come standard in the portal.
As a bonus, there’s an easter egg; if you enable Debug Mode in AffiliateWP’s settings then manually navigate to /example-controls in the affiliate portal, you can see a showcase of all controls in the Controls library.
Building With Controls Building With Controls
Each page inside the portal is referred to as a view, and each section within the view has specific controls registered against it. Sections and controls can even be individually registered against existing views and sections, respectively. You can build out entire views just for your own needs or extend any others for a fully integrated experience.
Controls are registered against and rendered with our new PHP-based Controls UI library. Text fields, headings, checkboxes, lists, information cards alone and in groups, buttons, paragraphs, all kinds of things are possible. Each control typically has its own options with some global, form, and input options for the relevant groups thrown in.
The Example Controls view mentioned before is an excellent reference for what controls are available to use in your extensions.
Available Hooks Available Hooks
In the Affiliate Dashboard portal there are a few specific hooks that can be used to register entire custom views, custom sections against existing views, or custom controls against existing views and sections. These hooks follow a predictable naming pattern and are each passed an instance of their respective registry:
- ‘affwp_portal_views_registry_init’ : Views_Registry
- ‘affwp_portal_sections_registry_init’: Sections_Registry
- ‘affwp_portal_controls_registry_init’: Controls_Registry
Extending Controls Extending Controls
The Controls API is robust and flexible, but only to a point. Controls use and support TailwindCSS classes (within the scope of a whitelist) and AlpineJS directives.
It’s not possible to extend our controls to make your own custom prototypes – all of the control classes are marked final – though you can extend their available options to make them feel like your own.
In enforcing an opinionated experience, we chose not to allow custom markup such as is possible with templates in the standard Affiliate Area. Instead, we’re promoting a structured data approach: you register the controls, we render them for you.