Shopify Debut Theme - 在精选系列主页上显示最大变体价格答案

【问题标题】：Shopify Debut Theme - Show max variant price on featured collection homepageShopify Debut Theme - 在精选系列主页上显示最大变体价格
【发布时间】：2021-01-17 12:25:54
【问题描述】：

默认情况下，Debut 主题显示最低的变体价格。我想在主页和系列页面上显示系列特色产品的最大变体价格。我可以通过编辑 product-price.liquid 代码在单个产品页面上更改此设置，但在收集网格上更改它没有任何运气。网址是https://anaholagranola.com/

我为此更改了一行代码，但它只更改了产品页面

{%- assign price = product.price_max -%}

【问题讨论】：

产品缩略图的代码在您的主题中是什么样的？可能某处引用了product.price 或product.price_min，您可以将其更改为product.price_max
@DaveB 这是整个 product-price.liquid 代码，我读过的所有内容都表明这个 sn-p 控制整个网站的产品价格，但我似乎无法让它在其他任何地方进行更改比单个产品页面。 codepile.net/raw/aVPo786X.liq
@DaveB 这里是featured-product.liquid 代码codepile.net/raw/r0emlM0N.js
嗯。奇怪的是，第一个 sn-p 似乎只引用 variant.price，而不是 product 对象上的任何价格字段。
是的，就是我改成 {%-assign price = product.price_max -%}

标签： shopify liquid

【解决方案1】：

主题似乎是根据传递到主题product-pricesn-p 的单个变体来显示价格。更新内容以显示产品的最高价格将需要更多编码。

以下是您如何做到这一点的两个想法：

从变体列表中选择价格最高的变体，并将其用作featured-product 代码中的current_variant。

这可能如下所示：

查找：

 {%- assign current_variant = product.selected_or_first_available_variant -%}

替换为： {%- 分配 sorted_variant_list = product.variants |排序：'价格' |逆转 -％} {%- 分配 current_variant = sorted_variant_list.first -%}

此代码将按价格对变体进行排序（默认为升序）然后反转顺序（因此它们现在应该按降序排列）然后从该列表中选择第一个变体，这应该会为您提供价格最高的变体这将被输入到product-price sn-p。

编写一个更好的价格显示 sn-p，它采用产品，而不是变体

在主题的 snippets 文件夹中创建一个新文件，并为其命名。

使用现有的product-price 文件作为模板，我们可能会得到这样的结果：

{%- assign money_price = price | money -%}

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
  </div>
</dl>

我通过简单地从定价 sn-p 中删除 variant 部分来创建上述内容。要使用这个修改后的 sn-p，您需要传入 price、compare_at_price 和 available 值。（将“product-price-revised”更改为您创建的 sn-p 文件）

{% include 'product-price-revised', price: product.price_max, compare_at_price: product.compare_at_price_max, available: product.available %}

【讨论】：

【解决方案2】：

首次亮相主题片段 -> product-card-grid.liquid

替换：

{% include 'product-price', variant: product.selected_or_first_available_variant %}

与：

{% include 'product-price', variant: product %}

然后在片段中 -> product-price.liquid

替换：

{%- assign price = variant.price -%}

与：

{%- assign price = variant.price_max -%}

我在 Debut 主题上对其工作进行了测试。你也可以试试这个。

【讨论】：