How do I create a subscribe button inside a component
Hi,
I am trying to create a button in the sidebar of my forum-topic pages and grouphub pages. I have made a component, inside is a div with a button, and some javascript that gets the subscribe/unsubscribe link from the 'page dropdown menu settings thing'
So I get the link out of the list items from this menu
Then the link is transferred to this button in the sidebar
For topics, blog and ideas this works great on pages and boards! The subscribe button is not hidden anymore. And regular users can now easily manage their subscriptions by navigation through the site (they cannot make sense of the subscription thing in the profile settings. That feels way too beta).
However it does not work on GroupHub pages.The button has no life in it. The HTML of the link form the menu is copied perfectly and should work fine. I cannot find the issue. I do see differences in how the HTML of a GroubHub subscribe link and the link of a forum topic page for example. Maybe this has got something to do with it?
My question to you: Does someone know a proper way how to make a subscribe-to-this-grouphub-button from scratch? Maybe even in a nice way using the API instead of my Javascript hack?
Hi SuzieH thanks for at-mentioning others! I have checked that topic, allthough close our button is a bit different.
TLDR / for others on this Community: My question still stands: Does someone know a proper way how to make a subscribe-to-this-grouphub-button (in a component) from scratch?
I am trying to create a button in the sidebar of my forum-topic pages and grouphub pages. I have made a component, inside is a div with a button, and some javascript that gets the subscribe/unsubscribe link from the 'page dropdown menu settings thing'
So I get the link out of the list items from this menu
Then the link is transferred to this button in the sidebar
For topics, blog and ideas this works great on pages and boards! The subscribe button is not hidden anymore. And regular users can now easily manage their subscriptions by navigation through the site (they cannot make sense of the subscription thing in the profile settings. That feels way too beta).
However it does not work on GroupHub pages.The button has no life in it. The HTML of the link form the menu is copied perfectly and should work fine. I cannot find the issue. I do see differences in how the HTML of a GroubHub subscribe link and the link of a forum topic page for example. Maybe this has got something to do with it?
My question to you: Does someone know a proper way how to make a subscribe-to-this-grouphub-button from scratch? Maybe even in a nice way using the API instead of my Javascript hack?
Hello Hoekstra_VFZ, very helpful post! Thank you for this. By any chance, you could share the JavaScript with me?
steffiatebay sure! We made improvements in the mean time. We now use a toggle switch component in the sidebar like this:
Below is the code of the component with some stuff edited / translated for you. The JavaScript part is at the end of the code. This only works on forums, ideas and blogs and their overview pages. It does not work on category / node level.
<@liaMarkupCache ttl="30000" variation="node" anonymousOnly="false" />
<@compress single_line=true>
<#if (conditions to exclude certain type of nodes where the toggle is not active)>
<#assign defaultLink = "/t5/user/userloginpage?redirectreason=loginToSubscribe" />
<#assign buttonClassName ="lia-link-ticket-post-action" />
<#assign actionText = "E-mail notifications" />
<#assign ToggleTextSubscribed= "Off" />
<#assign ToggleTextUnsubscribed = "On" />
<#assign altText = "" />
<#assign subscribeTarget = "" />
<#assign unsubscribeTarget = "" />
<#if page.name == "ForumTopicPage">
<#assign altText = "Receive an update on new comments in this topic." />
<#assign subscribeTarget = "#addThreadUserEmailSubscription" />
<#assign unsubscribeTarget = "#removeThreadUserEmailSubscription" />
<#elseif page.name == "BlogArticlePage">
<#assign altText = "Receive an update on new comments in this article." />
<#assign subscribeTarget = "#addThreadUserEmailSubscription" />
<#assign unsubscribeTarget = "#removeThreadUserEmailSubscription" />
<#elseif page.name == "IdeaPage">
<#assign altText = "Receive an update on new comments on this idea." />
<#assign subscribeTarget = "#addThreadUserEmailSubscription" />
<#assign unsubscribeTarget = "#removeThreadUserEmailSubscription" />
<#elseif page.name == "ForumPage">
<#assign altText = "Receive an update on new topics in ${coreNode.shortTitle}." />
<#assign subscribeTarget = "#addBoardUserEmailSubscription" />
<#assign unsubscribeTarget = "#removeBoardUserEmailSubscription" />
<#elseif page.name == "BlogPage">
<#assign altText = "Receive an update on new articles in ${coreNode.shortTitle}." />
<#assign subscribeTarget = "#addBoardUserEmailSubscription" />
<#assign unsubscribeTarget = "#removeBoardUserEmailSubscription" />
<#elseif page.name == "IdeaExchangePage">
<#assign altText = "Receive an update on new ideas in ${coreNode.shortTitle}" />
<#assign subscribeTarget = "#addBoardUserEmailSubscription" />
<#assign unsubscribeTarget = "#removeBoardUserEmailSubscription" />
</#if>
<style>
/* This is where I styled the toggle switch */
</style>
<#-- Build HTML of the component -->
<div class = "subscribe-unit">
<div id="action">
<span id="actionText">${actionText}</span>
<a href="${defaultLink}" target="_blank" id="vfz-subscribe-button" class="${buttonClassName}" alt="${altText}" title="${altText}">
<div class="vfz-toggle-container">
<div class="vfz-toggle">
<div class="vfz-toggle__helper">
<span class="vfz-toggle__slider" id="toggleSlider"></span>
<span class="vfz-toggle__value" id="toggleOn">${ToggleTextUnsubscribed}</span>
<span class="vfz-toggle__value" id="toggleOff">${ToggleTextSubscribed}</span>
</div>
</div>
</div>
</a>
</div>
<p id="altText">${altText}</p>
</div>
<#-- JavaScript link retrieval for logged in users -->
<#if !user.anonymous>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
function duplicateSubscribeLinkToTopicStatus() {
let subscribeLink = document.querySelector('${subscribeTarget}');
let unsubscribeLink = document.querySelector('${unsubscribeTarget}');
var targetLink = document.getElementById('vfz-subscribe-button');
if (subscribeLink) {
var newLink = subscribeLink.cloneNode(true);
newLink.innerHTML = targetLink.innerHTML;
newLink.className = "${buttonClassName}";
}
if (unsubscribeLink) {
let a = document.querySelector('#toggleOn');
let b = document.querySelector('#toggleOff');
let c = document.querySelector('.vfz-toggle__slider');
a.style.opacity = '1';
b.style.opacity = '0';
c.style.backgroundColor = '#f48c00';
c.classList.add('vfz-toggle__slider--on');
var newLink = unsubscribeLink.cloneNode(true);
newLink.innerHTML = targetLink.innerHTML;
newLink.className = "${buttonClassName}";
}
if (targetLink) {
targetLink.parentNode.replaceChild(newLink, targetLink);
}
}
duplicateSubscribeLinkToTopicStatus();
});
</script>
</#if>
</#if>
</@compress>
Anyone who will use this code, please let us know 🙂 If you have improvements, please share.
