Twig hands-on snippets (Reactions Work)

More Craft plugins

Views Work
Track pageviews and content popularity in Craft CMS
Comments Work
Easy to use commenting for Craft CMS
Craft CMS Poll plugin
This plugin has been abandoned and no upgrade for Craft 5.x is planned!
Yard Reports for Craft CMS
Export Sprout Forms as Excel CSV reports

Here you will find some hands on snippets for reactions in Twig.

Show 'Lilly Morissette, Ayla Gutkowski and 1 other user.'

		{% set reactions_work = craft.reactions_work %}
    	{# reactions_work \twentyfourhoursmedia\reactionswork\services\ReactionsWorkFacade #}
    	{% set reactions = reactions_work.reactions(entry) %}
        
		{# show 'Lilly Morissette, Ayla Gutkowski and 1 other user.' #}
        {% with %}
            {% set userIds = reactions.allUserIds %}
            {% set numUsers = userIds | length %}
            {% set usersToShow = 2 %}
            {% set users = reactions_work.usersFromIds(reactions.allUserIds | slice(0,usersToShow)) %}
            {% set remaining = max(0, numUsers - (users | length)) %}
            {% for user in users %}
                {{ user.name }}{% if not loop.last %}, {% endif %}
            {% endfor %}
            {% if remaining > 0 %}
                and {{ remaining }} other {{ remaining == 1 ? 'user' : 'users' }}.
            {% endif %}
        {% endwith %}

Show all reactions and counts for an entry

TIP: use a macro to show reaction icons

	{% import '_macros/reactions-macros.twig' as macros %}
	{% set reactions_work = craft.reactions_work %}
    {# reactions_work \twentyfourhoursmedia\reactionswork\services\ReactionsWorkFacade #}
    {% set reactions = reactions_work.reactions(entry) %}
        
	{% for handle in reactions_work.reactionHandles %}
        <span title="{{ reactions.countReactions(handle) }} reactions">
    	{{ macros.reactionIcon(handle) }}
        </span>        
    {% endfor %}

_macros/reactions-macros.twig

{%- macro reactionIcon(handle, opts = {} ) %}
    {# link https://emojipedia.org/ #}
    {% set dimmed = opts.dimmed ?? false %}
    {% set class = "emoji" %}

    {% if dimmed %}
        {% set class = class ~ " emoji-dimmed" %}
    {% endif %}

    {% switch handle %}
    {% case 'like' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'love' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'haha' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'wow' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'sad' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'angry' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'dollar' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'cash' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'bull' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'bear' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>

        {# add your icons for custom handles here.. #}
        {# .. #}
        {# fallback #}
    {% default %}
        <i class="{{ class }}"></i>

    {% endswitch %}

{% endmacro -%}

Show a react form with redirect

		{% set reactions_work = craft.reactions_work %}
    	{# reactions_work \twentyfourhoursmedia\reactionswork\services\ReactionsWorkFacade #}
    	{% set reactions = reactions_work.reactions(entry) %}
    
    	{% set canReact = reactions_work.reactable(currentUser, element) %}
        {% set disabledAttr = canReact ? '' : 'disabled="disabled"' %}
        
 		<form method="post" action="{{ reactions_work.formUrl(element, currentUser) }}">
            {{ csrfInput() }}
            {{ redirectInput(craft.app.request.url) }}
            <input type="hidden" name="react" value="set"/>
            {% for handle in reactions_work.reactionHandles %}
                {% if not canReact or reactions.canRegister(handle, currentUser) %}
                    <button name="reaction" {{ disabledAttr }} type="submit" class="btn btn-info" value="{{ handle }}">{{ handle }}</button>
                {% endif %}

                {% if reactions.canDeregister(handle, currentUser) %}
                    <button name="reaction" {{ disabledAttr }} type="submit" class="btn btn-danger" value="{{ handle }}">{{ handle }}</button>
                {% endif %}
            {% endfor %}
        </form>