How do I create a subscribe button inside a component

Hi Hoekstra_VFZ. I noticed that this post (Subscribe to labels link on custom page) is trying to accomplish something similar. I'm wondering if Parshant has any insight as he did for the solution he posted there.

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?

---

Hoekstra_VFZ wrote:

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?

---

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.

Thank you very much Hoekstra_VFZ - we will let you know how it went.

Look katieoreilly 😍

Hi steffiatebay and katieoreilly - how are things going with this feature on your side?

I heard from my PO you guys asked Khoros to build it using the API instead of this JS hack I have shared.

We are also interested in a more robust - and slightly faster - solution as well.

Hi Hoekstra_VFZ,

We're exploring options with professional services to get a subscribe button built as a custom component that can be used throughout the community.

Still in the early stages of planning but we think this PS project is worth the investment 😊

Thanks,

Katie 

Hey,

we've done something like this for a standing alone subscribe and unsubscribe btns

custom subscribe button component for articles and blogs

<#import "theme-lib.common-functions.ftl" as common />

<#if !user.anonymous>
	<#import "common-functions" as utility />
	<#attempt>
	  <#if page.name == 'BlogArticlePage' || page.name == 'TkbArticlePage'>
		  <#assign id  = page.context.thread.topicMessage.uniqueId!'' />
		  <#assign substype = "threads">
	  <#else>
      <#assign id  = coreNode.id!'' />
  		<#if page.name == "BlogPage">
	  		<#assign substype = "blogs">
	  	<#elseif page.name == "TkbPage">
		  	<#assign substype = "boards">
		  </#if>
	  </#if>
	  <#assign checkSubscription = rest("/${substype}/id/${id}/subscriptions/users/self/type/email").subscription />
	  <#if checkSubscription.id?has_content>
<a class="lia-link-navigation unsubscribe-btn" <#if user.anonymous>disabled="disabled"</#if> id="unsubscribe-btn" href="javascript&colon;void(0);">
  <span class="lia-button lia-button-primary">Unsubscribe</span>
</a>
	  <#else>
<a class="lia-link-navigation subscribe-btn" <#if user.anonymous>disabled="disabled"</#if> id="subscribe-btn" href="javascript&colon;void(0);">
  <span class="lia-button lia-button-primary">${text.format("custom.subscribe-text")}</span>
</a>
  	</#if>
  	<#assign endpointUrl = common.getEndpointUrl("custom-subscribe-blogs") />
  	<@liaAddScript>
(function($) {
$(document).ready(function() {
  $('.subscribe-btn, .unsubscribe-btn').click(function() {
    var bId = '${id?js_string}';
    var substype = '${substype?js_string}';
    var classbtn = $(this).attr('id') || '';
    $(this).attr('disabled', 'true');
    $.ajax({
      url: '${endpointUrl}',
      data: {'Id': bId, 'ClassBtn': classbtn, 'substype': substype},
      type: 'post',
      success: function(data) {
        location.reload();
      }
    });
  });
});
})(LITHIUM.jQuery);
		</@liaAddScript>
	<#recover>
<!-- error in custom-subscribe-blog -->
	</#attempt>
</#if>

calling endpoint component in the code above

<#compress>
<#import "theme-lib.common-functions.ftl" as common />

<#if user.registered && common.validEndpointRequest(false, true,false)>
	<#setting url_escaping_charset="UTF-8" />
	<#setting number_format="0.######" />
	<#assign ID = http.request.parameters.name.get("Id", "") />
	<#assign Class = http.request.parameters.name.get("ClassBtn", "") />
	<#assign substype = http.request.parameters.name.get("substype", "") />
	<#if user.anonymous || (ID?length lt 1) || (Class?length lt 1) || (substype?length lt 1)>
	<p>Not permitted</p>
	<#else>
		<#if Class == "subscribe-btn">
			<#assign subscribed = restadmin("/${substype}/id/${ID}/subscriptions/users/self/add?subscription.type=email") />
	${subscribed.@status}
	<p>Subscribed successfully</p>
		<#elseif Class == "unsubscribe-btn">
			<#assign subscribed = restadmin("/${substype}/id/${ID}/subscriptions/users/self/type/email/remove") />
	${subscribed.@status}
	<p>UnSubscribed successfully</p>
		</#if>
	</#if>
</#if>
</#compress>

definitely needs some css, we have our css and scheme , you should code yours