Hide block based on multiple comma separated values when compared to customer tags

Store Design
1

Hi All,

I recently created the following to show/hide a block depending on whether a customer has the tag associated with a text field in the block settings (only visible in the editor).

{% unless customer.tags contains block.settings.customer-tag or block.settings.customer-tag == blank %}
    .section-{{ section.id }} .gallery__item-{{ forloop.index }} {
  display: none !important;
    }
   {% endunless %}  

----

           {
          "type": "text",
          "id": "customer-tag",
          "info": "Leave blank for public access",        
          "label": "Customer Tag"
        },

It works really well, however, I now need to add multiple access tags to one block, and I’m running into issues. Whenever I add more “or” statements, things break. I have tried if/else but they also break. My thinking at the moment is to use the “textarea” type and comma separate values which can then be put into an array and compared against customer tags. However, I cannot seem to work out how to write the liquid for this.

Is anyone able to help me take a list of comma separated values (as tags) and compare them against the customer tags?

Thanks.

2

Learn about boolean “truthy” and “falsy” logic in liquid:

https://shopify.dev/api/liquid/basics#truthy-and-falsy

Order of operations when combining booleans:

https://shopify.dev/api/liquid/basics#order-of-operations

And note the contains operator is case sensitive and iffy when working over an array.

https://shopify.dev/api/liquid/basics#contains

I.e.

{% if product.tags contains 'healing' %}
  This potion contains restorative properties.
{% endif %}

outputs: “This potion contains restorative properties”.

vs

{% if product.tags contains 'Healing' %}
  This potion contains restorative properties.
{% endif %}

which outputs nothing

To expand logic for different tag situations without using ifs or more “OR” booleans use a case/when construct to assign flags to then use in other logic.

https://shopify.dev/api/liquid/tags#case

{% assign tags = customer.tags %}
{% for tag in tags %}
 {% assign display_section = false %}
 {% assign normalized_tag = tag | downcase %}
 {% case normalized_tag %}
   {% when first_value %}
     {% assign display = true %}
   {% when second_value %}
     second_expression
   {% else %}
     third_expression
 {% endcase %}
{% endfor %}
3

@PaulNewton thanks for this. Though I’m a little confused on how this works with comma separated values from a textarea field? Does this just look at everything and compare to the tags?

4

Hi @RayvoxLtd ,

Please change all code:

{% unless block.settings.customer-tag == blank %}
  {% assign array_tag = block.settings.customer-tag-1 | split: ',' %}
  {% if array_tag.size > 0 %}
    {% for t in array_tag %}
      {% assign tag = t | strip %}
      {% unless customer.tags contains tag %}
      .section-{{ section.id }} .gallery__item-{{ forloop.index }} {
        display: none !important;
      }
      {% endunless  %} 
    {% endfor %}
  {% endif %}
{% endunless  %}

Then you enter ‘Customer Tag’ with the following structure, it will work fine:

tag 1, tag 2, tag 3,...

Hope it helps!

5

@LitCommerce thanks for this. Unfortunately, I can’t seem to get it to work. It just displays all blocks, regardless of what text is entered in the text area for the tag assignment.

6

Hi @RayvoxLtd ,

Sorry for the mistake, please change the code:

{% unless block.settings.customer-tag == blank %}
  {% assign array_tag = block.settings.customer-tag | split: ',' %}
  {% if array_tag.size > 0 %}
    {% for t in array_tag %}
      {% assign tag = t | strip %}
      {% unless customer.tags contains tag %}
      .section-{{ section.id }} .gallery__item-{{ forloop.index }} {
        display: none !important;
      }
      {% endunless  %} 
    {% endfor %}
  {% endif %}
{% endunless  %}