如何在产品概览中仅显示可用的产品变体价格

Question

我想显示 available/instock 产品变体的最低价格，而不是“从”+ 所有产品变体的最低价格，即使它们没有库存。我正在使用 Prestige 主题，关于如何实现这一目标的任何提示？

如果我是对的，我在 product-item.liquid 中发现了以下代码部分，它显示了价格并在 flickity 轮播和产品概览页面中呈现：

<div class="ProductItem__PriceList {% if show_price_on_hover %}ProductItem__PriceList--showOnHover{% endif %} Heading">
        {%- if product.compare_at_price > product.price -%}
          <span class="ProductItem__Price Price Price--highlight Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
          <span class="ProductItem__Price Price Price--compareAt Text--subdued">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
        {%- elsif product.price_varies -%}
          {%- capture formatted_min_price -%}{{ product.price_min | money_without_trailing_zeros }}{%- endcapture -%}
          {%- capture formatted_max_price -%}{{ product.price_max | money_without_trailing_zeros }}{%- endcapture -%}
          <span class="ProductItem__Price Price Text--subdued">{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}</span>
        {%- else -%}
          <span class="ProductItem__Price Price Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
        {%- endif -%}
      </div>

      {%- if product.selected_or_first_available_variant.unit_price_measurement -%}
        <div class="ProductItem__UnitPriceMeasurement">
          <div class="UnitPriceMeasurement Heading Text--subdued">
            <span class="UnitPriceMeasurement__Price">{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}</span>
            <span class="UnitPriceMeasurement__Separator">/ </span>

            {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
              <span class="UnitPriceMeasurement__ReferenceValue">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
            {%- endif -%}

            <span class="UnitPriceMeasurement__ReferenceUnit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
          </div>
        </div>
      {%- endif -%}

我尝试使用 Shopify-Blog 中的以下代码 https://www.shopify.com/partners/blog/collection-page-price-range

{% if available %}
  {% if product.price_varies and template == 'collection' %}
    From {{ product.price_min | money }} to {{ product.price_max | money }} 
  {% else %}
    {{ money_price }}
  {% endif %}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

然而，此代码显示产品已售罄。

Answer 1

好的，我找到了答案，也许它对其他人也有帮助。遍历变体并检查变体是否可用并保存最低价格：

{% assign product_pricetocompare = 999999 %}
        {% for variant in product.variants %}
          {% if variant.available %}
            {% if variant.price < product_pricetocompare %}
              {% assign product_pricetocompare = variant.price %}
            {% endif %}
          {% endif %}
        {% endfor %}

Answer 2

如果将product_pricetocompare设置为第一个变体的值会更好。这将检查是否有变体。如果没有变体，你会看到999999，这是不好的。

示例：

{% for variant in product.variants %}
  {% if forloop.index == 1 %}
     {% assign product_pricetocompare = variant.price %}
  {% else %}
    {% if variant.available %}
      {% if variant.price < product_pricetocompare %}
        {% assign product_pricetocompare = variant.price %}
      {% endif %}
    {% endif %}
  {% endif %}
{% endfor %}

如何在产品概览中仅显示可用的产品变体价格

How to only display the available product variant prices in the products overview

shopify