vendor/shopware/storefront/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. <div role="alert"
  78. class="alert {% if type %}alert-{{ type }}{% endif %}{% if dismissible %} alert-dismissible fade show{% endif %}{% if icon != "error" %} alert-has-icon{% endif %}">
  79. {% block utilities_alert_icon %}
  80. {% if icon != "false" %}
  81. {% if type == "danger" %}
  82. {% sw_icon 'blocked' %}
  83. {% elseif type == "warning" %}
  84. {% sw_icon 'warning' %}
  85. {% elseif type == "info" %}
  86. {% sw_icon 'info' %}
  87. {% elseif type == "success" %}
  88. {% sw_icon 'checkmark-circle' %}
  89. {% else %}
  90. {% sw_icon 'alert' %}
  91. {% endif %}
  92. {% endif %}
  93. {% endblock %}
  95. {% block utilities_alert_content_container %}
  96. <div class="alert-content-container">
  97. {% block utilities_alert_heading %}
  98. {% if heading %}
  99. <div class="alert-heading h5">
  100. {{ heading }}
  101. </div>
  102. {% endif %}
  103. {% endblock %}
  105. {% block utilities_alert_content %}
  106. <div class="alert-content">
  107. {% if list|length > 1 %}
  108. <ul class="alert-list">
  109. {% for entry in list %}
  110. <li>{{ entry|sw_sanitize }}</li>
  111. {% endfor %}
  112. </ul>
  113. {% elseif list|length == 1 %}
  114. {% for entry in list %}
  115. {{ entry|sw_sanitize }}
  116. {% endfor %}
  117. {% else %}
  118. {{ content|sw_sanitize }}
  119. {% endif %}
  120. </div>
  121. {% endblock %}
  123. {% block utilities_alert_dismissible %}
  124. {% if dismissible %}
  125. <button type="button"
  126. class="close"
  127. {{ dataBsDismissAttr }}="alert"
  128. aria-label="Close">
  129. <span aria-hidden="true">&times;</span>
  130. </button>
  131. {% endif %}
  132. {% endblock %}
  133. </div>
  134. {% endblock %}
  135. </div>
  136. {% endblock %}