I published a guide recently, about member labels, and how to apply them with multiple checkboxes as labels. The idea is to toggle the data-members-label attribute when the checkbox is clicked.
Here is the post:
1 Like
Thanks for this.
It works but in reverse. When you remove the checked attribute and then check an empty label that label is left out and all labels that are not checked are assigned to the user.
That depends on your setup, if you remove the checked attribute you should also remove the data-members-label, because the click will toggle it. But it’s a good point, I will mention it in the post.
@brightthemes Thank you, this is exactly what I was looking for and I will try to implement it at www.borderlinepod.com. Would this allow members to change their labels after they have signed up in their account? I have 1000+ existing subscribers to whom I’d like to give the option, as I launch new newsletter products and want to better segment my audience.
Unfortunately not, it’s not possible right now.
But I just saw the announcement about the new filtering options in Admin, which might be helpful for you to manage labels faster.
Hi @brightthemes,
Is this guide still relevant? I am trying to add checkboxes on my subscription form as per different tags, so users can opt in to receive either one of 2 collections of content. In fewer words, I want to give users the option to subscribe for English or for Chinese version of the content. My website is: https://web3plusai.xyz/.
However, I am not sure how to do it exactly? If anyone can help, I would greatly appreciate it. Here is my default.hbs file below:
<!DOCTYPE html>
<html lang="{{@site.locale}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
{{ghost_head}}
</head>
<body class="{{body_class}}{{{block "body_class"}}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Elegant serif"}} has-serif-body{{/match}}{{^is "home"}}{{#if @site.cover_image}} is-head-brand{{/if}}{{/is}}">
<div class="site">
<header id="gh-head" class="gh-head gh-outer">
<div class="gh-head-inner">
<div class="gh-head-brand">
<div class="gh-head-brand-wrapper">
<a class="gh-head-logo" href="{{@site.url}}">
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}">
{{else}}
{{@site.title}}
{{/if}}
</a>
</div>
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
<button class="gh-burger"></button>
</div>
<nav class="gh-head-menu">
{{navigation}}
{{#unless @site.members_enabled}}
{{#match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{/unless}}
</nav>
<div class="gh-head-actions">
{{#unless @site.members_enabled}}
{{^match @custom.navigation_layout "Stacked"}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
{{/match}}
{{else}}
<button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
<div class="gh-head-members">
{{#unless @member}}
{{#unless @site.members_invite_only}}
<a class="gh-head-link" href="#/portal/signin" data-portal="signin">Sign in</a>
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">Sign in</a>
{{/unless}}
{{else}}
<a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
{{/unless}}
</div>
{{/unless}}
</div>
</div>
</header>
{{#is "home"}}
{{> "cover"}}
{{#if @custom.show_featured_posts}}
{{> "featured-posts"}}
{{/if}}
{{/is}}
<div class="site-content">
{{{body}}}
</div>
<footer class="gh-foot{{#unless @site.secondary_navigation}} no-menu{{/unless}} gh-outer">
<div class="gh-foot-inner gh-inner">
<div class="gh-copyright">
{{@site.title}} © {{date format="YYYY"}}
</div>
{{#if @site.secondary_navigation}}
<nav class="gh-foot-menu">
{{navigation type="secondary"}}
</nav>
{{/if}}
<div class="gh-powered-by">
<a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
</div>
</div>
</footer>
</div>
{{#is "post, page"}}
{{> "pswp"}}
{{/is}}
{{!-- Fixes 100vh issue on mobile browsers with toolbar on the bottom --}}
<script>
if (document.body.classList.contains('with-full-cover') && (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
document.getElementsByClassName('cover')[0].style.height = window.innerHeight + 'px';
}
</script>
<script src="{{asset "built/main.min.js"}}"></script>
{{ghost_foot}}
</body>
</html>