{#
Global messages template
https://getbootstrap.com/docs/4.3/components/alerts/
*Type:
The template provides an easy way to display messages in the storefront. The following types are supported:
* primary
* secondary
* danger (red)
* success (green)
* warning (yellow)
* info (blue)
* light (white)
* dark (dark gray)
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type:"primary",
content:"Primary Lorem ipsum dolor"
} %}
*Icons:
Icons are shown by default. To hide the icon within the alert, set the value of "icon" to false:
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type:"primary",
content:"Primary Lorem ipsum dolor",
icon: false
} %}
*Message Content:
The component requires the parameters ```content``` or ```list``` to display a message. If no ```type``` is defined it
will use the fallback option (success).
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type:"primary",
content:"Primary Lorem ipsum dolor"
} %}
*Message List:
If you need to display a bunch of messages (for example error messages in the registration), you can pass an array
of messages to the template using the parameter ```list```:
{% set list1 = [
'Error message 1',
'Error message 2',
'Error message 3'
] %}
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type:"secondary",
list: list1
} %}
*Heading:
To display a heading, use "heading".
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type:"primary",
content:"Primary Lorem ipsum dolor",
heading: "Test Heading"
} %}
*Dismissible Button:
To display a dismissible button set the value of "dismissible" to true.
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type:"primary",
content:"Primary Lorem ipsum dolor",
dismissible: true
} %}
#}
{% block utilities_alert %}
{% if type != "success" %}
<div role="alert"
class="alert {% if type %}alert-{{ type }}{% endif %}{% if dismissible %} alert-dismissible fade show{% endif %}{% if icon != "error" %} alert-has-icon{% endif %}">
{% block utilities_alert_icon %}
{% if icon != "false" %}
<span class="icon-color icon icon-info">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 48 48"><style>.st2{fill:#141412}</style><path d="M23.4 18.9h1.3v17.2h-1.3zM23.4 12h1.3v3.7h-1.3z" class="st2"></path><path d="M4.2 35.2C2.3 31.8 1.3 27.9 1.3 24 1.3 11.5 11.5 1.3 24 1.3S46.7 11.5 46.7 24 36.5 46.7 24 46.7c-5.7 0-11.2-2.1-15.4-6l-.9.9C12.2 45.7 17.9 48 24 48c13.2 0 24-10.8 24-24S37.2 0 24 0 0 10.8 0 24c0 4.2 1.1 8.2 3.1 11.8l1.1-.6z" class="st2"></path></svg>
</span>
{#
{% if type == "danger" %}
{% sw_icon 'blocked' %}
{% elseif type == "warning" %}
{% sw_icon 'warning' %}
{% elseif type == "info" %}
{% sw_icon 'info' %}
{% elseif type == "success" %}
{% sw_icon 'checkmark-circle' %}
{% else %}
{% sw_icon 'alert' %}
{% endif %}
#}
{% endif %}
{% endblock %}
{% block utilities_alert_content_container %}
<div class="alert-content-container">
{% block utilities_alert_heading %}
{% if heading %}
<div class="alert-heading h5">
{{ heading }}
</div>
{% endif %}
{% endblock %}
{% block utilities_alert_content %}
<div class="alert-content">
{% if list|length > 1 %}
<ul class="alert-list">
{% for entry in list %}
<li>{{ entry|sw_sanitize }}</li>
{% endfor %}
</ul>
{% elseif list|length == 1 %}
{% for entry in list %}
{{ entry|sw_sanitize }}
{% endfor %}
{% else %}
{{ content|sw_sanitize }}
{% endif %}
</div>
{% endblock %}
{% block utilities_alert_dismissible %}
{% if dismissible %}
<button type="button"
class="close"
{{ dataBsDismissAttr }}="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
{% endif %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endif %}
{% endblock %}