src/Storefront/Resources/views/storefront/utilities/alert.html.twig line 1

  1. {#
  2. Global messages template
  4. https://getbootstrap.com/docs/5.2/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. *IconCache:
  33. IconCache is used by system settings. To avoid using the icon cache regardless of the system settings (e.g. for an icon rendered in an invisible area like <noscript>), set "iconCache" to false:
  35.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  36.         type:"primary",
  37.         content:"Primary Lorem ipsum dolor",
  38.         iconCache: false
  39.     } %}
  42. *Message Content:
  43. The component requires the parameters ```content``` or ```list``` to display a message. If no ```type``` is defined it
  44. will use the fallback option (success).
  46.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  47.         type:"primary",
  48.         content:"Primary Lorem ipsum dolor"
  49.     } %}
  51. *Message List:
  52. If you need to display a bunch of messages (for example error messages in the registration), you can pass an array
  53. of messages to the template using the parameter ```list```:
  55.      {% set list1 = [
  56.         'Error message 1',
  57.         'Error message 2',
  58.         'Error message 3'
  59.     ] %}
  61.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  62.         type:"secondary",
  63.         list: list1
  64.     } %}
  66. *Heading:
  67. To display a heading, use "heading".
  69.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  70.         type:"primary",
  71.         content:"Primary Lorem ipsum dolor",
  72.         heading: "Test Heading"
  73.     } %}
  75. *Dismissible Button:
  76. To display a dismissible button set the value of "dismissible" to true.
  78.     {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  79.         type:"primary",
  80.         content:"Primary Lorem ipsum dolor",
  81.         dismissible: true
  82.     } %}
  84. #}
  86. {% block utilities_alert %}
  87.     <div role="alert"
  88.          class="alert {% if type %}alert-{{ type }}{% endif %}{% if dismissible %} alert-dismissible fade show{% endif %}{% if icon != "error" %} alert-has-icon{% endif %}">
  89.         {% block utilities_alert_icon %}
  90.             {% if icon != "false" %}
  91.                 {% set iconCacheSystem = config('core.storefrontSettings.iconCache') %}
  92.                 {% if iconCache === false and iconCacheSystem === true %}
  93.                     {{ sw_icon_cache_disable() }}
  94.                 {% endif %}
  95.                 {% if type == "danger" %}
  96.                     {% sw_icon 'blocked' %}
  97.                 {% elseif type == "warning" %}
  98.                     {% sw_icon 'warning' %}
  99.                 {% elseif type == "info" %}
  100.                     {% sw_icon 'info' %}
  101.                 {% elseif type == "success" %}
  102.                     {% sw_icon 'checkmark-circle' %}
  103.                 {% else %}
  104.                     {% sw_icon 'alert' %}
  105.                 {% endif %}
  106.                 {% if iconCache == false and iconCacheSystem === true %}
  107.                     {{ sw_icon_cache_enable() }}
  108.                 {% endif %}
  109.             {% endif %}
  110.         {% endblock %}
  112.         {% block utilities_alert_content_container %}
  113.             <div class="alert-content-container">
  114.                 {% block utilities_alert_heading %}
  115.                     {% if heading %}
  116.                         <div class="alert-heading h5">
  117.                             {{ heading }}
  118.                         </div>
  119.                     {% endif %}
  120.                 {% endblock %}
  122.                 {% block utilities_alert_content %}
  123.                     <div class="alert-content">
  124.                         {% if list|length > 1 %}
  125.                             <ul class="alert-list">
  126.                                 {% for entry in list %}
  127.                                     <li>{{ entry|sw_sanitize }}</li>
  128.                                 {% endfor %}
  129.                             </ul>
  130.                         {% elseif list|length == 1 %}
  131.                             {% for entry in list %}
  132.                                 {{ entry|sw_sanitize }}
  133.                             {% endfor %}
  134.                         {% else %}
  135.                             {{ content|sw_sanitize }}
  136.                         {% endif %}
  137.                     </div>
  138.                 {% endblock %}
  140.                 {% block utilities_alert_dismissible %}
  141.                     {% if dismissible %}
  142.                         <button type="button"
  143.                                 class="close"
  144.                                 data-bs-dismiss="alert"
  145.                                 aria-label="Close">
  146.                             <span aria-hidden="true">&times;</span>
  147.                         </button>
  148.                     {% endif %}
  149.                 {% endblock %}
  150.             </div>
  151.         {% endblock %}
  152.     </div>
  153. {% endblock %}