Spectral Web Services
A little trickery to get Portal to offer paid plans to your Ghost users
Want to pop up your paid plan choices for both free members and non-members? Here's how!
If you're using Portal for Ghost membership, you've probably already discovered that it provides a bunch of useful links for directing website visitors to specific pages. To get there, visit the settings page (click the gear icon on the lower left corner of the /ghost dashboard), then go to the Portal settings, and click customize. Finally, choose the "Links" tab, as shown in the image below:
The problem I ran into this week was that my client wanted to be able to provide a link that would open the upgrade page for her existing free members, but show her unregistered visitors the sign-up page, including the paying plans. The /#/portal/account/plans link works for signed in members, but it takes unregistered visitors to the "Sign in" part of portal, not the "Sign up" part.
I was pretty convinced that there was a Portal link that did this. I eventually admitted that there wasn't, and switched over to some javascript/handlebars trickery. This is up in the <head> section of default.hbs (and would work equally well in the site's code injection).
<script>
function handleUpgradeUrl() {
let currentUrl = window.location.href;
if (currentUrl.includes('/#/upgrade')) {
{{#if @member}}
window.location.href = currentUrl.replace('/#/upgrade', '/#/portal/account/plans');
{{else}}
window.location.href = currentUrl.replace('/#/upgrade', '/#/portal/signup');
{{/if}}
}
}
handleUpgradeUrl();
// Listen for hash changes
window.addEventListener('hashchange', handleUpgradeUrl);
</script>Wait, what? What's going on here that we have {{handlebars}} and JavaScript hanging out together?
Let's break this down. The first thing that happens is that the Ghost server evaluates the handlebars. Depending on whether the visitor is logged in, it either sends:
if (currentUrl.includes('/#/upgrade')) {
window.location.href = currentUrl.replace('/#/upgrade', '/#/portal/account/plans');
} or
if (currentUrl.includes('/#/upgrade')) {
window.location.href = currentUrl.replace('/#/upgrade', '/#/portal/signup');
} Then the code goes to the web browser, where appropriate JavaScript runs to pop open the right part of Portal.
So now, when my client adds /#/upgrade to any page on her site, Portal pops up with the right page shown.
Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice, we'd both appreciate it!
