Commerce custom field output

Question

I have a custom field that allows customers to order a sample from a list of all products. It also allows a custom value to be entered for a custom color. I conditionally show/hide the fields with javascript and all the options are available on one product type. This works great except for one thing. On the admin emails it shows every option even if nothing was filled out. I have the labels set to only show if there is a value but they still output.

Here is the product type code:

    <select name="purchasableId">
        <option>Please Select Sample Type</option>
        {% for purchasable in product.variants %}
        <option {% if purchasable.stock <= 0 and purchasable.hasUnlimitedStock == false %}disabled {% endif %}
                value="{{ purchasable.id }}">{{ purchasable.description }} {{ purchasable.price|commerceCurrency(cart.currency) }}</option>
        {% endfor %}
    </select>

    {# pattern #}
    <select name="options[pattern3a]">
      <option value="">Select Wallpaper Sample 1</option>
      {% for product in craft.products.type('wallpaper').all() %}
      <option value="Sample - {{ product.title }}">{{ product.title }} </option>
      {% endfor %} 
    </select>
   <select name="options[pattern3b]">
      <option value="">Select Wallpaper Sample 1</option>
      {% for product in craft.products.type('wallpaper').all() %}
      <option value="Sample - {{ product.title }}">{{ product.title }} </option>
      {% endfor %} 
    </select>

    {# custom color #}
    <p><strong>Enter Your Custom Color Options</strong></p>
    <input type="text" name="options[customColor3a]" placeholder="Custom Color 1" value="">

And this is what I use on the admin emails:

{% for item in order.lineItems %}
{% if item.purchasable.product.type.hasVariants %}
...
<strong>{{ item.description }}</strong>  
{% if item.options.pattern | length %}
    {{ item.options.pattern }} | 
{% endif %}

{% if item.options.customColor3a is defined %} |
    Custom Color 1: {{ item.options.customColor3a }} 
{% endif %}
{% if item.options.customColor3b is defined %} |
    Custom Color 2: {{ item.options.customColor3b }} 
{% endif %}
...         

And finally, on the emails it looks like this:

Sample 1 - Product Name, Custom Color 1: Green | Custom Color 2:

So I basically just want to hide the labels if nothing was selected. In the case above just not output "Custom Color 2". Any help would be appreciated!

Answer 1

Your customColor3a and customColor3b variables will always be defined so you need to check if empty.

{% if item.options.customColor3a is defined and item.options.customColor3a is not empty %} |
    Custom Color 1: {{ item.options.customColor3a }} 
{% endif %}
{% if item.options.customColor3b is defined and item.options.customColor3b is not empty%} |
    Custom Color 2: {{ item.options.customColor3b }} 
{% endif %}