Skip to content

social_login

The social_login macro is used to render a list of buttons that allow to log into the store with various social media accounts.

Definition

{% social_login() %}

Input parameters

none

Example

In this example we render a list of social logins inside a login form.

{% from "@macros/social_login.twig" import social_login %}

<login-form>
    {{ social_login() }}
</login-form>

Macro source code

{% macro social_login() %}
    {% from "@macros/icon.twig" import icon %}
    {% set socialLoginProviders = ObjectApi.getSocialLoginProviders() %}

    {% if socialLoginProviders|length > 0 %}
        <div hidden class="social-login-providers mb-xs-2" slot="additional-login-providers">
            {% for provider in socialLoginProviders %}
                <a class="btn btn_outline btn_full-width mb-xs-2 {{ provider.name }}" href="{{ provider.url }}">
                    <img width="16" height="16" class="btn__icon btn__icon_left" src="/assets/img/icons/{{ provider.name }}_logo.svg" alt="{{ provider.label }} logo">

                    {{ provider.label }}
                </a>
            {% endfor %}

            <div class="text-separator">
                <div class="separator"></div>
                <span class="text-separator__content">{{ translate('or')  }}</span>
                <div class="separator"></div>
            </div>
        </div>
    {% endif %}
{% endmacro %}

Webcomponents reference