Hide particular nav item if paid member? 👻

Themes
1

Hey folks!
As someone who’s spent a good chunk of his career managing online communities, the amount of help/support from the members here is second to none. I’m hoping someone can help point me in the right direction.

TL’DR: I’m trying to show/hide nav items based on someone’s member status. It would look like this:

ex
ex1335×418 81.2 KB

For context, I’m building a newsletter that will have two versions: free and paid

Due to the differences in the free/paid versions, the best way to go about this is to publish two separate posts, then send each newsletter separately. I’d like the nav to display a link to the proper category based on whether or not the user is a paid member or not.

Is this possible? I’m using the Casper theme on a Ghost hosted instance, if that matters.

Thanks in advance! :pray:

2

Sorry to bump this - this is the one thing stopping me from launching.

Is this a possibility? Does anyone know?

Thanks!

3

I think the easiest way is to move the membership-type-dependent item to the beginning of the navigation so you can use handlebars to choose the item

{{#if @member.paid}}
<li>{{!-- pro --}}</li>
{{else if @member}}
<li>{{!-- free --}}</li>
{{/if}}
{{!-- navigation loop --}}
1 Like
4

I’m 100% going to try this. Thank you so much!

5

I am not able to code at all, but if someone provides me with a Code I can take it from there and implement it into the theme or code injection. I am basically wanting to hide certain navigation links to logged in members. It doesn’t matter they’re tier paid or free I simply just want once someone is logged in certain navigation links to vanish how would I go about this?

I want the About link and maybe others to be hidden but if someone can tell me how to hide About Page Nav I can figure he rest out. www.JetsetterAlerts.com is my site, and my theme is the taste theme.

Thanks,
Clayton

6

In handlebars, you’d want {{#if @member}} to see if the user is logged in.
(Beyond that, you can likely adapt the example above.)

Code injection alone would be complicated, because handlebars doesn’t work in code injection - it’s server-side.

2 Likes
7

I use chat gpt to help me code because Know nothing. It says I can inject code to hide certain nav links when user is not logged in. Normally their codes always work, but this is the code they gave me and it doesn’t work.

Any advice for a novice

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var isMember = {{#if @member}}true{{else}}false{{/if}};

    if (!isMember) {
      var menuItems = document.querySelectorAll('.nav-personalize-alerts, .nav-referrals');

      for (var i = 0; i < menuItems.length; i++) {
        menuItems[i].style.display = 'none';
      }
    }
  });
</script>
8

This code can’t be injected. It would need to be included in your theme because the Handlebars block {{#if @member}} is evaluated on the server.

9

You might be able to write some javascript that figures out if the user is logged in or not, as long as you don’t care if the user can defeat whatever you’ve written. (Don’t put any important logic here.) Many themes change the text of the subscribe button - if you can use javascript to detect that (and you probably can, although the solution will be theme-specific), then you can change the behavior based on whether the user is logged in or not.

1 Like