Surfacing Categories in Liquid

If you have set up your categories already, you may be asking yourself how to actually surface categories on the front end - for instance, in the booking module. Luckily, it is possible to do this using liquid, and a very specific syntax for targeting the categories you want to surface.

Let's say you have set up a category structure that looks something like this:
You have a number of options available to surface these categories. 

1) You can return the entire category structure as a hash, with the following:
{{ listing.categories }}
2) You can surface an attribute of the category group (such as it's name) by using the following:
{{ listing.categories["category"]["attribute"] }}where 'category' above would be the Category you want to target, and 'attribute' is the attribute you want to surface. So in our example, if we wanted to surface the name of the the 'My Cool Category' group (which would be 'My Cool Category', we would do:<br> <pre>{{ listing.categories["My Cool Category"]["name"] }}3) If you want to surface the child elements that the user has chosen, you can do the following:<br> <pre>{{ listing.categories["parent"]["children"] | join: ', '  }}So in our example, we can do:<br> <pre>{{ listing.categories["Color"]["children] | join: ', ' }}To get all of the selected children from the 'Color' category group. See below for screenshots of each of the three examples above in action:<br><br><img src="https://nearme.uservoice.com/assets/85426251/unnamed-1.png" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; font-family: inherit; vertical-align: baseline; height: auto; display: inline;"><br><img src="https://nearme.uservoice.com/assets/85426266/unnamed-2.png" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; font-family: inherit; vertical-align: baseline; height: auto; display: inline;">