Search code examples
htmlliquidbusiness-catalyst

Split and copy classes from parent div to adjacent divs (Liquid or jQuery)

I have the following code which uses some Liquid Markup:

<div id="parent" class="grid-item {{ this.filters | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    <div class="labels">
        {{ this.filters | prepend: '<filter>' | replace: ',', '</filter><filter>' | append: '</filter>' }}
    </div>
</div>

I have the following filters (1 or all of them may be selected)

  • Mood Boards
  • Outfits
  • Designers
  • Styling
  • Photo Shoots
  • Collaboration
  • News/Events

Lets say "Mood Boards", "Designers", "Collaboration" are selected as the filters... The above Liquid Markup would output the following:

<div id="parent" class="grid-item mood-boards designers collaboration">
    <div class="labels">
        <filter>Mood Boards</filter>
        <filter>Designers</filter>
        <filter>Collaboration</filter>
    </div>
</div>

I need it to output this:

<div id="parent" class="grid-item mood-boards designers collaboration">
    <div class="labels">
        <filter class="mood-boards">Mood Boards</filter>
        <filter class="designers">Designers</filter>
        <filter class="collaboration">Collaboration</filter>
    </div>
</div>

Is this possible in Liquid (ideal solution) or failing that, can we do it in jQuery. You can see the order of the classes always line up with the order of the <filter>'s.

There could be just 1 or all of the above filters selected so the code needs to be able to add the classes from #parent to the appropriate <filter>'s.

Please help! It is difficult to describe so please ask if you have a question or need more information.

EDIT:

I just thought if you could use liquid to do something like this for each possible filter, but I can't get it to work:

<filter class="{{ this.filters[0] | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    {{ this.filters[0] }}
</filter>

<filter class="{{ this.filters[1] | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    {{ this.filters[1] }}
</filter>
Solution

  • I've assumed you can get the selected items either as an array, or as a delimited string. Since you're not using the inactive filters, we can ignore them.

    <!--Not sure how your data was coming in, but this 
    gets us to an iterable array:-->
{% assign rawActiveFilters = "Mood Boards,Designers,Collaboration" -%}
{% assign cats = rawActiveFilters | split: "," -%}

<!--catsJoined will be used outside the loop.-->
{% capture catsJoined -%}
    {% for cat in cats -%}
        {{ cat | downcase | replace: '/', '-' | replace: ' ', '-' -}}
    {% endfor -%}
{% endcapture -%}

<!--Remove those unsightly extra spaces. Not required, just preferred.-->
{% capture catsJoinedTidy -%}{{ catsJoined | split: ' ' | join: ' ' }}{% endcapture -%}

<div id="parent" class="grid-item {{ catsJoinedTidy }}">
    <div class="labels">
        {% for cat in cats -%}
            <filter class="{{ cat | downcase | replace: '/', '-' | replace: ' ', '-' }}">
                {{ cat }}
            </filter>
        {% endfor -%}
    </div>
</div>