Adding unique class to product card based on tags

[btuttle]

Hi!

I'm trying to add a unique class to a product card based on tags. I'm 90% of the way there. I updated line 43 of card-product.liquid to have an "if" in the class, looking like this:

<div class="card-wrapper product-card-wrapper underline-links-hover {%- if card_product.tags contains 'non-interactive' -%} non-interactive{%- endif -%}">

My only hangup is that in the final outcome, the last two classes get stuck together like so:

class="card-wrapper product-card-wrapper underline-links-hovernon-interactive"

Any thoughts on how to fix this?

[tim · Accepted solution]

https://shopify.dev/api/liquid/basics/whitespace -- just remove dashes:

{% if card_product.tags contains 'non-interactive' %}

[tim]

---

@blessing2 wrote:

 add a space before {%- if to prevent the classes from merging

 This is wrong -- adding a dash will eat up all whitespace to the closest non-space character.

[btuttle]

Thank you @tim !! Worked like a charm. Hoping this will be a good reference for others, too.