Post tags refinementLisa widget, display 5 specific tags

Hi there,

I am working on a custom search page. I am using v2.8.1 of the Alogolia Wordpress plugin, latest version of wordpress 4.8.3. I’m modifying the instantsearch.php template in my wordpress theme. In the website, I’ll have about 300 tags in my posts. On my instantsearch page, I want to make 3 widgets that hold 4 or 5 different tags in them. I’m currently using “instantsearch.widgets.refinementList” with Attribute Name taxonomies.post_tag. I see all of the tags in my system currently.

I don’t want to see all of the tags in the filter. Instead, I want to see 5 specifc tags. Is there a way to filter what tags are displayed in the refinementList?

Can I make a javascript Object or an array filled with the values I want in the refinementList and then use the transformData item: to output them?

Or is there a simple way to just say I want tag10, tag15,tag21,tag17 to show in the list and hide all of the other ones?

I’ve been experimenting with this currently and I’m stuck. I’ve gotten it show the 4 tags I want , but its also showing all of the ones I don’t want either represented by a checkmark and a “0”.

I saw that I could output the data to the console in the transformData param. I want to remove all of the tags except about 4 or 5 of them. I’ll 3 groups that are like this so I would wasn’t a way to say “keep these 4, hide the rest” or “keep these 5 and hide the rest” in the second and third tag groups.

Here is what I have right now.

search.addWidget(
				instantsearch.widgets.refinementList({
					container: '#facet-tags-dating-engaged',
					attributeName: 'taxonomies.post_tag',
					operator: 'and',
					limit: 31,
					sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
					templates: {
						header: '<h3 class="widgettitle">Dating & Engaged II</h3>',
						
					},
					transformData: {
						item: function(data){

							var mod_data = jQuery.extend(true, {}, data);
							
							keepers = new Object();
							

							var count = 0;
							
							// get the number of objects (7)
							var obj_length = Object.keys(data).length;
							var name = data.name;
							

							for (var name in mod_data) {
								if (mod_data.hasOwnProperty('name')) {
									
										if (mod_data.name == "Dating" || mod_data.name == "Getting Serious" || mod_data.name == "Engagement" || mod_data.name == "Planning a Catholic Wedding") {
											var keepers = Object.assign({}, mod_data);
										} else {
											// Object.keys(mod_data).forEach(key => mod_data[key] === undefined && delete mod_data[key])
											
											Object.keys(mod_data).forEach(
												function(key) { 
													delete mod_data[key]; 
												}
											);
											
											
										}

								}
							}

							console.log(keepers);
							return keepers;
						}
					}
						
				})
			);

Maybe someone can help me out here? Let me know if there is a way of displaying specific tags.

Hey @ijoer316, I just did an example that should be pretty close to what you are trying to do: https://jsfiddle.net/vvoyer/bpmd9hye/6/

Let me know how it goes.

1 Like

i think that did the trick!

1 Like