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

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