stack/src/components/items/category-item/category-item.twig line 1

Open in your IDE?
  1. {% set input_types = ["radio"] %}
  3. {%- set class_name = [
  4.   "i-category",
  5.   "d-flex align-items-center",
  6.   "u-cursor-pointer u-posr h-100",
  7.   props.active ? "--active" : null,
  8.   props.disabled ? "--disabled" : null,
  9.   props.as in input_types ? "--input --" ~ props.as ~ " u-posr" : null,
  10. ]|join(' ')|trim -%}
  12. {%- set attrs = [
  13.   'class="' ~ class_name ~ '"',
  14. ] -%}
  16. {%- if props.url is defined %}
  17.   {%- set attrs = attrs|merge(['href="' ~ props.url ~ '"']) -%}
  18.   {%- set attrs = attrs|merge(['title="' ~ props.title ~ '"']) -%}
  19. {%- endif -%}
  21. {%- if props.onclick is defined %}
  22.   {%- set attrs = attrs|merge(['onclick="' ~ props.onclick ~ '"']) -%}
  23. {%- endif -%}
  25. {% set tag = props.url ? "a" : "label" %}
  27. {% if props.as in input_types %}
  28.   {% if props.id %}
  29.     {%- set attrs = attrs|merge(['for="' ~ props.id ~ '"']) -%}
  30.   {% endif %}
  31. {% endif %}
  33. {%- set attrs = attrs|join(' ')|trim -%}
  35. {% set img_props = {
  36.   is_placeholder: true,
  37.   width: 56,
  38.   height: 56,
  39.   ratio: "1-1",
  40. } %}
  42. <{{tag}} {{ attrs|raw }}>
  44.   {% if props.is_family %}
  45.     <div class="i-category__image flex-shrink-0">
  46.       {% if props.img %}
  47.         {% include "@Components/img/img.twig" with {props: props.img|merge(img_props)} %}
  48.       {% else %}
  49.         {% include "@Components/img/img.twig" with {props: {
  50.           src: base_path ~ "images/content/placeholder.png",
  51.         }|merge(img_props)} %}
  52.       {% endif %}
  53.     </div>
  54.   {% endif %}
  56.   {% if props.title %}
  57.     <div class="i-category__title u-fw-600 u-fz-sm py-1 px-2">{{ props.title }}</div>
  58.   {% endif %}
  60.   {% if props.as in input_types %}
  61.     <input type="{{ props.as }}" name="{{ props.name }}" id="{{ props.id }}" value="{{ props.value }}" data-filter-title="{{ props.title }}" {{ props.checked ? "checked" : null }} {{ props.disabled ? "disabled" : null }} class="i-category__input u-posa u-left-0 u-bottom-0">
  62.   {% endif %}
  63. </{{tag}}>