[Resolved] custom search page with taxonomy image

[Author]

Posts

[riinA]

I have products (woocommerce) and each of them is added 2 taxonomies ( I created) and proroduct category.
I have added brands (taxonomy1) ( with custom field added image that I would like to display) and one more category (taxonomy2)

So I would like that on menu I will have list of taxonomie2 and each of that will link to page where products are listed.
That arhive page will have also brand search ( displays image) and product category searc, and they will display only these procuts that is realated with each taxonomy.

Also all products will be ordered first by woocommerce product categories and then by brands
I have attached designer view, wich will hopefully give better idea of what I would like to achive.

basically back-end selection is working exactly as needed - please look the video hidden link
(this link is example of old page, but it will work same way)

[Christian Cox]

Hi, this exact design isn't easy to achieve in Toolset. There are a few limitations I want to explain so you can make the best decision for your project.

1. There is no built-in "image" filter to click an image and update search results. We offer text input, select, select multiple, radio, and checkboxes. This means that the taxonomy brands images cannot easily be used as filters in a View. An image link filter will require custom code that falls outside the scope of support we provide. In a basic View I can help you implement a select field filter or a radio button filter for the taxonomy brand options. For more information about the types of filters offered in Views, please see here: https://toolset.com/documentation/user-guides/front-page-filters/#vfmh-adding-search-controls

2. There is no built-in text "link" filter. This means that the WC Product Categories filter can be implemented as a select field, a radio button, or a group of checkboxes. A text link filter may be achieved with custom code.

3. To achieve the nested table effect, sorted by different taxonomy terms, you must use a fairly complex group of nested Views. When nested Views are used, pagination and AJAX updates may not be possible. If your site has many results that require pagination, or you need to use only AJAX updates, this could be a problem.

If your design is flexible, I can show you how to implement something simpler using the filter inputs built-in to Views. Please let me know your thoughts and we can go from there. Thank you!

[riinA]

Hi, thanks for your feedback

1. Image filter - ok this is really important for me so I would like to receive some solution for that. Since it is out of Toolset scope - can you refer me to somebody who could help me?
2. Product category filter - I have achived custom code solution with radio button and CSS - this is good 🙂
3. Pagination is not need for these pages - let them be in all one page.

Also I forgot that in product views you can see brand logos infront of every product. This is is also something I need.

So, lets try to build the pages with radio buttons and I will look solution for image filter.
Thanks!

[riinA]

Any update about this solution?

[Christian Cox]

Hi, I'm still working towards the best solution for this. Since it requires a bit of custom code, it's going to take a bit longer. Thanks for your patience.

[riinA]

Hi Cristian

Thank you so much for giving a effort 🙂
Do you have any timeline maybe 🙂

[Christian Cox]

I have it mostly working, but there is a problem where empty Brands are showing up in the results. For example:

Abimaturjalid
- Schomburg
-- No items found
- Köster
-- BS 1 Bituumen pasta

Bituumenvoobad
- Schomburg
-- COMBIFLEX-DS
-- ASOL-FE
- Köster
-- KBE-FLÜSSFOLIE

Hiding the empty Brands underneath each Product Category is a challenge. I can continue working on this in my spare time, or we can implement the solution I already have working. Let me know how you would like to proceed.

[riinA]

thanks for you swift replay today.
I have also made something.

If you look this page hidden link then search filter is working.

But for hidden link it shows all this brands products.

But lets try your solutions - maybe we can continue from there.

[Christian Cox]

Okay let's start here.
1. Create View of Products using the option "Display the results using a custom search" in the popup. Call this View "Search Products" or something similar.
2. Add custom search filters for Product Category and Brand, and add a submit button.
3. In Loop Editor, click "Skip wizard". Then delete all the code and replace it with this code:

[wpv-layout-start][wpv-items-found]<!-- wpv-loop-start --><wpv-loop>[wpv-item index=other][wpv-post-id],[wpv-item index=last][wpv-post-id]</wpv-loop><!-- wpv-loop-end -->[/wpv-items-found][wpv-no-items-found]<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>[/wpv-no-items-found][wpv-layout-end]

4. Place the View on a custom Page for testing. You should see the taxonomy filters and a comma-separated list of all product IDs appear on the page. If you interact with the filters, the product IDs will be filtered according to the selections.
5. Once this is working, change the View to display only the filters. If you're using the block editor, you can edit the View block's "custom search settings" configurations to show only the filters. If you're not using the Block editor, you can delete then re-insert the View shortcode and choose the correct options in the popup dialog. Now when you load the page, you should only see the filters.

Let me know if you're able to get to this point, or if you get stuck anywhere. We can continue from there.

[riinA]

Hi

well.. I made the view
added search

 
 [wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
	<label>[wpml-string context="wpv-views"]Tootekategooriad[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="product_cat" type="radios" url_param="wpv-product_cat"]
</div>

<div class="form-group">
	<label>[wpml-string context="wpv-views"]manufacturers[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="tootja" type="radios" url_param="wpv-tootja"]
</div>

[wpv-filter-submit output="bootstrap"]
[/wpv-filter-controls]
[wpv-filter-end]

then added your loop

 
[wpv-layout-start]
	[wpv-items-found]<!-- wpv-loop-start -->
		<wpv-loop>
          	[wpv-item index=other]
          			[wpv-post-id],[wpv-item index=last][wpv-post-id]
			</wpv-loop><!-- wpv-loop-end -->[/wpv-items-found]
	[wpv-no-items-found]<strong>
      [wpml-string context="wpv-views"]No items found[/wpml-string]</strong>[/wpv-no-items-found]
[wpv-layout-end]

and displayed it in new page with shortcode ... - not working
page is not showing nothing but white screen

[Christian Cox]

Is there a Content Template or Template Layout assigned to this Page? If so, add the shortcode to the Content Template or Template Layout.

[riinA]

Hi, yes I got the view working hidden link
I removed submit button and the page is reloading automaticcally.

Restults is filtered I see also - ord their order is algined as manufacturer but I need to add heading also?

also, is there possible to add amount of number behind every product category and for somereason on mobile devices filtering is not seen...

[Christian Cox]

I removed submit button and the page is reloading automaticcally.
Remember, this solution does not support AJAX updates.

Restults is filtered I see also - ord their order is algined as manufacturer but I need to add heading also?
I think you're asking about the formatting of the results? We will work on formatting the results later, and we can add headings then.

also, is there possible to add amount of number behind every product category
Yes, when you create the filters you have the opportunity to modify the text shown in each option. You can change that text directly in the filter shortcode with the "format" attribute:

[wpv-control-post-taxonomy taxonomy="product_cat" type="radios" format="%%NAME%% (%%COUNT%%)" url_param="wpv-product_cat"]

for somereason on mobile devices filtering is not seen...
Your theme applies custom CSS that sets the font size for all "label" elements to be "0" at low resolutions. I'm not sure why, your theme is hiding all these elements. Screenshot attached here. You can add CSS to fix your theme's poor handling of low resolution display. I would add something like this in the View's Search and Pagination CSS:

@media only screen and (max-width: 800px) {
  label {
    font-size: inherit;
  }
}

Let me know when you finish step 5 or if you get stuck.

[riinA]

I have finished working now and all these steps are fulfilled.

one question about filtering.
When you look page hidden link
then up there is "vali tootja" and these names will be added or removed - depending the search result. But down there is product categories and these names are not updated - this is what you mean when you say "Remember, this solution does not support AJAX updates."

So final thing is filtering results and adding the headings 🙂

[Christian Cox]

But down there is product categories and these names are not updated - this is what you mean when you say "Remember, this solution does not support AJAX updates."
Right, in the View settings you must not choose AJAX search updates. You must add a submit button to the search form, then click submit in the search form to update the results. After you submit the search form, the page will reload and the Product Category counts will update to reflect the new search criteria.

I have finished working now and all these steps are fulfilled.
You skipped ahead a bit, but that's okay 🙂
Save the code from your Product View's loop in another Content Template as a backup. Right now, the View should display a list of Product IDs only. Copy and paste the code exactly from step 3. We must create a list of Product IDs first, then we will create another View that displays the Product information later. The Product IDs list is used in the next step to help generate the nested taxonomy term Views.

6. Copy this code and paste it in your child theme's functions.php file, or create a new code snippet in Toolset > Settings > Custom code:

function ts_get_brand_ids_for_posts_func($atts) {
  $view_id = 12345;
  $tax = "brand";
  $filtered_posts = get_view_query_results( $view_id, null, null, null );
  $post_ids = wp_list_pluck( $filtered_posts, 'ID');
  $terms = wp_get_object_terms( $post_ids, $tax, array( 'fields' => 'ids' ) );
  return $terms ? implode( ',', $terms ) : '';
}
add_shortcode("ts_get_brand_ids_for_posts", "ts_get_brand_ids_for_posts_func");

function ts_get_pcat_ids_for_posts_func($atts) {
  $view_id = 12345;
  $tax = "product_cat";
  $filtered_posts = get_view_query_results( $view_id, null, null, null );
  $post_ids = wp_list_pluck( $filtered_posts, 'ID');
  $terms = wp_get_object_terms( $post_ids, $tax, array( 'fields' => 'ids' ) );
  return $terms ? implode( ',', $terms ) : '';
}
add_shortcode("ts_get_pcat_ids_for_posts", "ts_get_pcat_ids_for_posts_func");

There are two places where you see the number 12345. Replace those numbers with the ID of the View of Product IDs. If your custom taxonomy slug is not "brand", then you should replace the slug in this line:

$tax = "brand";

Change brand to match your custom taxonomy slug.

7. Now place these shortcodes on the basseinid-ja-niisked-ruumid page, somewhere outside the View, as a test:

Brand IDs: [ts_get_brand_ids_for_posts]<br />
Product Category IDs: [ts_get_pcat_ids_for_posts]<br />

8. Go to Toolset > Settings > Front-end Content and enter ts_get_brand_ids_for_posts and ts_get_pcat_ids_for_posts in the section "Third party shortcode arguments".