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¶
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" 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 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 %}
{{ provider.label }}
<img width="16" height="16" class="btn__icon btn__icon_left" src="/assets/img/icons/{{ provider.name }}_logo.svg" alt="{{ provider.label }} logo">
{% endif %}
</a>
{% endfor %}
</div>
{% endif %}
{% endmacro %}