Clever Component Library

Filter 

<div class="filter">
    <div class="filter-inner">
        <form method="get" action="" class="js-filter" name="filter">
            <div class="form-block form-block--radios form-block--type">
                <fieldset>
                    <legend>Car type</legend>
                    <div class="form-group">
                        <div class="form-input form-input--radio">
                            <input id="type-1" value="" name="type" type="radio" checked>
                            <label for="type-1">
                                <span>All</span>
                            </label>
                        </div>
                        <div class="form-input form-input--radio">
                            <input id="type-2" value="electric" name="type" type="radio">
                            <label for="type-2">
                                <span>Electric</span>
                            </label>
                        </div>
                        <div class="form-input form-input--radio">
                            <input id="type-3" value="hybrid" name="type" type="radio">
                            <label for="type-3">
                                <span>Hybrid</span>
                            </label>
                        </div>
                        <div class="form-input form-input--radio">
                            <input id="type-4" value="plugin hybrid" name="type" type="radio">
                            <label for="type-4">
                                <span>Plugin Hybrid</span>
                            </label>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="form-block form-block--range form-block--range">
                <div class="form-input form-input--range">
                    <label for="range">Min. range on electricity</label>
                    <div class="form-group">
                        <div role="slider" aria-valuenow="50" aria-valuemin="50" aria-valuemax="300">
                            <input id="range" name="range" type="range" step="10" value="50" min="50" max="300">
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-block form-block--button">
                <button class="form-button btn" type="submit">
                    <span class="text">Filter</span>
                </button>
            </div>
        </form>

    </div>
</div>
 
<div class="filter">
	<div class="filter-inner">
		<form method="{{ filterMethod|default('get') }}" action="{{ filterAction }}"{% if id %} id="{{ id }}"{% endif %} class="js-filter" name="filter" {% if target %} data-target="{{ target }}"{% endif %}>
			{% for formBlock in filterFormBlocks %}
				{% include '@' ~ formBlock.type with formBlock.content %}
			{% endfor %}

			{# Should only be visible when JS fails #}
			{% include '@form-block-button' with {
				formBlockButtonLabel: 'Filter',
				formBlockButtonAttributes: {
					'type': 'submit',
				},
			} %}
		</form>

		{% set childComponentBlock = block('childComponents') %}
		{% if childComponents or childComponentBlock|trim is not empty %}
			{% if childComponentBlock %}
				{{ childComponentBlock|raw }}
			{% endif %}

			{% for component in childComponents %}
				{% include '@' ~ component.type with component.content only %}
			{% endfor %}
		{% endif %}
	</div>
</div>
 
{
  "filterAction": null,
  "filterMethod": null,
  "filterFormBlocks": [
    {
      "type": "form-block-radios",
      "content": {
        "formBlockLegend": "Car type",
        "formBlockName": "type",
        "formBlockOptions": [
          {
            "value": "",
            "label": "All",
            "checked": true
          },
          {
            "value": "electric",
            "label": "Electric"
          },
          {
            "value": "hybrid",
            "label": "Hybrid"
          },
          {
            "value": "plugin hybrid",
            "label": "Plugin Hybrid"
          }
        ]
      }
    },
    {
      "type": "form-block-range",
      "content": {
        "formBlockLabel": "Min. range on electricity",
        "formBlockName": "range",
        "formBlockRangeSettings": {
          "min": "50",
          "max": "300",
          "step": "10"
        }
      }
    }
  ],
  "filterTotalResults": 8
}

No notes defined.