Skip to main content
Skip table of contents

Coding Advice: Push Tags in Display Pattern

Goal: Show various tags, for example, products or keywords, in a display pattern. Use the push tags code example for simpler, maintainable, faster code.

Prettify with Push Explained

JSON
When you have a Display Pattern with lots of values, you can prettify your code using the following logic.

1. Create an array (name: tags) for looping through terms
	{% array tags %}

2. Push values (into the array)
	{% push tags%}
    	{% if data.basicInformation %}
      		{{data.basicInformation | layer_name: "BasicInformation"}}
	{% elsif data.productInformation %}
	    {{data.productInformation | layer_name: "ProductInformation"}}
	{% endif %}
	{%endpush%}
	{% push tags%}
	{% for mediaType in data.imageAndUsageInformation.mediaType %} {{mediaType | tagbox_name}}{% endfor %}
	{%endpush%}

3. Check if something is in the array
	{% if tags.size > 0 %}

4. Display the values from the array with a filter: | uniq - which means unique values only
	{{tags | uniq | join: " | " }}

5. Show values in case array is empty
	{% else %}
    	{% if data.imageMetadata.fileName %}
        	{{data.imageMetadata.fileName}}
	    {% else %}
    	    {{id}}
    	{% endif %}
	{% endif %}

Complete Push Code Example

CODE
{% array tags %}

{% push tags%}
    {% if data.basicInformation %}
        {{data.basicInformation | layer_name: "BasicInformation"}}
{% elsif data.productInformation %}
    {{data.productInformation | layer_name: "ProductInformation"}}
{% endif %}
{%endpush%}

{% push tags%}
{% for mediaType in data.imageAndUsageInformation.mediaType %} {{mediaType | tagbox_name}}{% endfor %}
{%endpush%}

{% if tags.size > 0 %}
    {{tags | uniq | join: "_" | downcase}}
{% else %}
    {% if data.imageMetadata.fileName %}
        {{data.imageMetadata.fileName}}
    {% else %}
        {{id}}
    {% endif %}
{% endif %}


JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.