Предложение миниатюры изображения в результатах поиска ajax в wordpress по typeahead.js

Я пытаюсь реализовать typeahead.js в результатах поиска WordPress, следуя этот учебник — http://code.tutsplus.com/tutorials/enhancing-the-search-form-with-typeaheadjs—wp-30844.

Я хочу расширить его функциональность для поиска продуктов woocommerce, изменив следующий код

( function($) {
$( '.woocommerce-product-search input[name="s"]' )
.typeahead( {
name: 'search',
remote: wp_typeahead.ajaxurl + '?action=ajax_search&fn=get_ajax_search&terms=%QUERY',
template: [
'<p><a href="{{url}}"><img src="{{img_url}}" />{{value}}</a></p>',
].join(''),
engine: Hogan
} )
.keypress( function(e) {
if ( 13 == e.which ) {
$(this).parents( 'form' ).submit();
return false;
}
}
);
} )(jQuery);

здесь я добавляю следующий код

<img src="{{img_url}}" />

и внутри файла класса я изменяю некоторый код в следующей функции

public function shapla_woo_ajax_search() {
if ( isset( $_REQUEST['fn'] ) && 'get_ajax_search' == $_REQUEST['fn'] ) {
$search_query = new WP_Query( array(
's' => $_REQUEST['terms'],
'post_type' => 'product',
'posts_per_page' => 10,
'no_found_rows' => true,
) );

$results = array( );
if ( $search_query->get_posts() ) {
foreach ( $search_query->get_posts() as $the_post ) {
$title = get_the_title( $the_post->ID );
$image_url = wp_get_attachment_thumb_url( $the_post->ID );
$results[] = array(
'value' => $title,
'img_url' => $image_url,
'url' => get_permalink( $the_post->ID ),
'tokens' => explode( ' ', $title ),
);
}
} else {
$results[] = __( 'Sorry. No results match your search.', 'wp-typeahead' );
}

wp_reset_postdata();
echo json_encode( $results );
}
die();
}

здесь я сделал изменение следующего кода:

            $image_url = wp_get_attachment_thumb_url( $the_post->ID );
$results[] = array(
'value' => $title,
'img_url' => $image_url,
'url' => get_permalink( $the_post->ID ),
'tokens' => explode( ' ', $title ),
);

Когда я ищу продукт, он не показывает изображение, но показывает заголовок идеально. И когда я проверяю элемент с помощью firebug, он показывает следующий код:

<img src="false">

Как я могу решить проблему?

1

Решение

Наконец, я нашел решение, добавив следующий код:

$img_url = wp_get_attachment_url( get_post_thumbnail_id($the_post->ID) );
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]