stack/src/components/forms/filtration-form/filtration-form--raw.twig line 1

Open in your IDE?
  1. {% set com_props = props %}
  3. {% set form_props = {
  4.   validate: true,
  5.   id: props.id,
  6.   data: {
  7.     "product-id": props.product_id,
  8.     "category-id": props.category_id,
  9.     "family-id": props.family_id,
  10.   },
  11.   extra_class: "f-filtration__form w-100"
  12. } %}
  14. {% if com_props.vars %}
  15.   {% set form_props = props.vars|default({})|merge(form_props) %}
  16. {% endif %}
  18. {% set is_inline = props.variant == "inline" ?? false %}
  20. {% embed "@Components/base-form/base-form.twig" with {props: form_props} %}
  21.   {% block content %}
  22.     <div class="f-filtration__body-inner {{ not is_inline ? " d-flex flex-column gap-5 p-3 p-xxl-5" : " p-2" }}">
  23.       <div class="f-filtration__form-list {{ not is_inline ? " row gy-3 gx-6" : " d-flex flex-column gap-3" }}">
  24.         {% for item in com_props.form_list %}
  25.           <div class="{{ not is_inline ? "col-md-6 col-lg-4 col-xl-3" : "f-filtration__item" }}">
  26.             {% if item.checkbox_select %}
  27.               {% include "@Components/fields/checkbox-select-field/checkbox-select-field.twig" with {props: item.checkbox_select|merge({
  28.                 variant: com_props.variant
  29.               })} %}
  30.             {% endif %}
  32.             {% if item.range %}
  33.               {% include "@Components/fields/range-slider-field/range-slider-field.twig" with {props: item.range|merge({
  34.                 data: {
  35.                   "filter-prefix": item.range.label ~ ":"
  36.                 }
  37.               })} %}
  38.             {% endif %}
  39.           </div>
  40.         {% endfor %}
  41.       </div>
  43.       {% if not is_inline %}
  44.         <div class="f-filtration__filtration-list d-flex flex-wrap align-items-center gap-2 js-filter-list" data-filter-target="{{ com_props.id }}">
  45.           <template>
  46.             {% include "@Components/items/selected-tag-item/selected-tag-item.twig" %}
  47.           </template>
  49.           {% if com_props.selected %}
  50.             {% for item in com_props.selected %}
  51.               {% include "@Components/items/selected-tag-item/selected-tag-item.twig" with {props: item } %}
  52.             {% endfor %}
  53.           {% endif %}
  55.           {% if com_props.reset_btn %}
  56.             {% include "@Components/items/tag-item/tag-item.twig" with {props: com_props.reset_btn|merge({
  57.               tag: "span",
  58.               size: "sm",
  59.               radius: true,
  60.               hoverable: true,
  61.               variant: "outline",
  62.               icon: {
  63.                 src: "@Images/svg/trash.svg",
  64.                 size: "md",
  65.               },
  66.               data: {
  67.                 "filter-target": com_props.id
  68.               },
  69.               extra_class: "f-filtration__reset-btn js-filter-clear"
  70.             }) } %}
  71.           {% endif %}
  72.         </div>
  73.       {% endif %}
  74.     </div>
  75.   {% endblock %}
  76. {% endembed %}