Create an Icon list from the Custom Modules (Checkbox List) Property

Advanced Development
1

Looking for help in creating a user selected icon list in Custom Modules using the Checkbox List custom property located under item properties. Instead of having the Checkbox List spit-out a string list separated by commas. I would like to have each list item replaced by a certain icon pertaining to the users checkbox selection.

Detail Layout:
Beer Size List: {{this[‘BeerSizes’]}}

Web Page Output:
Beer Size List: 4-pack (16oz cans),Crowler (32oz can),Growler (64oz jug),Draft

2

Hi @TedderMedia.
You’d need to loop through each option with IF/ELSE conditions that ASSIGN your desired icon in place of the string.
So first I’d turn your comma separated list into an array so that Liquid can iterate through it with a FORLOOP:

{% assign iconArray = this['BeerSizes'] | split: ',' %}
This splits the list by the comma character to create a Liquid array.

Now you can loop through the array and conditionally replace with icons:

{% for item in iconArray %}
    {% if item == '4-pack (16oz cans)' %}
        <img src="/icon-4pack.png">
    {% elsif item == 'Crowler (32oz can)' %}
        <img src="/icon-crowler.png">
    {% elsif item == '...etc...' %}
        <img src="/icon-etc....png">
    {% else %}
        <img src="/icon-default.png">
    {% endif %}
{% endfor %}
3

Thank you Adam for replying so fast to this request. I am learning liquid slowly so it is challenging sometimes.

If a user doesn’t select a certain size and the {% if item == ’ ’ %} is blank can I just swap out the <img> tag with a simply &nbsp; for the {% else %} condition?

4

Absolutely. The HTML parts are completely up to you. Add/remove whatever you need to be there.

5

Thank you again and have a great day! :grinning: