Change Smile ElasticSuite layered navigation as select dropdown

[sonajasmine119]

I have copied the vendor file of Smile_ElasticSuite catalog (templates/layer/filter/) attribute-filter.html.  Currently, filters are displayed as list, however, my requirement is to show them as dropdown.

Following is the code responsible in attribute-filter.html.  The file is correctly loaded in my custom module, so no issues with that. I tried various ways to change <ol> to <select>, but nothing gave me the perfect output.  Any help is appreciated.  Thank you.

<ol class="items" data-bind="foreach: getDisplayedItems()">
    <li class="item">
        <a data-bind="attr: {href:url, rel:$parent.displayRelNofollow}, visible: count >= 1">
            <input type="checkbox"
                   data-bind="checked: is_selected, attr: {id: id}"
                   onclick="this.parentNode.click();" />
            <label data-bind="attr: {for: id}">
                <span data-bind="text: label"></span>
                <span class="count" data-bind="text: count, visible: $parent.displayProductCount"></span>
            </label>
        </a>

        <div data-bind="visible: count < 1">
            <span data-bind="text: label"></span>
            <span class="count" data-bind="text: count"></span>
        </div>
    </li>
</ol>

[langnerfra512b]

Hello,

To change the Smile ElasticSuite layered navigation from a list to a select dropdown, you can modify the code as follows:

Fortiva Credit Card

Replace the <ol> element with a <select> element and update the related bindings and attributes. Here's an example of how the modified code could look:

<select data-bind="value: selectedValue, options: getDisplayedItems(), optionsText: 'label', optionsValue: 'id'">
<option value="">-- Select Filter --</option>
</select>

Make sure to remove the <li> and <a> elements, as they are not required for a select dropdown.

By using the <select> element with appropriate data bindings, you can achieve the desired dropdown functionality for the layered navigation.

Please note that further adjustments may be needed depending on your specific requirements and the structure of the surrounding code.