Skip Navigation

[Resolved] Add product images to relationship filter dropdown

This support ticket is created 3 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 10 replies, has 4 voices.

Last updated by Ido Angel 3 years, 11 months ago.

Assisted by: Waqar.

Author
Posts
#1876763

Hi,
I have a relationship between products and recipes. In a custom search, there a select dropdown for filtering that.
The relationship filter drop down has the value of the product and its' name. Is there a way to add the product image to this dropdown?
Thanks!

#1877111

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

There certainly aren't any options available for that. The post filter uses select2, and it looks like it is possible in principle to create your own templates for how each result is displayed.

Its documentation describes adding flags, as shown here: hidden link

I would have to look into the possibility of customising the select2, I'm not sure whether we have the chance to intervene when it is instantiated on the form select input.

Assuming it were possible, I could share that info with you, but you would need to write the code yourself to customise what's displayed. If you are willing to do that, we can look into intervening in the application of select2 to the input.

#1877249

sounds perfect. thx Nigel and a happy NY!

#1878195

Hi Ido,

Thank you for waiting.

I couldn't find any built-in hook or method to customize the output of the relationship filter generated through the "wpv-control-post-ancestor" shortcode.

However, here is an example snippet that you can use as a reference to convert the simple select dropdown for the relationship filter into a select2 dropdown with an image:


function custom_function() {
?>
	
<link href="<em><u>hidden link</u></em>" rel="stylesheet" />
<script src="<em><u>hidden link</u></em>"></script>

<script type="text/javascript">

jQuery(document).ready(function() {
	// passing data for the select2 options
	var data = [
		{
			id: 0,
			text: '-select-',
		},
		{
			id: 123,
			text: 'Product A',
			img: '<em><u>hidden link</u></em>'
		},
		{
			id: 456,
			text: 'Product B',
			img: '<em><u>hidden link</u></em>'
		}
	];
	// function to format the select2 options
	function formatProduct (product) {
		if (!product.img) {
			return product.text;
		}	
		var $product = jQuery(
			'<span><img src="' + product.img + '" class="img-product-option" /> ' + product.text + '</span>'
		);
		return $product;
	};
	// inialize the select2 script to select named "wpv-relationship-filter"
	jQuery('select[name="wpv-relationship-filter"]').select2({
		data: data,
		templateResult: formatProduct
	});

});
</script>
<?php

}
add_action( 'wp_footer', 'custom_function', 9999 );

Notes:

1. The above code snippet basically outputs the contents of the function "custom_function" at the footer of the page.
( you can narrow down this output's loading to the specific page(s) using the WordPress conditional tags - https://codex.wordpress.org/Conditional_Tags )

2. If your theme or some other plugin is already loading the script2 styles and script on the page, you can remove the lines which are loading the files from the CDN.

3. In this example, I've used a fixed/static "data" array, that passes the ID, title, and image of the products, to the select2 script. You can construct this array dynamically, using a post view or the "get_posts" function. ( ref: https://developer.wordpress.org/reference/functions/get_posts/ ).

I hope this example will help.

Important links:
hidden link
hidden link
hidden link

regards,
Waqar

#1878213

Hey Waqar and thanks!
This works - the only thing is I can't wrap my head around dynamically getting the products images.
Is there a change for your help in that?
thx
Ido

#1879977

Glad that it works.

To make the data array dynamically, you can follow these steps:

1. You'll create a new post view to get all "Products" posts and select the "List with separators" in the loop wizard.

The Loop Editor content will look like this:


[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
			[wpv-item index=other]
			{ id: 0, text: '-select-'}, { id: [wpv-post-id], text: '[wpv-post-title]', img: '[wpv-post-featured-image size="full" output="url"]' },
			[wpv-item index=last]
			{ id: [wpv-post-id], text: '[wpv-post-title]', img: '[wpv-post-featured-image size="full" output="url"]' }
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		{ id: , text: 'No items found'}
	[/wpv-no-items-found]
[wpv-layout-end]

Please note how I've used the "wpv-post-id", "wpv-post-title", and "wpv-post-featured-image" shortcodes, to get the ID, title and the featured image's URL, respectively.
( ref: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/ )

If you need an image other than the featured image, for example from a Type's image custom field, you can use the Types fields API shortcode in place of "wpv-post-featured-image".
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/ )

2. To get this newly created view's output in the code snippet that I shared earlier, you can use "render_view" function:
( ref: https://toolset.com/documentation/programmer-reference/views-api/#render_view )

Example, the existing data array part:


    var data = [
        {
            id: 0,
            text: '-select-',
        },
        {
            id: 123,
            text: 'Product A',
            img: '<em><u>hidden link</u></em>'
        },
        {
            id: 456,
            text: 'Product B',
            img: '<em><u>hidden link</u></em>'
        }
    ];

Will become:


    	var data = [
	<?php
		$args = array(
			'title' => 'View to get raw products data',
		);
		echo render_view( $args );
	?>
	];

Please replace "View to get raw products data" with your actual view's title.

#1879993

Works like a charm 🙂 almost...
2 things:

1) it seems like it's drawing ALL products, and not just the ones supposed to be in the parent view (e.g. with relationship to recipes). When I try to filter the child view (the one for withdrawing the products images) with a relationship filter, the code stops working.
2) I need the code to work after the results are updated too. I tried placing the jQuery bit in the JS filter section, this way:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
  

  var data = [
<?php
    $args = array(
        'title' => 'Products for Images in Dropdown',
    );
    echo render_view( $args );
?>
];
    // function to format the select2 options
    function formatProduct (product) {
        if (!product.img) {
            return product.text;
        }   
        var $product = jQuery(
            '<span><img src="' + product.img + '" class="img-product-option" /> ' + product.text + '</span>'
        );
        return $product;
    };
    // inialize the select2 script to select named "wpv-relationship-filter"
    jQuery('#wpv_control_select_wpv-relationship-filter').select2({
        data: data,
        templateResult: formatProduct
    });
	
});

});

But that doesn't work either.
We're getting close...

Thanks dear Waqar!

#1883409

Hello,

Waqar is on vacation, will be back tomorrow.

#1883421

<3

#1884693

Thank you for waiting.

To take care of both the points from your last message, you can use a slightly different approach.

You can update the content of the new source view for the product image data so that it adds a hidden div on the page, where the titles and the image from "ALL" the products are included, organized based on the product's ID:


[wpv-layout-start]
	[wpv-items-found]
    <div class="product-image-data" style="display:none;">
	<!-- wpv-loop-start -->
		<wpv-loop>
          	<div id="[wpv-post-id]-product-item">
            	<span class="data-text">[wpv-post-title]</span>
              	<span class="data-img">[wpv-post-featured-image size="full" output="url"]</span>
          	</div>
		</wpv-loop>
	<!-- wpv-loop-end -->
    </div>
	[/wpv-items-found]
	[wpv-no-items-found]
	[/wpv-no-items-found]
[wpv-layout-end]

After that, you can update the custom code that I previously shared so that it reads the ID of each product that is "AVAILABLE" as the option in the select dropdown filter and then finds the image data from the hidden div and formats it accordingly in the select2 dropdown:


function custom_function() {
?>
	
<link href="<em><u>hidden link</u></em>" rel="stylesheet" />
<script src="<em><u>hidden link</u></em>"></script>

	// collecting data for the select2 options
	<?php
		$args = array(
			'title' => 'View to get raw products data',
		);
		echo render_view( $args );
	?>

<script type="text/javascript">

jQuery( document ).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated', function( event, data ) {
	
	// function to format the select2 options
	function formatProduct (product) {
		var productTitle = jQuery('.product-image-data #'+product.id+'-product-item span.data-text').text();
		var productImg = jQuery('.product-image-data #'+product.id+'-product-item span.data-img').text();
		if (productImg) {
			var $product = jQuery(
				'<span><img src="' + productImg + '" class="img-product-option" /> ' + productTitle + '</span>'
			);
			return $product;
		}
		else
		{
			return product.text;
		}
	};
	// inialize the select2 script to select named "wpv-relationship-filter"
	jQuery('select[name="wpv-relationship-filter"]').select2({
		templateResult: formatProduct
	});

});


</script>
<?php

}
add_action( 'wp_footer', 'custom_function', 9999 );

#1884919

PERFECT! Have a happy new year dear Waqar and thanks for always coming up with great out of the box solutions!