Building Category Select Filters with autoFilter

autoFilter can look confusing at first because much of the form markup is produced through generated placeholders. Once you understand where those placeholders come from, select-based category filters become straightforward.

Core pattern

[!autoFilter? &parents=`8` &parseTpl=`Ditto_call` &formTpl=`formTpl`!]
[+af.form+]
[+af.result+]

The form template may then include a generated select placeholder:

<form name="af" method="get" action="[~24~]">
  <input type="hidden" name="afid" value="[+af.id+]" />
  Category: [+af.opt8_select+]
  <input type="submit" value="Filter" />
  <input type="submit" name="Reset" value="Reset" />
</form>

And the result block

<div>
  [+af.items_show_count+] of [+af.items_count+]: ids = [+af.items+]
  [[Ditto? &documents=`[+af.items+]` &tpl=`product`]]
</div>

Where the select values come from

Placeholders such as [+af.opt8_select+] are generated from the filter definition and the configured source field. The number in the placeholder usually maps to a configured option or TV source. That is why the output looks opaque until you inspect the filter configuration itself.

What usually goes wrong

• The generated select points to the wrong field or TV.
• The action URL sends the request to a page that does not render the result block.
• The result placeholder is correct, but Ditto is fed empty IDs because the filter source produced no matches.

Recommended workflow

First print [+af.items+] and confirm that the correct resource IDs are produced. Only after that should you worry about the final listing template. This separates filter logic from rendering logic and makes debugging much easier.

Once the filter source is correct, autoFilter plus Ditto is still a practical pattern for older catalog sites that need one or two strong filters without a full custom catalog application.