How do I loop through FAQ items by product and FAQ category within a Tabs element?

[Paritor]

Hi there,

I am trying to loop through FAQ custom post types that have both a “product_category” and a FAQ category (“faq-kategorie”). The tabs on top shall contain the products, whilst the individual panels of the tabs elements contain the respective FAQ categories in the left column (the terms) and a list of the questions in the right column. Sort of a nested loop, I guess.

Clicking on a category shall display the respective questions pertaining to both the product and the FAQ category in the right column.

How do I achieve that? I tried both an Archive and Page.

I already have single tabs containing the product taxonomies but I cannot populate the panels .

Thank you!

Cheers,
Jens

[ruenel]

Hello @Paritor,

Thanks for writing in!

You will have to nest a Looper Provider All Terms. For example:

Looper Provider All Terms (product_category)
   Looper Consumer
         Display the Tabs (for each product category) 

         Looper Provider All Terms (faq-kategorie)
               Looper Consumer
                     Display Terms (each faq-kategorie)

The product category and the faq-kategorie doesn’t seem to have a connection. So, you will have a multiple taxonomy in your argument like this:

$args = array(
    'post_type' => 'faq',
    'tax_query' => array(
        'relation' => 'AND',
        array(
            'taxonomy' => 'faq-kategorie',
            'field'    => 'slug',
            'terms'    => 'wordpress',
        ),
        array(
            'taxonomy' => 'product_category',
            'field'    => 'slug',
            'terms'    => 'plugins',
        ),
    ),
);

You can use “AND” or “OR” relationship.

By running the var_dump( http_build_query( $query ) );, this can give us a query string: post_type=faq&tax_query%5Brelation%5D=AND&tax_query%5B0%5D%5Btaxonomy%5D=faq-kategorie&tax_query%5B0%5D%5Bfield%5D=slug&tax_query%5B0%5D%5Bterms%5D=wordpress&tax_query%5B1%5D%5Btaxonomy%5D=product_category&tax_query%5B1%5D%5Bfield%5D=slug&tax_query%5B1%5D%5Bterms%5D=plugins

You can replace wordpress with {{dc:term:slug depth=1}} and plugins with {{dc:term:slug depth=0}}.

Hope this makes sense.

[Paritor]

Hi Ruenel,
Thank you for your answer! I still don’t quite understand where to put what in your example … Are you referring to the Archive or the Page? Where does the above mentioned argument go if everything are All terms providers?

Could you please copy one of my Archive/Page and implement the arguments/loopers/consumers, so that I better understand what you did?

Thank you!

[ruenel]

Hello Jens,

Please understand that the archive layout which you have assigned as Post Type as FAQ will return FAQ items. This archive page will be an archive of FAQ items. Normally, the archive element structure will be like:

Section
   Row
      Column - Looper Consumer
           FAQ featured image
           FAQ title
           FAQ description

To loop through FAQ items by product and FAQ category within a Tabs element, this would probably best on a page and not on the archive. You can then apply element structure which I have mentioned in my previous post:

Looper Provider All Terms (product_category)
   Looper Consumer
         Display the Tabs (for each product category) 

         Looper Provider All Terms (faq-kategorie)
               Looper Consumer
                     Display Terms (each faq-kategorie)

Because of the nesting of the loopers, the { looper.field({"key":"slug","depth":"1"}) }} dynamic content were used in the final query string:
post_type=faq&tax_query%5Brelation%5D=AND&tax_query%5B0%5D%5Btaxonomy%5D=faq-kategorie&tax_query%5B0%5D%5Bfield%5D=slug&tax_query%5B0%5D%5Bterms%5D={{ looper.field({"key":"slug","depth":"0"}) }}&tax_query%5B1%5D%5Btaxonomy%5D=product_category&tax_query%5B1%5D%5Bfield%5D=slug&tax_query%5B1%5D%5Bterms%5D={{ looper.field({"key":"slug","depth":"1"}) }}

Check out the demo in the secure note below.

Thanks.

[Paritor]

Thank you, @ruenel!

OH boy!

I was able to reproduce your structure. But since the FAQ categories and their item counters do not reflect the product category I think I will need to restructure my taxonomies with a parent-child relationship where the product category sits on top, so that I can use that hierarchy also for my documentation page …

Jens

[ruenel]

You are most welcome, @Paritor.