custom/plugins/EmovaWbTheme/src/Resources/views/storefront/utilities/alert.html.twig line 1

Open in your IDE?
  1. {#
  2. Global messages template
  4. https://getbootstrap.com/docs/4.3/components/alerts/
  6. *Type:
  7. The template provides an easy way to display messages in the storefront. The following types are supported:
  9. * primary
  10. * secondary
  11. * danger (red)
  12. * success (green)
  13. * warning (yellow)
  14. * info (blue)
  15. * light (white)
  16. * dark (dark gray)
  18.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  19.         type:"primary",
  20.         content:"Primary Lorem ipsum dolor"
  21.     } %}
  23. *Icons:
  24. Icons are shown by default. To hide the icon within the alert, set the value of "icon" to false:
  26.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  27.         type:"primary",
  28.         content:"Primary Lorem ipsum dolor",
  29.         icon: false
  30.     } %}
  32. *Message Content:
  33. The component requires the parameters ```content``` or ```list``` to display a message. If no ```type``` is defined it
  34. will use the fallback option (success).
  36.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  37.         type:"primary",
  38.         content:"Primary Lorem ipsum dolor"
  39.     } %}
  41. *Message List:
  42. If you need to display a bunch of messages (for example error messages in the registration), you can pass an array
  43. of messages to the template using the parameter ```list```:
  45.      {% set list1 = [
  46.         'Error message 1',
  47.         'Error message 2',
  48.         'Error message 3'
  49.     ] %}
  51.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  52.         type:"secondary",
  53.         list: list1
  54.     } %}
  56. *Heading:
  57. To display a heading, use "heading".
  59.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  60.         type:"primary",
  61.         content:"Primary Lorem ipsum dolor",
  62.         heading: "Test Heading"
  63.     } %}
  65. *Dismissible Button:
  66. To display a dismissible button set the value of "dismissible" to true.
  68.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  69.         type:"primary",
  70.         content:"Primary Lorem ipsum dolor",
  71.         dismissible: true
  72.     } %}
  74. #}
  76. {% block utilities_alert %}
  77.   {% if type != "success" %}
  78.     <div role="alert"
  79.          class="alert {% if type %}alert-{{ type }}{% endif %}{% if dismissible %} alert-dismissible fade show{% endif %}{% if icon != "error" %} alert-has-icon{% endif %}">
  80.         {% block utilities_alert_icon %}
  81.             {% if icon != "false" %}
  82.                 <span class="icon-color icon icon-info">
  83.                     <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>
  84.                 </span>
  85. {#
  86.                 {% if type == "danger" %}
  87.                     {% sw_icon 'blocked' %}
  88.                 {% elseif type == "warning" %}
  89.                     {% sw_icon 'warning' %}
  90.                 {% elseif type == "info" %}
  91.                     {% sw_icon 'info' %}
  92.                 {% elseif type == "success" %}
  93.                     {% sw_icon 'checkmark-circle' %}
  94.                 {% else %}
  95.                     {% sw_icon 'alert' %}
  96.                 {% endif %}
  97. #}
  98.             {% endif %}
  99.         {% endblock %}
  101.         {% block utilities_alert_content_container %}
  102.             <div class="alert-content-container">
  103.                 {% block utilities_alert_heading %}
  104.                     {% if heading %}
  105.                         <div class="alert-heading h5">
  106.                             {{ heading }}
  107.                         </div>
  108.                     {% endif %}
  109.                 {% endblock %}
  111.                 {% block utilities_alert_content %}
  112.                     <div class="alert-content">
  113.                         {% if list|length > 1 %}
  114.                             <ul class="alert-list">
  115.                                 {% for entry in list %}
  116.                                     <li>{{ entry|sw_sanitize }}</li>
  117.                                 {% endfor %}
  118.                             </ul>
  119.                         {% elseif list|length == 1 %}
  120.                             {% for entry in list %}
  121.                                 {{ entry|sw_sanitize }}
  122.                             {% endfor %}
  123.                         {% else %}
  124.                             {{ content|sw_sanitize }}
  125.                         {% endif %}
  126.                     </div>
  127.                 {% endblock %}
  129.                 {% block utilities_alert_dismissible %}
  130.                     {% if dismissible %}
  131.                         <button type="button"
  132.                                 class="close"
  133.                                 {{ dataBsDismissAttr }}="alert"
  134.                                 aria-label="Close">
  135.                             <span aria-hidden="true">&times;</span>
  136.                         </button>
  137.                     {% endif %}
  138.                 {% endblock %}
  139.             </div>
  140.         {% endblock %}
  141.     </div>
  142.   {% endif %} 
  143. {% endblock %}