Reverse the display of facet menus

[britisharmy]

I have an app that is using instantsearch and some of the menus look like this

This is okay although the on position looks like this

which is taking more space. I want to summarize the facets to look like so

The refinement widget code looks like this

and this doesn't offer options for direct customizations.

How can i customize this widget to only have the checkbox, label text and count similar to the image attached?

[Haroenv]

You can use the item template to display less information in the refinementList, documentation for that is here:

https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#widget-param-item

To completely customise the look of the widget, you can also look at the connector, docs for that are here:

https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#connector

[britisharmy]

@Haroenv Can ais-menu https://www.algolia.com/doc/api-reference/widgets/menu/vue/ have a checkbox at the start and count floated right ?.

I have this

<ais-menu attribute="property_district">
		 <ul
			slot-scope="{
			  items,
			  canToggleShowMore,
			  isShowingMore,
			  toggleShowMore,
			  refine,
			  createURL,
			  sendEvent,
			}"
		  >
			<li v-for="item in items" :key="item.value">
			
			  <a
				:href="createURL(item.value)"
				:style="{ fontWeight: item.isRefined ? 'bold': '' }"
				@click.prevent="refine(item.value)">
				 <input type="checkbox" style="margin-right:2% !important;"/> {{item.label}} 
			  </a>
			  <span class="float-right pull-right">{{item.count}}</span>
			</li>
		  </ul>
		</ais-menu>

But the checkbox is not checkable. I attached change event

<ais-menu attribute="property_district">
		 <ul
			slot-scope="{
			  items,
			  canToggleShowMore,
			  isShowingMore,
			  toggleShowMore,
			  refine,
			  createURL,
			  sendEvent,
			}"
		  >
			<li v-for="item in items" :key="item.value">
			<input type="checkbox" @change="refine(item.value)" style="margin-right:2% !important;"/>
			  <a
				:href="createURL(item.value)"
				:style="{ fontWeight: item.isRefined ? 'bold': '' }"
				@click.prevent="refine(item.value)">
				  {{item.label}} 
			  </a>
			  <span class="float-right pull-right">{{item.count}}</span>
			</li>
		  </ul>
		</ais-menu>

and that works.

[Haroenv]

Yes, that's correct, in Vue InstantSearch the event doesn't automatically get applied, you need to attach refine manually like done in the second code sample!