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() %}
    {% set socialLoginProvidersSettings = ObjectApi.getSocialLoginProvidersSettings() %}

    {% if socialLoginProviders|length > 0 %}
        <div hidden class="social-login-providers" slot="additional-login-providers">
            <div class="text-separator pb-xs-1">
                <div class="separator" aria-hidden="true"></div>
                <span class="text-separator__content">{{ translate('or')  }}</span>
                <div class="separator" aria-hidden="true"></div>
            </div>

            {% for provider in socialLoginProviders %}
                <a data-turbo="false" class="{{ html_classes("btn", "btn_full-width", "mb-xs-2", provider.name, 'btn_outline') }}" href="{{ provider.url }}">
                    {% if provider.name == 'shoper_sso' %}
                        {{ translate('Login with') }}
                        <img width="85" height="19" class="shoper_sso__logo shoper_sso__logo_dark" src="https://dcsaascdn.net/img/logo-shoper-one-white.svg" alt="{{ provider.label }} logo">
                        <img width="85" height="19" class="shoper_sso__logo shoper_sso__logo_light" src="https://dcsaascdn.net/img/logo-shoper-one-dark.svg" alt="{{ provider.label }} logo">
                    {% else %}
                        <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 }}
                    {% endif %}
                </a>
            {% endfor %}

            {% if socialLoginProvidersSettings.canShowSsoLegalNotes %}
                {% set shopInfo = ObjectApi.getShopInfo() %}
                <small class="d-block color_secondary mb-xs-2">
                    {{ translate('Login via Facebook and Google to %s is provided as part of the Shoper ONE service.', [shopInfo.name]) }}
                </small>
            {% endif %}
        </div>
    {% endif %}
{% endmacro %}

Webcomponents reference