[Resolved] Alphabetical filter for a Taxonomy View and Display a custom taxonomy field.

[Author]

Posts

[ricardoE]

Hi,
I'm working on a Comic Store with WP+WooCommerce and Toolset.
All Comics are Woo Products I created a new Product Taxonomy named Authors. I also created a custom field for this taxonomy Author's Image.

My goal is (two related questions):

1. How to create a page that show all authors terms with an alphabetical filter like:
All | A | B | C | D | E | ...... | Z
Currently I have a View that shows All authors paginated with it's Author's Image and Name.
But after much reading in this support forum I didn't find a way to create a "letters" filters for a Taxonomy (no posts).

2. When an user click an Author it's show the Author Term page with it's related Comics (products).
How can I add in this term page the Author's Image Field?
(maybe creating a template page?)

It's my first project with Toolset.

Thank you very much!
Best regards,
Ricardo

[Christian Cox]

1. How to create a page that show all authors terms with an alphabetical filter like:
All | A | B | C | D | E | ...... | Z
Hi, there's nothing exactly like this built-in to Toolset. In a View of posts, other Users have been able to use a taxonomy to create this type of alphabetical filter system. However, you can't assign a taxonomy to another taxonomy, so that approach will not work in your case. You could create a custom field in the taxonomy that contains the first letter of the author term name, then create your own custom text-link filters to show results filtered by that custom field. That's probably the easiest to set up.

Or, you could use custom code to manipulate the WP_Term_Query criteria for the View using one of the Views APIs like wpv_filter_taxonomy_query: https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_taxonomy_query This is probably more complex to set up.

While there is no JavaScript API for search filters, I can help with any PHP code that touches the Toolset APIs. Let me know if you need assistance with something specific.

2. When an user click an Author it's show the Author Term page with it's related Comics (products).
How can I add in this term page the Author's Image Field?
If you want to design the contents of an archive like this, you can use Toolset's WordPress Archives. When you create a WordPress Archive with Toolset, your design will be applied instead of the design created by your theme and other plugins. https://toolset.com/documentation/user-guides/designing-archive-pages-for-custom-taxonomy/

[ricardoE]

Dear Christian,
Thanks for your detailed answer.
Question 2. already solved! Thanks!

Question 1. A-Z Filter:
I'm a bit lost here. Your first solution seems easier, but I have to choose for each author the custom field letter.
The second seems better and is more automatic.
But I have no idea how to do it 🙂
Can you help me with the custom code needed to filter the view in this way?

Thank you very much!

[Christian Cox]

I don't have a cut-and-paste solution available for this one, unfortunately. A quick search led me to this solution, which seems viable: https://stackoverflow.com/a/57235299 The filter code looks good, you would just need to add a custom query argument to your query. I can help you with that part using wpv_filter_taxonomy_query:

// add the custom query parameter for this View.
function ts_add_custom_term_argument_function( $tax_query_settings, $view_settings, $view_id ) {
  $views = array( 123456 );
  if( in_array( $view_id, $views ) ) {
    $tax_query_settings['__ts_first_letter'] = strtolower($_GET['someparam']);
    return $tax_query_settings;
  }
}
add_filter( 'wpv_filter_taxonomy_query', 'ts_add_custom_term_argument_function', 99, 3 );

Replace 123456 with the numeric ID of your View of terms.

Then you would have to create links to this Page with the various terms as URL parameters, like:
https://yoursite.com/page-with-view/?someparam=a
https://yoursite.com/page-with-view/?someparam=b
https://yoursite.com/page-with-view/?someparam=c
https://yoursite.com/page-with-view/?someparam=d

When your visitors visit those links, the letter in "someparam" will be used as the first letter in the term name filter.

Edit - I realized I had not limited this code to any one specific View, so I made an adjustment in the wpv_filter_taxonomy_query callback.

[ricardoE]

Hi!
Sorry for the late reply.

Where I have to add this custom code? I didn't find in my view where to add a custom query argument.

I understand that after the filter code is working I have to add HTML to link to the custom URL with parameters as you say,

Can you tell a step by step to implement your code.

Thank you for your help!
Best regards,
Ricardo

[Christian Cox]

Step 1: Create a new custom code snippet based on the terms_clauses filter code in the post here: https://stackoverflow.com/questions/47840519/listing-custom-taxonomy-terms-by-first-letter-using-name-like-does-not-work-ev/57235299#57235299
Your code snippet should add some query parameter. In my code sample above, I used the parameter "__ts_first_letter" but the Stack Overflow uses "__first_letter". You can add custom PHP code to your child theme's functions.php file, or you can create a new code snippet in Toolset > Settings > Custom Code.

Step 2: Add the code I provided above to the same code snippet. Be sure to customize the query parameter, URL parameter, and Form ID to your specifications.

Step 3: Test the URL parameter to make sure the code is filtering correctly. If not, we need to investigate that.

Let me know if you are able to complete these 3 steps and we can continue.

[ricardoE]

Hi Christian,
Thank you very much for your detailed information.

I added to my functions.php the following code:

// Autores Taxonomy filters

function terms_clauses_filtroautores( $clauses, $taxonomies, $args ){
    global $wpdb;

    if( !isset( $args['__ts_first_letter'] ) ){
        return $clauses;
    }

    $clauses['where'] .= ' AND ' . $wpdb->prepare( "t.name LIKE %s", $wpdb->esc_like( $args['__ts_first_letter'] ) . '%' );

    return $clauses;

}

add_filter( 'terms_clauses', 'terms_clauses_filtroautores', 10, 3 );

// add the custom query parameter for this View.
function ts_add_custom_term_argument_function( $tax_query_settings, $view_settings, $view_id ) {
  $views = array( 5680 );
  if( in_array( $view_id, $views ) ) {
    $tax_query_settings['__ts_first_letter'] = strtolower($_GET['alfautor']);
    return $tax_query_settings;
  }
}

add_filter( 'wpv_filter_taxonomy_query', 'ts_add_custom_term_argument_function', 99, 3 );

Then I tested the parameter with:
hidden link
hidden link
...

Works like a charm. The page show only the taxonomy terms that begins with that letter.
Great!

Now, how can add this as a filter in the view?

Best regards,
Ricardo

[Christian Cox]

Excellent! The list of filters isn't automated, unfortunately. You'll basically create a list of text links that include the correct URL parameter, and insert this list of links somewhere on the site. For example I would start with something like this for testing:

<a href="<em><u>hidden link</u></em>">All</a> |
<a href="<em><u>hidden link</u></em>">A</a> |
<a href="<em><u>hidden link</u></em>">B</a> | 

Then once you confirm it's working as expected and styled like you want, copy, paste, and edit until you have all the letter links created.

[ricardoE]

Ah I thought it will be some kind of Toolset View configuration.
I added the HTML in the Result Editor of the view.
Working great!

Thank you very much for your support!
Best regards,
Ricardo

[ricardoE]

My issue is resolved now. Thank you!