Hide Sold Out Variant Price with liquid on Minimog Theme

[Ertersy]

My current problem is that I can add text to the end of any of the money_price and it shows up on the site but when I change the variant it gets hidden, even though there is no sign of another interaction with anything of the "f-price-item" class and yet it's replaced with just the plain price.

I'm a traditional web dev so this is hurting my brain quite a bit. Any help would be incredible!

Here's the relevant liquid page (product-prices.liquid):

{%- liquid
  assign selected_variant = product.selected_or_first_available_variant
  if use_variant
    assign target = selected_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999

  if is_product_card and settings.pcard_show_lowest_prices
    assign price = product.price
    assign compare_at_price = product.compare_at_price
  endif

  assign available = target.available | default: false
  assign money_price = price | money

  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
  endif

  if target == product and product.price_varies and settings.pcard_show_lowest_prices
    assign money_price = 'products.product.from_text_html' | t: price: money_price
  endif
-%}

<div
  class="
    f-price inline-flex items-center flex-wrap
    {%- if alignment %} f-price--{{ alignment }}{% endif -%}
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} f-price--sold-out {% endif -%}
    {%- if compare_at_price > price %} f-price--on-sale {% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} f-price--no-compare{% endif -%}
  "
>
  {%- if available -%}
    <div class="f-price__regular">
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
      <span class="f-price-item f-price-item--regular {{ price_text_size }}">
        {{ money_price }}
      </span>
    </div>
    <div class="f-price__sale">
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="f-price-item f-price-item--sale {{ price_text_size }} prod__price text-color-regular-price">
        {{ money_price }}
      </span>
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <s class="f-price-item f-price-item--regular prod__compare_price line-through text-color-secondary flex items-center">
          {% if settings.currency_code_enabled %}
            {{ compare_at_price | money_with_currency }}
          {% else %}
            {{ compare_at_price | money }}
          {% endif %}
        </s>
      {%- endunless -%}
    </div>
  {%- else -%}
    <div class="f-price__sold-out">
      <span class="f-price-item f-price-item--sold-out {{ price_text_size }} text-color-sold-out"
        >SOLD OUT
      </span>
    </div>
  {%- endif -%}
  <div class="f-price__unit-wrapper{% if selected_variant.unit_price_measurement == nil %} hidden{% endif %}">
    <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
    <div class="f-price__unit">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-unit-price-base-unit>
            {%- if selected_variant.unit_price_measurement -%}
              {%- if selected_variant.unit_price_measurement.reference_value != 1 -%}
                {{- selected_variant.unit_price_measurement.reference_value -}}
              {%- endif -%}
              {{ selected_variant.unit_price_measurement.reference_unit }}
            {%- endif -%}
          </span>
      {%- endcapture -%}
      <span data-unit-price>{{ selected_variant.unit_price | money }}</span>
      {{- unit_price_separator -}}
      {{- unit_price_base_unit -}}
    </div>
  </div>
  {% if show_sale_badge or show_soldout_badge %}
    <div class="f-price__badges">
      {% if show_sale_badge %}
        {% liquid
          assign save_amount = 0
          if compare_at_price > price
            assign save_amount = compare_at_price | minus: price
          endif
          assign discount = ''
          if sale_badge_type == 'percentage'
            assign discount = save_amount | times: 100 | divided_by: compare_at_price | append: '%'
          elsif sale_badge_type == 'fixed_amount'
            assign discount =
            if settings.currency_code_enabled
              assign discount = save_amount | money_with_currency
            else
              assign discount = save_amount | money
            endif
          endif
        %}
        <div
          class="f-price__badge-sale{% if show_sale_badge%} sf-badge-sale--{{ sale_badge_type }}{% endif %}"
          data-type="{{ sale_badge_type }}"
        >
          <span class="f-badge f-badge--sale py-0.5 px-2 font-medium rounded-xl prod__tag prod__tag-saving prod__tag-discounted">
            {% unless sale_badge_type == 'text' %}
              {% render 'new-locale', key: 'products.product.save_html', param: '{{ amount }}', value: discount %}
            {% else %}
              {% render 'new-locale', key: 'products.product.sale_text' %}
            {% endunless %}
          </span>
        </div>
      {% endif %}
      {% if show_soldout_badge %}
        <div class="f-price__badge-sold-out">
          <span class="f-badge f-badge--soldout">{{ 'products.product.sold_out' | t }}</span>
        </div>
      {% endif %}
    </div>
  {% endif %}
</div>

Here's what happens:
1. I change the script so I can see if I'm changing the right price:

2. I open the product page and it shows the message:

3. I change the variant to something (sold out or not):

4. The changes to the price disappear...

Any response even a hint would be absolutely amazing!
I just want to change it to "SOLD OUT" instead of a price when the variant is sold out.

[nvchien · Accepted solution]

Hi @Ertersy,

Since the price text is part of the variant selector, I believe we will have some JavaScript functions to control how that text is displayed.

Could you please share your store URL along with the storefront password so that we can check and assist you if possible?

Thanks,

[Ertersy]

Ah ok that makes sense!
I've just fixed it! Thank you so much for pointing me in the right direction, just edited variant-picker.js 🙂

[nvchien]

Ok @Ertersy , sounds good.

I'm also typing. It seems you will need to update the onVariantChange() function in variant-picker.js.

Have a nice day!