re-write a piece of code that was generated with for loop

Solved
Valentinlako
Tourist
4 1 0

Hello community,

We wanted to add a "best seller" badge to a specific product variant. We did it, we know it works static, but I can't move my head around the for loops.

So, shopify creates the front-end variants using the following piece of code:

{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}

After the for is ended, we want to take ONE input (if input.value= 18 x 24 -> rewrite label WITH our div inside)

We want to add a div within the <label>, in order to attach the "best seller" text right into it

The result should be the following:  Screenshot 2021-10-19 210202.png

We don't want to add another variant, just take the one 'liquid for' generated and rewrite the label inside it.

Or, more simple than that, if the label value = 18 x 24 -> rewrite the label with our div inside

We are 100% this should be very easy to accomplish, but we are beginners in Liquid. I hope I explained very detailed and I hope you understood
Thanks in advance.

Accepted Solution (1)

Accepted Solutions
Valentinlako
Tourist
4 1 0

This is an accepted solution.

Hey guys. I did it.


I am pasting it here in case anyone wants to use it:

{%- for option in product.options_with_values -%}
                      <fieldset class="js product-form__input">
                        <legend class="form__label">{{ option.name }}</legend>
                        {%- for value in option.values -%}
                          <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                name="{{ option.name }}"
                                value="{{ value | escape }}"
                                form="product-form-{{ section.id }}"
                                 {% if option.selected_value == value %}checked{% endif %}
                                 >
                        {% if value == '18" x 24"' %}
                        <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
        <div class="best_seller" style="">
my div with best seller <p> and <img> for the arrow
</div>
                            {{ value }}
                          </label>
                        {% else %}
                          <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                            {{ value }}
                          </label>
                        {% endif %}
                        {%- endfor -%}
                      </fieldset>
                  {%- endfor -%}


Basically, within the for I added an {% if the value is ="mybestseller" %} add the div ELSE just show value. Very simple

View solution in original post

Reply 1 (1)
Valentinlako
Tourist
4 1 0

This is an accepted solution.

Hey guys. I did it.


I am pasting it here in case anyone wants to use it:

{%- for option in product.options_with_values -%}
                      <fieldset class="js product-form__input">
                        <legend class="form__label">{{ option.name }}</legend>
                        {%- for value in option.values -%}
                          <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                name="{{ option.name }}"
                                value="{{ value | escape }}"
                                form="product-form-{{ section.id }}"
                                 {% if option.selected_value == value %}checked{% endif %}
                                 >
                        {% if value == '18" x 24"' %}
                        <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
        <div class="best_seller" style="">
my div with best seller <p> and <img> for the arrow
</div>
                            {{ value }}
                          </label>
                        {% else %}
                          <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                            {{ value }}
                          </label>
                        {% endif %}
                        {%- endfor -%}
                      </fieldset>
                  {%- endfor -%}


Basically, within the for I added an {% if the value is ="mybestseller" %} add the div ELSE just show value. Very simple

View solution in original post