How to edit the message "This post is for paying subscribers only"

Can’t you just change the post access in the post settings from paid-members only to members only? Unless I haven’t understood your problem :thinking:

I explain the problem in more detail :blush:

I recently changed the translation of the “paid members-only” frame with the valuable help of @jannis.

But since these changes, I only have one unique frame, which is exactly the same for paid-members and registered-members.

This article for example is for registered-members but the framework states that it is only for paying-members.

And the post access in the post settings is activated on “members-only” :thinking:

It is due to this. In all these code injections you are just changing the text inside specific CSS classes. Since there is no differentiation of CSS classes based on whether a post is for paid or registered members, you cannot differentiate between them based on these code injections.

I don’t know what code injections you have in there now, but the solution is in there. I’d also encourage you to have a look at how they work - because they are always the same structure. Then you’ll be able to hack together what you want :slight_smile:

1 Like

In fact, I have this in the footer ;

<script>
    document.querySelector('[data-portal="signup"]').innerText = "Inscription"
    document.querySelector('[data-portal="signin"]').innerText = "Connexion"
    document.querySelectorAll('.gh-button').forEach(item => item.textContent = 'Abonnez-vous')
</script>

And this in the header ;

<script>
document.addEventListener('DOMContentLoaded', function() {
    const h2Element = document.querySelector('.gh-post-upgrade-cta-content h2');
    const buttonElement = document.querySelector('.gh-post-upgrade-cta-content .gh-btn');
    const smallTextElement = document.querySelector('.gh-post-upgrade-cta-content small');
  document.querySelectorAll('.gh-button').forEach(item => item.textContent = 'Abonnez-vous')

    if (h2Element) {
        h2Element.textContent = 'Article réservé aux membres premium';
    }

    if (buttonElement) {
        buttonElement.textContent = 'Je deviens premium pour 5€';
    }
  
    if (smallTextElement) {
        // Construct the relative URL dynamically
        const signInUrl = window.location.href + '#/portal/signin';
        smallTextElement.innerHTML = 'Vous avez déjà un compte? <a href="' + signInUrl + '" class="gh-portal-close">Connectez-vous</a>';
    }
});
</script>

Without speaking French very well, I would bet that these are the text strings that are creating these problems for you.

Yes, I think so :slightly_smiling_face:

Have I to simply delete this line of code, or add something else?

As @jannis said, “there is no differentiation of CSS classes based on whether a post is for paid or registered members”, so if you change the content of all .gh-post-upgrade-cta-content cards, you need to choose your words carefully to suit both contexts (members only and paid-members only). As I’m French, I can help you on that. Maybe “Article réservé aux membres” (implied for members and paid members) could work. As for the button, “Je deviens membre” ?

I might have a better idea. I just saw that you add a “premium” tag to your premium articles. You could use that to target only the premium articles and change the .gh-post-upgrade-cta-content card accordingly.

So your script could look like that:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const h2Element = document.querySelector('.gh-post-upgrade-cta-content h2');
    const buttonElement = document.querySelector('.gh-post-upgrade-cta-content .gh-btn');
    const smallTextElement = document.querySelector('.gh-post-upgrade-cta-content small');

	if (document.querySelector('.tag-premium')) {
		// For paid members
		if (h2Element) {
			h2Element.textContent = 'Article réservé aux membres premium';
		}
		if (buttonElement) {
			buttonElement.textContent = 'Je deviens premium pour 5€';
		}
	} else {
		// For registered members
		if (h2Element) {
			h2Element.textContent = 'Article réservé aux membres';
		}
		if (buttonElement) {
			buttonElement.textContent = 'Je deviens membre gratuitement';
		}
	}
	if (smallTextElement) {
		// Construct the relative URL dynamically
		const signInUrl = window.location.href + '#/portal/signin';
		smallTextElement.innerHTML = 'Vous avez déjà un compte? <a href="' + signInUrl + '" class="gh-portal-close">Connectez-vous</a>';
	}
});
</script>

Oh wonderful!

Thank you so much :laughing:

Just another quick question : do these different header and footer codes not risk slowing down the loading of blog pages?

In my experience, not really. It’s a very simple script. But why do you put a script in the header? I put all mine in the footer and reserve the header for style changes. I don’t know if there is a best practice…

1 Like

From this page of Ghost library of tutorials, I found this:

When adding JS, add it to the Site Footer so that it loads properly.

1 Like

The reason for this is because you need the page elements to already exist before the javascript can modify them. So most javascript goes in the footer code injection, unless you’re setting it up to wait until the page is loaded. (Which is a thing you can do, but just using the footer is easier.)

We typically put styles in the header (although the footer works) because we don’t want the page to load and then get restyled - that causes elements to jump around, and can look weird.

2 Likes

Thank you, it’s very clear.

1 Like

Ok I put them in the footer :slightly_smiling_face:

What about adsense and analytics codes?

I still have them in the header for the moment.

Hello @Cathy_Sarisky,

My scripts (now in the footer) basically translate links, forms and buttons.

Don’t you think it can cause elements to jump around and lower my CLS?

I’d try running pagespeed on them with and without the code injection and see if there’s any meaningful difference.

1 Like

Hey jannis! Trying to get this working in the Edition theme as well… the same code injection doesn’t seem to work. Any chance you could help me figure it out?

You will need to adjust the CSS classes in the individual querySelector to the classes used in the theme you’re editing.

I am travelling at the moment, so I don’t have time to give this a go myself, but using your browser’s developer tools (usually right click → inspect) you should be able to find these. ChatGPT is also good at helping solve these things.

Thanks jannis, really appreciate the response while traveling! And great tip, ChatGPT and I got it done :)

For anyone who might find themselves here in the future… here is the code I used for the Edition theme:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const h2Element = document.querySelector('.single-cta-title');
    const subscribeButton = document.querySelector('.single-cta-button');
    const signInButton = document.querySelector('.single-cta-footer');

    if (h2Element) {
        h2Element.textContent = 'Your New H2 Message Here';
    }

    if (subscribeButton) {
        subscribeButton.textContent = 'Your New Button Text Here';
    }
  
    if (signInButton) {
        signInButton.textContent = 'Your New Sign-in Button Text Here';
    }
});
</script>
1 Like